@cuemath/leap 3.2.20-beta-0.2 → 3.2.20

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

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