@cuemath/leap 3.2.16-pzd-beta-0.5 → 3.2.16-pzd-beta-0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/features/puzzles/app/puzzle-app-styled.js +5 -5
- package/dist/features/puzzles/app/puzzle-app-styled.js.map +1 -1
- package/dist/features/puzzles/app/puzzle-app-view.js +20 -21
- package/dist/features/puzzles/app/puzzle-app-view.js.map +1 -1
- package/dist/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.js +1 -1
- package/dist/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "styled-components";
|
|
2
|
-
import
|
|
2
|
+
import n from "../../../assets/line-icons/icons/hint-fill.js";
|
|
3
3
|
import l from "../../ui/layout/flex-view.js";
|
|
4
|
-
import
|
|
4
|
+
import r from "../../ui/text/text.js";
|
|
5
5
|
import { getPuzzleCardPattern as p } from "../utils/puzzle-pattern.js";
|
|
6
6
|
const f = o(l)(({ theme: t, $visible: i }) => {
|
|
7
7
|
const { gutter: e } = t.layout;
|
|
@@ -16,7 +16,7 @@ const f = o(l)(({ theme: t, $visible: i }) => {
|
|
|
16
16
|
box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: i }) => t.colors[`${i}_4`]};
|
|
17
17
|
max-width: 343px;
|
|
18
18
|
width: 100%;
|
|
19
|
-
min-height:
|
|
19
|
+
min-height: max-content;
|
|
20
20
|
|
|
21
21
|
&::before {
|
|
22
22
|
content: '';
|
|
@@ -29,13 +29,13 @@ const f = o(l)(({ theme: t, $visible: i }) => {
|
|
|
29
29
|
background-size: cover;
|
|
30
30
|
opacity: 0.2;
|
|
31
31
|
}
|
|
32
|
-
`, x = o(
|
|
32
|
+
`, x = o(n)`
|
|
33
33
|
color: ${({ theme: t }) => t.colors.BLACK_1};
|
|
34
34
|
|
|
35
35
|
& .hint-fill-icon-path {
|
|
36
36
|
fill: ${({ theme: t }) => t.colors.WHITE_1};
|
|
37
37
|
}
|
|
38
|
-
`, u = o(
|
|
38
|
+
`, u = o(r)`
|
|
39
39
|
& span {
|
|
40
40
|
font-weight: 700;
|
|
41
41
|
margin-right: 4px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"puzzle-app-styled.js","sources":["../../../../src/features/puzzles/app/puzzle-app-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport HintFillIcon from '../../../assets/line-icons/icons/hint-fill';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\nconst PuzzleAppWrapper = styled(FlexView)<{ $visible: boolean }>(({ theme, $visible }) => {\n const { gutter } = theme.layout;\n\n if (!$visible) {\n return ``;\n }\n\n return `\n overflow: scroll;\n padding-top: ${gutter * 1.5}px;\n padding-bottom: ${gutter * 2}px;\n `;\n});\n\nconst PuzzleContainer = styled(FlexView)<{ $imageHue: THueNames; $backgroundOpacity?: number }>`\n position: relative;\n margin: 0 auto;\n box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n max-width: 343px;\n width: 100%;\n min-height:
|
|
1
|
+
{"version":3,"file":"puzzle-app-styled.js","sources":["../../../../src/features/puzzles/app/puzzle-app-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport HintFillIcon from '../../../assets/line-icons/icons/hint-fill';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\nconst PuzzleAppWrapper = styled(FlexView)<{ $visible: boolean }>(({ theme, $visible }) => {\n const { gutter } = theme.layout;\n\n if (!$visible) {\n return ``;\n }\n\n return `\n overflow: scroll;\n padding-top: ${gutter * 1.5}px;\n padding-bottom: ${gutter * 2}px;\n `;\n});\n\nconst PuzzleContainer = styled(FlexView)<{ $imageHue: THueNames; $backgroundOpacity?: number }>`\n position: relative;\n margin: 0 auto;\n box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n max-width: 343px;\n width: 100%;\n min-height: max-content;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n background-size: cover;\n opacity: 0.2;\n }\n`;\n\nconst StyledHintFillIcon = styled(HintFillIcon)`\n color: ${({ theme }) => theme.colors.BLACK_1};\n\n & .hint-fill-icon-path {\n fill: ${({ theme }) => theme.colors.WHITE_1};\n }\n`;\n\nconst StyledFeedbackText = styled(Text)`\n & span {\n font-weight: 700;\n margin-right: 4px;\n }\n`;\n\nconst PuzzleQuestionWrapper = styled.div`\n color: ${({ theme }) => theme.colors.BLACK};\n font-size: 14px;\n line-height: 1.2;\n font-family: 'Athletics-Regular';\n\n font-weight: 400;\n font-style: normal;\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n list-style-type: initial;\n padding-left: 32px;\n }\n\n ol {\n list-style-type: decimal;\n }\n\n p {\n margin: 0;\n }\n\n li {\n margin: 4px 0;\n }\n\n strong {\n font-weight: 700;\n }\n`;\n\nexport {\n PuzzleAppWrapper,\n PuzzleContainer,\n StyledFeedbackText,\n StyledHintFillIcon,\n PuzzleQuestionWrapper,\n};\n"],"names":["PuzzleAppWrapper","styled","FlexView","theme","$visible","gutter","PuzzleContainer","$imageHue","getPuzzleCardPattern","StyledHintFillIcon","HintFillIcon","StyledFeedbackText","Text","PuzzleQuestionWrapper"],"mappings":";;;;;AASM,MAAAA,IAAmBC,EAAOC,CAAQ,EAAyB,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAClF,QAAA,EAAE,QAAAC,EAAO,IAAIF,EAAM;AAEzB,SAAKC,IAIE;AAAA;AAAA,mBAEUC,IAAS,GAAG;AAAA,sBACTA,IAAS,CAAC;AAAA,MANrB;AAQX,CAAC,GAEKC,IAAkBL,EAAOC,CAAQ;AAAA;AAAA;AAAA,sCAGD,CAAC,EAAE,OAAAC,GAAO,WAAAI,QAAgBJ,EAAM,OAAO,GAAGI,CAAS,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYtE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,GAM9EE,IAAqBR,EAAOS,CAAY;AAAA,WACnC,CAAC,EAAE,OAAAP,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAIzCQ,IAAqBV,EAAOW,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCC,IAAwBZ,EAAO;AAAA,WAC1B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as y, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { memo as A, useRef as S, useCallback as _, useEffect as l, useMemo as $ } from "react";
|
|
3
3
|
import H from "../../ui/image/image.js";
|
|
4
4
|
import M from "../../ui/layout/flex-view.js";
|
|
@@ -15,7 +15,7 @@ const F = (u) => {
|
|
|
15
15
|
}, L = ({
|
|
16
16
|
worksheetData: u,
|
|
17
17
|
loggerRef: t,
|
|
18
|
-
onWorksheetErrored:
|
|
18
|
+
onWorksheetErrored: n,
|
|
19
19
|
imageHue: I,
|
|
20
20
|
onLoaded: p
|
|
21
21
|
}) => {
|
|
@@ -29,22 +29,22 @@ const F = (u) => {
|
|
|
29
29
|
loggerRef: t
|
|
30
30
|
}), E = _(
|
|
31
31
|
(s) => {
|
|
32
|
-
|
|
32
|
+
n({
|
|
33
33
|
code: s.code,
|
|
34
34
|
message: s.detail
|
|
35
35
|
});
|
|
36
36
|
},
|
|
37
|
-
[
|
|
38
|
-
), { learnosity:
|
|
37
|
+
[n]
|
|
38
|
+
), { learnosity: r } = N(w, E, t);
|
|
39
39
|
l(() => {
|
|
40
|
-
i === "error" &&
|
|
40
|
+
i === "error" && n({
|
|
41
41
|
message: f ?? "Error loading worksheet"
|
|
42
42
|
});
|
|
43
|
-
}, [i,
|
|
44
|
-
|
|
45
|
-
}, [
|
|
46
|
-
|
|
47
|
-
}, [
|
|
43
|
+
}, [i, n, f]), l(() => {
|
|
44
|
+
r && t.current(d.WORKSHEET_V3_LEARNOSITY_INITIALIZED);
|
|
45
|
+
}, [r, t]), l(() => {
|
|
46
|
+
r && i === "success" && p && (t.current(d.WORKSHEET_V3_READY), p());
|
|
47
|
+
}, [r, i, t, p]);
|
|
48
48
|
const m = $(() => i === "success" && (o != null && o.learnosityItems) ? (t.current(d.WORKSHEET_V3_READY), V(o.learnosityItems, {
|
|
49
49
|
sectioned: !1,
|
|
50
50
|
adaptive: !1
|
|
@@ -60,12 +60,12 @@ const F = (u) => {
|
|
|
60
60
|
// Add other properties as needed
|
|
61
61
|
}))) : [], [i, o, t]);
|
|
62
62
|
l(() => {
|
|
63
|
-
if (
|
|
63
|
+
if (r && m.length > 0) {
|
|
64
64
|
const c = requestAnimationFrame(() => {
|
|
65
65
|
try {
|
|
66
|
-
|
|
66
|
+
r.renderMath("mathjax");
|
|
67
67
|
} catch (e) {
|
|
68
|
-
|
|
68
|
+
n({
|
|
69
69
|
message: `MathJax rendering failed: ${e instanceof Error ? e.message : "Unknown error"}`
|
|
70
70
|
});
|
|
71
71
|
}
|
|
@@ -74,10 +74,10 @@ const F = (u) => {
|
|
|
74
74
|
cancelAnimationFrame(c);
|
|
75
75
|
};
|
|
76
76
|
}
|
|
77
|
-
}, [
|
|
78
|
-
const
|
|
79
|
-
const { stimulus: c = "", template: e = "", response_id:
|
|
80
|
-
return /* @__PURE__ */
|
|
77
|
+
}, [r, n, m]);
|
|
78
|
+
const T = _((s) => {
|
|
79
|
+
const { stimulus: c = "", template: e = "", response_id: v } = s, h = F(c);
|
|
80
|
+
return /* @__PURE__ */ y(
|
|
81
81
|
M,
|
|
82
82
|
{
|
|
83
83
|
$background: "TRANSPARENT",
|
|
@@ -98,7 +98,7 @@ const F = (u) => {
|
|
|
98
98
|
e && /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a("div", { dangerouslySetInnerHTML: { __html: e } }) })
|
|
99
99
|
]
|
|
100
100
|
},
|
|
101
|
-
|
|
101
|
+
v
|
|
102
102
|
);
|
|
103
103
|
}, []);
|
|
104
104
|
return m.length ? /* @__PURE__ */ a(
|
|
@@ -110,8 +110,7 @@ const F = (u) => {
|
|
|
110
110
|
$imageHue: I,
|
|
111
111
|
$background: "WHITE_1",
|
|
112
112
|
className: "puzzle-app-view-container",
|
|
113
|
-
|
|
114
|
-
children: m.map((s) => /* @__PURE__ */ a("div", { children: y(s) }, `question-${s.response_id}`))
|
|
113
|
+
children: m.map((s) => /* @__PURE__ */ a("div", { children: T(s) }, `question-${s.response_id}`))
|
|
115
114
|
}
|
|
116
115
|
) : null;
|
|
117
116
|
}, U = A(L);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"puzzle-app-view.js","sources":["../../../../src/features/puzzles/app/puzzle-app-view.tsx"],"sourcesContent":["import type {\n ILearnosityError,\n ILearnosityQuestion,\n} from '../../worksheet/worksheet/worksheet-types';\nimport type { IPuzzleAppViewProps } from './puzzle-app-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport EVENTS from '../../worksheet/constants/events';\nimport useLearnosity from '../../worksheet/worksheet/hooks/use-learnosity';\nimport useWorksheetDataHelper from '../../worksheet/worksheet/hooks/use-worksheet-data-helper';\nimport { getQuestionsFromItems } from '../../worksheet/worksheet/worksheet-helpers';\nimport * as Styled from './puzzle-app-styled';\n\nconst extractImageFromHTML = (htmlString: string) => {\n if (!htmlString) return null;\n\n const imgMatch = htmlString.match(/<img[^>]+src=\"([^\">]+)\"/);\n\n return imgMatch ? imgMatch[1] : null;\n};\n\nconst PuzzleAppView: FC<IPuzzleAppViewProps> = ({\n worksheetData,\n loggerRef,\n onWorksheetErrored,\n imageHue,\n onLoaded,\n}) => {\n const { signed_request: itemsSignedRequest, questions_signed_request: questionSignedRequest } =\n worksheetData;\n\n // Ref for the container to trigger MathJax rendering\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Get Learnosity items using the signed_request (not questions_signed_request)\n const {\n loadingState,\n data: learnosityData,\n error: worksheetError,\n } = useWorksheetDataHelper({\n attemptId: undefined,\n signedRequest: itemsSignedRequest,\n loggerRef,\n });\n\n const onLearnosityErrored = useCallback(\n (err: ILearnosityError) => {\n onWorksheetErrored({\n code: err.code,\n message: err.detail,\n });\n },\n [onWorksheetErrored],\n );\n\n // Initialize Learnosity using questions_signed_request (needed for interactive questions)\n const { learnosity } = useLearnosity(questionSignedRequest, onLearnosityErrored, loggerRef);\n\n useEffect(() => {\n if (loadingState === 'error') {\n onWorksheetErrored({\n message: worksheetError ?? 'Error loading worksheet',\n });\n }\n }, [loadingState, onWorksheetErrored, worksheetError]);\n\n // Log when learnosity is ready for future interactive features\n useEffect(() => {\n if (learnosity) {\n loggerRef.current(EVENTS.WORKSHEET_V3_LEARNOSITY_INITIALIZED);\n }\n }, [learnosity, loggerRef]);\n\n useEffect(() => {\n if (learnosity && loadingState === 'success' && onLoaded) {\n loggerRef.current(EVENTS.WORKSHEET_V3_READY);\n onLoaded();\n }\n }, [learnosity, loadingState, loggerRef, onLoaded]);\n\n // Memoize questions processing to prevent re-render loops\n const questions = useMemo(() => {\n // Extract questions from Learnosity items when data is loaded successfully\n if (loadingState === 'success' && learnosityData?.learnosityItems) {\n loggerRef.current(EVENTS.WORKSHEET_V3_READY);\n\n // Convert learnosityItems to questions using the worksheet helper\n const worksheetQuestions = getQuestionsFromItems(learnosityData.learnosityItems, {\n sectioned: false,\n adaptive: false,\n });\n\n // Extract just the Learnosity questions from worksheet questions\n const learnosityQuestions: ILearnosityQuestion[] = worksheetQuestions.map(q => ({\n response_id: q.response_id,\n type: q.type,\n stimulus: q.stimulus,\n template: q.template,\n stimulus_review: q.stimulus_review,\n options: q.options,\n metadata: q.metadata,\n validation: q.validation,\n // Add other properties as needed\n }));\n\n return learnosityQuestions;\n }\n\n return [];\n }, [loadingState, learnosityData, loggerRef]);\n\n // Force MathJax rendering after questions are loaded and rendered\n // Similar to how useLearnosityAppend does it\n useEffect(() => {\n if (learnosity && questions.length > 0) {\n // Use requestAnimationFrame to ensure DOM is updated before rendering math\n const renderMath = () => {\n try {\n learnosity.renderMath('mathjax');\n } catch (error) {\n onWorksheetErrored({\n message: `MathJax rendering failed: ${\n error instanceof Error ? error.message : 'Unknown error'\n }`,\n });\n }\n };\n\n const animationId = requestAnimationFrame(renderMath);\n\n return () => {\n cancelAnimationFrame(animationId);\n };\n }\n }, [learnosity, onWorksheetErrored, questions]);\n\n const renderQuestionContent = useCallback((question: ILearnosityQuestion) => {\n const { stimulus = '', template = '', response_id: responseId } = question;\n const imageUrl = extractImageFromHTML(stimulus);\n\n return (\n <FlexView\n $background=\"TRANSPARENT\"\n key={responseId}\n $alignItems=\"center\"\n className=\"puzzle-app-view-question-card\"\n >\n {/* Main Image or Interactive Content */}\n {imageUrl && (\n <Image\n src={imageUrl}\n alt=\"Puzzle illustration\"\n width={183}\n height={183}\n withLoader={true}\n />\n )}\n\n <Separator heightX={1} />\n\n {/* Question HTML Content */}\n {template && (\n <Styled.PuzzleQuestionWrapper>\n <div dangerouslySetInnerHTML={{ __html: template }} />\n </Styled.PuzzleQuestionWrapper>\n )}\n </FlexView>\n );\n }, []);\n\n if (!questions.length) return null;\n\n return (\n <Styled.PuzzleContainer\n ref={containerRef}\n $gapX={1}\n $gutterX={1}\n $imageHue={imageHue}\n $background=\"WHITE_1\"\n className=\"puzzle-app-view-container\"\n
|
|
1
|
+
{"version":3,"file":"puzzle-app-view.js","sources":["../../../../src/features/puzzles/app/puzzle-app-view.tsx"],"sourcesContent":["import type {\n ILearnosityError,\n ILearnosityQuestion,\n} from '../../worksheet/worksheet/worksheet-types';\nimport type { IPuzzleAppViewProps } from './puzzle-app-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport EVENTS from '../../worksheet/constants/events';\nimport useLearnosity from '../../worksheet/worksheet/hooks/use-learnosity';\nimport useWorksheetDataHelper from '../../worksheet/worksheet/hooks/use-worksheet-data-helper';\nimport { getQuestionsFromItems } from '../../worksheet/worksheet/worksheet-helpers';\nimport * as Styled from './puzzle-app-styled';\n\nconst extractImageFromHTML = (htmlString: string) => {\n if (!htmlString) return null;\n\n const imgMatch = htmlString.match(/<img[^>]+src=\"([^\">]+)\"/);\n\n return imgMatch ? imgMatch[1] : null;\n};\n\nconst PuzzleAppView: FC<IPuzzleAppViewProps> = ({\n worksheetData,\n loggerRef,\n onWorksheetErrored,\n imageHue,\n onLoaded,\n}) => {\n const { signed_request: itemsSignedRequest, questions_signed_request: questionSignedRequest } =\n worksheetData;\n\n // Ref for the container to trigger MathJax rendering\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Get Learnosity items using the signed_request (not questions_signed_request)\n const {\n loadingState,\n data: learnosityData,\n error: worksheetError,\n } = useWorksheetDataHelper({\n attemptId: undefined,\n signedRequest: itemsSignedRequest,\n loggerRef,\n });\n\n const onLearnosityErrored = useCallback(\n (err: ILearnosityError) => {\n onWorksheetErrored({\n code: err.code,\n message: err.detail,\n });\n },\n [onWorksheetErrored],\n );\n\n // Initialize Learnosity using questions_signed_request (needed for interactive questions)\n const { learnosity } = useLearnosity(questionSignedRequest, onLearnosityErrored, loggerRef);\n\n useEffect(() => {\n if (loadingState === 'error') {\n onWorksheetErrored({\n message: worksheetError ?? 'Error loading worksheet',\n });\n }\n }, [loadingState, onWorksheetErrored, worksheetError]);\n\n // Log when learnosity is ready for future interactive features\n useEffect(() => {\n if (learnosity) {\n loggerRef.current(EVENTS.WORKSHEET_V3_LEARNOSITY_INITIALIZED);\n }\n }, [learnosity, loggerRef]);\n\n useEffect(() => {\n if (learnosity && loadingState === 'success' && onLoaded) {\n loggerRef.current(EVENTS.WORKSHEET_V3_READY);\n onLoaded();\n }\n }, [learnosity, loadingState, loggerRef, onLoaded]);\n\n // Memoize questions processing to prevent re-render loops\n const questions = useMemo(() => {\n // Extract questions from Learnosity items when data is loaded successfully\n if (loadingState === 'success' && learnosityData?.learnosityItems) {\n loggerRef.current(EVENTS.WORKSHEET_V3_READY);\n\n // Convert learnosityItems to questions using the worksheet helper\n const worksheetQuestions = getQuestionsFromItems(learnosityData.learnosityItems, {\n sectioned: false,\n adaptive: false,\n });\n\n // Extract just the Learnosity questions from worksheet questions\n const learnosityQuestions: ILearnosityQuestion[] = worksheetQuestions.map(q => ({\n response_id: q.response_id,\n type: q.type,\n stimulus: q.stimulus,\n template: q.template,\n stimulus_review: q.stimulus_review,\n options: q.options,\n metadata: q.metadata,\n validation: q.validation,\n // Add other properties as needed\n }));\n\n return learnosityQuestions;\n }\n\n return [];\n }, [loadingState, learnosityData, loggerRef]);\n\n // Force MathJax rendering after questions are loaded and rendered\n // Similar to how useLearnosityAppend does it\n useEffect(() => {\n if (learnosity && questions.length > 0) {\n // Use requestAnimationFrame to ensure DOM is updated before rendering math\n const renderMath = () => {\n try {\n learnosity.renderMath('mathjax');\n } catch (error) {\n onWorksheetErrored({\n message: `MathJax rendering failed: ${\n error instanceof Error ? error.message : 'Unknown error'\n }`,\n });\n }\n };\n\n const animationId = requestAnimationFrame(renderMath);\n\n return () => {\n cancelAnimationFrame(animationId);\n };\n }\n }, [learnosity, onWorksheetErrored, questions]);\n\n const renderQuestionContent = useCallback((question: ILearnosityQuestion) => {\n const { stimulus = '', template = '', response_id: responseId } = question;\n const imageUrl = extractImageFromHTML(stimulus);\n\n return (\n <FlexView\n $background=\"TRANSPARENT\"\n key={responseId}\n $alignItems=\"center\"\n className=\"puzzle-app-view-question-card\"\n >\n {/* Main Image or Interactive Content */}\n {imageUrl && (\n <Image\n src={imageUrl}\n alt=\"Puzzle illustration\"\n width={183}\n height={183}\n withLoader={true}\n />\n )}\n\n <Separator heightX={1} />\n\n {/* Question HTML Content */}\n {template && (\n <Styled.PuzzleQuestionWrapper>\n <div dangerouslySetInnerHTML={{ __html: template }} />\n </Styled.PuzzleQuestionWrapper>\n )}\n </FlexView>\n );\n }, []);\n\n if (!questions.length) return null;\n\n return (\n <Styled.PuzzleContainer\n ref={containerRef}\n $gapX={1}\n $gutterX={1}\n $imageHue={imageHue}\n $background=\"WHITE_1\"\n className=\"puzzle-app-view-container\"\n >\n {questions.map(question => (\n <div key={`question-${question.response_id}`}>{renderQuestionContent(question)}</div>\n ))}\n </Styled.PuzzleContainer>\n );\n};\n\nexport default memo(PuzzleAppView);\n"],"names":["extractImageFromHTML","htmlString","imgMatch","PuzzleAppView","worksheetData","loggerRef","onWorksheetErrored","imageHue","onLoaded","itemsSignedRequest","questionSignedRequest","containerRef","useRef","loadingState","learnosityData","worksheetError","useWorksheetDataHelper","onLearnosityErrored","useCallback","err","learnosity","useLearnosity","useEffect","EVENTS","questions","useMemo","getQuestionsFromItems","q","animationId","error","renderQuestionContent","question","stimulus","template","responseId","imageUrl","jsxs","FlexView","jsx","Image","Separator","Styled.PuzzleQuestionWrapper","Styled.PuzzleContainer","PuzzleAppView$1","memo"],"mappings":"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"}
|
package/dist/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"puzzle-feedback-celebration.js","sources":["../../../../src/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.tsx"],"sourcesContent":["import type { IPuzzleFeedbackCelebration } from './puzzle-feedback-celebration-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport IconButton from '../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport useModalActions from '../../ui/modals/use-modal-actions';\nimport useModalParams from '../../ui/modals/use-modal-params';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-feedback-celebration-styled';\n\nconst puzzleStickerLottieSettings = {\n autoplay: true,\n loop: true,\n renderer: 'canvas',\n};\n\nconst PuzzleFeedbackCelebration: FC = () => {\n const { closeModal } = useModalActions();\n const { feedbackComments, rewards, onCloseModal } = useModalParams<IPuzzleFeedbackCelebration>();\n\n const [showHeader, setShowHeader] = useState(false);\n const [showLottie, setShowLottie] = useState(false);\n const [showText, setShowText] = useState(false);\n const [showButton, setShowButton] = useState(false);\n\n const { sticker } = rewards[0] || {};\n\n const stickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n const handleCloseModal = useCallback(() => {\n onCloseModal?.();\n closeModal();\n }, [closeModal, onCloseModal]);\n\n useEffect(() => {\n // Sequence: Header -> Lottie -> Text -> Button\n const headerTimer = setTimeout(() => {\n setShowHeader(true);\n }, 100);\n\n const lottieTimer = setTimeout(() => {\n setShowLottie(true);\n }, 400);\n\n const textTimer = setTimeout(() => {\n setShowText(true);\n }, 1000);\n\n const buttonTimer = setTimeout(() => {\n setShowButton(true);\n }, 1500);\n\n // Close modal after 4000ms\n const closeModalTimer = setTimeout(() => {\n handleCloseModal();\n }, 5500);\n\n return () => {\n clearTimeout(headerTimer);\n clearTimeout(lottieTimer);\n clearTimeout(textTimer);\n clearTimeout(buttonTimer);\n clearTimeout(closeModalTimer);\n };\n }, [handleCloseModal]);\n\n return (\n <FlexView $justifyContent=\"center\" $alignItems=\"center\" $width=\"100%\">\n <Styled.PuzzleFeedbackModalWrapper $flexGapX={2.5} $widthX={33.5} $alignItems=\"center\">\n <Styled.ShimmerText $renderAs=\"ac2-black\" $show={showHeader}>\n Puzzle Reviewed\n </Styled.ShimmerText>\n\n <Styled.LottieContainer $widthX={12.5} $heightX={12.5} $show={showLottie}>\n {stickerLottie && (\n <LottieAnimation\n width={200}\n height={200}\n src={stickerLottie}\n settings={puzzleStickerLottieSettings}\n />\n )}\n </Styled.LottieContainer>\n\n <Styled.FeedbackText\n $width=\"80%\"\n $renderAs=\"
|
|
1
|
+
{"version":3,"file":"puzzle-feedback-celebration.js","sources":["../../../../src/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.tsx"],"sourcesContent":["import type { IPuzzleFeedbackCelebration } from './puzzle-feedback-celebration-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport IconButton from '../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport useModalActions from '../../ui/modals/use-modal-actions';\nimport useModalParams from '../../ui/modals/use-modal-params';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-feedback-celebration-styled';\n\nconst puzzleStickerLottieSettings = {\n autoplay: true,\n loop: true,\n renderer: 'canvas',\n};\n\nconst PuzzleFeedbackCelebration: FC = () => {\n const { closeModal } = useModalActions();\n const { feedbackComments, rewards, onCloseModal } = useModalParams<IPuzzleFeedbackCelebration>();\n\n const [showHeader, setShowHeader] = useState(false);\n const [showLottie, setShowLottie] = useState(false);\n const [showText, setShowText] = useState(false);\n const [showButton, setShowButton] = useState(false);\n\n const { sticker } = rewards[0] || {};\n\n const stickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n const handleCloseModal = useCallback(() => {\n onCloseModal?.();\n closeModal();\n }, [closeModal, onCloseModal]);\n\n useEffect(() => {\n // Sequence: Header -> Lottie -> Text -> Button\n const headerTimer = setTimeout(() => {\n setShowHeader(true);\n }, 100);\n\n const lottieTimer = setTimeout(() => {\n setShowLottie(true);\n }, 400);\n\n const textTimer = setTimeout(() => {\n setShowText(true);\n }, 1000);\n\n const buttonTimer = setTimeout(() => {\n setShowButton(true);\n }, 1500);\n\n // Close modal after 4000ms\n const closeModalTimer = setTimeout(() => {\n handleCloseModal();\n }, 5500);\n\n return () => {\n clearTimeout(headerTimer);\n clearTimeout(lottieTimer);\n clearTimeout(textTimer);\n clearTimeout(buttonTimer);\n clearTimeout(closeModalTimer);\n };\n }, [handleCloseModal]);\n\n return (\n <FlexView $justifyContent=\"center\" $alignItems=\"center\" $width=\"100%\">\n <Styled.PuzzleFeedbackModalWrapper $flexGapX={2.5} $widthX={33.5} $alignItems=\"center\">\n <Styled.ShimmerText $renderAs=\"ac2-black\" $show={showHeader}>\n Puzzle Reviewed\n </Styled.ShimmerText>\n\n <Styled.LottieContainer $widthX={12.5} $heightX={12.5} $show={showLottie}>\n {stickerLottie && (\n <LottieAnimation\n width={200}\n height={200}\n src={stickerLottie}\n settings={puzzleStickerLottieSettings}\n />\n )}\n </Styled.LottieContainer>\n\n <Styled.FeedbackText\n $width=\"80%\"\n $renderAs=\"ah4\"\n $color=\"WHITE_1\"\n $align=\"center\"\n $show={showText}\n >\n {feedbackComments}\n </Styled.FeedbackText>\n\n <Styled.CloseButtonWrapper $show={showButton}>\n <IconButton\n renderAs=\"secondary\"\n Icon={CrossIcon}\n size=\"small\"\n analyticsLabel=\"close_puzzle_feedback_modal\"\n onClick={handleCloseModal}\n />\n </Styled.CloseButtonWrapper>\n </Styled.PuzzleFeedbackModalWrapper>\n </FlexView>\n );\n};\n\nexport default PuzzleFeedbackCelebration;\n"],"names":["puzzleStickerLottieSettings","PuzzleFeedbackCelebration","closeModal","useModalActions","feedbackComments","rewards","onCloseModal","useModalParams","showHeader","setShowHeader","useState","showLottie","setShowLottie","showText","setShowText","showButton","setShowButton","sticker","stickerLottie","getPuzzleStickerLottie","handleCloseModal","useCallback","useEffect","headerTimer","lottieTimer","textTimer","buttonTimer","closeModalTimer","FlexView","jsxs","Styled.PuzzleFeedbackModalWrapper","jsx","Styled.ShimmerText","Styled.LottieContainer","LottieAnimation","Styled.FeedbackText","Styled.CloseButtonWrapper","IconButton","CrossIcon","PuzzleFeedbackCelebration$1"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAA8B;AAAA,EAClC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAgC,MAAM;AACpC,QAAA,EAAE,YAAAC,MAAeC,KACjB,EAAE,kBAAAC,GAAkB,SAAAC,GAAS,cAAAC,MAAiBC,EAA2C,GAEzF,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAUC,CAAW,IAAIJ,EAAS,EAAK,GACxC,CAACK,GAAYC,CAAa,IAAIN,EAAS,EAAK,GAE5C,EAAE,SAAAO,EAAQ,IAAIZ,EAAQ,CAAC,KAAK,CAAA,GAE5Ba,IAAgBD,IAAUE,EAAuBF,CAAO,IAAI,QAE5DG,IAAmBC,EAAY,MAAM;AAC1B,IAAAf,KAAA,QAAAA,KACJJ;EAAA,GACV,CAACA,GAAYI,CAAY,CAAC;AAE7B,SAAAgB,EAAU,MAAM;AAER,UAAAC,IAAc,WAAW,MAAM;AACnC,MAAAd,EAAc,EAAI;AAAA,OACjB,GAAG,GAEAe,IAAc,WAAW,MAAM;AACnC,MAAAZ,EAAc,EAAI;AAAA,OACjB,GAAG,GAEAa,IAAY,WAAW,MAAM;AACjC,MAAAX,EAAY,EAAI;AAAA,OACf,GAAI,GAEDY,IAAc,WAAW,MAAM;AACnC,MAAAV,EAAc,EAAI;AAAA,OACjB,IAAI,GAGDW,IAAkB,WAAW,MAAM;AACtB,MAAAP;OAChB,IAAI;AAEP,WAAO,MAAM;AACX,mBAAaG,CAAW,GACxB,aAAaC,CAAW,GACxB,aAAaC,CAAS,GACtB,aAAaC,CAAW,GACxB,aAAaC,CAAe;AAAA,IAAA;AAAA,EAC9B,GACC,CAACP,CAAgB,CAAC,qBAGlBQ,GAAS,EAAA,iBAAgB,UAAS,aAAY,UAAS,QAAO,QAC7D,UAAC,gBAAAC,EAAAC,GAAA,EAAkC,WAAW,KAAK,SAAS,MAAM,aAAY,UAC5E,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAmB,WAAU,aAAY,OAAOxB,GAAY,UAE7D,mBAAA;AAAA,IAEA,gBAAAuB,EAACE,GAAA,EAAuB,SAAS,MAAM,UAAU,MAAM,OAAOtB,GAC3D,UACCO,KAAA,gBAAAa;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,KAAKhB;AAAA,QACL,UAAUlB;AAAA,MAAA;AAAA,IAAA,GAGhB;AAAA,IAEA,gBAAA+B;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAO;AAAA,QACP,OAAOtB;AAAA,QAEN,UAAAT;AAAA,MAAA;AAAA,IACH;AAAA,IAEC,gBAAA2B,EAAAK,GAAA,EAA0B,OAAOrB,GAChC,UAAA,gBAAAgB;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAMC;AAAA,QACN,MAAK;AAAA,QACL,gBAAe;AAAA,QACf,SAASlB;AAAA,MAAA;AAAA,IAAA,GAEb;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEAmB,IAAetC;"}
|