@cuemath/leap 3.2.2 → 3.2.3-pdb-0.2

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

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