@mathscan/math-exercise-engine 1.1.9 → 1.1.10

package/dist/index.js

@@ -15245,19 +15245,21 @@ const DragOptions = ({
   options,
   onOptionClick
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(PillBackground, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-options", children: options.map((option, idx) => {
-    const optionId = `drag-option-${idx}`;
-    const optionValue = String(option);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SingleDragOption,
-      {
-        optionId,
-        value: optionValue,
-        onOptionClick
-      },
-      optionId
-    );
-  }) }) });
+  const [shuffledOptions] = React.useState(
+    () => lodashExports.shuffle(options.map((option, idx) => ({
+      optionId: `drag-option-${idx}`,
+      value: String(option)
+    })))
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PillBackground, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-options", children: shuffledOptions.map(({ optionId, value }) => /* @__PURE__ */ jsxRuntime.jsx(
+    SingleDragOption,
+    {
+      optionId,
+      value,
+      onOptionClick
+    },
+    optionId
+  )) }) });
 };
 const InlineDragOption = ({
   widgetId,
@@ -15841,7 +15843,8 @@ const RadioOptions = ({
   onChange
 }) => {
   const playSound = useSound();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "radio-options", children: options.map((option, idx) => {
+  const [shuffledOptions] = React.useState(() => lodashExports.shuffle(options));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "radio-options", children: shuffledOptions.map((option, idx) => {
     const isSelected = value === option;
     const statusClass = isSelected && validationStatus ? ` widget--${validationStatus}` : "";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17420,6 +17423,11 @@ function getArrowArcLayouts(arrows, min, max) {
   }
   return sorted.sort((a, b) => a.index - b.index);
 }
+function getArrowArcsRowHeight(layouts) {
+  if (layouts.length === 0) return 0;
+  const levelCount = Math.max(...layouts.map((layout) => layout.level)) + 1;
+  return levelCount * ARROW_ARC_LEVEL_HEIGHT;
+}
 function useElementWidth() {
   const ref = React.useRef(null);
   const [width, setWidth] = React.useState(0);
@@ -17520,9 +17528,8 @@ const ArrowArc = ({
   );
 };
 const ArrowArcsRow = ({
-  arrows,
-  min,
-  max,
+  layouts,
+  rowHeight,
   widgets,
   values,
   droppedInputs,
@@ -17530,14 +17537,12 @@ const ArrowArcsRow = ({
   onChange,
   onInputFocus
 }) => {
-  const layouts = React.useMemo(() => getArrowArcLayouts(arrows, min, max), [arrows, min, max]);
   if (layouts.length === 0) return null;
-  const levelCount = Math.max(...layouts.map((layout) => layout.level)) + 1;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: "number-line-arrow-arcs-row",
-      style: { height: `${levelCount * ARROW_ARC_LEVEL_HEIGHT}px` },
+      style: { height: `${rowHeight}px` },
       children: layouts.map((layout) => /* @__PURE__ */ jsxRuntime.jsx(
         ArrowArc,
         {
@@ -17728,6 +17733,15 @@ const NumberLineRenderer = ({
     [visiblePositions]
   );
   const { positionContentHeight, getPositionContentRef } = useMeasuredPositionContentHeight(visiblePositionIds);
+  const arrowArcLayouts = React.useMemo(
+    () => getArrowArcLayouts(arrows, min, max),
+    [arrows, min, max]
+  );
+  const arrowArcsRowHeight = React.useMemo(
+    () => getArrowArcsRowHeight(arrowArcLayouts),
+    [arrowArcLayouts]
+  );
+  const hasOverlayRow = arrowArcsRowHeight > 0 || visiblePositions.length > 0;
   const nlValidationStatus = React.useMemo(() => {
     if (!validationDetails || counter === void 0) return null;
     if (counter.answer === void 0) return null;
@@ -17757,40 +17771,48 @@ const NumberLineRenderer = ({
       role: "group",
       "aria-label": `Number line from ${min} to ${max}`,
       children: [
-        visiblePositions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-content-row", children: visiblePositions.map((pos) => /* @__PURE__ */ jsxRuntime.jsx(
+        hasOverlayRow && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            ref: getPositionContentRef(pos.id),
-            className: "number-line-position-content",
-            style: { left: `${toPercent(pos.value, min, max)}%` },
-            children: pos.content.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(
-              LayoutRenderer,
-              {
-                item: subItem,
-                widgets,
-                values,
-                droppedInputs,
-                validationDetails,
-                onChange,
-                onInputFocus
-              },
-              subItem.id
-            ))
-          },
-          pos.id
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ArrowArcsRow,
-          {
-            arrows,
-            min,
-            max,
-            widgets,
-            values,
-            droppedInputs,
-            validationDetails,
-            onChange,
-            onInputFocus
+            className: "number-line-overlays-row",
+            style: { "--nl-arrow-arcs-row-height": `${arrowArcsRowHeight}px` },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ArrowArcsRow,
+                {
+                  layouts: arrowArcLayouts,
+                  rowHeight: arrowArcsRowHeight,
+                  widgets,
+                  values,
+                  droppedInputs,
+                  validationDetails,
+                  onChange,
+                  onInputFocus
+                }
+              ),
+              visiblePositions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-content-row", children: visiblePositions.map((pos) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: getPositionContentRef(pos.id),
+                  className: "number-line-position-content",
+                  style: { left: `${toPercent(pos.value, min, max)}%` },
+                  children: pos.content.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(
+                    LayoutRenderer,
+                    {
+                      item: subItem,
+                      widgets,
+                      values,
+                      droppedInputs,
+                      validationDetails,
+                      onChange,
+                      onInputFocus
+                    },
+                    subItem.id
+                  ))
+                },
+                pos.id
+              )) })
+            ]
           }
         ),
         isAxisDragMode ? /* @__PURE__ */ jsxRuntime.jsx(