@cuemath/leap 3.3.3 → 3.3.4-aa1

package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js

@@ -1,330 +1,328 @@
-import { jsxs as L, jsx as i, Fragment as Vt } from "react/jsx-runtime";
-import { memo as Xt, useMemo as p, useState as T, useRef as P, useCallback as jt, useEffect as H, useLayoutEffect as Gt } from "react";
-import { IMAGES as Yt } from "../../../../assets/images/images.js";
-import Zt from "../../../cue-canvas/cue-canvas.js";
-import Jt from "../../../pointer-sync/pointer.js";
-import St from "../../../ui/layout/flex-view.js";
-import kt from "../../constants/events.js";
-import { QUESTIONS_GAP as qt, LEARNOSITY_KEYBOARD_HEIGHT as bt } from "../constants.js";
-import { getPaperColorByQuestion as te, isConceptIntroWidget as ee, scrollToQuestion as Ct } from "../worksheet-helpers.js";
-import ie from "./header/header.js";
-import re from "./learnosity-question.js";
-import oe from "./question-backdrop/question-backdrop.js";
-import ne from "./subjective-review.js";
-import ce from "./system-intros/advanced-practice-intro.js";
-import ae from "./system-intros/basic-practice-intro.js";
-import se from "./system-intros/exit-ticket-intro.js";
-import me from "./system-intros/regular-practice-intro.js";
-import { QuestionContainerWrapper as le, StimulusReview as ue, QuestionContainer as fe, QuestionWrapper as he, LessonOverviewBanner as de, CueCanvasWrapper as ge, Hint as Ee, Solution as _e } from "./worksheet-question-styled.js";
-const Oe = Xt(
+import { jsxs as T, jsx as i, Fragment as Pt } from "react/jsx-runtime";
+import { memo as Vt, useMemo as p, useState as A, useRef as X, useCallback as Xt, useEffect as H, useLayoutEffect as jt } from "react";
+import { IMAGES as Gt } from "../../../../assets/images/images.js";
+import Yt from "../../../cue-canvas/cue-canvas.js";
+import Zt from "../../../pointer-sync/pointer.js";
+import Rt from "../../../ui/layout/flex-view.js";
+import Jt from "../../constants/events.js";
+import { QUESTIONS_GAP as kt, LEARNOSITY_KEYBOARD_HEIGHT as wt } from "../constants.js";
+import { getPaperColorByQuestion as qt, isConceptIntroWidget as te, scrollToQuestion as St } from "../worksheet-helpers.js";
+import ee from "./header/header.js";
+import ie from "./learnosity-question.js";
+import re from "./question-backdrop/question-backdrop.js";
+import oe from "./subjective-review.js";
+import ne from "./system-intros/advanced-practice-intro.js";
+import ce from "./system-intros/basic-practice-intro.js";
+import ae from "./system-intros/exit-ticket-intro.js";
+import se from "./system-intros/regular-practice-intro.js";
+import { QuestionContainerWrapper as le, StimulusReview as me, QuestionContainer as ue, QuestionWrapper as de, LessonOverviewBanner as fe, CueCanvasWrapper as he, Hint as ge, Solution as Ee } from "./worksheet-question-styled.js";
+const Me = Vt(
   ({
     userType: c,
-    signedRequest: Wt,
+    signedRequest: Ct,
     worksheetCompleted: g,
     question: n,
     response: e,
-    nextQuestionId: R,
+    nextQuestionId: b,
     isActive: v,
-    isHidden: A,
-    canRender: V,
-    loggerRef: M,
+    isHidden: M,
+    canRender: j,
+    loggerRef: O,
     appended: a,
-    maxQuestionWidth: X,
-    behavior: j,
-    layout: G,
-    actionbarHeight: yt,
-    learnosity: b,
+    maxQuestionWidth: G,
+    behavior: S,
+    layout: N,
+    actionbarHeight: Wt,
+    learnosity: C,
     intersectionObserver: Y,
-    background: Z = "paper",
-    onMediaStateChange: Bt,
-    onMarkForReview: xt,
-    userId: It,
-    onPublishStrokes: J,
-    onReceiveStrokes: k,
-    isScribblingEnabled: q,
-    initialStrokesData: O,
-    isCanvasEnabled: tt,
-    onPublishMouseMove: et,
-    onSubscribeMouseMove: it,
-    setActiveQuestionId: rt,
-    canResolveDoubt: Lt,
-    onResolveDoubt: Tt,
-    studentId: At,
-    responses: Mt,
-    subjectiveProps: ot
+    onMediaStateChange: yt,
+    onMarkForReview: Bt,
+    userId: xt,
+    onPublishStrokes: Z,
+    onReceiveStrokes: J,
+    isScribblingEnabled: k,
+    initialStrokesData: Q,
+    onPublishMouseMove: q,
+    onSubscribeMouseMove: tt,
+    setActiveQuestionId: et,
+    canResolveDoubt: It,
+    onResolveDoubt: Lt,
+    studentId: Tt,
+    responses: At,
+    subjectiveProps: it
   }) => {
-    const C = p(
-      () => Z === "paper" ? te(n) : void 0,
-      [Z, n]
-    ), [W, Ot] = T(), [nt, Nt] = T(), {
-      validation: ct,
-      review: N,
-      maximumAttempts: Q,
-      canExceedAttempts: at,
-      teacherValidationEnabled: w,
-      solutionHidden: st
-    } = j, { minQuestionHeight: Qt, topOffset: mt, questionsScrollable: y, renderQuestionHeader: zt, imageHue: lt } = G, {
+    const { background: rt = "paper" } = N, W = p(
+      () => rt === "paper" ? qt(n) : void 0,
+      [rt, n]
+    ), [y, Mt] = A(), [ot, Ot] = A(), {
+      validation: nt,
+      review: z,
+      maximumAttempts: F,
+      canExceedAttempts: ct,
+      teacherValidationEnabled: R,
+      solutionHidden: at
+    } = S, { minQuestionHeight: Nt, topOffset: st, questionsScrollable: B, renderQuestionHeader: Qt, imageHue: lt } = N, {
       type: E,
       response_id: r,
       stimulus_review: _,
-      item_type: f,
-      instructor_stimulus: ut,
-      metadata: { hints: h, solution: B, widget_reference: ft },
-      item_reference: ht,
-      question_number: dt,
-      item_number: gt,
-      item_display_number: Et
-    } = n, Ft = !!_, x = f === "overview", l = ee(ut), d = ut === "SystemIntro", z = l || d, _t = e == null ? void 0 : e.responseEdited, Dt = p(() => {
+      item_type: d,
+      instructor_stimulus: mt,
+      metadata: { hints: f, solution: x, widget_reference: ut },
+      item_reference: dt,
+      question_number: ft,
+      item_number: ht,
+      item_display_number: gt
+    } = n, zt = !!_, I = d === "overview", m = te(mt), h = mt === "SystemIntro", D = m || h, Et = e == null ? void 0 : e.responseEdited, Ft = p(() => {
       const t = [];
-      return _t && c === "TEACHER" && t.push("attempting"), a || t.push("hidden"), E === "hotspot" && t.push("correct-answers-hidden"), a && w && E === "clozetext" && (!l || c === "STUDENT" ? t.push("response-hidden") : t.push("response-code-hidden")), x && t.push("lesson-overview"), l && t.push("concept-intro"), d && t.push("system-intro"), t.join(" ");
+      return Et && c === "TEACHER" && t.push("attempting"), a || t.push("hidden"), E === "hotspot" && t.push("correct-answers-hidden"), a && R && E === "clozetext" && (!m || c === "STUDENT" ? t.push("response-hidden") : t.push("response-code-hidden")), I && t.push("lesson-overview"), m && t.push("concept-intro"), h && t.push("system-intro"), t.join(" ");
     }, [
       a,
-      l,
-      x,
-      d,
+      m,
+      I,
+      h,
       E,
-      _t,
-      w,
+      Et,
+      R,
       c
-    ]), F = P({}), D = (e == null ? void 0 : e.hintsUsed) ?? 0, [$t] = T((e == null ? void 0 : e.validatedByTeacher) ?? !1), I = P(null), U = P(null), K = p(() => h == null ? void 0 : h.slice(0, D), [h, D]), pt = p(() => c === "TEACHER" || g ? !0 : !e || !e.response || e.responseEdited ? !1 : ct, [e, c, ct, g]), Ht = p(() => {
+    ]), U = X({}), K = (e == null ? void 0 : e.hintsUsed) ?? 0, [_t] = A((e == null ? void 0 : e.validatedByTeacher) ?? !1), L = X(null), P = X(null), V = p(() => f == null ? void 0 : f.slice(0, K), [f, K]), $t = p(() => c === "TEACHER" || g ? !0 : !e || !e.response || e.responseEdited ? !1 : nt, [e, c, nt, g]), pt = p(() => {
       if (c === "TEACHER") return !0;
-      if (N) {
+      if (z) {
         const { attemptsHistory: t } = e ?? {};
-        return ((t == null ? void 0 : t.length) ?? 0) >= Q && !at;
+        return ((t == null ? void 0 : t.length) ?? 0) >= F && !ct;
       }
       return !1;
-    }, [at, Q, e, N, c]), Ut = p(
-      () => B && g && !st,
-      [st, B, g]
-    ), [Rt, Kt] = T({
+    }, [ct, F, e, z, c]), Dt = p(
+      () => x && g && !at,
+      [at, x, g]
+    ), [Ht, Ut] = A({
       width: 0,
       height: 0
-    }), Pt = jt((t) => {
-      Nt(t);
+    }), Kt = Xt((t) => {
+      Ot(t);
     }, []);
     return H(() => {
-      I.current && Y.observe(I.current);
+      L.current && Y.observe(L.current);
     }, [Y]), H(() => {
       if (a && (n.type === "clozeassociation" || n.type === "association" || n.type === "clozeformula")) {
         const t = document.querySelectorAll(
           `.widget-${n.response_id} .lrn_draggable`
         );
         let s = 0, o = 0;
-        t.forEach((m) => {
-          s = Math.max(s, m.clientWidth + 33), o = Math.max(o, m.clientHeight + 1);
-        }), Kt({
+        t.forEach((l) => {
+          s = Math.max(s, l.clientWidth + 33), o = Math.max(o, l.clientHeight + 1);
+        }), Ut({
           width: n.type !== "association" ? s : 0,
           height: o
         });
       }
     }, [a, n.response_id, n.type]), H(() => {
-      if (a && pt) {
-        const t = b.question(r);
+      if (a && $t) {
+        const t = C.question(r);
         t && t.validate({
-          showCorrectAnswers: Ht
+          showCorrectAnswers: pt
         });
       }
-    }, [a, b, r, N, Ht, c, pt]), H(() => {
-      const t = U.current;
-      if (a && t && M.current && F.current[r] === void 0 && !l && !d) {
+    }, [a, C, r, z, pt, c, $t]), H(() => {
+      const t = P.current;
+      if (a && t && O.current && U.current[r] === void 0 && !m && !h) {
         const s = t.clientWidth, o = t.querySelectorAll("*");
-        for (let m = 0; m < o.length; m++) {
-          const u = o[m];
+        for (let l = 0; l < o.length; l++) {
+          const u = o[l];
           if (u != null && u.closest(".resize-sensor"))
             continue;
           if (((u == null ? void 0 : u.clientWidth) ?? 0) > s) {
-            F.current[r] = !0, M.current(kt.WORKSHEET_V3_GREATER_WIDTH_ELEMENT, {
-              item_reference: ht,
-              widget_reference: ft,
+            U.current[r] = !0, O.current(Jt.WORKSHEET_V3_GREATER_WIDTH_ELEMENT, {
+              item_reference: dt,
+              widget_reference: ut,
               question_type: E,
-              question_number: dt,
+              question_number: ft,
               responseId: r,
-              item_number: gt,
-              item_display_number: Et
+              item_number: ht,
+              item_display_number: gt
             });
             break;
           }
         }
-        F.current[r] = !1;
+        U.current[r] = !1;
       }
     }, [
       a,
-      l,
-      d,
-      Et,
+      m,
+      h,
       gt,
       ht,
-      M,
-      E,
       dt,
+      O,
+      E,
+      ft,
       r,
-      ft
+      ut
     ]), H(() => {
-      const t = I.current, s = (o) => {
-        const m = o.querySelector(".lrn_response_wrapper");
-        if (z || !m)
+      const t = L.current, s = (o) => {
+        const l = o.querySelector(".lrn_response_wrapper");
+        if (D || !l)
           return 0;
-        const u = o.getBoundingClientRect().bottom, S = m.getBoundingClientRect().bottom, $ = Math.abs(u - S);
-        return $ < bt ? bt - $ : 0;
+        const u = o.getBoundingClientRect().bottom, w = l.getBoundingClientRect().bottom, $ = Math.abs(u - w);
+        return $ < wt ? wt - $ : 0;
       };
-      a && t && Ot((o) => {
-        var wt;
-        const S = ((wt = n.ui_style) == null ? void 0 : wt.type) === "floating-keyboard" && !(w && E === "clozetext"), $ = t.clientHeight;
+      a && t && Mt((o) => {
+        var vt;
+        const w = ((vt = n.ui_style) == null ? void 0 : vt.type) === "floating-keyboard" && !(R && E === "clozetext"), $ = t.clientHeight;
         if ($ === 0)
           return o;
         if (!o)
           return Math.ceil(
-            $ + (S ? s(t) : 0)
+            $ + (w ? s(t) : 0)
           );
-        const vt = Math.ceil(
-          $ + (S ? s(t) : 0)
+        const bt = Math.ceil(
+          $ + (w ? s(t) : 0)
         );
-        return Math.abs(vt - o) > 4 ? vt : o;
-      }), (D || Ft || B && g) && b.renderMath("mathjax");
-    }), Gt(() => {
-      !y && !A && Ct(r);
-    }, [A, y, r, mt]), H(() => {
-      if (w && R && !$t && (e != null && e.validatedByTeacher)) {
+        return Math.abs(bt - o) > 4 ? bt : o;
+      }), (K || zt || x && g) && C.renderMath("mathjax");
+    }), jt(() => {
+      !B && !M && St(r);
+    }, [M, B, r, st]), H(() => {
+      if (R && b && !_t && (e != null && e.validatedByTeacher)) {
         const t = setTimeout(() => {
-          y ? Ct(R) : rt(R);
+          B ? St(b) : et(b);
         }, 1e3);
         return () => {
           clearTimeout(t);
         };
       }
     }, [
+      b,
       R,
-      w,
-      $t,
-      y,
-      rt,
+      _t,
+      B,
+      et,
       e == null ? void 0 : e.validatedByTeacher
-    ]), /* @__PURE__ */ L(
+    ]), /* @__PURE__ */ T(
       le,
       {
         "data-response-id": r,
         className: `widget-${r}`,
-        ref: I,
-        $topOffset: mt,
+        ref: L,
+        $topOffset: st,
         $flexDirection: _ ? "row" : "column",
         $alignItems: _ ? "flex-start" : "center",
-        $hidden: A,
-        $marginBottom: qt,
+        $hidden: M,
+        $marginBottom: kt,
         children: [
           _ && /* @__PURE__ */ i(
-            ue,
+            me,
             {
               dangerouslySetInnerHTML: {
                 __html: _
               }
             }
           ),
-          /* @__PURE__ */ L(
-            fe,
+          /* @__PURE__ */ T(
+            ue,
             {
-              ref: U,
-              $width: _ ? "50%" : `${X}px`,
-              $minHeight: W ? Math.max(W - 72, nt ?? 0) : Qt,
+              ref: P,
+              $width: _ ? "50%" : `${G}px`,
+              $minHeight: y ? Math.max(y - 72, ot ?? 0) : Nt,
               $isActive: v,
-              $paperColor: C,
+              $paperColor: W,
               $opacity: v ? 1 : 0.2,
               $imageHue: lt,
               children: [
-                v && !!et && !!it && tt && /* @__PURE__ */ i(
-                  Jt,
+                v && !!q && !!tt && !!S.canvasEnabled && /* @__PURE__ */ i(
+                  Zt,
                   {
-                    containerRef: U,
-                    onPublish: et,
-                    onSubscribe: it,
+                    containerRef: P,
+                    onPublish: q,
+                    onSubscribe: tt,
                     responseId: r
                   }
                 ),
-                /* @__PURE__ */ L(
-                  he,
+                /* @__PURE__ */ T(
+                  de,
                   {
-                    className: Dt,
-                    $dropzoneMinWidth: Rt.width,
-                    $dropzoneMinHeight: Rt.height,
+                    className: Ft,
+                    $dropzoneMinWidth: Ht.width,
+                    $dropzoneMinHeight: Ht.height,
                     children: [
-                      zt && !(x || l || d) && /* @__PURE__ */ i(
-                        ie,
+                      Qt && !(I || m || h) && /* @__PURE__ */ i(
+                        ee,
                         {
                           userType: c,
                           question: n,
                           response: e,
-                          behavior: j,
-                          layout: G,
-                          paperColor: C,
-                          onMarkForReview: xt,
-                          actionbarHeight: yt,
-                          canResolveDoubt: Lt,
-                          onResolveDoubt: Tt,
+                          behavior: S,
+                          layout: N,
+                          paperColor: W,
+                          onMarkForReview: Bt,
+                          actionbarHeight: Wt,
+                          canResolveDoubt: It,
+                          onResolveDoubt: Lt,
                           worksheetCompleted: g
                         }
                       ),
-                      x && /* @__PURE__ */ i(de, { src: Yt.LESSON_OVERVIEW_BANNER }),
-                      l && C && /* @__PURE__ */ i(oe, { paperColor: C }),
-                      d ? /* @__PURE__ */ L(Vt, { children: [
-                        f === "practice-basic" && /* @__PURE__ */ i(ae, {}),
-                        f === "practice-regular" && /* @__PURE__ */ i(me, {}),
-                        f === "exit-ticket" && /* @__PURE__ */ i(se, {}),
-                        (f == null ? void 0 : f.startsWith("advanced-")) && /* @__PURE__ */ i(ce, {})
+                      I && /* @__PURE__ */ i(fe, { src: Gt.LESSON_OVERVIEW_BANNER }),
+                      m && W && /* @__PURE__ */ i(re, { paperColor: W }),
+                      h ? /* @__PURE__ */ T(Pt, { children: [
+                        d === "practice-basic" && /* @__PURE__ */ i(ce, {}),
+                        d === "practice-regular" && /* @__PURE__ */ i(se, {}),
+                        d === "exit-ticket" && /* @__PURE__ */ i(ae, {}),
+                        (d == null ? void 0 : d.startsWith("advanced-")) && /* @__PURE__ */ i(ne, {})
                       ] }) : void 0,
                       /* @__PURE__ */ i(
-                        re,
+                        ie,
                         {
-                          signedRequest: Wt,
+                          signedRequest: Ct,
                           appended: a,
                           question: n,
                           response: e == null ? void 0 : e.response,
-                          canRender: V || v,
-                          learnosity: b,
+                          canRender: j || v,
+                          learnosity: C,
                           canForceAppend: c === "TEACHER",
-                          isConceptIntro: l,
+                          isConceptIntro: m,
                           simState: e == null ? void 0 : e.simState,
-                          onMediaStateChange: Bt,
+                          onMediaStateChange: yt,
                           imageHue: lt,
-                          isPuzzle: Q === -2
+                          isPuzzle: F === -2
                         }
                       ),
-                      !z && tt && J && k && W !== void 0 && /* @__PURE__ */ i(ge, { $canScribble: q, children: /* @__PURE__ */ i(
-                        Zt,
+                      !D && !!S.canvasEnabled && Z && J && y !== void 0 && /* @__PURE__ */ i(he, { $canScribble: k, children: /* @__PURE__ */ i(
+                        Yt,
                         {
-                          canRender: V,
-                          canScribble: q && v,
+                          canRender: j,
+                          canScribble: k && v,
                           appended: a,
                           canvasId: r,
-                          width: X,
-                          height: Math.max(W, nt ?? 0),
-                          onUpdateHeight: Pt,
-                          onPublish: J,
-                          onSubscribe: k,
-                          userId: It,
-                          initialData: O == null ? void 0 : O[r],
+                          width: G,
+                          height: Math.max(y, ot ?? 0),
+                          onUpdateHeight: Kt,
+                          onPublish: Z,
+                          onSubscribe: J,
+                          userId: xt,
+                          initialData: Q == null ? void 0 : Q[r],
                           userType: c
                         }
                       ) }),
-                      !z && K && K.length > 0 && /* @__PURE__ */ i(
-                        St,
+                      !D && V && V.length > 0 && /* @__PURE__ */ i(
+                        Rt,
                         {
                           $background: "BLUE_1",
                           $gutterX: 1,
                           $gapX: 0.5,
                           $borderRadiusX: 0,
                           $borderColor: "BLUE_2",
-                          children: K.map((t, s) => /* @__PURE__ */ i(
-                            Ee,
+                          children: V.map((t, s) => /* @__PURE__ */ i(
+                            ge,
                             {
                               dangerouslySetInnerHTML: {
-                                __html: `<span style="color: #DA5107; font-weight: 600;">Hint${((h == null ? void 0 : h.length) ?? 0) > 1 ? ` ${s + 1}` : ""}:</span>&nbsp;${t}`
+                                __html: `<span style="color: #DA5107; font-weight: 600;">Hint${((f == null ? void 0 : f.length) ?? 0) > 1 ? ` ${s + 1}` : ""}:</span>&nbsp;${t}`
                               }
                             },
                             t
                           ))
                         }
                       ),
-                      Ut && /* @__PURE__ */ i(
-                        St,
+                      Dt && /* @__PURE__ */ i(
+                        Rt,
                         {
                           $background: "YELLOW_1",
                           $gutterX: 1,
@@ -332,25 +330,25 @@ const Oe = Xt(
                           $borderRadiusX: 0,
                           $borderColor: "YELLOW_2",
                           children: /* @__PURE__ */ i(
-                            _e,
+                            Ee,
                             {
                               dangerouslySetInnerHTML: {
-                                __html: `<div style="color: #DA5107; font-weight: 600;">Solution:</div>${B}`
+                                __html: `<div style="color: #DA5107; font-weight: 600;">Solution:</div>${x}`
                               }
                             }
                           )
                         }
                       ),
-                      !!ot && /* @__PURE__ */ i(
-                        ne,
+                      !!it && /* @__PURE__ */ i(
+                        oe,
                         {
-                          responses: Mt,
+                          responses: At,
                           response: e,
-                          nextQuestionId: R,
+                          nextQuestionId: b,
                           responseId: r,
-                          studentId: At,
+                          studentId: Tt,
                           userType: c,
-                          ...ot
+                          ...it
                         }
                       )
                     ]
@@ -365,6 +363,6 @@ const Oe = Xt(
   }
 );
 export {
-  Oe as default
+  Me as default
 };
 //# sourceMappingURL=worksheet-question.js.map