@cuemath/leap 3.2.9-link.0 → 3.2.9-pzd-0.1-testing

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

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