@mathscan/math-exercise-engine 1.0.16 → 1.0.17

package/dist/index.js

@@ -160,6 +160,7 @@ const SIDE_PAD = 7;
 const CSS_VAR_SIDE_PAD = "--nl-side-pad";
 const NUMBER_LINE_LABELS = ["all", "extremes", "min-only", "max-only", "none"];
 const NUMBER_LINE_HIGHLIGHT_COLORS = ["blue", "red", "green", "orange", "purple", "yellow"];
+const NUMBER_LINE_DRAG_MODES = ["axis", "inputs"];
 function getFractionKey(widgetId, part) {
   return `${widgetId}__${part}`;
 }
@@ -1156,7 +1157,8 @@ const FractionInlineSchema = zod.z.object({
   numerator: zod.z.number().optional(),
   denominator: zod.z.number().optional(),
   answer: zod.z.string().optional(),
-  simplified: zod.z.boolean().default(true)
+  simplified: zod.z.boolean().default(true),
+  placeholder: zod.z.string().max(32).optional()
 });
 const IMAGE_SRC_SCHEME_RE$1 = /^(https?:\/\/|data:image\/)/i;
 const ImageInlineSchema = zod.z.object({
@@ -1438,6 +1440,11 @@ const NumberLineBlockSchema = zod.z.object({
   }).optional(),
   counter: NumberLineCounterSchema.optional(),
   highlights: zod.z.array(NumberLineHighlightSchema).optional(),
+  dragMode: zod.z.enum(NUMBER_LINE_DRAG_MODES, {
+    errorMap: () => ({
+      message: `NUMBER_LINE: dragMode must be one of ${NUMBER_LINE_DRAG_MODES.join(", ")}`
+    })
+  }).optional(),
   positions: zod.z.array(NumberLinePositionSchema)
 }).refine((data) => data.min < data.max, {
   message: "NUMBER_LINE: min must be less than max"
@@ -1475,7 +1482,7 @@ const NumberLineBlockSchema = zod.z.object({
     }
   }
 });
-function createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights) {
+function createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights, dragMode) {
   return NumberLineBlockSchema.parse({
     type: AST_TYPES.NUMBER_LINE_BLOCK,
     min,
@@ -1486,6 +1493,7 @@ function createNumberLineBlock(min, max, positions, step, minorTicks, style, lab
     labelVisibility,
     counter,
     highlights,
+    dragMode,
     positions
   });
 }
@@ -1850,6 +1858,7 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const minorTicks = params.minorTicks !== void 0 ? Number(params.minorTicks) : void 0;
     const style = params.style;
     const labelVisibility = params.labelVisibility;
+    const dragMode = params.dragMode;
     const positions = ctx.position ? ctx.position.map((p) => this.visit(p)) : [];
     const rawCounters = ctx.counter;
     if (rawCounters && rawCounters.length > 1) {
@@ -1857,7 +1866,7 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     }
     const counter = rawCounters ? this.visit(rawCounters) : void 0;
     const highlights = ctx.highlight ? ctx.highlight.map((h) => this.visit(h)) : [];
-    return createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights);
+    return createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights, dragMode);
   }
   position(ctx) {
     const params = this.visit(ctx.parameterList);
@@ -2050,7 +2059,8 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const denominator = params.denominator;
     const answer = params.answer;
     const simplified = params.simplified !== void 0 ? params.simplified : void 0;
-    return createFraction(name, { numerator, denominator, answer, simplified });
+    const placeholder = params.placeholder;
+    return createFraction(name, { numerator, denominator, answer, simplified, placeholder });
   }
   image(ctx) {
     const params = this.visit(ctx.parameterList);
@@ -2334,6 +2344,7 @@ const NumberLineItemSchema = zod.z.object({
   labelVisibility: zod.z.enum(NUMBER_LINE_LABELS).optional(),
   counter: NumberLineCounterItemSchema.optional(),
   highlights: zod.z.array(NumberLineHighlightItemSchema).optional(),
+  dragMode: zod.z.enum(NUMBER_LINE_DRAG_MODES).optional(),
   positions: zod.z.array(NumberLinePositionItemSchema)
 });
 const MatcherItemContentSchema = zod.z.object({
@@ -2383,7 +2394,8 @@ const FractionJSONSchema = zod.z.object({
   type: zod.z.literal(JSON_TYPES.FRACTION),
   numerator: zod.z.number().nullable(),
   denominator: zod.z.number().nullable(),
-  simplified: zod.z.boolean()
+  simplified: zod.z.boolean(),
+  placeholder: zod.z.string().max(32).optional()
 });
 const MatcherWidgetJSONSchema = zod.z.object({
   type: zod.z.literal(JSON_TYPES.MATCHER),
@@ -2601,7 +2613,8 @@ function toJSON(ast) {
         type: JSON_TYPES.FRACTION,
         numerator: inline.numerator ?? null,
         denominator: inline.denominator ?? null,
-        simplified: inline.simplified ?? true
+        simplified: inline.simplified ?? true,
+        placeholder: inline.placeholder
       };
       if (inline.answer !== void 0) {
         answers[inline.name] = inline.answer;
@@ -2732,6 +2745,7 @@ function transformNumberLine(numberLine, idGenerator) {
     ...numberLine.labelVisibility !== void 0 && { labelVisibility: numberLine.labelVisibility },
     ...counterItem !== void 0 && { counter: counterItem },
     ...highlights !== void 0 && { highlights },
+    ...numberLine.dragMode !== void 0 && { dragMode: numberLine.dragMode },
     positions
   };
   return item;
@@ -13092,8 +13106,11 @@ const FractionInput = ({
   values,
   droppedInputs,
   validationStatus = null,
+  numValidationStatus = null,
+  denValidationStatus = null,
   onChange,
-  onFocus
+  onFocus,
+  placeholder
 }) => {
   const numKey = getFractionKey(widgetId, "num");
   const denKey = getFractionKey(widgetId, "den");
@@ -13106,11 +13123,12 @@ const FractionInput = ({
       onChange(subKey, data.value, true, String(item.id));
     }
   }, [onChange]);
-  const renderSlot = (subKey, fixedValue, currentValue, label) => {
+  const renderSlot = (subKey, fixedValue, currentValue, label, slotStatus) => {
     if (fixedValue !== null) {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fraction-fixed", children: fixedValue });
     }
     const isDroppedHere = droppedInputs.has(subKey);
+    const slotClass = slotStatus ? ` widget--${slotStatus}` : statusClass;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Droppable,
       {
@@ -13121,7 +13139,7 @@ const FractionInput = ({
         children: isDroppedHere && currentValue !== "" ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: `inline-input-chip fraction-chip${statusClass}`,
+            className: `inline-input-chip fraction-chip${slotClass}`,
             onClick: () => onChange(subKey, "", false),
             title: "Click to remove",
             children: currentValue
@@ -13131,21 +13149,23 @@ const FractionInput = ({
           {
             id: `${subKey}-input`,
             type: "text",
-            className: `inline-input fraction-input${statusClass}`,
+            className: `inline-input fraction-input${slotClass}`,
             value: currentValue,
             onChange: (e) => onChange(subKey, e.target.value, false),
             onFocus: () => onFocus?.(subKey),
-            maxLength: 4,
-            "aria-label": label
+            maxLength: placeholder ? Math.max(20, placeholder.length) : 4,
+            size: placeholder ? placeholder.length : void 0,
+            "aria-label": label,
+            placeholder
           }
         )
       }
     );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "fraction", role: "math", "aria-label": `fraction ${widgetId}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fraction-numerator", children: renderSlot(numKey, numerator, numValue, "numerator") }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fraction-numerator", children: renderSlot(numKey, numerator, numValue, "numerator", numValidationStatus) }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fraction-bar", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fraction-denominator", children: renderSlot(denKey, denominator, denValue, "denominator") })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fraction-denominator", children: renderSlot(denKey, denominator, denValue, "denominator", denValidationStatus) })
   ] });
 };
 function isLightColor(hex) {
@@ -13417,7 +13437,9 @@ const GridShape = ({
     className: "visual-fraction-widget__parts visual-fraction-widget__parts--horizontal",
     style: {
       "--visual-fraction-divisions": divisions,
-      "--visual-fraction-grid-cols": getGridColumnCount(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__ */ jsxRuntime.jsx(
       "div",
@@ -13567,7 +13589,7 @@ const VisualFraction = ({
     [divisions, filledCount, filledPartGroups, partAssignments, answer, filledPalette, answerPalette]
   );
   const statusClass = validationStatus ? ` visual-fraction-widget--${validationStatus} widget--${validationStatus}` : "";
-  const rootStyle = React.useMemo(() => getSizeStyle(widget.size, shape), [widget.size, shape]);
+  const rootStyle = React.useMemo(() => getSizeStyle(widget.size), [widget.size, shape]);
   const ShapeComponent = SHAPE_COMPONENTS[shape];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -13592,15 +13614,10 @@ const VisualFraction = ({
   );
 };
 VisualFraction.displayName = "VisualFraction";
-function getSizeStyle(size, shape) {
+function getSizeStyle(size, _shape) {
   if (size === void 0) return void 0;
-  if (shape === "circle" || shape === "triangle") {
-    return {
-      "--visual-fraction-size": `${size * VISUAL_FRACTION_SVG_SIZE_SCALE}rem`
-    };
-  }
   return {
-    "--visual-fraction-part-size": `${size}rem`
+    "--visual-fraction-size": `${size * VISUAL_FRACTION_SVG_SIZE_SCALE}rem`
   };
 }
 const RadioOptions = ({
@@ -13802,6 +13819,8 @@ const WidgetRenderer = ({
   values = {},
   isDropped = false,
   validationStatus = null,
+  numValidationStatus = null,
+  denValidationStatus = null,
   droppedInputs = /* @__PURE__ */ new Set(),
   widgets,
   onChange,
@@ -13880,8 +13899,11 @@ const WidgetRenderer = ({
         values,
         droppedInputs,
         validationStatus,
+        numValidationStatus,
+        denValidationStatus,
         onChange,
-        onFocus: onInputFocus
+        onFocus: onInputFocus,
+        placeholder: widget.placeholder
       }
     );
   }
@@ -13931,7 +13953,7 @@ const getMajorTicks = (min, max, step) => {
   const count = Math.floor((max - min) / step);
   const ticks = Array.from({ length: count + 1 }, (_, i) => cleanFloat(min + i * step));
   const lastTick = ticks[ticks.length - 1];
-  if (!almostEqual(lastTick, max)) {
+  if (roundTick(lastTick) !== roundTick(max)) {
     ticks.push(max);
   } else {
     ticks[ticks.length - 1] = max;
@@ -14542,7 +14564,7 @@ const NumberLineRenderer = ({
     return step;
   }, [counter, counterCount, min, max, step]);
   const majorTicks = React.useMemo(
-    () => getMajorTicks(min, max, effectiveStep).map(roundTick),
+    () => [...new Set(getMajorTicks(min, max, effectiveStep).map(roundTick))],
     [min, max, effectiveStep]
   );
   const minorValues = React.useMemo(
@@ -14551,16 +14573,17 @@ const NumberLineRenderer = ({
   );
   const showArrowRight = lineStyle === "arrow-right" || lineStyle === "arrow-both";
   const showArrowLeft = lineStyle === "arrow-left" || lineStyle === "arrow-both";
-  const isDragMode = Boolean(widgets[DRAG_OPTIONS_WIDGET_ID]);
+  const hasDragOptions = Boolean(widgets[DRAG_OPTIONS_WIDGET_ID]);
+  const isAxisDragMode = hasDragOptions && item.dragMode === "axis";
   const inputTickSet = React.useMemo(() => {
-    if (isDragMode) return /* @__PURE__ */ new Set();
+    if (isAxisDragMode) return /* @__PURE__ */ new Set();
     return new Set(
       positions.filter((pos) => getPositionWidgetId(pos.content) !== null).map((pos) => roundTick(pos.value))
     );
-  }, [isDragMode, positions]);
+  }, [isAxisDragMode, positions]);
   const visiblePositions = React.useMemo(
-    () => positions.filter((pos) => !isDragMode || getPositionWidgetId(pos.content) === null),
-    [isDragMode, positions]
+    () => positions.filter((pos) => !isAxisDragMode || getPositionWidgetId(pos.content) === null),
+    [isAxisDragMode, positions]
   );
   const visiblePositionIds = React.useMemo(
     () => visiblePositions.map((pos) => pos.id),
@@ -14570,7 +14593,7 @@ const NumberLineRenderer = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `number-line${isDragMode ? " number-line--drag-mode" : ""}${lineStyle === "line" ? " number-line--style-line" : ""}`,
+      className: `number-line${isAxisDragMode ? " number-line--drag-mode" : ""}${lineStyle === "line" ? " number-line--style-line" : ""}`,
       style: {
         [CSS_VAR_SIDE_PAD]: `${SIDE_PAD}%`,
         ...positionContentHeight && { "--nl-position-content-height": positionContentHeight }
@@ -14600,7 +14623,7 @@ const NumberLineRenderer = ({
           },
           pos.id
         )) }),
-        isDragMode ? /* @__PURE__ */ jsxRuntime.jsx(
+        isAxisDragMode ? /* @__PURE__ */ jsxRuntime.jsx(
           FreeDragAxis,
           {
             axisDropId: `${item.id}--nl-axis`,
@@ -14711,6 +14734,7 @@ function groupLineItems(items) {
   }
   return groups;
 }
+const toValidationStatus = (v) => v === true ? "correct" : v === false ? "incorrect" : null;
 const LayoutRenderer = ({
   item,
   widgets,
@@ -14726,8 +14750,10 @@ const LayoutRenderer = ({
       const hasArabic = isArabic(item.value);
       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `question-text ${hasArabic ? "question-text-arabic" : ""}`, children: item.value });
     }
-    case JSON_TYPES.TEXT:
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-item ${isArabic(item.value) ? "text-item-arabic" : "text-item-not-arabic"}`, children: item.value });
+    case JSON_TYPES.TEXT: {
+      const isNum = /^[\d.,\s]+$/.test(item.value);
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-item ${isNum ? "text-item-number" : ""} ${isArabic(item.value) ? "text-item-arabic" : "text-item-not-arabic"}`, children: item.value });
+    }
     case JSON_TYPES.HIGHLIGHTED_TEXT: {
       const hasArabic = isArabic(item.value);
       const dirAttr = !hasArabic ? "ltr" : void 0;
@@ -14794,6 +14820,8 @@ const LayoutRenderer = ({
           values,
           isDropped: droppedInputs.has(item.widgetId),
           validationStatus,
+          numValidationStatus: toValidationStatus(validationDetails?.[`${item.widgetId}__num`]),
+          denValidationStatus: toValidationStatus(validationDetails?.[`${item.widgetId}__den`]),
           droppedInputs,
           widgets,
           onChange,
@@ -14899,6 +14927,27 @@ const ExerciseRenderer = React.forwardRef(({
       for (const [id, v] of Object.entries(result.details)) {
         details[id] = v.isCorrect;
       }
+      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]) {
+          if (widget.numerator === null) details[`${widgetId}__num`] = true;
+          if (widget.denominator === null) details[`${widgetId}__den`] = true;
+        } else {
+          if (widget.numerator === null) {
+            const u = values[`${widgetId}__num`];
+            details[`${widgetId}__num`] = typeof u === "string" && u !== "" && normalize(u) === normalize(expectedNum);
+          }
+          if (widget.denominator === null) {
+            const u = values[`${widgetId}__den`];
+            details[`${widgetId}__den`] = typeof u === "string" && u !== "" && normalize(u) === normalize(expectedDen);
+          }
+        }
+      }
       setValidationDetails(details);
       onSubmit?.(values);
       return result;