@mathscan/math-exercise-engine 1.2.12 → 1.2.14

package/dist/{index-Di53h19p.js → index-gCvC2wRR.js}

@@ -2092,6 +2092,8 @@ const InlineInputWidgetSchema = zod.z.discriminatedUnion("inputType", [
     width: InlineInputWidthSchema,
     placeholder: zod.z.string().max(32).optional(),
     disabled: zod.z.boolean().optional(),
+    /** Starting value the student can edit (shown read-only when disabled). */
+    prefill: zod.z.string().optional(),
     answer: zod.z.union([zod.z.string(), zod.z.number()]).optional()
   }),
   zod.z.object({
@@ -2102,6 +2104,8 @@ const InlineInputWidgetSchema = zod.z.discriminatedUnion("inputType", [
     width: InlineInputWidthSchema,
     placeholder: zod.z.string().max(32).optional(),
     disabled: zod.z.boolean().optional(),
+    /** Starting value the student can edit (shown read-only when disabled). */
+    prefill: zod.z.string().optional(),
     answer: zod.z.union([zod.z.string(), zod.z.number()]).optional()
   })
 ]);
@@ -2257,7 +2261,7 @@ function createBoldText(value, highlight) {
     highlight
   });
 }
-function createStringInput(name, length, answer, placeholder, disabled, width) {
+function createStringInput(name, length, answer, placeholder, disabled, width, prefill) {
   return parseOrThrow(
     InlineInputWidgetSchema,
     {
@@ -2268,13 +2272,14 @@ function createStringInput(name, length, answer, placeholder, disabled, width) {
       width,
       placeholder,
       disabled,
+      prefill,
       // A disabled input is never graded, so its answer is dropped.
       answer: disabled ? void 0 : answer
     },
     "STRING_INPUT"
   );
 }
-function createNumericInput(name, digits, answer, placeholder, disabled, width) {
+function createNumericInput(name, digits, answer, placeholder, disabled, width, prefill) {
   return parseOrThrow(
     InlineInputWidgetSchema,
     {
@@ -2285,6 +2290,7 @@ function createNumericInput(name, digits, answer, placeholder, disabled, width)
       width,
       placeholder,
       disabled,
+      prefill,
       // A disabled input is never graded, so its answer is dropped.
       answer: disabled ? void 0 : answer
     },
@@ -4324,6 +4330,7 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const name = params.name;
     const answer = params.answer;
     const placeholder = params.placeholder;
+    const prefill = params.prefill === void 0 ? void 0 : String(params.prefill);
     let disabled;
     if (params.disabled === true || params.disabled === "true") disabled = true;
     else if (params.disabled === false || params.disabled === "false") disabled = false;
@@ -4341,10 +4348,10 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     }
     if (ctx.stringInput) {
       const length = params.length;
-      return createStringInput(name, length, answer, placeholder, disabled, width);
+      return createStringInput(name, length, answer, placeholder, disabled, width, prefill);
     }
     const digits = params.digits;
-    return createNumericInput(name, digits, answer, placeholder, disabled, width);
+    return createNumericInput(name, digits, answer, placeholder, disabled, width, prefill);
   }
   inlineDragOption(ctx) {
     const valueToken = ctx.StringLiteral[0];
@@ -5088,7 +5095,9 @@ const StringInputJSONSchema = zod.z.object({
   width: InlineInputWidthSchema,
   placeholder: zod.z.string().max(32).optional(),
   /** Gray, non-interactive, never graded (any answer for it is ignored). */
-  disabled: zod.z.boolean().optional()
+  disabled: zod.z.boolean().optional(),
+  /** Starting value the student can edit (shown read-only when disabled). */
+  prefill: zod.z.string().optional()
 });
 const NumericInputJSONSchema = zod.z.object({
   type: zod.z.literal(JSON_TYPES.INLINE_INPUT),
@@ -5098,7 +5107,9 @@ const NumericInputJSONSchema = zod.z.object({
   width: InlineInputWidthSchema,
   placeholder: zod.z.string().max(32).optional(),
   /** Gray, non-interactive, never graded (any answer for it is ignored). */
-  disabled: zod.z.boolean().optional()
+  disabled: zod.z.boolean().optional(),
+  /** Starting value the student can edit (shown read-only when disabled). */
+  prefill: zod.z.string().optional()
 });
 const InlineInputJSONSchema = zod.z.discriminatedUnion("inputType", [
   StringInputJSONSchema,
@@ -10993,8 +11004,10 @@ function toJSON(ast) {
       layout.push(...lineItems);
     }
   }
+  const hasDragBank = ast.tools?.some((tool) => tool.type === AST_TYPES.DRAG_OPTIONS) ?? false;
   for (const inline of allInlines) {
     if (inline.type === AST_TYPES.INLINE_INPUT) {
+      const disabled = inline.disabled || hasDragBank && inline.prefill !== void 0;
       if (inline.inputType === INPUT_TYPES.STRING) {
         widgets[inline.name] = {
           type: JSON_TYPES.INLINE_INPUT,
@@ -11002,7 +11015,8 @@ function toJSON(ast) {
           length: inline.length,
           ...inline.width !== void 0 && { width: inline.width },
           placeholder: inline.placeholder,
-          ...inline.disabled && { disabled: true }
+          ...disabled && { disabled: true },
+          ...inline.prefill !== void 0 && { prefill: inline.prefill }
         };
       } else {
         widgets[inline.name] = {
@@ -11011,10 +11025,11 @@ function toJSON(ast) {
           digits: inline.digits,
           ...inline.width !== void 0 && { width: inline.width },
           placeholder: inline.placeholder,
-          ...inline.disabled && { disabled: true }
+          ...disabled && { disabled: true },
+          ...inline.prefill !== void 0 && { prefill: inline.prefill }
         };
       }
-      if (inline.answer !== void 0) {
+      if (inline.answer !== void 0 && !disabled) {
         answers[inline.name] = inline.answer;
       }
     } else if (inline.type === AST_TYPES.CLOCK && inline.mode === "interactive") {
@@ -12240,7 +12255,20 @@ function revealGeometryWidget(json) {
   if (!host.revealAnswer(store, loaded.data).success) return null;
   return validation.serializeGeometryState(store.getState().geometry);
 }
+function withDisabledPrefilledInputs(exercise) {
+  if (exercise.widgets[DRAG_OPTIONS_WIDGET_ID]?.type !== JSON_TYPES.DRAG_OPTIONS) return exercise;
+  const widgets = { ...exercise.widgets };
+  let changed = false;
+  for (const [id, widget] of Object.entries(widgets)) {
+    if (widget.type === JSON_TYPES.INLINE_INPUT && widget.prefill !== void 0 && !widget.disabled) {
+      widgets[id] = { ...widget, disabled: true };
+      changed = true;
+    }
+  }
+  return changed ? { ...exercise, widgets } : exercise;
+}
 function withoutDisabledWidgets(exercise) {
+  exercise = withDisabledPrefilledInputs(exercise);
   const validation2 = exercise.validation;
   if (!validation2) return exercise;
   const disabled = new Set(
@@ -12263,6 +12291,7 @@ function withoutDisabledWidgets(exercise) {
   };
 }
 function findDisabledInExpression(exercise) {
+  exercise = withDisabledPrefilledInputs(exercise);
   const expression = exercise.validation?.expression;
   if (!expression) return [];
   return extractVariables(expression, Object.keys(exercise.widgets)).filter((name) => exercise.widgets[name] && isDisabledInputJSON(exercise.widgets[name]));
@@ -16343,7 +16372,6 @@ const Draggable = ({
     attributes,
     listeners,
     setNodeRef,
-    transform,
     isDragging
   } = useDraggable({
     id,
@@ -16351,7 +16379,6 @@ const Draggable = ({
     disabled
   });
   const style = {
-    transform: CSS$1.Translate.toString(transform),
     cursor: disabled ? "default" : "grab",
     touchAction: "none"
   };
@@ -17102,6 +17129,16 @@ const SlotSizer = ({
     style: { ...style, visibility: "hidden" }
   }
 );
+const FixedInputChip = ({ value }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    className: "inline-input-chip",
+    disabled: true,
+    style: OVERLAY_STYLE,
+    children: value
+  }
+);
 const PlacedInputChip = ({
   widgetId,
   value,
@@ -17160,12 +17197,19 @@ function getTextInputs(container) {
 function canTakeInput(el) {
   return !el.readOnly && !el.disabled;
 }
+function canAdvanceTo(el) {
+  return !el.disabled && el.tabIndex >= 0;
+}
 function findNextInput(container, currentKey) {
   const inputs = getTextInputs(container);
   const currentIndex = inputs.findIndex((el) => el.id === getInputElementId(currentKey));
   if (currentIndex === -1) return null;
-  return inputs.slice(currentIndex + 1).find(canTakeInput) ?? null;
+  return inputs.slice(currentIndex + 1).find(canAdvanceTo) ?? null;
 }
+const KeypadContext = React.createContext(false);
+const useHasKeypad = () => React.useContext(KeypadContext);
+const DragBankContext = React.createContext(false);
+const useHasDragBank = () => React.useContext(DragBankContext);
 const InlineInput = ({
   widgetId,
   value,
@@ -17182,6 +17226,8 @@ const InlineInput = ({
 }) => {
   const playSound = useSound();
   const locked = useExerciseLocked();
+  const hasKeypad = useHasKeypad();
+  const hasDragBank = useHasDragBank();
   const handleChange = React.useCallback((newValue, fromDrop = false, sourceOptionId) => {
     onChange(widgetId, newValue, fromDrop, sourceOptionId);
   }, [onChange, widgetId]);
@@ -17192,6 +17238,7 @@ const InlineInput = ({
   const dynamicWidth = `${(width ?? expectedLength ?? 5) * 0.8 + 1}em`;
   const statusClass = validationStatus ? ` widget--${validationStatus}` : "";
   const disabledClass = disabled ? " inline-input--disabled" : "";
+  const isFixedChip = hasDragBank && disabled && value !== "";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Droppable,
     {
@@ -17200,7 +17247,10 @@ const InlineInput = ({
       onDrop: handleDrop,
       disabled: locked || disabled,
       className: "inline-widget inline-input-droppable",
-      children: isDropped && value !== "" ? (
+      children: isFixedChip ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SlotSizer, { className: "inline-input", style: { width: dynamicWidth }, placeholder }),
+        /* @__PURE__ */ jsxRuntime.jsx(FixedInputChip, { value })
+      ] }) : isDropped && value !== "" ? (
         // Show as chip only when value came from drag-drop
         /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -17236,6 +17286,7 @@ const InlineInput = ({
             },
             onFocus: () => onFocus?.(widgetId),
             readOnly: locked,
+            inputMode: hasKeypad ? "none" : void 0,
             disabled,
             maxLength: expectedLength,
             style: { width: dynamicWidth },
@@ -17256,11 +17307,13 @@ const DragOptionChip = ({
   onOptionClick,
   className = ""
 }) => {
-  const { usedOptionIds, hasDraggedOption, playHintSound } = useExerciseDnd();
+  const { activeItem, usedOptionIds, hasDraggedOption, playHintSound } = useExerciseDnd();
   const locked = useExerciseLocked();
   const isUsed = usedOptionIds.has(optionId);
+  const isPickedUp = activeItem?.type === "drag-option" && activeItem.id === optionId;
   const { jiggling: hinting, onAnimationEnd: onHintEnd } = useJiggle(hasDraggedOption);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `drag-option-slot ${className}`.trim(), children: isUsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-option-empty", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(
+  const emptySlot = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-option-empty", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "drag-option", disabled: true, children: value }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `drag-option-slot ${className}`.trim(), children: isUsed ? emptySlot : /* @__PURE__ */ jsxRuntime.jsx(
     Draggable,
     {
       id: optionId,
@@ -17268,7 +17321,7 @@ const DragOptionChip = ({
       data: { value, label: value },
       disabled: locked,
       className: "drag-option-wrapper",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: isPickedUp ? emptySlot : /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           className: hinting && !locked ? "drag-option drag-option--hint" : "drag-option",
@@ -17438,6 +17491,7 @@ const FractionInput = ({
 }) => {
   const playSound = useSound();
   const locked = useExerciseLocked();
+  const hasKeypad = useHasKeypad();
   const numKey = getFractionKey(widgetId, "num");
   const denKey = getFractionKey(widgetId, "den");
   const numValue = values[numKey] ?? "";
@@ -17491,6 +17545,7 @@ const FractionInput = ({
             },
             onFocus: () => onFocus?.(subKey),
             readOnly: locked,
+            inputMode: hasKeypad ? "none" : void 0,
             maxLength: placeholder ? Math.max(20, placeholder.length) : 4,
             size: placeholder ? placeholder.length : void 0,
             "aria-label": label,
@@ -19701,7 +19756,7 @@ function isGeometryWidget(widget) {
   return widget.type === JSON_TYPES.GEOMETRY;
 }
 const GeometryWidget = React.lazy(async () => ({
-  default: (await Promise.resolve().then(() => require("./GeometryWidget-BMOiQMvj.js"))).GeometryWidget
+  default: (await Promise.resolve().then(() => require("./GeometryWidget-D6_DlxhZ.js"))).GeometryWidget
 }));
 const WidgetRenderer = ({
   widget,
@@ -22003,7 +22058,7 @@ const LayoutRenderer = ({
       return null;
   }
 };
-function LionHand({ className }) {
+function ChameleonHand({ className }) {
   const id = React.useId();
   const shadowId = `${id}-shadow`;
   const maskId = `${id}-mask`;
@@ -22030,26 +22085,90 @@ function LionHand({ className }) {
               y: "19",
               width: "49",
               height: "42",
-              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M49.7484 33.9668C58.158 45.6281 37.9572 61.4399 28.1745 60.1051C17.1397 58.5995 5.03802 42.2474 10.4349 38.3224C15.8318 34.3974 18.9715 32.4031 23.1181 30.1278C24.1486 29.5624 25.1742 29.0263 26.1947 28.5358C33.7314 24.764 52.8138 16.0308 57.0969 21.97C59.9201 25.8848 54.8651 28.9522 48.1097 31.8806C48.658 32.518 49.2042 33.2123 49.7484 33.9668Z", fill: "#FCD592" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M49.7484 33.9668C58.158 45.6281 37.9572 61.4399 28.1745 60.1051C17.1397 58.5995 5.03802 42.2474 10.4349 38.3224C15.8318 34.3974 18.9715 32.4031 23.1181 30.1278C24.1486 29.5624 25.1742 29.0263 26.1947 28.5358C33.7314 24.764 52.8138 16.0308 57.0969 21.97C59.9201 25.8848 54.8651 28.9522 48.1097 31.8806C48.658 32.518 49.2042 33.2123 49.7484 33.9668Z",
+                  fill: "#B7DB4E"
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("g", { mask: `url(#${maskId})`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M49.7484 33.9672C58.158 45.6285 38.3118 60.3151 32.1037 64.7332C22.6672 71.4486 2.68204 43.9969 12.2424 37.1926C15.1884 35.0959 18.9716 32.4035 23.1182 30.1282C24.7308 29.2433 26.3314 28.4303 27.9195 27.7514C36.611 23.6398 54.4269 16.1501 58.4471 21.7248C61.34 25.7362 55.5686 28.9294 48.2024 31.9893C48.7196 32.5968 49.2349 33.2552 49.7484 33.9672Z", fill: "#FCD592" }),
-            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.2426 37.1924C2.68223 43.9967 22.6674 71.4485 32.1039 64.733C31.3434 63.6785 26.4317 61.1668 25.3134 59.6161C24.1951 58.0654 22.794 50.5211 22.123 49.5907C21.4521 48.6603 16.3219 45.7409 15.5637 44.4032C14.8055 43.0655 13.8979 39.4877 14.7258 35.4253L12.2426 37.1924Z", fill: "#6B291E" }),
-            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M50.4102 36.1737C50.6823 37.524 52.0035 38.4016 53.3614 38.1339C54.7192 37.8662 55.5994 36.5546 55.3274 35.2043L52.8688 35.689L50.4102 36.1737ZM38.8014 26.9523C37.4241 27.0934 36.425 28.3178 36.5697 29.6872C36.7144 31.0565 37.9482 32.0522 39.3255 31.9111L39.0634 29.4317L38.8014 26.9523ZM52.8688 35.689C55.3274 35.2043 55.327 35.2023 55.3266 35.2004C55.3265 35.1997 55.326 35.1977 55.3258 35.1963C55.3252 35.1935 55.3246 35.1906 55.324 35.1875C55.3227 35.1815 55.3213 35.1749 55.3198 35.1679C55.3168 35.1539 55.3133 35.1379 55.3092 35.1201C55.3011 35.0845 55.2907 35.0415 55.2779 34.9916C55.2522 34.8918 55.2163 34.764 55.1676 34.6127C55.0703 34.3106 54.9205 33.911 54.6961 33.4507C54.247 32.5296 53.4925 31.3535 52.2552 30.241C49.7078 27.9508 45.5021 26.2658 38.8014 26.9523L39.0634 29.4317L39.3255 31.9111C44.9159 31.3384 47.6128 32.782 48.8954 33.9352C49.5731 34.5445 49.9653 35.1687 50.1842 35.6177C50.2938 35.8424 50.3584 36.0201 50.3919 36.1242C50.4086 36.1759 50.4172 36.2084 50.4197 36.2181C50.4209 36.223 50.4206 36.222 50.419 36.2148C50.4181 36.2111 50.417 36.2059 50.4155 36.1991C50.4148 36.1957 50.414 36.1919 50.4131 36.1876C50.4127 36.1855 50.4122 36.1833 50.4117 36.181C50.4115 36.1798 50.4111 36.178 50.411 36.1774C50.4106 36.1755 50.4102 36.1737 52.8688 35.689Z", fill: "#A2634A" }),
-            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M54.7526 47.3947C55.5602 48.5146 57.1269 48.7734 58.2518 47.9729C59.3767 47.1723 59.634 45.6155 58.8264 44.4956L56.7895 45.9452L54.7526 47.3947ZM38.1539 36.5617C36.7805 36.7357 35.8113 37.9837 35.9891 39.3493C36.1669 40.7148 37.4244 41.6808 38.7978 41.5068L38.4758 39.0342L38.1539 36.5617ZM56.7895 45.9452L58.8264 44.4956C57.4277 42.5562 55.3182 40.1317 51.9378 38.4204C48.5385 36.6995 44.0772 35.8112 38.1539 36.5617L38.4758 39.0342L38.7978 41.5068C43.8796 40.863 47.3003 41.6624 49.6691 42.8616C52.0569 44.0704 53.6015 45.7985 54.7526 47.3947L56.7895 45.9452Z", fill: "#A2634A" })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M49.7484 33.9672C58.158 45.6285 38.3118 60.3151 32.1037 64.7332C22.6672 71.4486 2.68204 43.9969 12.2424 37.1926C15.1884 35.0959 18.9716 32.4035 23.1182 30.1282C24.7308 29.2433 26.3314 28.4303 27.9195 27.7514C36.611 23.6398 54.4269 16.1501 58.4471 21.7248C61.34 25.7362 55.5686 28.9294 48.2024 31.9893C48.7196 32.5968 49.2349 33.2552 49.7484 33.9672Z",
+                fill: "#B7DB4E"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M50.4102 36.1737C50.6823 37.524 52.0035 38.4016 53.3614 38.1339C54.7192 37.8662 55.5994 36.5546 55.3274 35.2043L52.8688 35.689L50.4102 36.1737ZM38.8014 26.9523C37.4241 27.0934 36.425 28.3178 36.5697 29.6872C36.7144 31.0565 37.9482 32.0522 39.3255 31.9111L39.0634 29.4317L38.8014 26.9523ZM52.8688 35.689C55.3274 35.2043 55.327 35.2023 55.3266 35.2004C55.3265 35.1997 55.326 35.1977 55.3258 35.1963C55.3252 35.1935 55.3246 35.1906 55.324 35.1875C55.3227 35.1815 55.3213 35.1749 55.3198 35.1679C55.3168 35.1539 55.3133 35.1379 55.3092 35.1201C55.3011 35.0845 55.2907 35.0415 55.2779 34.9916C55.2522 34.8918 55.2163 34.764 55.1676 34.6127C55.0703 34.3106 54.9205 33.911 54.6961 33.4507C54.247 32.5296 53.4925 31.3535 52.2552 30.241C49.7078 27.9508 45.5021 26.2658 38.8014 26.9523L39.0634 29.4317L39.3255 31.9111C44.9159 31.3384 47.6128 32.782 48.8954 33.9352C49.5731 34.5445 49.9653 35.1687 50.1842 35.6177C50.2938 35.8424 50.3584 36.0201 50.3919 36.1242C50.4086 36.1759 50.4172 36.2084 50.4197 36.2181C50.4209 36.223 50.4206 36.222 50.419 36.2148C50.4181 36.2111 50.417 36.2059 50.4155 36.1991C50.4148 36.1957 50.414 36.1919 50.4131 36.1876C50.4127 36.1855 50.4122 36.1833 50.4117 36.181C50.4115 36.1798 50.4111 36.178 50.411 36.1774C50.4106 36.1755 50.4102 36.1737 52.8688 35.689Z",
+                fill: "#9CAF63"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M54.7526 47.3947C55.5602 48.5146 57.1269 48.7734 58.2518 47.9729C59.3767 47.1723 59.634 45.6155 58.8264 44.4956L56.7895 45.9452L54.7526 47.3947ZM38.1539 36.5617C36.7805 36.7357 35.8113 37.9837 35.9891 39.3493C36.1669 40.7148 37.4244 41.6808 38.7978 41.5068L38.4758 39.0342L38.1539 36.5617ZM56.7895 45.9452L58.8264 44.4956C57.4277 42.5562 55.3182 40.1317 51.9378 38.4204C48.5385 36.6995 44.0772 35.8112 38.1539 36.5617L38.4758 39.0342L38.7978 41.5068C43.8796 40.863 47.3003 41.6624 49.6691 42.8616C52.0569 44.0704 53.6015 45.7985 54.7526 47.3947L56.7895 45.9452Z",
+                fill: "#9CAF63"
+              }
+            )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: shadowId, x: "-1.99995", y: "0", width: "78.3658", height: "81.8518", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
-          /* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
-          /* @__PURE__ */ jsxRuntime.jsx("feOffset", { dy: "2" }),
-          /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "1" }),
-          /* @__PURE__ */ jsxRuntime.jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
-          /* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }),
-          /* @__PURE__ */ jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" })
-        ] }) })
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "filter",
+          {
+            id: shadowId,
+            x: "-1.99995",
+            y: "0",
+            width: "78.3658",
+            height: "81.8518",
+            filterUnits: "userSpaceOnUse",
+            colorInterpolationFilters: "sRGB",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "feColorMatrix",
+                {
+                  in: "SourceAlpha",
+                  type: "matrix",
+                  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+                  result: "hardAlpha"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("feOffset", { dy: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "feColorMatrix",
+                {
+                  type: "matrix",
+                  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "feBlend",
+                {
+                  mode: "normal",
+                  in2: "BackgroundImageFix",
+                  result: "effect1_dropShadow"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "feBlend",
+                {
+                  mode: "normal",
+                  in: "SourceGraphic",
+                  in2: "effect1_dropShadow",
+                  result: "shape"
+                }
+              )
+            ]
+          }
+        ) })
       ]
     }
   );
@@ -22111,6 +22230,8 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
     tick();
     return () => cancelAnimationFrame(raf);
   }, [step]);
+  const showBubble = options.showBubble !== false;
+  const autoAdvance = options.autoAdvance === true || !showBubble;
   const [tapIndex, setTapIndex] = React.useState(0);
   const [tapCount, setTapCount] = React.useState(0);
   const [shownStep, setShownStep] = React.useState(stepIndex);
@@ -22120,11 +22241,13 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
     setTapCount(0);
   }
   React.useEffect(() => {
+    const targets = step.taps(ctxRef.current);
+    if (autoAdvance && tapIndex >= targets.length) return;
     let release;
     const press = setTimeout(() => {
       setTapCount((n) => n + 1);
-      const targets = step.taps(ctxRef.current);
-      const el = targets[tapIndex % Math.max(1, targets.length)];
+      const targets2 = step.taps(ctxRef.current);
+      const el = targets2[tapIndex % Math.max(1, targets2.length)];
       if (el instanceof Element) {
         el.classList.add("met-tutorial-pressed");
         release = setTimeout(() => el.classList.remove("met-tutorial-pressed"), PRESS_HOLD_MS);
@@ -22137,23 +22260,44 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
       if (release) clearTimeout(release);
       root.querySelectorAll(".met-tutorial-pressed").forEach((el) => el.classList.remove("met-tutorial-pressed"));
     };
-  }, [step, tapIndex, root]);
+  }, [step, tapIndex, root, autoAdvance]);
   const text = options.texts?.[step.id] ?? step.text;
   const textRef = React.useRef(text);
   textRef.current = text;
+  const onCloseRef = React.useRef(onClose);
+  onCloseRef.current = onClose;
+  const isLast = stepIndex === steps.length - 1;
+  const [completedStep, setCompletedStep] = React.useState(null);
   React.useEffect(() => {
     optionsRef.current.onStep?.(stepIndex, step.id);
-    optionsRef.current.onSpeak?.(step.id, textRef.current);
-  }, [stepIndex, step]);
-  const isLast = stepIndex === steps.length - 1;
+    const speech = Promise.resolve(optionsRef.current.onSpeak?.(step.id, textRef.current)).catch(() => {
+    });
+    if (!autoAdvance) return;
+    const duration = Math.max(2, step.taps(ctxRef.current).length) * CYCLE_MS;
+    let cancelled = false;
+    let timer;
+    const animation = new Promise((resolve2) => {
+      timer = setTimeout(resolve2, duration);
+    });
+    void Promise.all([speech, animation]).then(() => {
+      if (cancelled) return;
+      if (isLast) {
+        if (showBubble) setCompletedStep(stepIndex);
+        else onCloseRef.current(true);
+      } else setStepIndex((i) => i + 1);
+    });
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [stepIndex, step, autoAdvance, isLast, showBubble]);
+  const showNext = !autoAdvance || isLast && completedStep === stepIndex;
   const next = () => {
     if (isLast) onClose(true);
     else setStepIndex((i) => i + 1);
   };
   const overlayRef = React.useRef(null);
   const nextRef = React.useRef(null);
-  const onCloseRef = React.useRef(onClose);
-  onCloseRef.current = onClose;
   React.useEffect(() => {
     const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     previous?.blur();
@@ -22186,15 +22330,15 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
   }, []);
   const bubbleShown = layout !== null;
   React.useEffect(() => {
-    nextRef.current?.focus({ focusVisible: false });
-  }, [stepIndex, bubbleShown]);
+    (nextRef.current ?? overlayRef.current)?.focus({ focusVisible: false });
+  }, [stepIndex, bubbleShown, showNext]);
   const maskId = `met-tutorial-mask-${React.useId()}`;
   if (typeof document === "undefined") return null;
   const holes = (layout?.spotlight ?? []).filter((r) => r !== null);
-  const tapTarget = layout?.taps.length ? layout.taps[tapIndex % layout.taps.length] ?? null : null;
+  const tapTarget = layout?.taps.length && (!autoAdvance || tapIndex < layout.taps.length) ? layout.taps[tapIndex % layout.taps.length] ?? null : null;
   const Scene = step.Scene;
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: overlayRef, className: "met-tutorial", role: "dialog", "aria-modal": "true", "aria-label": text, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: overlayRef, className: "met-tutorial", tabIndex: -1, role: "dialog", "aria-modal": "true", "aria-label": text, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "met-tutorial-dim", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: maskId, children: [
           /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: "white" }),
@@ -22229,7 +22373,7 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
       )),
       Scene && layout && /* @__PURE__ */ jsxRuntime.jsx(Scene, { ctx, spotlight: layout.spotlight, taps: layout.taps, tapCount }),
       tapTarget && /* @__PURE__ */ jsxRuntime.jsx(Hand, { target: tapTarget, tapKey: `${stepIndex}-${tapIndex}` }),
-      layout && /* @__PURE__ */ jsxRuntime.jsx(
+      layout && showBubble && /* @__PURE__ */ jsxRuntime.jsx(
         Bubble,
         {
           layout,
@@ -22237,7 +22381,8 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
           stepIndex,
           stepCount: steps.length,
           nextLabel: options.nextLabel ?? DEFAULT_NEXT_LABEL,
-          onSpeak: options.onSpeak && (options.canSpeak?.(step.id) ?? true) ? () => optionsRef.current.onSpeak?.(step.id, textRef.current) : void 0,
+          showNext,
+          onSpeak: !autoAdvance && options.onSpeak && (options.canSpeak?.(step.id) ?? true) ? () => optionsRef.current.onSpeak?.(step.id, textRef.current) : void 0,
           onNext: next,
           nextRef
         }
@@ -22265,12 +22410,12 @@ const Hand = ({ target, tapKey }) => {
             style: { left: TUTORIAL_HAND_TIP.x * HAND_W, top: TUTORIAL_HAND_TIP.y * HAND_H }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(LionHand, {})
+        /* @__PURE__ */ jsxRuntime.jsx(ChameleonHand, {})
       ] }, tapKey)
     }
   );
 };
-const Bubble = ({ layout, text, stepIndex, stepCount, nextLabel, onSpeak, onNext, nextRef }) => {
+const Bubble = ({ layout, text, stepIndex, stepCount, nextLabel, showNext, onSpeak, onNext, nextRef }) => {
   const { anchor, root, vw, vh } = layout;
   const clampLeft = (x) => Math.min(Math.max(EDGE, x), Math.max(EDGE, vw - BUBBLE_W - EDGE));
   const style = anchor ? { left: clampLeft(anchor.x), bottom: Math.max(EDGE, vh - anchor.y + BUBBLE_GAP), width: BUBBLE_W } : { left: clampLeft((root?.x ?? 0) + EDGE * 2), top: (root?.y ?? 0) + EDGE * 2, width: BUBBLE_W };
@@ -22281,7 +22426,7 @@ const Bubble = ({ layout, text, stepIndex, stepCount, nextLabel, onSpeak, onNext
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 9v6h4l5 4V5L8 9H4z", fill: "currentColor" }),
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { ref: nextRef, type: "button", className: "met-tutorial-next", onClick: onNext, children: nextLabel })
+      showNext && /* @__PURE__ */ jsxRuntime.jsx("button", { ref: nextRef, type: "button", className: "met-tutorial-next", onClick: onNext, children: nextLabel })
     ] }),
     stepCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "met-tutorial-dots", "aria-hidden": "true", children: Array.from({ length: stepCount }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: i === stepIndex ? "is-current" : i < stepIndex ? "is-done" : "" }, i)) })
   ] });
@@ -22301,7 +22446,16 @@ function answerBox(ctx) {
   const inputs = getTextInputs(ctx.root);
   return inputs.find(canTakeInput) ?? inputs[0] ?? null;
 }
+function answerDigits(ctx) {
+  const id = answerBox(ctx)?.id.replace(/-input$/, "");
+  const expected = id ? ctx.json.validation?.answers?.[id] : void 0;
+  if (typeof expected !== "number" && typeof expected !== "string") return null;
+  const value = String(expected);
+  return /^\d+$/.test(value) ? [...value] : null;
+}
 function answerSlots(ctx) {
+  const digits = answerDigits(ctx);
+  if (digits) return digits.length;
   const id = answerBox(ctx)?.id.replace(/-input$/, "");
   const max = id ? getMaxInputLength(ctx.json, id) : void 0;
   return Math.min(MAX_SLOTS, Math.max(1, max ?? DEFAULT_SLOTS));
@@ -22317,13 +22471,14 @@ function checkTarget(ctx) {
     STAND_IN_CHECK_SIZE
   );
 }
-const demoKeys = (ctx) => DEMO_KEYS.map((k) => key(ctx, k));
-const StandInFill = ({ box, slots, filled }) => /* @__PURE__ */ jsxRuntime.jsx(
+const demoKeys = (ctx) => (answerDigits(ctx) ?? DEMO_KEYS).map((k) => key(ctx, k));
+const StandInFill = ({ box, slots, filled, digits }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     className: "met-tutorial-fill",
+    dir: "ltr",
     style: { left: box.x, top: box.y, width: box.width, height: box.height },
-    children: Array.from({ length: slots }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: i < filled ? "met-tutorial-fill-dot" : "met-tutorial-fill-slot", children: i < filled ? "●" : "_" }, i))
+    children: Array.from({ length: slots }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: i < filled ? "met-tutorial-fill-dot" : "met-tutorial-fill-slot", children: i < filled ? digits?.[i] ?? "●" : "_" }, i))
   }
 );
 const center = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
@@ -22331,7 +22486,8 @@ const HopScene = ({ ctx, spotlight, taps, tapCount }) => {
   const box = spotlight[1];
   if (!box) return null;
   const slots = answerSlots(ctx);
-  const filled = tapCount === 0 ? 0 : (tapCount - 1) % slots + 1;
+  const digits = answerDigits(ctx);
+  const filled = digits ? Math.min(tapCount, slots) : tapCount === 0 ? 0 : (tapCount - 1) % slots + 1;
   const from = tapCount > 0 ? taps[(tapCount - 1) % taps.length] : null;
   let arc = null;
   if (from) {
@@ -22342,15 +22498,23 @@ const HopScene = ({ ctx, spotlight, taps, tapCount }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     arc && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "met-tutorial-arc", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: arc }) }),
-    arc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "met-tutorial-hop", style: { offsetPath: `path('${arc}')` } }, tapCount),
-    /* @__PURE__ */ jsxRuntime.jsx(StandInFill, { box, slots, filled })
+    arc && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `met-tutorial-hop${digits ? " met-tutorial-hop--digit" : ""}`,
+        style: { offsetPath: `path('${arc}')` },
+        children: digits?.[(tapCount - 1) % digits.length]
+      },
+      tapCount
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(StandInFill, { box, slots, filled, digits })
   ] });
 };
 const CheckScene = ({ ctx, spotlight }) => {
   const box = spotlight[0];
   const check = spotlight[1];
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    box && /* @__PURE__ */ jsxRuntime.jsx(StandInFill, { box, slots: answerSlots(ctx), filled: answerSlots(ctx) }),
+    box && /* @__PURE__ */ jsxRuntime.jsx(StandInFill, { box, slots: answerSlots(ctx), filled: answerSlots(ctx), digits: answerDigits(ctx) }),
     check && !ctx.submitTarget && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -22391,6 +22555,33 @@ const WIDGET_TUTORIALS = [keypadTutorial];
 function findWidgetTutorial(json) {
   return WIDGET_TUTORIALS.find((t) => t.appliesTo(json)) ?? null;
 }
+function getAnswerLengthCompletion(json, answerable, values, touched) {
+  const fields = [];
+  for (const widgetId of answerable) {
+    const widget = json.widgets[widgetId];
+    const expected = json.validation?.answers?.[widgetId];
+    if (widget?.type === JSON_TYPES.INLINE_INPUT && !widget.disabled) {
+      fields.push({ id: widgetId, widgetId, expected });
+    } else if (widget?.type === JSON_TYPES.FRACTION) {
+      const parts = typeof expected === "string" ? expected.split("/") : [];
+      const validParts = parts.length === 2;
+      if (widget.numerator === null) {
+        fields.push({ id: getFractionKey(widgetId, "num"), widgetId, expected: validParts ? parts[0] : void 0 });
+      }
+      if (widget.denominator === null) {
+        fields.push({ id: getFractionKey(widgetId, "den"), widgetId, expected: validParts ? parts[1] : void 0 });
+      }
+    }
+  }
+  const answerLengthMatchedIds = fields.filter(({ id, widgetId, expected }) => {
+    const value = values[id];
+    return touched.has(widgetId) && (typeof expected === "string" || typeof expected === "number") && (typeof value === "string" || typeof value === "number") && String(value).length > 0 && String(value).length === String(expected).length;
+  }).map(({ id }) => id);
+  return {
+    isAnswerLengthMatched: fields.length > 0 && answerLengthMatchedIds.length === fields.length,
+    answerLengthMatchedIds
+  };
+}
 const TOOL_ASPECT_RATIO = {
   ruler: RULER_ASPECT_RATIO,
   protractor: PROTRACTOR_ASPECT_RATIO,
@@ -22422,6 +22613,8 @@ function buildInitialValues(json) {
       initial[id] = String(widget.value);
     } else if (widget.type === JSON_TYPES.GEOMETRY) {
       initial[id] = validation.serializeGeometryState(validation.createEmptyGeometryAttempt());
+    } else if (widget.type === JSON_TYPES.INLINE_INPUT && widget.prefill !== void 0) {
+      initial[id] = widget.prefill;
     }
   }
   return initial;
@@ -22505,7 +22698,7 @@ function buildRevealedDropSources(json, revealedValues) {
   return sources;
 }
 const ExerciseRenderer = React.forwardRef(({
-  json,
+  json: suppliedJson,
   onSubmit,
   onChange,
   showSubmitButton = false,
@@ -22514,6 +22707,7 @@ const ExerciseRenderer = React.forwardRef(({
   sounds,
   theme
 }, ref) => {
+  const json = React.useMemo(() => withDisabledPrefilledInputs(suppliedJson), [suppliedJson]);
   const initialValuesSignature = React.useMemo(() => buildInitialValuesSignature(json), [json]);
   const [values, setValues] = React.useState(() => buildInitialValues(json));
   const valuesRef = React.useRef(values);
@@ -22599,7 +22793,8 @@ const ExerciseRenderer = React.forwardRef(({
         missing,
         filledIds,
         isComplete: answerable.length > 0 && missing.length === 0,
-        isAnyFilled: filledIds.length > 0
+        isAnyFilled: filledIds.length > 0,
+        ...getAnswerLengthCompletion(json, answerable, valuesRef.current, touchedRef.current)
       };
     },
     reset: () => {
@@ -22641,7 +22836,7 @@ const ExerciseRenderer = React.forwardRef(({
       const container = rootRef.current ?? document.querySelector(".math-exercise-renderer");
       if (!container) return;
       const candidates = getTextInputs(container);
-      const target = candidates.find(canTakeInput) ?? (locked ? void 0 : candidates[0]);
+      const target = candidates.find(canTakeInput) ?? (locked ? void 0 : candidates.find(canAdvanceTo));
       target?.focus();
     },
     hasTutorial: () => tutorial !== null,
@@ -22813,7 +23008,7 @@ const ExerciseRenderer = React.forwardRef(({
     if (setSquareWidget) add2("set-square-1", "set-square", Math.round(getSize(setSquareWidget) * 160));
     return { tools: list, toolsMinHeight: maxH };
   }, [rulerWidget, protractorWidget, setSquareWidget]);
-  return /* @__PURE__ */ jsxRuntime.jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseDndProvider, { droppedSources, exerciseKey: loadedValuesSignature, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, style: themeStyle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseDndProvider, { droppedSources, exerciseKey: loadedValuesSignature, children: /* @__PURE__ */ jsxRuntime.jsx(KeypadContext.Provider, { value: Boolean(numericKeypadWidget), children: /* @__PURE__ */ jsxRuntime.jsx(DragBankContext.Provider, { value: json.widgets[DRAG_OPTIONS_WIDGET_ID] !== void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, style: themeStyle, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -22889,9 +23084,10 @@ const ExerciseRenderer = React.forwardRef(({
               onChange: () => {
               },
               onKeypadChange: (newValue) => {
-                if (focusedInputId) {
-                  handleChange(focusedInputId, newValue, false);
-                }
+                if (!focusedInputId) return;
+                const maxLength = getMaxInputLength(json, focusedInputId);
+                if (maxLength !== void 0 && newValue.length > maxLength) return;
+                handleChange(focusedInputId, newValue, false);
               }
             }
           ) }),
@@ -22919,12 +23115,13 @@ const ExerciseRenderer = React.forwardRef(({
         options: tutorialRun.options,
         onClose: (finished) => {
           setTutorialRun(null);
+          tutorialRun.options.onClose?.();
           if (finished) tutorialRun.options.onDone?.();
         }
       },
       tutorialRun.run
     )
-  ] }) }) }) });
+  ] }) }) }) }) }) });
 });
 ExerciseRenderer.displayName = "ExerciseRenderer";
 function renderExercise(options) {
@@ -23268,4 +23465,4 @@ exports.validateUniqueIds = validateUniqueIds;
 exports.validateVisualFractionCapacity = validateVisualFractionCapacity;
 exports.validateWidgetJSON = validateWidgetJSON;
 exports.validateWidgetJSONSafe = validateWidgetJSONSafe;
-//# sourceMappingURL=index-Di53h19p.js.map
+//# sourceMappingURL=index-gCvC2wRR.js.map