@mathscan/math-exercise-engine 1.1.17 → 1.2.1

package/dist/index.mjs

@@ -392,13 +392,9 @@ const MATCHER = createToken({
   name: "MATCHER",
   pattern: /MATCHER/
 });
-const TOP_ROW = createToken({
-  name: "TOP_ROW",
-  pattern: /TOP_ROW/
-});
-const BOTTOM_ROW = createToken({
-  name: "BOTTOM_ROW",
-  pattern: /BOTTOM_ROW/
+const GROUP = createToken({
+  name: "GROUP",
+  pattern: /GROUP/
 });
 const ITEM = createToken({
   name: "ITEM",
@@ -554,8 +550,7 @@ const allTokens = [
   ARROW,
   TABLE,
   ROW,
-  TOP_ROW,
-  BOTTOM_ROW,
+  GROUP,
   CELL,
   COUNTER,
   CLOCK,
@@ -1063,39 +1058,19 @@ class MathExerciseParser extends CstParser {
       this.MANY3(() => {
         this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
       });
-      this.SUBRULE(this.pairMatcherTopSection);
-      this.SUBRULE(this.pairMatcherBottomSection);
+      this.SUBRULE(this.pairMatcherGroupSection);
+      this.SUBRULE2(this.pairMatcherGroupSection);
       this.SUBRULE(this.matcherAnswers);
       this.CONSUME(RBrace);
       this.MANY4(() => {
         this.OR4([{ ALT: () => this.CONSUME4(Newline) }, { ALT: () => this.CONSUME4(Space) }]);
       });
     });
-    this.pairMatcherTopSection = this.RULE("pairMatcherTopSection", () => {
-      this.MANY(() => {
-        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
-      });
-      this.CONSUME(TOP_ROW);
-      this.MANY2(() => {
-        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
-      });
-      this.CONSUME(LBrace);
-      this.MANY3(() => {
-        this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
-      });
-      this.AT_LEAST_ONE(() => {
-        this.SUBRULE(this.matcherItem);
-      });
-      this.CONSUME(RBrace);
-      this.MANY4(() => {
-        this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
-      });
-    });
-    this.pairMatcherBottomSection = this.RULE("pairMatcherBottomSection", () => {
+    this.pairMatcherGroupSection = this.RULE("pairMatcherGroupSection", () => {
       this.MANY(() => {
         this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
       });
-      this.CONSUME(BOTTOM_ROW);
+      this.CONSUME(GROUP);
       this.MANY2(() => {
         this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
       });
@@ -2588,20 +2563,24 @@ function isMatcherBlock(value) {
 const PairMatcherBlockSchema = z.object({
   type: z.literal(AST_TYPES.PAIR_MATCHER_BLOCK),
   name: z.string().min(1),
-  /** Items in the top row — at least one required */
-  topItems: z.array(MatcherItemSchema).min(1),
-  /** Items in the bottom row — at least one required */
-  bottomItems: z.array(MatcherItemSchema).min(1),
+  /** Row layout (top/bottom, default) or column layout (left/right). */
+  layout: z.enum(["rows", "columns"]).optional(),
+  /** Exactly two groups, in declaration order — neither more nor fewer. */
+  groups: z.tuple([
+    z.array(MatcherItemSchema).min(1),
+    z.array(MatcherItemSchema).min(1)
+  ]),
   /**
-   * Each answer pair is [topId, bottomId].
+   * Each answer pair is [groups[0] id, groups[1] id].
    * At least one pair is required.
    */
   answers: z.array(z.tuple([z.string().min(1), z.string().min(1)])).min(1)
 }).superRefine((data, ctx) => {
+  const [groupAItems, groupBItems] = data.groups;
   const idRegistry = /* @__PURE__ */ new Map();
   const sections = [
-    { key: "topItems", items: data.topItems },
-    { key: "bottomItems", items: data.bottomItems }
+    { key: 0, items: groupAItems },
+    { key: 1, items: groupBItems }
   ];
   for (const { key: key2, items } of sections) {
     for (let i = 0; i < items.length; i++) {
@@ -2611,59 +2590,59 @@ const PairMatcherBlockSchema = z.object({
         const isCrossSection = existing.section !== key2;
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
-          message: isCrossSection ? `itemId "${itemId}" appears in both TOP and BOTTOM — ids must be globally unique` : `Duplicate itemId "${itemId}" in ${key2 === "topItems" ? "TOP" : "BOTTOM"} section`,
-          path: [key2, i, "itemId"]
+          message: isCrossSection ? `itemId "${itemId}" appears in both groups — ids must be globally unique` : `Duplicate itemId "${itemId}" in group ${key2}`,
+          path: ["groups", key2, i, "itemId"]
         });
       } else {
         idRegistry.set(itemId, { section: key2, index: i });
       }
     }
   }
-  const topIds = new Set(data.topItems.map((it) => it.itemId));
-  const bottomIds = new Set(data.bottomItems.map((it) => it.itemId));
-  const usedTopIds = /* @__PURE__ */ new Set();
-  const usedBottomIds = /* @__PURE__ */ new Set();
-  data.answers.forEach(([topId, bottomId], i) => {
-    if (!topIds.has(topId)) {
+  const groupAIds = new Set(groupAItems.map((it) => it.itemId));
+  const groupBIds = new Set(groupBItems.map((it) => it.itemId));
+  const usedGroupAIds = /* @__PURE__ */ new Set();
+  const usedGroupBIds = /* @__PURE__ */ new Set();
+  data.answers.forEach(([aId, bId], i) => {
+    if (!groupAIds.has(aId)) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
-        message: `Answer pair [${topId}, ${bottomId}]: "${topId}" is not declared in TOP section`,
+        message: `Answer pair [${aId}, ${bId}]: "${aId}" is not declared in groups[0]`,
         path: ["answers", i, 0]
       });
     }
-    if (!bottomIds.has(bottomId)) {
+    if (!groupBIds.has(bId)) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
-        message: `Answer pair [${topId}, ${bottomId}]: "${bottomId}" is not declared in BOTTOM section`,
+        message: `Answer pair [${aId}, ${bId}]: "${bId}" is not declared in groups[1]`,
         path: ["answers", i, 1]
       });
     }
-    if (usedTopIds.has(topId)) {
+    if (usedGroupAIds.has(aId)) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
-        message: `topId "${topId}" appears in more than one answer pair`,
+        message: `id "${aId}" appears in more than one answer pair`,
         path: ["answers", i, 0]
       });
     } else {
-      usedTopIds.add(topId);
+      usedGroupAIds.add(aId);
     }
-    if (usedBottomIds.has(bottomId)) {
+    if (usedGroupBIds.has(bId)) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
-        message: `bottomId "${bottomId}" appears in more than one answer pair`,
+        message: `id "${bId}" appears in more than one answer pair`,
         path: ["answers", i, 1]
       });
     } else {
-      usedBottomIds.add(bottomId);
+      usedGroupBIds.add(bId);
     }
   });
 });
-function createPairMatcherBlock(name, topItems, bottomItems, answers) {
+function createPairMatcherBlock(name, groups, answers, layout) {
   return PairMatcherBlockSchema.parse({
     type: AST_TYPES.PAIR_MATCHER_BLOCK,
     name,
-    topItems,
-    bottomItems,
+    layout,
+    groups,
     answers
   });
 }
@@ -2850,7 +2829,7 @@ const ExerciseDocumentSchema = z.object({
     } else if (block.type === AST_TYPES.PAIR_MATCHER_BLOCK) {
       const pm = block;
       record(pm.name, ["lines", bi, "name"]);
-      [...pm.topItems, ...pm.bottomItems].forEach((item, ii) => {
+      pm.groups.flat().forEach((item, ii) => {
         visitInlines(item.inlines, ["lines", bi, "items", ii, "inlines"]);
       });
     } else if (block.type === AST_TYPES.RADIO_OPTIONS) {
@@ -3063,24 +3042,14 @@ class NaturalDSLVisitor extends BaseCstVisitor {
   pairMatcher(ctx) {
     const params = this.visit(ctx.parameterList);
     const name = params.name;
-    const topItems = this.visit(ctx.pairMatcherTopSection);
-    const bottomItems = this.visit(ctx.pairMatcherBottomSection);
+    const layout = params.layout;
+    const [firstGroup, secondGroup] = ctx.pairMatcherGroupSection;
+    const groupAItems = this.visit(firstGroup);
+    const groupBItems = this.visit(secondGroup);
     const rawAnswers = this.visit(ctx.matcherAnswers);
-    return createPairMatcherBlock(name, topItems, bottomItems, rawAnswers);
+    return createPairMatcherBlock(name, [groupAItems, groupBItems], rawAnswers, layout);
   }
-  pairMatcherTopSection(ctx) {
-    return this.visitMatcherItemList(ctx);
-  }
-  pairMatcherBottomSection(ctx) {
-    return this.visitMatcherItemList(ctx);
-  }
-  /**
-   * Maps `ctx.matcherItem` CST nodes to MatcherItem AST nodes.
-   * Shared by pairMatcherTopSection and pairMatcherBottomSection because their
-   * grammar rules are structurally identical — both are `matcherItem+` lists
-   * wrapped in a labelled section keyword.
-   */
-  visitMatcherItemList(ctx) {
+  pairMatcherGroupSection(ctx) {
     return ctx.matcherItem ? ctx.matcherItem.map((i) => this.visit(i)) : [];
   }
   // ═══════════════════════════════════════════════════════════════════════════
@@ -3872,8 +3841,12 @@ const MatcherWidgetJSONSchema = z.object({
 });
 const PairMatcherWidgetJSONSchema = z.object({
   type: z.literal(JSON_TYPES.PAIR_MATCHER),
-  topItems: z.array(MatcherItemContentSchema).min(1),
-  bottomItems: z.array(MatcherItemContentSchema).min(1)
+  /** Row layout (top/bottom, default) or column layout (left/right). */
+  layout: z.enum(["rows", "columns"]).optional(),
+  groups: z.tuple([
+    z.array(MatcherItemContentSchema).min(1),
+    z.array(MatcherItemContentSchema).min(1)
+  ])
 });
 const VisualFractionJSONSchema = z.object({
   type: z.literal(JSON_TYPES.VISUAL_FRACTION),
@@ -9833,7 +9806,7 @@ function collectAllInlines(blocks) {
       }
     } else if (block.type === AST_TYPES.PAIR_MATCHER_BLOCK) {
       const pm = block;
-      for (const item of [...pm.topItems, ...pm.bottomItems]) {
+      for (const item of pm.groups.flat()) {
         result.push(...item.inlines);
       }
     }
@@ -9940,10 +9913,14 @@ function buildMatcherWidget(matcher, idGenerator, inlineDragIds) {
   return result;
 }
 function buildPairMatcherWidget(pm, idGenerator, inlineDragIds) {
+  const [groupAItems, groupBItems] = pm.groups;
   return {
     type: JSON_TYPES.PAIR_MATCHER,
-    topItems: mapMatcherItemList(pm.topItems, idGenerator, inlineDragIds),
-    bottomItems: mapMatcherItemList(pm.bottomItems, idGenerator, inlineDragIds)
+    ...pm.layout !== void 0 && { layout: pm.layout },
+    groups: [
+      mapMatcherItemList(groupAItems, idGenerator, inlineDragIds),
+      mapMatcherItemList(groupBItems, idGenerator, inlineDragIds)
+    ]
   };
 }
 function transformVerticalOperation(vop, idGenerator) {
@@ -15449,13 +15426,18 @@ function applyDropToInput(targetId, item, onChange) {
 function isUndoDrop(event, dragId) {
   return event.active.id === dragId && !event.over;
 }
+const LockContext = createContext(false);
+const ExerciseLockProvider = ({ locked, children }) => /* @__PURE__ */ jsx(LockContext.Provider, { value: locked, children });
+const useExerciseLocked = () => useContext(LockContext);
 const PlacedInputChip = ({ widgetId, value, className = "", onRemove }) => {
   const { droppedSources } = useExerciseDnd();
+  const locked = useExerciseLocked();
   const sourceOptionId = droppedSources.get(widgetId);
   const dragId = `${widgetId}__chip`;
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: dragId,
-    data: { type: "placed-chip", widgetId, label: value, sourceOptionId }
+    data: { type: "placed-chip", widgetId, label: value, sourceOptionId },
+    disabled: locked
   });
   useDndMonitor({
     onDragEnd(event) {
@@ -15468,10 +15450,10 @@ const PlacedInputChip = ({ widgetId, value, className = "", onRemove }) => {
       ref: setNodeRef,
       className: `inline-input-chip ${className}${isDragging ? " dragging" : ""}`.trim(),
       onClick: (e) => {
-        if (e.detail !== 0) onRemove();
+        if (!locked && e.detail !== 0) onRemove();
       },
-      title: "Drag to move, or click to remove",
-      style: { touchAction: "none", cursor: "grab" },
+      title: locked ? void 0 : "Drag to move, or click to remove",
+      style: { touchAction: "none", cursor: locked ? "default" : "grab" },
       ...listeners,
       ...attributes,
       children: value
@@ -15491,6 +15473,7 @@ const InlineInput = ({
   onFocus
 }) => {
   const playSound = useSound();
+  const locked = useExerciseLocked();
   const handleChange = useCallback((newValue, fromDrop = false, sourceOptionId) => {
     onChange(widgetId, newValue, fromDrop, sourceOptionId);
   }, [onChange, widgetId]);
@@ -15506,6 +15489,7 @@ const InlineInput = ({
       id: widgetId,
       accepts: ["drag-option", "placed-chip"],
       onDrop: handleDrop,
+      disabled: locked,
       className: "inline-widget inline-input-droppable",
       children: isDropped && value !== "" ? (
         // Show as chip only when value came from drag-drop
@@ -15528,8 +15512,11 @@ const InlineInput = ({
             className: `inline-input${statusClass}`,
             value,
             onChange: (e) => handleChange(e.target.value, false),
-            onMouseDown: () => playSound("input-select"),
+            onMouseDown: () => {
+              if (!locked) playSound("input-select");
+            },
             onFocus: () => onFocus?.(widgetId),
+            readOnly: locked,
             maxLength: expectedLength,
             style: { width: dynamicWidth },
             placeholder
@@ -15546,6 +15533,7 @@ const SingleDragOption = ({
   className = ""
 }) => {
   const { usedOptionIds } = useExerciseDnd();
+  const locked = useExerciseLocked();
   const isUsed = usedOptionIds.has(optionId);
   return /* @__PURE__ */ jsx("div", { className: `drag-option-slot ${className}`.trim(), children: isUsed ? /* @__PURE__ */ jsx("div", { className: "drag-option-empty", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
     Draggable,
@@ -15553,12 +15541,16 @@ const SingleDragOption = ({
       id: optionId,
       type: "drag-option",
       data: { value, label: value },
+      disabled: locked,
       className: "drag-option-wrapper",
       children: /* @__PURE__ */ jsx(
         "button",
         {
           className: "drag-option",
-          onClick: () => onOptionClick?.(value),
+          onClick: () => {
+            if (!locked) onOptionClick?.(value);
+          },
+          "aria-disabled": locked ? "true" : void 0,
           children: value
         }
       )
@@ -15672,31 +15664,34 @@ const NumericKeypad = ({
   onChange
 }) => {
   const playSound = useSound();
+  const locked = useExerciseLocked();
   const handleDigit = (digit) => {
+    if (locked) return;
     playSound("keypad-press");
     onChange(value + digit);
   };
   const handleBackspace = () => {
+    if (locked) return;
     playSound("keypad-press");
     onChange(value.slice(0, -1));
   };
   return /* @__PURE__ */ jsxs("div", { className: `numeric-keypad ${includeOperators ? "numeric-keypad-with-operators" : ""}`, children: [
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("1"), children: "1" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("2"), children: "2" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("3"), children: "3" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("+"), children: "+" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("4"), children: "4" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("5"), children: "5" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("6"), children: "6" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("-"), children: "-" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("7"), children: "7" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("8"), children: "8" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("9"), children: "9" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("×"), children: "×" }),
-    includeDecimal ? /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-decimal", onClick: () => handleDigit(","), children: "," }) : /* @__PURE__ */ jsx("div", {}),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("0"), children: "0" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-backspace", onClick: handleBackspace, children: "⌫" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("÷"), children: "÷" })
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("1"), children: "1" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("2"), children: "2" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("3"), children: "3" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("+"), children: "+" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("4"), children: "4" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("5"), children: "5" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("6"), children: "6" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("-"), children: "-" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("7"), children: "7" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("8"), children: "8" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("9"), children: "9" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("×"), children: "×" }),
+    includeDecimal ? /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-decimal", onClick: () => handleDigit(","), children: "," }) : /* @__PURE__ */ jsx("div", {}),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("0"), children: "0" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-backspace", onClick: handleBackspace, children: "⌫" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("÷"), children: "÷" })
   ] });
 };
 const FractionInput = ({
@@ -15713,6 +15708,7 @@ const FractionInput = ({
   placeholder
 }) => {
   const playSound = useSound();
+  const locked = useExerciseLocked();
   const numKey = getFractionKey(widgetId, "num");
   const denKey = getFractionKey(widgetId, "den");
   const numValue = values[numKey] ?? "";
@@ -15733,6 +15729,7 @@ const FractionInput = ({
         id: subKey,
         accepts: ["drag-option", "placed-chip"],
         onDrop: handleDrop(subKey),
+        disabled: locked,
         className: "fraction-slot-droppable",
         children: isDroppedHere && currentValue !== "" ? /* @__PURE__ */ jsx(
           PlacedInputChip,
@@ -15750,8 +15747,11 @@ const FractionInput = ({
             className: `inline-input fraction-input${slotClass}`,
             value: currentValue,
             onChange: (e) => onChange(subKey, e.target.value, false),
-            onMouseDown: () => playSound("input-select"),
+            onMouseDown: () => {
+              if (!locked) playSound("input-select");
+            },
             onFocus: () => onFocus?.(subKey),
+            readOnly: locked,
             maxLength: placeholder ? Math.max(20, placeholder.length) : 4,
             size: placeholder ? placeholder.length : void 0,
             "aria-label": label,
@@ -15982,12 +15982,13 @@ function getEqualTrianglePartPath(index, divisions) {
 function getGridColumnCount(divisions) {
   return Math.ceil(Math.sqrt(divisions));
 }
-function getInteractiveProps(part, onPartClick) {
+function getInteractiveProps(part, onPartClick, locked = false) {
   if (!part.isInteractiveSlot) return {};
   return {
     onClick: () => onPartClick(part.index),
     role: "button",
     "aria-pressed": part.isSelected,
+    "aria-disabled": locked ? "true" : void 0,
     "aria-label": getPartAriaLabel(part),
     tabIndex: 0,
     onKeyDown: (event) => {
@@ -16007,6 +16008,7 @@ const BarShape = ({
   orientation,
   onPartClick
 }) => {
+  const locked = useExerciseLocked();
   const renderedParts = orientation === "vertical" ? [...parts].reverse() : parts;
   return /* @__PURE__ */ jsx(
     "div",
@@ -16018,7 +16020,7 @@ const BarShape = ({
         {
           className: part.className,
           style: part.style,
-          ...getInteractiveProps(part, onPartClick)
+          ...getInteractiveProps(part, onPartClick, locked)
         },
         part.index
       ))
@@ -16030,87 +16032,96 @@ const GridShape = ({
   parts,
   divisions,
   onPartClick
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: "visual-fraction-widget__parts visual-fraction-widget__parts--horizontal",
-    style: {
-      "--visual-fraction-divisions": divisions,
-      "--visual-fraction-grid-cols": getGridColumnCount(divisions),
-      // Safe integer division: zod schema enforces divisions = perfect square.
-      "--visual-fraction-grid-rows": divisions / getGridColumnCount(divisions)
-    },
-    children: parts.map((part) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: part.className,
-        style: part.style,
-        ...getInteractiveProps(part, onPartClick)
+}) => {
+  const locked = useExerciseLocked();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "visual-fraction-widget__parts visual-fraction-widget__parts--horizontal",
+      style: {
+        "--visual-fraction-divisions": divisions,
+        "--visual-fraction-grid-cols": getGridColumnCount(divisions),
+        // Safe integer division: zod schema enforces divisions = perfect square.
+        "--visual-fraction-grid-rows": divisions / getGridColumnCount(divisions)
       },
-      part.index
-    ))
-  }
-);
+      children: parts.map((part) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: part.className,
+          style: part.style,
+          ...getInteractiveProps(part, onPartClick, locked)
+        },
+        part.index
+      ))
+    }
+  );
+};
 GridShape.displayName = "GridShape";
 const CircleShape = ({
   parts,
   divisions,
   onPartClick
-}) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: "visual-fraction-widget__shape visual-fraction-widget__circle",
-    viewBox: "0 0 100 100",
-    children: parts.map((part) => {
-      const sectorProps = getCircleSectorProps(part.index, divisions);
-      const className = `${part.className} visual-fraction-widget__sector`;
-      const interactiveProps = getInteractiveProps(part, onPartClick);
-      return sectorProps.kind === "circle" ? /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className,
-          style: part.style,
-          cx: "50",
-          cy: "50",
-          r: "48",
-          ...interactiveProps
-        },
-        part.index
-      ) : /* @__PURE__ */ jsx(
-        "path",
-        {
-          className,
-          style: part.style,
-          d: sectorProps.d,
-          ...interactiveProps
-        },
-        part.index
-      );
-    })
-  }
-);
+}) => {
+  const locked = useExerciseLocked();
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "visual-fraction-widget__shape visual-fraction-widget__circle",
+      viewBox: "0 0 100 100",
+      children: parts.map((part) => {
+        const sectorProps = getCircleSectorProps(part.index, divisions);
+        const className = `${part.className} visual-fraction-widget__sector`;
+        const interactiveProps = getInteractiveProps(part, onPartClick, locked);
+        return sectorProps.kind === "circle" ? /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className,
+            style: part.style,
+            cx: "50",
+            cy: "50",
+            r: "48",
+            ...interactiveProps
+          },
+          part.index
+        ) : /* @__PURE__ */ jsx(
+          "path",
+          {
+            className,
+            style: part.style,
+            d: sectorProps.d,
+            ...interactiveProps
+          },
+          part.index
+        );
+      })
+    }
+  );
+};
 CircleShape.displayName = "CircleShape";
 const TriangleShape = ({
   parts,
   divisions,
   onPartClick
-}) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: "visual-fraction-widget__shape visual-fraction-widget__triangle",
-    viewBox: "0 0 100 100",
-    children: parts.map((part) => /* @__PURE__ */ jsx(
-      "path",
-      {
-        className: `${part.className} visual-fraction-widget__sector`,
-        style: part.style,
-        d: getEqualTrianglePartPath(part.index, divisions),
-        ...getInteractiveProps(part, onPartClick)
-      },
-      part.index
-    ))
-  }
-);
+}) => {
+  const locked = useExerciseLocked();
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "visual-fraction-widget__shape visual-fraction-widget__triangle",
+      viewBox: "0 0 100 100",
+      children: parts.map((part) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: `${part.className} visual-fraction-widget__sector`,
+          style: part.style,
+          d: getEqualTrianglePartPath(part.index, divisions),
+          ...getInteractiveProps(part, onPartClick, locked)
+        },
+        part.index
+      ))
+    }
+  );
+};
 TriangleShape.displayName = "TriangleShape";
 const ShapeBar = ({ parts, divisions, orientation, onPartClick }) => /* @__PURE__ */ jsx(BarShape, { parts, divisions, orientation, onPartClick });
 const ShapeCircle = ({ parts, divisions, onPartClick }) => /* @__PURE__ */ jsx(CircleShape, { parts, divisions, onPartClick });
@@ -16154,12 +16165,14 @@ const VisualFraction = ({
     onChange
   });
   const playSound = useSound();
+  const locked = useExerciseLocked();
   const handlePartClickWithSound = useCallback(
     (index) => {
+      if (locked) return;
       if (answer.length > 0 && index >= filledCount) playSound("fraction-shade");
       handlePartClick(index);
     },
-    [answer.length, filledCount, playSound, handlePartClick]
+    [locked, answer.length, filledCount, playSound, handlePartClick]
   );
   const parts = useMemo(
     () => Array.from({ length: divisions }, (_, i) => {
@@ -16234,6 +16247,7 @@ const GridSymmetry = ({
   validationStatus = null,
   onChange
 }) => {
+  const exerciseLocked = useExerciseLocked();
   const initialKeys = useMemo(() => new Set(widget.cells.map(gridCellKey)), [widget.cells]);
   const initialInteractiveCells = useMemo(
     () => widget.cells.filter(
@@ -16244,6 +16258,7 @@ const GridSymmetry = ({
   const selectedCells = value ?? initialInteractiveCells;
   const selectedKeys = useMemo(() => new Set(selectedCells.map(gridCellKey)), [selectedCells]);
   const toggleCell = (cell) => {
+    if (exerciseLocked) return;
     const key2 = gridCellKey(cell);
     if (initialKeys.has(key2)) return;
     const next = selectedKeys.has(key2) ? selectedCells.filter((candidate) => gridCellKey(candidate) !== key2) : [...selectedCells, cell];
@@ -16284,6 +16299,7 @@ const GridSymmetry = ({
             className,
             "aria-label": label,
             "aria-pressed": selected,
+            "aria-disabled": exerciseLocked ? "true" : void 0,
             onClick: () => toggleCell(cell)
           },
           key2
@@ -16323,6 +16339,7 @@ const RadioOptions = ({
   onChange
 }) => {
   const playSound = useSound();
+  const locked = useExerciseLocked();
   return /* @__PURE__ */ jsx("div", { className: "radio-options", children: options.map((option, idx) => {
     const isSelected = value === option;
     const statusClass = isSelected && validationStatus ? ` widget--${validationStatus}` : "";
@@ -16331,9 +16348,11 @@ const RadioOptions = ({
       {
         className: `radio-option${isSelected ? " selected" : ""}${statusClass}`,
         onClick: () => {
+          if (locked) return;
           playSound("radio-select");
           onChange(name, option);
         },
+        "aria-disabled": locked ? "true" : void 0,
         type: "button",
         children: option
       },
@@ -16345,7 +16364,10 @@ const Btn = ({
   label,
   extraClass = "keypad-btn-digit",
   onClick
-}) => /* @__PURE__ */ jsx("button", { className: `keypad-btn ${extraClass}`, onClick, children: /* @__PURE__ */ jsx("span", { children: label }) });
+}) => {
+  const locked = useExerciseLocked();
+  return /* @__PURE__ */ jsx("button", { className: `keypad-btn ${extraClass}`, disabled: locked, onClick, children: /* @__PURE__ */ jsx("span", { children: label }) });
+};
 const DiamondKeypad = ({ value, onChange }) => {
   const playSound = useSound();
   const append = (ch) => {
@@ -16432,8 +16454,10 @@ const MatcherWidget = ({
     () => defaultValue2 && defaultValue2.length > 0 ? assignmentsFromValue(defaultValue2, itemIds, groupCount) : initialAssignments(itemIds)
   );
   const playSound = useSound();
+  const locked = useExerciseLocked();
   const handleCardClick = useCallback(
     (itemId) => {
+      if (locked) return;
       playSound("matcher-select");
       setAssignments((prev) => {
         const current = prev[itemId] ?? null;
@@ -16441,7 +16465,7 @@ const MatcherWidget = ({
         return { ...prev, [itemId]: next };
       });
     },
-    [groupCount, playSound]
+    [groupCount, playSound, locked]
   );
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
@@ -16478,6 +16502,7 @@ const MatcherWidget = ({
               "--matcher-card-text-color": `var(--matcher-group-${colorIdx + 1}-text-color, ${textColors[colorIdx]})`
             } : void 0,
             onClick: () => handleCardClick(item.itemId),
+            "aria-disabled": locked ? "true" : void 0,
             "aria-pressed": isSelected,
             "aria-label": isSelected ? `Assigned to group ${colorIdx + 1}` : "Not assigned",
             children: item.content.map((layoutItem) => /* @__PURE__ */ jsx(
@@ -16690,7 +16715,10 @@ const PairMatcherWidget = ({
   widgets,
   shuffleItems = true
 }) => {
-  const { topItems, bottomItems } = widget;
+  const { groups, layout } = widget;
+  const [topItems, bottomItems] = groups;
+  const isColumns = layout === "columns";
+  const exerciseLocked = useExerciseLocked();
   const [shuffledTop] = useState(
     () => shuffleItems ? lodashExports.shuffle([...topItems]) : [...topItems]
   );
@@ -16734,8 +16762,9 @@ const PairMatcherWidget = ({
     }
     soundPrevRef.current = { count, pendingId, flashId };
   }, [state.pairs, state.pending, state.flashTopId, playSound]);
+  const interactionLocked = validationStatus !== null || exerciseLocked;
   const handleTopClick = useCallback((topId) => {
-    if (validationStatus) return;
+    if (interactionLocked) return;
     if (flashTimerRef.current) {
       clearTimeout(flashTimerRef.current);
       flashTimerRef.current = null;
@@ -16777,9 +16806,9 @@ const PairMatcherWidget = ({
         flashBottomId: null
       };
     });
-  }, [validationStatus]);
+  }, [interactionLocked]);
   const handleBottomClick = useCallback((bottomId) => {
-    if (validationStatus) return;
+    if (interactionLocked) return;
     if (flashTimerRef.current) {
       clearTimeout(flashTimerRef.current);
       flashTimerRef.current = null;
@@ -16822,9 +16851,13 @@ const PairMatcherWidget = ({
         flashBottomId: null
       };
     });
-  }, [validationStatus]);
+  }, [interactionLocked]);
   useEffect(() => {
-    if (validationStatus || state.flashTopId === null || state.flashBottomId === null) return;
+    if (state.flashTopId === null || state.flashBottomId === null) return;
+    if (interactionLocked) {
+      setState((current) => ({ ...current, flashTopId: null, flashBottomId: null }));
+      return;
+    }
     flashTimerRef.current = setTimeout(() => {
       flashTimerRef.current = null;
       setState((current) => {
@@ -16838,7 +16871,7 @@ const PairMatcherWidget = ({
         flashTimerRef.current = null;
       }
     };
-  }, [state.flashTopId, state.flashBottomId, validationStatus]);
+  }, [state.flashTopId, state.flashBottomId, interactionLocked]);
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   const isMounted = useRef(false);
@@ -16861,8 +16894,8 @@ const PairMatcherWidget = ({
     pairStatusByTopId
   });
   const cols = useMemo(
-    () => Math.max(topItems.length, bottomItems.length, 1),
-    [topItems.length, bottomItems.length]
+    () => isColumns ? null : Math.max(topItems.length, bottomItems.length, 1),
+    [isColumns, topItems.length, bottomItems.length]
   );
   const renderCard = (item, isTop) => {
     const isRtl = shouldItemsUseRTL(item.content);
@@ -16898,7 +16931,7 @@ const PairMatcherWidget = ({
           dir: isRtl ? "rtl" : void 0,
           onClick: () => isTop ? handleTopClick(item.itemId) : handleBottomClick(item.itemId),
           "aria-pressed": status !== "idle",
-          "aria-disabled": validationStatus ? "true" : void 0,
+          "aria-disabled": interactionLocked ? "true" : void 0,
           children: /* @__PURE__ */ jsx("span", { className: "pair-matcher-card-content", children: item.content.map((li) => renderPairMatcherItemContent(li, widgetsMap)) })
         }
       ),
@@ -16908,8 +16941,8 @@ const PairMatcherWidget = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `pair-matcher-widget${validationStatus ? ` pair-matcher-widget--${validationStatus}` : ""}`,
-      style: { "--pm-cols": cols },
+      className: `pair-matcher-widget${isColumns ? " pair-matcher-widget--columns" : ""}${validationStatus ? ` pair-matcher-widget--${validationStatus}` : ""}`,
+      style: cols === null ? {} : { "--pm-cols": cols },
       ref: containerRef,
       role: "group",
       "aria-label": "Pair matcher exercise",
@@ -17437,6 +17470,7 @@ const DraggableCursor = ({
   currentValue,
   validationStatus
 }) => {
+  const locked = useExerciseLocked();
   const [isDragging, setIsDragging] = useState(false);
   const isDraggingRef = useRef(false);
   const currentValueRef = useRef(currentValue);
@@ -17458,13 +17492,14 @@ const DraggableCursor = ({
     return snapTicks.length > 0 ? snapToNearest(raw, snapTicks) : cleanFloat(raw);
   }, [axisRowRef, min, max, snapTicks]);
   const handlePointerDown = useCallback((e) => {
+    if (locked) return;
     e.currentTarget.setPointerCapture(e.pointerId);
     e.stopPropagation();
     isDraggingRef.current = true;
     dragStartValueRef.current = currentValue;
     lastSoundValueRef.current = currentValue;
     setIsDragging(true);
-  }, [currentValue]);
+  }, [currentValue, locked]);
   const updateCursorValue = useCallback((clientX) => {
     const next = snap(clientX);
     if (!almostEqual(next, lastSoundValueRef.current)) {
@@ -17492,7 +17527,7 @@ const DraggableCursor = ({
     }
   }, [updateCursorValue, playSound]);
   const handleKeyDown = useCallback((e) => {
-    if (!snapTicks.length) return;
+    if (locked || !snapTicks.length) return;
     const sorted = [...snapTicks].sort((a, b) => a - b);
     const idx = sorted.findIndex((t) => t >= currentValue - 1e-9);
     const first = sorted[0] ?? currentValue;
@@ -17514,7 +17549,7 @@ const DraggableCursor = ({
       }
       onChange(cursor.id, String(next));
     }
-  }, [snapTicks, audibleTicks, currentValue, playSound, onChange, cursor.id]);
+  }, [locked, snapTicks, audibleTicks, currentValue, playSound, onChange, cursor.id]);
   const ballClass = [
     "number-line-cursor-ball",
     isDragging ? "number-line-cursor-ball--dragging" : "",
@@ -17563,6 +17598,7 @@ const DraggableCursor = ({
         "aria-valuemax": max,
         "aria-valuenow": currentValue,
         "aria-label": sliderAriaLabel,
+        "aria-disabled": locked ? "true" : void 0,
         tabIndex: 0
       }
     )
@@ -17603,9 +17639,11 @@ const CursorBalls = ({
   }) });
 };
 const PlacedChip = ({ widgetId, label, leftPercent, isLanding, onRemove }) => {
+  const locked = useExerciseLocked();
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: widgetId,
-    data: { type: "placed-chip", widgetId, label }
+    data: { type: "placed-chip", widgetId, label },
+    disabled: locked
   });
   return /* @__PURE__ */ jsx(
     "div",
@@ -17630,6 +17668,7 @@ const PlacedChip = ({ widgetId, label, leftPercent, isLanding, onRemove }) => {
             type: "button",
             className: "number-line-placed-chip-remove",
             "aria-label": "Remove",
+            disabled: locked,
             onClick: onRemove,
             children: "✕"
           }
@@ -17669,6 +17708,7 @@ const FreeDragAxis = ({
   cursorValidationStatuses,
   snapKey
 }) => {
+  const axisLocked = useExerciseLocked();
   const axisRef = useRef(null);
   const snapTicks = useMemo(
     () => getSnapTicks(majorTicks, minorTicks),
@@ -17724,7 +17764,7 @@ const FreeDragAxis = ({
       return changed ? next : prev;
     });
   }, [values]);
-  const { setNodeRef } = useDroppable({ id: axisDropId });
+  const { setNodeRef } = useDroppable({ id: axisDropId, disabled: axisLocked });
   const mergedRef = useCallback((node) => {
     axisRef.current = node;
     setNodeRef(node);
@@ -18038,6 +18078,7 @@ const CounterControls = ({
   onIncrement
 }) => {
   const playSound = useSound();
+  const locked = useExerciseLocked();
   return /* @__PURE__ */ jsxs("div", { className: "number-line-counter", "aria-label": counter.name ?? "Counter", children: [
     /* @__PURE__ */ jsxs("div", { className: "number-line-counter-controls", children: [
       /* @__PURE__ */ jsx(
@@ -18046,7 +18087,7 @@ const CounterControls = ({
           type: "button",
           className: "number-line-counter-btn",
           "aria-label": "Decrease",
-          disabled: count <= counter.min,
+          disabled: locked || count <= counter.min,
           onClick: () => {
             playSound("counter-step");
             onDecrement();
@@ -18061,7 +18102,7 @@ const CounterControls = ({
           type: "button",
           className: "number-line-counter-btn",
           "aria-label": "Increase",
-          disabled: count >= counter.max,
+          disabled: locked || count >= counter.max,
           onClick: () => {
             playSound("counter-step");
             onIncrement();
@@ -18645,6 +18686,7 @@ const ClockRenderer = ({
   validationStatus,
   onChange
 }) => {
+  const locked = useExerciseLocked();
   const format = item.format ?? "24h";
   const interactive = item.mode === "interactive";
   const snap = interactive && "snap" in item ? item.snap ?? 1 : 1;
@@ -18690,18 +18732,18 @@ const ClockRenderer = ({
     }
   }, [snap, hours, minutes, item.mode, item.name, onChange, playSound]);
   const onPointerDown = (hand) => (e) => {
-    if (!interactive) return;
+    if (!interactive || locked) return;
     e.preventDefault();
     e.target.setPointerCapture?.(e.pointerId);
     draggingRef.current = hand;
     updateFromPointer(e.clientX, e.clientY);
   };
   const onPointerMove = (e) => {
-    if (!interactive || !draggingRef.current) return;
+    if (!interactive || locked || !draggingRef.current) return;
     updateFromPointer(e.clientX, e.clientY);
   };
   const onPointerUp = (e) => {
-    if (!interactive) return;
+    if (!interactive || locked) return;
     e.target.releasePointerCapture?.(e.pointerId);
     draggingRef.current = null;
   };
@@ -19253,38 +19295,45 @@ const ExerciseRenderer = forwardRef(({
   const [droppedSources, setDroppedSources] = useState(/* @__PURE__ */ new Map());
   const [focusedInputId, setFocusedInputId] = useState(null);
   const [validationDetails, setValidationDetails] = useState(null);
+  const rootRef = useRef(null);
   const [resetKey, setResetKey] = useState(0);
   const [revealed, setRevealed] = useState(false);
   const playSound = useSoundPlayer(soundEnabled, sounds);
-  useImperativeHandle(ref, () => ({
-    submit: () => {
-      const result = validate(json, values);
-      playSound(result.isCorrect ? "answer-correct" : "answer-wrong");
-      const details = { ...result.details };
-      const slotValidation = (id, raw, expected) => ({
-        widgetId: id,
-        userValue: typeof raw === "string" ? raw : void 0,
-        isCorrect: typeof raw === "string" && raw !== "" && normalize(raw) === normalize(expected)
-      });
-      for (const [widgetId, widget] of Object.entries(json.widgets)) {
-        if (widget.type !== JSON_TYPES.FRACTION) continue;
-        if (!(widgetId in details)) continue;
-        const answer = json.validation?.answers?.[widgetId];
-        if (!answer) continue;
-        const [expectedNum, expectedDen] = answer.split("/", 2);
-        if (!expectedNum || !expectedDen) continue;
-        if (details[widgetId]?.isCorrect) {
-          if (widget.numerator === null) details[`${widgetId}__num`] = { widgetId: `${widgetId}__num`, userValue: void 0, isCorrect: true };
-          if (widget.denominator === null) details[`${widgetId}__den`] = { widgetId: `${widgetId}__den`, userValue: void 0, isCorrect: true };
-        } else {
-          if (widget.numerator === null) details[`${widgetId}__num`] = slotValidation(`${widgetId}__num`, values[`${widgetId}__num`], expectedNum);
-          if (widget.denominator === null) details[`${widgetId}__den`] = slotValidation(`${widgetId}__den`, values[`${widgetId}__den`], expectedDen);
-        }
+  const externallyLocked = useExerciseLocked();
+  const locked = validationDetails !== null || externallyLocked;
+  const lastResultRef = useRef(null);
+  const runSubmit = () => {
+    if (locked) return lastResultRef.current ?? validate(json, values);
+    const result = validate(json, values);
+    playSound(result.isCorrect ? "answer-correct" : "answer-wrong");
+    const details = { ...result.details };
+    const slotValidation = (id, raw, expected) => ({
+      widgetId: id,
+      userValue: typeof raw === "string" ? raw : void 0,
+      isCorrect: typeof raw === "string" && raw !== "" && normalize(raw) === normalize(expected)
+    });
+    for (const [widgetId, widget] of Object.entries(json.widgets)) {
+      if (widget.type !== JSON_TYPES.FRACTION) continue;
+      if (!(widgetId in details)) continue;
+      const answer = json.validation?.answers?.[widgetId];
+      if (!answer) continue;
+      const [expectedNum, expectedDen] = answer.split("/", 2);
+      if (!expectedNum || !expectedDen) continue;
+      if (details[widgetId]?.isCorrect) {
+        if (widget.numerator === null) details[`${widgetId}__num`] = { widgetId: `${widgetId}__num`, userValue: void 0, isCorrect: true };
+        if (widget.denominator === null) details[`${widgetId}__den`] = { widgetId: `${widgetId}__den`, userValue: void 0, isCorrect: true };
+      } else {
+        if (widget.numerator === null) details[`${widgetId}__num`] = slotValidation(`${widgetId}__num`, values[`${widgetId}__num`], expectedNum);
+        if (widget.denominator === null) details[`${widgetId}__den`] = slotValidation(`${widgetId}__den`, values[`${widgetId}__den`], expectedDen);
       }
-      setValidationDetails(details);
-      onSubmit?.(values);
-      return result;
-    },
+    }
+    setValidationDetails(details);
+    onSubmit?.(values);
+    lastResultRef.current = result;
+    return result;
+  };
+  useImperativeHandle(ref, () => ({
+    submit: runSubmit,
     getValues: () => values,
     getCompletion: () => {
       const answerable = getAnswerableInputs(json);
@@ -19327,14 +19376,20 @@ const ExerciseRenderer = forwardRef(({
       setResetKey((k) => k + 1);
     },
     focusFirstInput: () => {
-      const container = document.querySelector(".math-exercise-renderer");
-      const firstInput = container?.querySelector('input[type="text"], input[type="number"], textarea, select');
-      if (firstInput instanceof HTMLElement) {
-        firstInput.focus();
+      const container = rootRef.current;
+      if (!container) return;
+      const candidates = container.querySelectorAll(
+        'input[type="text"], input[type="number"], textarea, select'
+      );
+      for (const el of Array.from(candidates)) {
+        if (el.readOnly || el.disabled) continue;
+        el.focus();
+        return;
       }
     }
-  }), [json, values, onSubmit, playSound]);
+  }), [json, values, onSubmit, playSound, locked]);
   const handleChange = (widgetId, value, fromDrop = false, sourceOptionId) => {
+    if (locked) return;
     setRevealed(false);
     const next = { ...valuesRef.current, [widgetId]: value };
     valuesRef.current = next;
@@ -19351,7 +19406,7 @@ const ExerciseRenderer = forwardRef(({
     onChange?.(next);
   };
   const handleSubmit = () => {
-    onSubmit?.(values);
+    runSubmit();
   };
   const lineGroups = useMemo(() => {
     const isRTLInlineWidget = (item) => {
@@ -19466,7 +19521,7 @@ const ExerciseRenderer = forwardRef(({
     if (setSquareWidget) add2("set-square-1", "set-square", Math.round(getSize(setSquareWidget) * 160));
     return { tools: list, toolsMinHeight: maxH };
   }, [rulerWidget, protractorWidget, setSquareWidget]);
-  return /* @__PURE__ */ jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsx(ExerciseDndProvider, { droppedSources, children: /* @__PURE__ */ jsxs("div", { className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${className}`, children: [
+  return /* @__PURE__ */ jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsx(ExerciseDndProvider, { droppedSources, children: /* @__PURE__ */ jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -19562,8 +19617,8 @@ const ExerciseRenderer = forwardRef(({
         }
       }
     ) }),
-    showSubmitButton && /* @__PURE__ */ jsx("button", { className: "exercise-submit-btn", onClick: handleSubmit, children: "Check Answer" })
-  ] }) }) });
+    showSubmitButton && /* @__PURE__ */ jsx("button", { className: "exercise-submit-btn", disabled: locked, onClick: handleSubmit, children: "Check Answer" })
+  ] }) }) }) });
 });
 ExerciseRenderer.displayName = "ExerciseRenderer";
 function renderExercise(options) {
@@ -19620,6 +19675,7 @@ export {
   EngineError,
   ExerciseDocumentSchema,
   ExerciseJSONSchema,
+  ExerciseLockProvider,
   ExerciseMetaSchema,
   ExerciseRenderer,
   ExpressionValidationSchema,
@@ -19842,6 +19898,7 @@ export {
   toJSON,
   tokenize,
   tokenizeSafe,
+  useExerciseLocked,
   useSound,
   validate,
   validateBooleanExpression,