catchup-library-web 2.2.0 → 2.2.2

package/dist/index.js

@@ -6558,6 +6558,7 @@ var OrderingActivityMaterialContent = ({
   });
   const { screenSize } = useScreenSize_default();
   const [view, setView] = (0, import_react23.useState)("PC");
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react23.useState)(answerMap);
   (0, import_react23.useEffect)(() => {
     if (!screenSize) return;
     if (screenSize.width <= 1024) {
@@ -6567,11 +6568,16 @@ var OrderingActivityMaterialContent = ({
     }
   }, [screenSize]);
   (0, import_react23.useEffect)(() => {
-    if (!showCorrectAnswer) return;
-    Object.keys(answerMap).forEach((answerKey, index) => {
-      answerMap[answerKey] = index;
-    });
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      const correctAnswerMap = {};
+      Object.keys(answerMap).forEach((answerKey, index) => {
+        correctAnswerMap[answerKey] = index;
+      });
+      setDisplayAnswerMap(correctAnswerMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap]);
   const checkAnswerState = (correctAnswer, learnerAnswer) => {
     if (!isPreview) return null;
     if (correctAnswer === learnerAnswer) {
@@ -6688,7 +6694,7 @@ var OrderingActivityMaterialContent = ({
               transform: "translate(-50%, -50%)"
             },
             children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-              materialMap[answerMap[draggedKey]]
+              materialMap[displayAnswerMap[draggedKey]]
             ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               "span",
               {
@@ -6700,7 +6706,7 @@ var OrderingActivityMaterialContent = ({
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
-                src: materialMap[answerMap[draggedKey]],
+                src: materialMap[displayAnswerMap[draggedKey]],
                 canFullScreen: false
               },
               `${uniqueValue}-drag-mouse`
@@ -6717,7 +6723,7 @@ var OrderingActivityMaterialContent = ({
               transform: "translate(-50%, -50%)"
             },
             children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-              materialMap[answerMap[draggedKey]]
+              materialMap[displayAnswerMap[draggedKey]]
             ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               "span",
               {
@@ -6729,16 +6735,16 @@ var OrderingActivityMaterialContent = ({
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
-                src: materialMap[answerMap[draggedKey]],
+                src: materialMap[displayAnswerMap[draggedKey]],
                 canFullScreen: false
               },
               `${uniqueValue}-drag-touch`
             ) })
           }
         ),
-        Object.keys(answerMap).map((materialKey, index) => {
+        Object.keys(displayAnswerMap).map((materialKey, index) => {
           const learnerAnswerState = checkAnswerState(
-            answerMap[materialKey] + "",
+            displayAnswerMap[materialKey] + "",
             index + ""
           );
           return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
@@ -6774,7 +6780,7 @@ var OrderingActivityMaterialContent = ({
                         className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer p-3 ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
                         onClick: () => handleSelectItem(materialKey),
                         children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                          materialMap[answerMap[materialKey]]
+                          materialMap[displayAnswerMap[materialKey]]
                         ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                           "span",
                           {
@@ -6786,7 +6792,7 @@ var OrderingActivityMaterialContent = ({
                           ShowMaterialMediaByContentType_default,
                           {
                             contentType: contentMap.type,
-                            src: materialMap[answerMap[materialKey]],
+                            src: materialMap[displayAnswerMap[materialKey]],
                             canFullScreen: true
                           },
                           `${uniqueValue}-${index}`
@@ -6866,6 +6872,7 @@ var TrueFalseActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const [shuffleOptionList, setShuffleOptionList] = (0, import_react24.useState)([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react24.useState)(answerMap);
   (0, import_react24.useEffect)(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
@@ -6877,9 +6884,12 @@ var TrueFalseActivityMaterialContent = ({
     }
   }, []);
   (0, import_react24.useEffect)(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = materialMap;
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      setDisplayAnswerMap(materialMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, materialMap, answerMap]);
   const checkAnswerState = (correctAnswer, learnerAnswer) => {
     if (!isPreview) return null;
     if (correctAnswer === learnerAnswer) {
@@ -6898,7 +6908,7 @@ var TrueFalseActivityMaterialContent = ({
       const correctAnswer = materialMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
-      const learnerAnswer = answerMap.trueList.find(
+      const learnerAnswer = displayAnswerMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
       const learnerAnswerState = checkAnswerState(
@@ -6932,7 +6942,7 @@ var TrueFalseActivityMaterialContent = ({
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 BaseImage_default,
                 {
-                  src: answerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
+                  src: displayAnswerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
                   alt: "checkbox",
                   size: "small",
                   onClick: () => {
@@ -6943,7 +6953,7 @@ var TrueFalseActivityMaterialContent = ({
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 BaseImage_default,
                 {
-                  src: answerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
+                  src: displayAnswerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
                   alt: "checkbox",
                   size: "small",
                   onClick: () => {
@@ -6957,11 +6967,11 @@ var TrueFalseActivityMaterialContent = ({
         index
       );
     }) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      answerMap.trueList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+      displayAnswerMap.trueList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { children: item }) }),
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "underline", children: i18n_default.t("true") }) })
       ] })),
-      answerMap.falseList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+      displayAnswerMap.falseList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { children: item }) }),
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))

package/dist/index.mjs

@@ -6335,6 +6335,7 @@ var OrderingActivityMaterialContent = ({
   });
   const { screenSize } = useScreenSize_default();
   const [view, setView] = useState22("PC");
+  const [displayAnswerMap, setDisplayAnswerMap] = useState22(answerMap);
   useEffect13(() => {
     if (!screenSize) return;
     if (screenSize.width <= 1024) {
@@ -6344,11 +6345,16 @@ var OrderingActivityMaterialContent = ({
     }
   }, [screenSize]);
   useEffect13(() => {
-    if (!showCorrectAnswer) return;
-    Object.keys(answerMap).forEach((answerKey, index) => {
-      answerMap[answerKey] = index;
-    });
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      const correctAnswerMap = {};
+      Object.keys(answerMap).forEach((answerKey, index) => {
+        correctAnswerMap[answerKey] = index;
+      });
+      setDisplayAnswerMap(correctAnswerMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap]);
   const checkAnswerState = (correctAnswer, learnerAnswer) => {
     if (!isPreview) return null;
     if (correctAnswer === learnerAnswer) {
@@ -6465,7 +6471,7 @@ var OrderingActivityMaterialContent = ({
               transform: "translate(-50%, -50%)"
             },
             children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx40("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx40("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-              materialMap[answerMap[draggedKey]]
+              materialMap[displayAnswerMap[draggedKey]]
             ).map((inputPart, index) => /* @__PURE__ */ jsx40(
               "span",
               {
@@ -6477,7 +6483,7 @@ var OrderingActivityMaterialContent = ({
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
-                src: materialMap[answerMap[draggedKey]],
+                src: materialMap[displayAnswerMap[draggedKey]],
                 canFullScreen: false
               },
               `${uniqueValue}-drag-mouse`
@@ -6494,7 +6500,7 @@ var OrderingActivityMaterialContent = ({
               transform: "translate(-50%, -50%)"
             },
             children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx40("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx40("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-              materialMap[answerMap[draggedKey]]
+              materialMap[displayAnswerMap[draggedKey]]
             ).map((inputPart, index) => /* @__PURE__ */ jsx40(
               "span",
               {
@@ -6506,16 +6512,16 @@ var OrderingActivityMaterialContent = ({
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
-                src: materialMap[answerMap[draggedKey]],
+                src: materialMap[displayAnswerMap[draggedKey]],
                 canFullScreen: false
               },
               `${uniqueValue}-drag-touch`
             ) })
           }
         ),
-        Object.keys(answerMap).map((materialKey, index) => {
+        Object.keys(displayAnswerMap).map((materialKey, index) => {
           const learnerAnswerState = checkAnswerState(
-            answerMap[materialKey] + "",
+            displayAnswerMap[materialKey] + "",
             index + ""
           );
           return /* @__PURE__ */ jsx40("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs29(
@@ -6551,7 +6557,7 @@ var OrderingActivityMaterialContent = ({
                         className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer p-3 ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
                         onClick: () => handleSelectItem(materialKey),
                         children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx40("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                          materialMap[answerMap[materialKey]]
+                          materialMap[displayAnswerMap[materialKey]]
                         ).map((inputPart, index2) => /* @__PURE__ */ jsx40(
                           "span",
                           {
@@ -6563,7 +6569,7 @@ var OrderingActivityMaterialContent = ({
                           ShowMaterialMediaByContentType_default,
                           {
                             contentType: contentMap.type,
-                            src: materialMap[answerMap[materialKey]],
+                            src: materialMap[displayAnswerMap[materialKey]],
                             canFullScreen: true
                           },
                           `${uniqueValue}-${index}`
@@ -6643,6 +6649,7 @@ var TrueFalseActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const [shuffleOptionList, setShuffleOptionList] = useState23([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState23(answerMap);
   useEffect14(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
@@ -6654,9 +6661,12 @@ var TrueFalseActivityMaterialContent = ({
     }
   }, []);
   useEffect14(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = materialMap;
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      setDisplayAnswerMap(materialMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, materialMap, answerMap]);
   const checkAnswerState = (correctAnswer, learnerAnswer) => {
     if (!isPreview) return null;
     if (correctAnswer === learnerAnswer) {
@@ -6675,7 +6685,7 @@ var TrueFalseActivityMaterialContent = ({
       const correctAnswer = materialMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
-      const learnerAnswer = answerMap.trueList.find(
+      const learnerAnswer = displayAnswerMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
       const learnerAnswerState = checkAnswerState(
@@ -6709,7 +6719,7 @@ var TrueFalseActivityMaterialContent = ({
               /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx42(
                 BaseImage_default,
                 {
-                  src: answerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
+                  src: displayAnswerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
                   alt: "checkbox",
                   size: "small",
                   onClick: () => {
@@ -6720,7 +6730,7 @@ var TrueFalseActivityMaterialContent = ({
               /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx42(
                 BaseImage_default,
                 {
-                  src: answerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
+                  src: displayAnswerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
                   alt: "checkbox",
                   size: "small",
                   onClick: () => {
@@ -6734,11 +6744,11 @@ var TrueFalseActivityMaterialContent = ({
         index
       );
     }) }) : /* @__PURE__ */ jsxs31(Fragment10, { children: [
-      answerMap.trueList.map((item) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-x-2", children: [
+      displayAnswerMap.trueList.map((item) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ jsx42("div", { className: "flex-1", children: /* @__PURE__ */ jsx42("p", { children: item }) }),
         /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "underline", children: i18n_default.t("true") }) })
       ] })),
-      answerMap.falseList.map((item) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-x-2", children: [
+      displayAnswerMap.falseList.map((item) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ jsx42("div", { className: "flex-1", children: /* @__PURE__ */ jsx42("p", { children: item }) }),
         /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))

package/package.json

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

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

@@ -32,6 +32,7 @@ const OrderingActivityMaterialContent = ({
   });
   const { screenSize } = useScreenSize();
   const [view, setView] = useState("PC");
+  const [displayAnswerMap, setDisplayAnswerMap] = useState<any>(answerMap);
 
   useEffect(() => {
     if (!screenSize) return;
@@ -43,11 +44,16 @@ const OrderingActivityMaterialContent = ({
   }, [screenSize]);
 
   useEffect(() => {
-    if (!showCorrectAnswer) return;
-    Object.keys(answerMap).forEach((answerKey, index) => {
-      answerMap[answerKey] = index;
-    });
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      const correctAnswerMap: any = {};
+      Object.keys(answerMap).forEach((answerKey, index) => {
+        correctAnswerMap[answerKey] = index;
+      });
+      setDisplayAnswerMap(correctAnswerMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap]);
 
   const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
     if (!isPreview) return null;
@@ -197,7 +203,7 @@ const OrderingActivityMaterialContent = ({
             <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg">
               <p className="text-xl whitespace-pre-wrap">
                 {constructInputWithSpecialExpressionList(
-                  materialMap[answerMap[draggedKey]]
+                  materialMap[displayAnswerMap[draggedKey]]
                 ).map((inputPart, index) => (
                   <span
                     key={index}
@@ -221,7 +227,7 @@ const OrderingActivityMaterialContent = ({
               <ShowMaterialMediaByContentType
                 key={`${uniqueValue}-drag-mouse`}
                 contentType={contentMap.type}
-                src={materialMap[answerMap[draggedKey]]}
+                src={materialMap[displayAnswerMap[draggedKey]]}
                 canFullScreen={false}
               />
             </div>
@@ -242,7 +248,7 @@ const OrderingActivityMaterialContent = ({
             <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg">
               <p className="text-xl whitespace-pre-wrap">
                 {constructInputWithSpecialExpressionList(
-                  materialMap[answerMap[draggedKey]]
+                  materialMap[displayAnswerMap[draggedKey]]
                 ).map((inputPart, index) => (
                   <span
                     key={index}
@@ -266,7 +272,7 @@ const OrderingActivityMaterialContent = ({
               <ShowMaterialMediaByContentType
                 key={`${uniqueValue}-drag-touch`}
                 contentType={contentMap.type}
-                src={materialMap[answerMap[draggedKey]]}
+                src={materialMap[displayAnswerMap[draggedKey]]}
                 canFullScreen={false}
               />
             </div>
@@ -274,9 +280,9 @@ const OrderingActivityMaterialContent = ({
         </div>
       )}
 
-      {Object.keys(answerMap).map((materialKey, index) => {
+      {Object.keys(displayAnswerMap).map((materialKey, index) => {
         const learnerAnswerState = checkAnswerState(
-          answerMap[materialKey] + "",
+          displayAnswerMap[materialKey] + "",
           index + ""
         );
         return (
@@ -348,7 +354,7 @@ const OrderingActivityMaterialContent = ({
                   {contentMap.type === "TEXT" ? (
                     <p className="text-xl whitespace-pre-wrap">
                       {constructInputWithSpecialExpressionList(
-                        materialMap[answerMap[materialKey]]
+                        materialMap[displayAnswerMap[materialKey]]
                       ).map((inputPart, index) => (
                         <span
                           key={index}
@@ -370,7 +376,7 @@ const OrderingActivityMaterialContent = ({
                     <ShowMaterialMediaByContentType
                       key={`${uniqueValue}-${index}`}
                       contentType={contentMap.type}
-                      src={materialMap[answerMap[materialKey]]}
+                      src={materialMap[displayAnswerMap[materialKey]]}
                       canFullScreen={true}
                     />
                   )}

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

@@ -19,6 +19,7 @@ const TrueFalseActivityMaterialContent = ({
   showCorrectAnswer,
 }: ITrueFalseActivityMaterialProps) => {
   const [shuffleOptionList, setShuffleOptionList] = useState<any[]>([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState<any>(answerMap);
 
   useEffect(() => {
     const optionList = [];
@@ -32,9 +33,12 @@ const TrueFalseActivityMaterialContent = ({
   }, []);
 
   useEffect(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = materialMap;
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      setDisplayAnswerMap(materialMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, materialMap, answerMap]);
 
   const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
     if (!isPreview) return null;
@@ -72,7 +76,7 @@ const TrueFalseActivityMaterialContent = ({
                 ? "TRUE"
                 : "FALSE";
             const learnerAnswer =
-              answerMap.trueList.find(
+              displayAnswerMap.trueList.find(
                 (trueItem: string) => trueItem === shuffleOption
               ) !== undefined
                 ? "TRUE"
@@ -130,7 +134,7 @@ const TrueFalseActivityMaterialContent = ({
                     <div className="flex flex-col items-center justify-center">
                       <BaseImage
                         src={
-                          answerMap.trueList.includes(shuffleOption)
+                          displayAnswerMap.trueList.includes(shuffleOption)
                             ? "/icons/checkbox.webp"
                             : "/icons/checkbox-empty.webp"
                         }
@@ -146,7 +150,7 @@ const TrueFalseActivityMaterialContent = ({
                     <div className="flex flex-col items-center justify-center">
                       <BaseImage
                         src={
-                          answerMap.falseList.includes(shuffleOption)
+                          displayAnswerMap.falseList.includes(shuffleOption)
                             ? "/icons/checkbox.webp"
                             : "/icons/checkbox-empty.webp"
                         }
@@ -165,7 +169,7 @@ const TrueFalseActivityMaterialContent = ({
         </div>
       ) : (
         <>
-          {answerMap.trueList.map((item: string) => (
+          {displayAnswerMap.trueList.map((item: string) => (
             <div className="flex flex-row items-center gap-x-2">
               <div className="flex-1">
                 <p>{item}</p>
@@ -175,7 +179,7 @@ const TrueFalseActivityMaterialContent = ({
               </div>
             </div>
           ))}
-          {answerMap.falseList.map((item: string) => (
+          {displayAnswerMap.falseList.map((item: string) => (
             <div className="flex flex-row items-center gap-x-2">
               <div className="flex-1">
                 <p>{item}</p>