catchup-library-web 2.7.6 → 2.7.8

package/dist/index.js

@@ -5521,7 +5521,6 @@ var GroupingActivityMaterialContent = ({
     };
   }, [draggedValue]);
   (0, import_react21.useEffect)(() => {
-    if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
       const copyArray = JSON.parse(JSON.stringify(array));
       for (let i = copyArray.length - 1; i > 0; i--) {
@@ -5536,8 +5535,12 @@ var GroupingActivityMaterialContent = ({
         materialList.push(materialValue);
       }
     });
-    setShuffledMaterialList(shuffleArray2(materialList));
-    hasShuffledRef.current = true;
+    if (!hasShuffledRef.current) {
+      setShuffledMaterialList(shuffleArray2(materialList));
+      hasShuffledRef.current = true;
+    } else {
+      setShuffledMaterialList(materialList);
+    }
   }, [materialMap]);
   (0, import_react21.useEffect)(() => {
     if (showCorrectAnswer) {
@@ -5969,7 +5972,6 @@ var MatchingActivityMaterialContent = ({
     };
   }, [draggedValue]);
   (0, import_react22.useEffect)(() => {
-    if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
       const copyArray = JSON.parse(JSON.stringify(array));
       for (let i = copyArray.length - 1; i > 0; i--) {
@@ -5982,8 +5984,12 @@ var MatchingActivityMaterialContent = ({
     Object.keys(materialMap).forEach((materialKey) => {
       materialList.push(materialMap[materialKey]);
     });
-    setShuffledMaterialList(shuffleArray2(materialList));
-    hasShuffledRef.current = true;
+    if (!hasShuffledRef.current) {
+      setShuffledMaterialList(shuffleArray2(materialList));
+      hasShuffledRef.current = true;
+    } else {
+      setShuffledMaterialList(materialList);
+    }
   }, [materialMap]);
   (0, import_react22.useEffect)(() => {
     if (showCorrectAnswer) {
@@ -6387,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);
@@ -6405,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: () => {
@@ -6436,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",
         {
@@ -7633,8 +7640,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) {
@@ -7647,7 +7658,7 @@ var ActivityPreviewByData = ({
       }
     }
     setAnswerMapMap(currentAnswerMapMap);
-  }, [activityTemplateTypeList]);
+  }, [activityTemplateTypeList, data]);
   const RenderSelectedActivityContent = () => {
     if (!selectedType) return null;
     const commonProps = {

package/dist/index.mjs

@@ -5281,7 +5281,6 @@ var GroupingActivityMaterialContent = ({
     };
   }, [draggedValue]);
   useEffect10(() => {
-    if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
       const copyArray = JSON.parse(JSON.stringify(array));
       for (let i = copyArray.length - 1; i > 0; i--) {
@@ -5296,8 +5295,12 @@ var GroupingActivityMaterialContent = ({
         materialList.push(materialValue);
       }
     });
-    setShuffledMaterialList(shuffleArray2(materialList));
-    hasShuffledRef.current = true;
+    if (!hasShuffledRef.current) {
+      setShuffledMaterialList(shuffleArray2(materialList));
+      hasShuffledRef.current = true;
+    } else {
+      setShuffledMaterialList(materialList);
+    }
   }, [materialMap]);
   useEffect10(() => {
     if (showCorrectAnswer) {
@@ -5729,7 +5732,6 @@ var MatchingActivityMaterialContent = ({
     };
   }, [draggedValue]);
   useEffect11(() => {
-    if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
       const copyArray = JSON.parse(JSON.stringify(array));
       for (let i = copyArray.length - 1; i > 0; i--) {
@@ -5742,8 +5744,12 @@ var MatchingActivityMaterialContent = ({
     Object.keys(materialMap).forEach((materialKey) => {
       materialList.push(materialMap[materialKey]);
     });
-    setShuffledMaterialList(shuffleArray2(materialList));
-    hasShuffledRef.current = true;
+    if (!hasShuffledRef.current) {
+      setShuffledMaterialList(shuffleArray2(materialList));
+      hasShuffledRef.current = true;
+    } else {
+      setShuffledMaterialList(materialList);
+    }
   }, [materialMap]);
   useEffect11(() => {
     if (showCorrectAnswer) {
@@ -6147,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);
@@ -6165,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: () => {
@@ -6196,7 +6203,7 @@ var MCMAActivityMaterialContent = ({
           );
         }
       ) }) : /* @__PURE__ */ jsx36("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-        displayAnswerMap[materialKey]
+        displayAnswerMap[materialKey] || ""
       ).map((inputPart, index2) => /* @__PURE__ */ jsx36(
         "span",
         {
@@ -7276,7 +7283,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 useRef8, useState as useState26 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
 import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -7393,8 +7400,12 @@ var ActivityPreviewByData = ({
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
+  const prevDataStringRef = useRef8("");
   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) {
@@ -7407,7 +7418,7 @@ var ActivityPreviewByData = ({
       }
     }
     setAnswerMapMap(currentAnswerMapMap);
-  }, [activityTemplateTypeList]);
+  }, [activityTemplateTypeList, data]);
   const RenderSelectedActivityContent = () => {
     if (!selectedType) return null;
     const commonProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.7.6",
+  "version": "2.7.8",
   "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) {
@@ -117,7 +121,7 @@ const ActivityPreviewByData = ({
       }
     }
     setAnswerMapMap(currentAnswerMapMap);
-  }, [activityTemplateTypeList]);
+  }, [activityTemplateTypeList, data]);
 
   const RenderSelectedActivityContent = () => {
     if (!selectedType) return null;

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

@@ -48,8 +48,6 @@ const GroupingActivityMaterialContent = ({
   }, [draggedValue]);
 
   useEffect(() => {
-    if (hasShuffledRef.current) return;
-
     const shuffleArray = (array: any) => {
       const copyArray = JSON.parse(JSON.stringify(array));
       for (let i = copyArray.length - 1; i > 0; i--) {
@@ -66,8 +64,12 @@ const GroupingActivityMaterialContent = ({
       }
     });
 
-    setShuffledMaterialList(shuffleArray(materialList));
-    hasShuffledRef.current = true;
+    if (!hasShuffledRef.current) {
+      setShuffledMaterialList(shuffleArray(materialList));
+      hasShuffledRef.current = true;
+    } else {
+      setShuffledMaterialList(materialList);
+    }
   }, [materialMap]);
 
   useEffect(() => {

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/MatchingActivityMaterialContent.tsx

@@ -48,9 +48,6 @@ const MatchingActivityMaterialContent = ({
   }, [draggedValue]);
 
   useEffect(() => {
-    // Only shuffle once, ever
-    if (hasShuffledRef.current) return;
-
     const shuffleArray = (array: any) => {
       const copyArray = JSON.parse(JSON.stringify(array));
       for (let i = copyArray.length - 1; i > 0; i--) {
@@ -65,8 +62,12 @@ const MatchingActivityMaterialContent = ({
       materialList.push(materialMap[materialKey]);
     });
 
-    setShuffledMaterialList(shuffleArray(materialList));
-    hasShuffledRef.current = true;
+    if (!hasShuffledRef.current) {
+      setShuffledMaterialList(shuffleArray(materialList));
+      hasShuffledRef.current = true;
+    } else {
+      setShuffledMaterialList(materialList);
+    }
   }, [materialMap]);
 
   useEffect(() => {