catchup-library-web 2.7.7 → 2.7.9

package/dist/index.js

@@ -4891,7 +4891,7 @@ var DropdownActivityMaterialContent = ({
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
       (materialKey, index) => {
         const answerKey = Object.keys(materialMap[materialKey])[0];
-        const learnerAnswerState = !isPreview ? null : checkAnswerState(answerKey, displayAnswerMap[materialKey]);
+        const learnerAnswerState = !isPreview ? null : !showCorrectAnswer ? null : checkAnswerState(answerKey, displayAnswerMap[materialKey]);
         return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "text-xl", children: [
             parseFloat(materialKey) + 1,
@@ -6393,7 +6393,8 @@ var MCMAActivityMaterialContent = ({
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DividerLine_default, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
-          const foundAnswer = displayAnswerMap[materialKey].find(
+          const currentDisplayAnswerList = displayAnswerMap[materialKey] || [];
+          const foundAnswer = currentDisplayAnswerList.find(
             (learnerAnswer) => learnerAnswer === materialSubKey
           );
           const learnerAnswerState = !isPreview ? "HIDDEN" : materialSubKey !== foundAnswer ? "EMPTY" : checkAnswerState(correctAnswerList, foundAnswer);
@@ -6411,7 +6412,7 @@ var MCMAActivityMaterialContent = ({
                 /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   BaseImage_default,
                   {
-                    src: displayAnswerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
+                    src: currentDisplayAnswerList.includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
                     alt: "checkbox",
                     size: "small",
                     onClick: () => {
@@ -6442,7 +6443,7 @@ var MCMAActivityMaterialContent = ({
           );
         }
       ) }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-        displayAnswerMap[materialKey]
+        displayAnswerMap[materialKey] || ""
       ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "span",
         {
@@ -7087,7 +7088,7 @@ var OrderingActivityMaterialContent = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
-          const learnerAnswerState = !isPreview ? null : checkAnswerState(displayAnswerMap[materialKey] + "", index + "");
+          const learnerAnswerState = !isPreview ? null : !showCorrectAnswer ? null : checkAnswerState(displayAnswerMap[materialKey] + "", index + "");
           return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
             "div",
             {
@@ -7226,16 +7227,22 @@ var TrueFalseActivityMaterialContent = ({
 }) => {
   const [shuffleOptionList, setShuffleOptionList] = (0, import_react26.useState)([]);
   const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react26.useState)(answerMap);
+  const hasShuffledRef = (0, import_react26.useRef)(false);
   (0, import_react26.useEffect)(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
-    if (isPreview) {
-      setShuffleOptionList(optionList);
+    if (!hasShuffledRef.current) {
+      if (isPreview) {
+        setShuffleOptionList(optionList);
+      } else {
+        setShuffleOptionList(shuffleArray(optionList));
+      }
+      hasShuffledRef.current = true;
     } else {
-      setShuffleOptionList(shuffleArray(optionList));
+      setShuffleOptionList(optionList);
     }
-  }, []);
+  }, [materialMap]);
   (0, import_react26.useEffect)(() => {
     if (showCorrectAnswer) {
       setDisplayAnswerMap(materialMap);
@@ -7639,8 +7646,12 @@ var ActivityPreviewByData = ({
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
+  const prevDataStringRef = (0, import_react27.useRef)("");
   (0, import_react27.useEffect)(() => {
     if (activityTemplateTypeList.length === 0) return;
+    const dataString = JSON.stringify(data);
+    if (dataString === prevDataStringRef.current) return;
+    prevDataStringRef.current = dataString;
     const currentAnswerMapMap = {};
     for (const activityTemplateMap of activityTemplateTypeList) {
       if (answerType === activityTemplateMap.type) {

package/dist/index.mjs

@@ -4651,7 +4651,7 @@ var DropdownActivityMaterialContent = ({
     /* @__PURE__ */ jsx28("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx28("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
       (materialKey, index) => {
         const answerKey = Object.keys(materialMap[materialKey])[0];
-        const learnerAnswerState = !isPreview ? null : checkAnswerState(answerKey, displayAnswerMap[materialKey]);
+        const learnerAnswerState = !isPreview ? null : !showCorrectAnswer ? null : checkAnswerState(answerKey, displayAnswerMap[materialKey]);
         return /* @__PURE__ */ jsx28("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx28("div", { className: "mx-2", children: /* @__PURE__ */ jsxs18("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
           /* @__PURE__ */ jsx28("div", { className: "my-auto", children: /* @__PURE__ */ jsxs18("p", { className: "text-xl", children: [
             parseFloat(materialKey) + 1,
@@ -6153,7 +6153,8 @@ var MCMAActivityMaterialContent = ({
       /* @__PURE__ */ jsx36("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx36(DividerLine_default, {}) }),
       /* @__PURE__ */ jsx36("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ jsx36("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
-          const foundAnswer = displayAnswerMap[materialKey].find(
+          const currentDisplayAnswerList = displayAnswerMap[materialKey] || [];
+          const foundAnswer = currentDisplayAnswerList.find(
             (learnerAnswer) => learnerAnswer === materialSubKey
           );
           const learnerAnswerState = !isPreview ? "HIDDEN" : materialSubKey !== foundAnswer ? "EMPTY" : checkAnswerState(correctAnswerList, foundAnswer);
@@ -6171,7 +6172,7 @@ var MCMAActivityMaterialContent = ({
                 /* @__PURE__ */ jsx36(
                   BaseImage_default,
                   {
-                    src: displayAnswerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
+                    src: currentDisplayAnswerList.includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
                     alt: "checkbox",
                     size: "small",
                     onClick: () => {
@@ -6202,7 +6203,7 @@ var MCMAActivityMaterialContent = ({
           );
         }
       ) }) : /* @__PURE__ */ jsx36("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-        displayAnswerMap[materialKey]
+        displayAnswerMap[materialKey] || ""
       ).map((inputPart, index2) => /* @__PURE__ */ jsx36(
         "span",
         {
@@ -6847,7 +6848,7 @@ var OrderingActivityMaterialContent = ({
           }
         ),
         /* @__PURE__ */ jsx42("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
-          const learnerAnswerState = !isPreview ? null : checkAnswerState(displayAnswerMap[materialKey] + "", index + "");
+          const learnerAnswerState = !isPreview ? null : !showCorrectAnswer ? null : checkAnswerState(displayAnswerMap[materialKey] + "", index + "");
           return /* @__PURE__ */ jsx42("div", { className: "w-full", children: /* @__PURE__ */ jsxs32(
             "div",
             {
@@ -6971,7 +6972,7 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
-import { useEffect as useEffect15, useState as useState25 } from "react";
+import { useEffect as useEffect15, useRef as useRef8, useState as useState25 } from "react";
 import { InlineMath as InlineMath10 } from "react-katex";
 import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
@@ -6986,16 +6987,22 @@ var TrueFalseActivityMaterialContent = ({
 }) => {
   const [shuffleOptionList, setShuffleOptionList] = useState25([]);
   const [displayAnswerMap, setDisplayAnswerMap] = useState25(answerMap);
+  const hasShuffledRef = useRef8(false);
   useEffect15(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
-    if (isPreview) {
-      setShuffleOptionList(optionList);
+    if (!hasShuffledRef.current) {
+      if (isPreview) {
+        setShuffleOptionList(optionList);
+      } else {
+        setShuffleOptionList(shuffleArray(optionList));
+      }
+      hasShuffledRef.current = true;
     } else {
-      setShuffleOptionList(shuffleArray(optionList));
+      setShuffleOptionList(optionList);
     }
-  }, []);
+  }, [materialMap]);
   useEffect15(() => {
     if (showCorrectAnswer) {
       setDisplayAnswerMap(materialMap);
@@ -7282,7 +7289,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { useEffect as useEffect16, useState as useState26 } from "react";
+import { useEffect as useEffect16, useRef as useRef9, useState as useState26 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
 import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -7399,8 +7406,12 @@ var ActivityPreviewByData = ({
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
+  const prevDataStringRef = useRef9("");
   useEffect16(() => {
     if (activityTemplateTypeList.length === 0) return;
+    const dataString = JSON.stringify(data);
+    if (dataString === prevDataStringRef.current) return;
+    prevDataStringRef.current = dataString;
     const currentAnswerMapMap = {};
     for (const activityTemplateMap of activityTemplateTypeList) {
       if (answerType === activityTemplateMap.type) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.7.7",
+  "version": "2.7.9",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/ActivityPreviewByData.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import DropdownActivityContent from "./DropdownActivityContent";
 import FillInTheBlanksActivityContent from "./FillInTheBlanksActivityContent";
 import GroupingActivityContent from "./GroupingActivityContent";
@@ -102,8 +102,12 @@ const ActivityPreviewByData = ({
     setSelectedType(optionList[0].id);
   }, [optionList]);
 
+  const prevDataStringRef = useRef<string>("");
   useEffect(() => {
     if (activityTemplateTypeList.length === 0) return;
+    const dataString = JSON.stringify(data);
+    if (dataString === prevDataStringRef.current) return;
+    prevDataStringRef.current = dataString;
     const currentAnswerMapMap: any = {};
     for (const activityTemplateMap of activityTemplateTypeList) {
       if (answerType === activityTemplateMap.type) {

package/src/components/activities/material-contents/DropdownActivityMaterialContent.tsx

@@ -55,7 +55,9 @@ const DropdownActivityMaterialContent = ({
             const answerKey = Object.keys(materialMap[materialKey])[0];
             const learnerAnswerState = !isPreview
               ? null
-              : checkAnswerState(answerKey, displayAnswerMap[materialKey]);
+              : !showCorrectAnswer
+                ? null
+                : checkAnswerState(answerKey, displayAnswerMap[materialKey]);
             return (
               <div key={index} className="w-full md:w-1/2">
                 <div className="mx-2">

package/src/components/activities/material-contents/MCMAActivityMaterialContent.tsx

@@ -56,7 +56,8 @@ const MCMAActivityMaterialContent = ({
             <div className="flex flex-row w-full flex-wrap ">
               {materialMap[materialKey].map(
                 (materialSubKey: string, index: number) => {
-                  const foundAnswer = displayAnswerMap[materialKey].find(
+                  const currentDisplayAnswerList = displayAnswerMap[materialKey] || [];
+                  const foundAnswer = currentDisplayAnswerList.find(
                     (learnerAnswer: string) => learnerAnswer === materialSubKey
                   );
                   const learnerAnswerState = !isPreview
@@ -84,7 +85,7 @@ const MCMAActivityMaterialContent = ({
                     >
                       <BaseImage
                         src={
-                          displayAnswerMap[materialKey].includes(materialSubKey)
+                          currentDisplayAnswerList.includes(materialSubKey)
                             ? "/icons/checkbox.webp"
                             : "/icons/checkbox-empty.webp"
                         }
@@ -131,7 +132,7 @@ const MCMAActivityMaterialContent = ({
           ) : (
             <p key={materialKey} className="text-xl">
               {constructInputWithSpecialExpressionList(
-                displayAnswerMap[materialKey]
+                displayAnswerMap[materialKey] || ""
               ).map((inputPart, index) => (
                 <span
                   key={index}

package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx

@@ -256,7 +256,9 @@ const OrderingActivityMaterialContent = ({
       {Object.keys(displayAnswerMap).map((materialKey, index) => {
         const learnerAnswerState = !isPreview
           ? null
-          : checkAnswerState(displayAnswerMap[materialKey] + "", index + "");
+          : !showCorrectAnswer
+            ? null
+            : checkAnswerState(displayAnswerMap[materialKey] + "", index + "");
         return (
           <div className="w-full" key={index}>
             <div

package/src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import i18n from "../../../language/i18n";
 import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
 import { InlineMath } from "react-katex";
@@ -21,16 +21,22 @@ const TrueFalseActivityMaterialContent = ({
   const [shuffleOptionList, setShuffleOptionList] = useState<any[]>([]);
   const [displayAnswerMap, setDisplayAnswerMap] = useState<any>(answerMap);
 
+  const hasShuffledRef = useRef<boolean>(false);
   useEffect(() => {
-    const optionList = [];
+    const optionList: any[] = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
-    if (isPreview) {
-      setShuffleOptionList(optionList);
+    if (!hasShuffledRef.current) {
+      if (isPreview) {
+        setShuffleOptionList(optionList);
+      } else {
+        setShuffleOptionList(shuffleArray(optionList));
+      }
+      hasShuffledRef.current = true;
     } else {
-      setShuffleOptionList(shuffleArray(optionList));
+      setShuffleOptionList(optionList);
     }
-  }, []);
+  }, [materialMap]);
 
   useEffect(() => {
     if (showCorrectAnswer) {