catchup-library-web 2.7.8 → 2.7.10

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,
@@ -5027,7 +5027,13 @@ var DropdownActivityContent = ({
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
-        answerMap: currentAnswerMap,
+        answerMap: showCorrectAnswer ? Object.keys(dropdownMaterialMap).reduce(
+          (acc, key) => {
+            acc[key] = Object.keys(dropdownMaterialMap[key])[0];
+            return acc;
+          },
+          {}
+        ) : currentAnswerMap,
         contentMap,
         templateType: "DROPDOWN"
       }
@@ -5299,7 +5305,7 @@ var FillInTheBlanksActivityMaterialContent = ({
             )
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
-            const learnerAnswerState = !isPreview ? null : checkAnswerState(
+            const learnerAnswerState = !isPreview ? null : !showCorrectAnswer ? null : checkAnswerState(
               JSON.parse(materialMap[materialKey]),
               displayAnswerMap[materialKey]
             );
@@ -5451,7 +5457,14 @@ var FillInTheBlanksActivityContent = ({
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
-        answerMap: currentAnswerMap,
+        answerMap: showCorrectAnswer ? Object.keys(fillInTheBlanksMaterialMap).reduce(
+          (acc, key) => {
+            const parsed = JSON.parse(fillInTheBlanksMaterialMap[key]);
+            acc[key] = parsed[0];
+            return acc;
+          },
+          {}
+        ) : currentAnswerMap,
         contentMap,
         templateType: "FILL_IN_THE_BLANKS"
       }
@@ -7088,7 +7101,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",
             {
@@ -7227,16 +7240,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);
@@ -7258,7 +7277,7 @@ var TrueFalseActivityMaterialContent = ({
       const learnerAnswer = displayAnswerMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
-      const learnerAnswerState = !isPreview ? null : checkAnswerState(correctAnswer, learnerAnswer);
+      const learnerAnswerState = !isPreview ? null : !showCorrectAnswer ? null : checkAnswerState(correctAnswer, learnerAnswer);
       return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "div",
         {

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,
@@ -4787,7 +4787,13 @@ var DropdownActivityContent = ({
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
-        answerMap: currentAnswerMap,
+        answerMap: showCorrectAnswer ? Object.keys(dropdownMaterialMap).reduce(
+          (acc, key) => {
+            acc[key] = Object.keys(dropdownMaterialMap[key])[0];
+            return acc;
+          },
+          {}
+        ) : currentAnswerMap,
         contentMap,
         templateType: "DROPDOWN"
       }
@@ -5059,7 +5065,7 @@ var FillInTheBlanksActivityMaterialContent = ({
             )
           ) }),
           /* @__PURE__ */ jsx30("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
-            const learnerAnswerState = !isPreview ? null : checkAnswerState(
+            const learnerAnswerState = !isPreview ? null : !showCorrectAnswer ? null : checkAnswerState(
               JSON.parse(materialMap[materialKey]),
               displayAnswerMap[materialKey]
             );
@@ -5211,7 +5217,14 @@ var FillInTheBlanksActivityContent = ({
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
-        answerMap: currentAnswerMap,
+        answerMap: showCorrectAnswer ? Object.keys(fillInTheBlanksMaterialMap).reduce(
+          (acc, key) => {
+            const parsed = JSON.parse(fillInTheBlanksMaterialMap[key]);
+            acc[key] = parsed[0];
+            return acc;
+          },
+          {}
+        ) : currentAnswerMap,
         contentMap,
         templateType: "FILL_IN_THE_BLANKS"
       }
@@ -6848,7 +6861,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",
             {
@@ -6972,7 +6985,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 = ({
@@ -6987,16 +7000,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);
@@ -7018,7 +7037,7 @@ var TrueFalseActivityMaterialContent = ({
       const learnerAnswer = displayAnswerMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
-      const learnerAnswerState = !isPreview ? null : checkAnswerState(correctAnswer, learnerAnswer);
+      const learnerAnswerState = !isPreview ? null : !showCorrectAnswer ? null : checkAnswerState(correctAnswer, learnerAnswer);
       return /* @__PURE__ */ jsxs34(
         "div",
         {
@@ -7283,7 +7302,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { useEffect as useEffect16, useRef as useRef8, 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";
@@ -7400,7 +7419,7 @@ var ActivityPreviewByData = ({
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
-  const prevDataStringRef = useRef8("");
+  const prevDataStringRef = useRef9("");
   useEffect16(() => {
     if (activityTemplateTypeList.length === 0) return;
     const dataString = JSON.stringify(data);

package/package.json

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

package/src/components/activities/DropdownActivityContent.tsx

@@ -44,7 +44,17 @@ const DropdownActivityContent = ({
       <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`}>
         <ActivityBodyContent
           bodyMap={dropdownBodyMap}
-          answerMap={currentAnswerMap} // Use local state instead of function call
+          answerMap={
+            showCorrectAnswer
+              ? Object.keys(dropdownMaterialMap).reduce(
+                  (acc: any, key: string) => {
+                    acc[key] = Object.keys(dropdownMaterialMap[key])[0];
+                    return acc;
+                  },
+                  {},
+                )
+              : currentAnswerMap
+          }
           contentMap={contentMap}
           templateType={"DROPDOWN"}
         />

package/src/components/activities/FillInTheBlanksActivityContent.tsx

@@ -73,7 +73,18 @@ const FillInTheBlanksActivityContent = ({
       <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`}>
         <ActivityBodyContent
           bodyMap={fillInTheBlanksBodyMap}
-          answerMap={currentAnswerMap}
+          answerMap={
+            showCorrectAnswer
+              ? Object.keys(fillInTheBlanksMaterialMap).reduce(
+                  (acc: any, key: string) => {
+                    const parsed = JSON.parse(fillInTheBlanksMaterialMap[key]);
+                    acc[key] = parsed[0];
+                    return acc;
+                  },
+                  {},
+                )
+              : currentAnswerMap
+          }
           contentMap={contentMap}
           templateType={"FILL_IN_THE_BLANKS"}
         />

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

@@ -311,10 +311,12 @@ const FillInTheBlanksActivityMaterialContent = ({
         {Object.keys(displayAnswerMap).map((materialKey, index) => {
           const learnerAnswerState = !isPreview
             ? null
-            : checkAnswerState(
-                JSON.parse(materialMap[materialKey]),
-                displayAnswerMap[materialKey],
-              );
+            : !showCorrectAnswer
+              ? null
+              : checkAnswerState(
+                  JSON.parse(materialMap[materialKey]),
+                  displayAnswerMap[materialKey],
+                );
           return (
             <div key={index} className="w-full md:w-1/2">
               <div className="mx-2">

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) {
@@ -77,7 +83,9 @@ const TrueFalseActivityMaterialContent = ({
 
             const learnerAnswerState = !isPreview
               ? null
-              : checkAnswerState(correctAnswer, learnerAnswer);
+              : !showCorrectAnswer
+                ? null
+                : checkAnswerState(correctAnswer, learnerAnswer);
 
             return (
               <div