@cuemath/leap 3.5.47-gg6 → 3.5.48-link.0

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

@@ -1,54 +1,54 @@
-import { jsxs as H, jsx as i, Fragment as ke } from "react/jsx-runtime";
-import { memo as Qe, useMemo as S, useState as N, useRef as z, useCallback as Pe, useEffect as R, useLayoutEffect as De } from "react";
-import { IMAGES as Ae } from "../../../../assets/images/images.js";
-import Be from "../../../cue-canvas/cue-canvas.js";
-import Le from "../../../pointer-sync/pointer.js";
-import Ne from "../../../ui/layout/flex-view.js";
-import ze from "../../constants/events.js";
-import { QUESTIONS_GAP as Oe, LEARNOSITY_KEYBOARD_HEIGHT as ve } from "../constants.js";
-import { getPaperColorByQuestion as je, isConceptIntroWidget as Fe, scrollToQuestion as Ue } from "../worksheet-helpers.js";
-import Ke from "./header/header.js";
-import Ve from "./learnosity-question.js";
-import Ge from "./question-backdrop/question-backdrop.js";
-import Xe from "./subjective-review.js";
-import Ye from "./system-intros/advanced-practice-intro.js";
-import Ze from "./system-intros/basic-practice-intro.js";
-import Je from "./system-intros/exit-ticket-intro.js";
-import qe from "./system-intros/regular-practice-intro.js";
-import { QuestionContainerWrapper as et, StimulusReview as tt, QuestionContainer as ot, QuestionWrapper as it, LessonOverviewBanner as rt, CueCanvasWrapper as nt, Hint as st } from "./worksheet-question-styled.js";
-import { useWorksheetStore as at } from "../hooks/use-worksheet-store.js";
-const Ht = Qe(function({
-  question: n,
+import { jsxs as I, jsx as o, Fragment as Le } from "react/jsx-runtime";
+import { memo as Ae, useMemo as g, useState as O, useRef as z, useCallback as Be, useEffect as R, useLayoutEffect as Ne } from "react";
+import { IMAGES as Oe } from "../../../../assets/images/images.js";
+import ze from "../../../cue-canvas/cue-canvas.js";
+import je from "../../../pointer-sync/pointer.js";
+import Se from "../../../ui/layout/flex-view.js";
+import Fe from "../../constants/events.js";
+import { QUESTIONS_GAP as Ue, LEARNOSITY_KEYBOARD_HEIGHT as ye } from "../constants.js";
+import { getPaperColorByQuestion as Ke, isConceptIntroWidget as Ve, scrollToQuestion as Xe } from "../worksheet-helpers.js";
+import Ge from "./header/header.js";
+import Ye from "./learnosity-question.js";
+import Ze from "./question-backdrop/question-backdrop.js";
+import Je from "./subjective-review.js";
+import qe from "./system-intros/advanced-practice-intro.js";
+import et from "./system-intros/basic-practice-intro.js";
+import tt from "./system-intros/exit-ticket-intro.js";
+import ot from "./system-intros/regular-practice-intro.js";
+import { QuestionContainerWrapper as it, StimulusReview as nt, QuestionContainer as rt, QuestionWrapper as st, LessonOverviewBanner as at, CueCanvasWrapper as ct, Hint as ut, Solution as lt } from "./worksheet-question-styled.js";
+import { useWorksheetStore as dt } from "../hooks/use-worksheet-store.js";
+const Tt = Ae(function({
+  question: r,
   response: t,
-  nextQuestionId: Ee,
-  isActive: g,
-  isHidden: I,
-  canRender: O,
+  nextQuestionId: Re,
+  isActive: v,
+  isHidden: W,
+  canRender: j,
   appended: s,
-  intersectionObserver: j
+  intersectionObserver: F
 }) {
   const {
-    behavior: y,
-    layout: F,
+    behavior: _,
+    layout: U,
     userType: c,
-    responses: Se,
-    maxQuestionWidth: U,
-    actionbarHeight: Re,
-    worksheetCompleted: x,
-    learnosity: _,
-    onPublishStrokes: K,
-    onReceiveStrokes: V,
-    initialStrokesData: W,
+    responses: _e,
+    maxQuestionWidth: K,
+    actionbarHeight: $e,
+    worksheetCompleted: E,
+    learnosity: $,
+    onPublishStrokes: V,
+    onReceiveStrokes: X,
+    initialStrokesData: x,
     onPublishMouseMove: G,
-    onSubscribeMouseMove: X,
-    canResolveDoubt: ye,
-    onResolveDoubt: _e,
-    userId: we,
-    studentId: Ce,
-    subjectiveProps: Y,
+    onSubscribeMouseMove: Y,
+    canResolveDoubt: we,
+    onResolveDoubt: Ce,
+    userId: He,
+    studentId: Me,
+    subjectiveProps: Z,
     loggerRef: T,
-    isScribblingEnabled: Z
-  } = at((e) => ({
+    isScribblingEnabled: J
+  } = dt((e) => ({
     behavior: e.behavior,
     layout: e.layout,
     userType: e.userType,
@@ -69,254 +69,282 @@ const Ht = Qe(function({
     subjectiveProps: e.subjectiveProps,
     loggerRef: e.loggerRef,
     isScribblingEnabled: e.scribblingEnabled
-  })), { background: J = "paper" } = F, w = S(
-    () => J === "paper" ? je(n) : void 0,
-    [J, n]
-  ), [C, Me] = N(), [q, $e] = N(), { validation: ee, review: k, maximumAttempts: Q, canExceedAttempts: te, teacherValidationEnabled: P } = y, { minQuestionHeight: He, topOffset: oe, questionsScrollable: ie, renderQuestionHeader: Ie, imageHue: re } = F, {
+  })), { background: q = "paper" } = U, w = g(
+    () => q === "paper" ? Ke(r) : void 0,
+    [q, r]
+  ), [C, Ie] = O(), [ee, We] = O(), {
+    validation: te,
+    review: k,
+    maximumAttempts: Q,
+    canExceedAttempts: oe,
+    teacherValidationEnabled: D,
+    solutionHidden: ie
+  } = _, { minQuestionHeight: xe, topOffset: ne, questionsScrollable: re, renderQuestionHeader: Te, imageHue: se } = U, {
     type: p,
-    response_id: o,
-    stimulus_review: v,
-    item_type: h,
-    instructor_stimulus: ne,
-    metadata: { hints: d, widget_reference: se },
-    item_reference: ae,
-    question_number: ce,
-    item_number: ue,
-    item_display_number: le
-  } = n, M = h === "overview", l = Fe(ne), f = ne === "SystemIntro", D = l || f, me = t == null ? void 0 : t.responseEdited, xe = S(() => {
+    response_id: i,
+    stimulus_review: S,
+    item_type: m,
+    instructor_stimulus: ae,
+    metadata: { hints: h, solution: P, widget_reference: ce },
+    item_reference: ue,
+    question_number: le,
+    item_number: de,
+    item_display_number: me
+  } = r, H = m === "overview", l = Ve(ae), f = ae === "SystemIntro", L = l || f, he = t == null ? void 0 : t.responseEdited, ke = g(() => {
     const e = [];
-    return me && c === "TEACHER" && e.push("attempting"), s || e.push("hidden"), p === "hotspot" && e.push("correct-answers-hidden"), s && P && p === "clozetext" && (!l || c === "STUDENT" ? e.push("response-hidden") : e.push("response-code-hidden")), M && e.push("lesson-overview"), l && e.push("concept-intro"), f && e.push("system-intro"), e.join(" ");
+    return he && c === "TEACHER" && e.push("attempting"), s || e.push("hidden"), p === "hotspot" && e.push("correct-answers-hidden"), s && D && p === "clozetext" && (!l || c === "STUDENT" ? e.push("response-hidden") : e.push("response-code-hidden")), H && e.push("lesson-overview"), l && e.push("concept-intro"), f && e.push("system-intro"), e.join(" ");
   }, [
     s,
     l,
-    M,
+    H,
     f,
     p,
-    me,
-    P,
+    he,
+    D,
     c
-  ]), A = z({}), he = (t == null ? void 0 : t.hintsUsed) ?? 0, $ = z(null), B = z(null), L = S(() => d == null ? void 0 : d.slice(0, he), [d, he]), de = S(() => c === "TEACHER" || x ? !0 : !t || !t.response || t.responseEdited ? !1 : ee, [t, c, ee, x]), fe = S(() => {
+  ]), A = z({}), fe = (t == null ? void 0 : t.hintsUsed) ?? 0, M = z(null), B = z(null), N = g(() => h == null ? void 0 : h.slice(0, fe), [h, fe]), pe = g(() => c === "TEACHER" || E ? !0 : !t || !t.response || t.responseEdited ? !1 : te, [t, c, te, E]), be = g(() => {
     if (c === "TEACHER") return !0;
     if (k) {
       const { attemptsHistory: e } = t ?? {};
-      return ((e == null ? void 0 : e.length) ?? 0) >= Q && !te;
+      return ((e == null ? void 0 : e.length) ?? 0) >= Q && !oe;
     }
     return !1;
-  }, [te, Q, t, k, c]), [pe, We] = N({
+  }, [oe, Q, t, k, c]), Qe = g(
+    () => P && E && !ie,
+    [ie, P, E]
+  ), [ge, De] = O({
     width: 0,
     height: 0
-  }), Te = Pe((e) => {
-    $e(e);
+  }), Pe = Be((e) => {
+    We(e);
   }, []);
   return R(() => {
-    $.current && j.observe($.current);
-  }, [j]), R(() => {
-    if (s && (n.type === "clozeassociation" || n.type === "association" || n.type === "clozeformula")) {
+    M.current && F.observe(M.current);
+  }, [F]), R(() => {
+    if (s && (r.type === "clozeassociation" || r.type === "association" || r.type === "clozeformula")) {
       const e = document.querySelectorAll(
-        `.widget-${n.response_id} .lrn_draggable`
+        `.widget-${r.response_id} .lrn_draggable`
       );
-      let a = 0, r = 0;
+      let a = 0, n = 0;
       e.forEach((u) => {
-        a = Math.max(a, u.clientWidth + 33), r = Math.max(r, u.clientHeight + 1);
-      }), We({
-        width: n.type !== "association" ? a : 0,
-        height: r
+        a = Math.max(a, u.clientWidth + 33), n = Math.max(n, u.clientHeight + 1);
+      }), De({
+        width: r.type !== "association" ? a : 0,
+        height: n
       });
     }
-  }, [s, n.response_id, n.type]), R(() => {
-    if (s && de) {
-      const e = _.question(o);
+  }, [s, r.response_id, r.type]), R(() => {
+    if (s && pe) {
+      const e = $.question(i);
       e && e.validate({
-        showCorrectAnswers: fe
+        showCorrectAnswers: be
       });
     }
-  }, [s, _, o, k, fe, c, de]), R(() => {
+  }, [s, $, i, k, be, c, pe]), R(() => {
     const e = B.current;
-    if (s && e && T.current && A.current[o] === void 0 && !l && !f) {
-      const a = e.clientWidth, r = e.querySelectorAll("*");
-      for (let u = 0; u < r.length; u++) {
-        const m = r[u];
-        if (m != null && m.closest(".resize-sensor"))
+    if (s && e && T.current && A.current[i] === void 0 && !l && !f) {
+      const a = e.clientWidth, n = e.querySelectorAll("*");
+      for (let u = 0; u < n.length; u++) {
+        const d = n[u];
+        if (d != null && d.closest(".resize-sensor"))
           continue;
-        if (((m == null ? void 0 : m.clientWidth) ?? 0) > a) {
-          A.current[o] = !0, T.current(ze.WORKSHEET_V3_GREATER_WIDTH_ELEMENT, {
-            item_reference: ae,
-            widget_reference: se,
+        if (((d == null ? void 0 : d.clientWidth) ?? 0) > a) {
+          A.current[i] = !0, T.current(Fe.WORKSHEET_V3_GREATER_WIDTH_ELEMENT, {
+            item_reference: ue,
+            widget_reference: ce,
             question_type: p,
-            question_number: ce,
-            responseId: o,
-            item_number: ue,
-            item_display_number: le
+            question_number: le,
+            responseId: i,
+            item_number: de,
+            item_display_number: me
           });
           break;
         }
       }
-      A.current[o] = !1;
+      A.current[i] = !1;
     }
   }, [
     s,
     l,
     f,
-    le,
+    me,
+    de,
     ue,
-    ae,
     T,
     p,
-    ce,
-    o,
-    se
+    le,
+    i,
+    ce
   ]), R(() => {
-    const e = $.current, a = (r) => {
-      const u = r.querySelector(".lrn_response_wrapper");
-      if (D || !u)
+    const e = M.current, a = (n) => {
+      const u = n.querySelector(".lrn_response_wrapper");
+      if (L || !u)
         return 0;
-      const m = r.getBoundingClientRect().bottom, E = u.getBoundingClientRect().bottom, b = Math.abs(m - E);
-      return b < ve ? ve - b : 0;
+      const d = n.getBoundingClientRect().bottom, y = u.getBoundingClientRect().bottom, b = Math.abs(d - y);
+      return b < ye ? ye - b : 0;
     };
-    s && e && Me((r) => {
-      var ge;
-      const E = ((ge = n.ui_style) == null ? void 0 : ge.type) === "floating-keyboard" && !(P && p === "clozetext"), b = e.clientHeight;
+    s && e && Ie((n) => {
+      var Ee;
+      const y = ((Ee = r.ui_style) == null ? void 0 : Ee.type) === "floating-keyboard" && !(D && p === "clozetext"), b = e.clientHeight;
       if (b === 0)
-        return r;
-      if (!r)
+        return n;
+      if (!n)
         return Math.ceil(
-          b + (E ? a(e) : 0)
+          b + (y ? a(e) : 0)
         );
-      const be = Math.ceil(
-        b + (E ? a(e) : 0)
+      const ve = Math.ceil(
+        b + (y ? a(e) : 0)
       );
-      return Math.abs(be - r) > 4 ? be : r;
-    }), _.renderMath("mathjax");
-  }), De(() => {
-    !ie && !I && Ue(o);
-  }, [I, ie, o, oe]), /* @__PURE__ */ H(
-    et,
+      return Math.abs(ve - n) > 4 ? ve : n;
+    }), $.renderMath("mathjax");
+  }), Ne(() => {
+    !re && !W && Xe(i);
+  }, [W, re, i, ne]), /* @__PURE__ */ I(
+    it,
     {
-      "data-response-id": o,
-      className: `widget-${o}`,
-      ref: $,
-      $topOffset: oe,
-      $flexDirection: v ? "row" : "column",
-      $alignItems: v ? "flex-start" : "center",
-      $hidden: I,
-      $marginBottom: Oe,
+      "data-response-id": i,
+      className: `widget-${i}`,
+      ref: M,
+      $topOffset: ne,
+      $flexDirection: S ? "row" : "column",
+      $alignItems: S ? "flex-start" : "center",
+      $hidden: W,
+      $marginBottom: Ue,
       children: [
-        v && /* @__PURE__ */ i(
-          tt,
+        S && /* @__PURE__ */ o(
+          nt,
           {
             dangerouslySetInnerHTML: {
-              __html: v
+              __html: S
             }
           }
         ),
-        /* @__PURE__ */ H(
-          ot,
+        /* @__PURE__ */ I(
+          rt,
           {
             ref: B,
-            $width: v ? "50%" : `${U}px`,
-            $minHeight: C ? Math.max(C - 72, q ?? 0) : He,
-            $isActive: g,
+            $width: S ? "50%" : `${K}px`,
+            $minHeight: C ? Math.max(C - 72, ee ?? 0) : xe,
+            $isActive: v,
             $paperColor: w,
-            $opacity: g ? 1 : 0.2,
-            $imageHue: re,
+            $opacity: v ? 1 : 0.2,
+            $imageHue: se,
             children: [
-              g && !!G && !!X && !!y.canvasEnabled && /* @__PURE__ */ i(
-                Le,
+              v && !!G && !!Y && !!_.canvasEnabled && /* @__PURE__ */ o(
+                je,
                 {
                   containerRef: B,
                   onPublish: G,
-                  onSubscribe: X,
-                  responseId: o
+                  onSubscribe: Y,
+                  responseId: i
                 }
               ),
-              /* @__PURE__ */ H(
-                it,
+              /* @__PURE__ */ I(
+                st,
                 {
-                  className: xe,
-                  $dropzoneMinWidth: pe.width,
-                  $dropzoneMinHeight: pe.height,
+                  className: ke,
+                  $dropzoneMinWidth: ge.width,
+                  $dropzoneMinHeight: ge.height,
                   children: [
-                    Ie && !(M || l || f) && /* @__PURE__ */ i(
-                      Ke,
+                    Te && !(H || l || f) && /* @__PURE__ */ o(
+                      Ge,
                       {
-                        question: n,
+                        question: r,
                         response: t,
-                        behavior: y,
+                        behavior: _,
                         paperColor: w,
-                        actionbarHeight: Re,
-                        canResolveDoubt: ye,
-                        onResolveDoubt: _e,
-                        worksheetCompleted: x
+                        actionbarHeight: $e,
+                        canResolveDoubt: we,
+                        onResolveDoubt: Ce,
+                        worksheetCompleted: E
                       }
                     ),
-                    M && /* @__PURE__ */ i(rt, { src: Ae.LESSON_OVERVIEW_BANNER }),
-                    l && w && /* @__PURE__ */ i(Ge, { paperColor: w }),
-                    f ? /* @__PURE__ */ H(ke, { children: [
-                      h === "practice-basic" && /* @__PURE__ */ i(Ze, {}),
-                      h === "practice-regular" && /* @__PURE__ */ i(qe, {}),
-                      h === "exit-ticket" && /* @__PURE__ */ i(Je, {}),
-                      (h == null ? void 0 : h.startsWith("advanced-")) && /* @__PURE__ */ i(Ye, {})
+                    H && /* @__PURE__ */ o(at, { src: Oe.LESSON_OVERVIEW_BANNER }),
+                    l && w && /* @__PURE__ */ o(Ze, { paperColor: w }),
+                    f ? /* @__PURE__ */ I(Le, { children: [
+                      m === "practice-basic" && /* @__PURE__ */ o(et, {}),
+                      m === "practice-regular" && /* @__PURE__ */ o(ot, {}),
+                      m === "exit-ticket" && /* @__PURE__ */ o(tt, {}),
+                      (m == null ? void 0 : m.startsWith("advanced-")) && /* @__PURE__ */ o(qe, {})
                     ] }) : void 0,
-                    /* @__PURE__ */ i(
-                      Ve,
+                    /* @__PURE__ */ o(
+                      Ye,
                       {
                         appended: s,
-                        question: n,
+                        question: r,
                         response: t == null ? void 0 : t.response,
-                        canRender: O || g,
-                        learnosity: _,
+                        canRender: j || v,
+                        learnosity: $,
                         canForceAppend: c === "TEACHER",
                         isConceptIntro: l,
                         simState: t == null ? void 0 : t.simState,
-                        imageHue: re,
+                        imageHue: se,
                         isPuzzle: Q === -2
                       }
                     ),
-                    !D && !!y.canvasEnabled && K && V && C !== void 0 && /* @__PURE__ */ i(nt, { $canScribble: Z, children: /* @__PURE__ */ i(
-                      Be,
+                    !L && !!_.canvasEnabled && V && X && C !== void 0 && /* @__PURE__ */ o(ct, { $canScribble: J, children: /* @__PURE__ */ o(
+                      ze,
                       {
-                        canRender: O,
-                        canScribble: Z && g,
+                        canRender: j,
+                        canScribble: J && v,
                         appended: s,
-                        canvasId: o,
-                        width: U,
-                        height: Math.max(C, q ?? 0),
-                        onUpdateHeight: Te,
-                        onPublish: K,
-                        onSubscribe: V,
-                        userId: we,
-                        initialData: W == null ? void 0 : W[o],
+                        canvasId: i,
+                        width: K,
+                        height: Math.max(C, ee ?? 0),
+                        onUpdateHeight: Pe,
+                        onPublish: V,
+                        onSubscribe: X,
+                        userId: He,
+                        initialData: x == null ? void 0 : x[i],
                         userType: c
                       }
                     ) }),
-                    !D && L && L.length > 0 && /* @__PURE__ */ i(
-                      Ne,
+                    !L && N && N.length > 0 && /* @__PURE__ */ o(
+                      Se,
                       {
                         $background: "BLUE_1",
                         $gutterX: 1,
                         $gapX: 0.5,
                         $borderRadiusX: 0,
                         $borderColor: "BLUE_2",
-                        children: L.map((e, a) => /* @__PURE__ */ i(
-                          st,
+                        children: N.map((e, a) => /* @__PURE__ */ o(
+                          ut,
                           {
                             dangerouslySetInnerHTML: {
-                              __html: `<span style="color: #DA5107; font-weight: 600;">Hint${((d == null ? void 0 : d.length) ?? 0) > 1 ? ` ${a + 1}` : ""}:</span>&nbsp;${e}`
+                              __html: `<span style="color: #DA5107; font-weight: 600;">Hint${((h == null ? void 0 : h.length) ?? 0) > 1 ? ` ${a + 1}` : ""}:</span>&nbsp;${e}`
                             }
                           },
                           e
                         ))
                       }
                     ),
-                    !!Y && /* @__PURE__ */ i(
-                      Xe,
+                    Qe && /* @__PURE__ */ o(
+                      Se,
+                      {
+                        $background: "YELLOW_1",
+                        $gutterX: 1,
+                        $gapX: 0.875,
+                        $borderRadiusX: 0,
+                        $borderColor: "YELLOW_2",
+                        children: /* @__PURE__ */ o(
+                          lt,
+                          {
+                            dangerouslySetInnerHTML: {
+                              __html: `<div style="color: #DA5107; font-weight: 600;">Solution:</div>${P}`
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    !!Z && /* @__PURE__ */ o(
+                      Je,
                       {
-                        responses: Se,
+                        responses: _e,
                         response: t,
-                        nextQuestionId: Ee,
-                        responseId: o,
-                        studentId: Ce,
-                        ...Y
+                        nextQuestionId: Re,
+                        responseId: i,
+                        studentId: Me,
+                        ...Z
                       }
                     )
                   ]
@@ -330,6 +358,6 @@ const Ht = Qe(function({
   );
 });
 export {
-  Ht as default
+  Tt as default
 };
 //# sourceMappingURL=worksheet-question.js.map