qns: add JavaScript self-check exercises

Add manifest-ordered exercises across all 193 questions so learners can reinforce each answer with targeted prediction, classification, and explanation tasks.

Keep definitions source-backed with English locale fallback, and document the adaptive concept-based authoring rules used to avoid filler.

Author: yangshun

AGENTS.md

@@ -103,6 +103,8 @@ questions/<slug>/
   en-US.mdx
   <locale>.mdx (localized content, when available)
   en-US.langnostic.json (generated translation state, when available)
+  exercises/index.json (when exercises are present)
+  exercises/<exercise-id>/en-US.mdx
 ```
 
 - Treat `en-US.mdx` as the source locale.
@@ -114,6 +116,14 @@ questions/<slug>/
 - Do not treat `published: true` as permission to leave incomplete or placeholder content.
 - Do not edit generated question content in `README.md` directly. Edit the source question and regenerate the README.
 
+### Exercises
+
+- Keep exercises outside the answer MDX. Store each definition in `exercises/<exercise-id>/en-US.mdx` and list all IDs once, in learner order, in `exercises/index.json`. Do not add `<Exercise>` markers or an exercises heading to localized answer articles; GreatFrontEnd renders the manifest after the answer.
+- Map the important, transferable concepts before choosing a count. Start with one exercise per concept and add a second only when it uses a materially different scenario and reasoning task, provides evidence the first cannot, and keeps the complete sequence within 1–3 exercises.
+- Use `single-select` for one deterministic answer, `multi-select` for several independently evaluable claims with at least two correct answers, and `self-review` for bounded explanation, comparison, or tradeoff reasoning. Order the sequence from foundational understanding to application or failure mode, with self-review last.
+- Give every exercise a stable kebab-case ID and one primary learning objective. Keep prompts context-complete and prefer new traces, consequences, or implementation decisions over recall of nearby wording.
+- Every exercise requires an English definition. Localized definitions are optional and fall back to English; do not create translations unless they are explicitly in scope.
+
 ### Answer structure
 
 Every `en-US.mdx` answer should use this outer structure:

questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/exercises/classify-arrow-function-differences/en-US.mdx

@@ -0,0 +1,37 @@
+---
+type: multi-select
+---
+
+Which statements distinguish arrow functions from ordinary functions? Select all that apply.
+
+## Options
+
+### lexical-this (correct)
+
+An arrow resolves `this` from its enclosing lexical scope.
+
+> Arrows do not create their own `this` binding based on how they are invoked.
+
+### direct-object-method
+
+An arrow assigned directly as an object property receives that object as `this` when called as a method.
+
+> The property-call receiver does not bind an arrow; it continues to use `this` from the surrounding scope where it was created.
+
+### lexical-arguments (correct)
+
+An arrow has no own `arguments` object and resolves `arguments` from an enclosing non-arrow function when available.
+
+> Ordinary functions create their own `arguments` binding, while arrows capture the surrounding one.
+
+### constructor-with-prototype
+
+An arrow can be called with `new` and provides a `prototype` for its instances.
+
+> Arrows are not constructors, calling one with `new` throws `TypeError`, and they do not have a `prototype` property.
+
+### implicit-expression-return (correct)
+
+An arrow with an expression body can return that expression without a `return` statement.
+
+> The concise body form provides an implicit return; ordinary function bodies require an explicit `return` for the same value.

questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/exercises/index.json

@@ -0,0 +1,3 @@
+{
+  "ids": ["trace-arrow-this-capture", "classify-arrow-function-differences"]
+}

questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/exercises/trace-arrow-this-capture/en-US.mdx

@@ -0,0 +1,45 @@
+---
+type: single-select
+---
+
+What does this code log?
+
+```js
+const counter = {
+  value: 1,
+  makeIncrementer() {
+    return () => ++this.value;
+  },
+};
+
+const increment = counter.makeIncrementer();
+const other = { value: 10 };
+
+console.log(increment.call(other), counter.value, other.value);
+```
+
+## Options
+
+### two-two-ten (correct)
+
+`2 2 10`
+
+> The arrow captures `this` from the `counter.makeIncrementer()` call, and `call(other)` cannot replace that lexical binding.
+
+### eleven-one-eleven
+
+`11 1 11`
+
+> That would require `call(other)` to rebind the arrow's `this`, but arrows do not receive `this` from their invocation form.
+
+### two-one-ten
+
+`2 1 10`
+
+> Incrementing `this.value` mutates the captured `counter` object, so its value becomes `2`.
+
+### type-error
+
+It throws `TypeError` because arrow functions cannot be used with `call`.
+
+> An arrow can be invoked through `call`; the supplied receiver is simply ignored for its lexical `this` resolution.

questions/describe-event-bubbling/exercises/classify-bubbling-controls/en-US.mdx

@@ -0,0 +1,31 @@
+---
+type: multi-select
+---
+
+Which statements about a bubbling click event are correct? Select all that apply.
+
+## Options
+
+### target-stays-origin (correct)
+
+`event.target` continues to identify the deepest element where the event originated as ancestor listeners run.
+
+> `target` describes the origin of the dispatch, not the listener currently handling it.
+
+### current-target-changes (correct)
+
+`event.currentTarget` identifies the element whose listener is currently executing.
+
+> Each listener observes its own registered element through `currentTarget`.
+
+### prevent-default-stops-bubbling
+
+`event.preventDefault()` prevents the event from reaching ancestor listeners.
+
+> `preventDefault()` cancels a default browser action; `stopPropagation()` controls propagation.
+
+### stop-propagation-blocks-ancestors (correct)
+
+Calling `event.stopPropagation()` at the target prevents later ancestor listeners on the event path from running.
+
+> Stopping propagation prevents the event from continuing along the remaining propagation path.

questions/describe-event-bubbling/exercises/index.json

@@ -0,0 +1,3 @@
+{
+  "ids": ["trace-bubbling-listener-order", "classify-bubbling-controls"]
+}

questions/describe-event-bubbling/exercises/trace-bubbling-listener-order/en-US.mdx

@@ -0,0 +1,40 @@
+---
+type: single-select
+---
+
+A user clicks the `button`. What does this code log?
+
+```js
+const outer = document.querySelector('#outer');
+const button = document.querySelector('button');
+
+outer.addEventListener('click', () => console.log('outer'));
+button.addEventListener('click', () => console.log('button'));
+document.body.addEventListener('click', () => console.log('body'));
+```
+
+## Options
+
+### button-outer-body (correct)
+
+`button`, then `outer`, then `body`
+
+> The event reaches its target and then bubbles through ancestors from the nearest ancestor outward.
+
+### body-outer-button
+
+`body`, then `outer`, then `button`
+
+> That is ancestor-to-target order; these listeners use the default bubbling phase rather than capture.
+
+### button-only
+
+`button` only
+
+> A click bubbles by default, so ancestor bubble listeners also receive it unless propagation is stopped.
+
+### outer-body-button
+
+`outer`, then `body`, then `button`
+
+> The target listener runs before ancestor listeners during the bubbling phase.

questions/describe-event-capturing/exercises/index.json

@@ -0,0 +1,3 @@
+{
+  "ids": ["trace-capture-and-bubble-order"]
+}

questions/describe-event-capturing/exercises/trace-capture-and-bubble-order/en-US.mdx

@@ -0,0 +1,39 @@
+---
+type: single-select
+---
+
+A `button` is inside a `section`. What is logged when the button is clicked?
+
+```js
+section.addEventListener('click', () => console.log('section bubble'));
+section.addEventListener('click', () => console.log('section capture'), {
+  capture: true,
+});
+button.addEventListener('click', () => console.log('button'));
+```
+
+## Options
+
+### capture-button-bubble (correct)
+
+`section capture`, `button`, `section bubble`
+
+> Capture listeners run on the way toward the target, followed by target handling and then ancestor bubble listeners.
+
+### button-capture-bubble
+
+`button`, `section capture`, `section bubble`
+
+> The section capture listener runs before the event reaches the target button.
+
+### bubble-button-capture
+
+`section bubble`, `button`, `section capture`
+
+> A bubble listener cannot run before target handling, and capture precedes both.
+
+### capture-bubble-button
+
+`section capture`, `section bubble`, `button`
+
+> After capture reaches the target, the target listener runs before bubbling returns to the section.

questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/exercises/choose-browser-storage-scope/en-US.mdx

@@ -0,0 +1,31 @@
+---
+type: single-select
+---
+
+A checkout draft should survive reloads in the current tab, remain isolated from another tab on the same origin, and disappear when the tab closes. Which storage mechanism best matches those requirements?
+
+## Options
+
+### session-storage (correct)
+
+`sessionStorage`
+
+> `sessionStorage` is scoped to an origin and a page session, survives reloads, and is normally cleared when that tab closes.
+
+### local-storage
+
+`localStorage`
+
+> `localStorage` persists until cleared and is shared with other same-origin tabs, so it violates both isolation and lifetime requirements.
+
+### persistent-cookie
+
+A persistent cookie
+
+> A persistent cookie can outlive the tab and is sent with matching requests, neither of which is needed here.
+
+### session-cookie
+
+A session cookie
+
+> A session cookie is browser-session scoped rather than reliably isolated to one tab.