catchup-library-web 2.2.2 → 2.2.4

package/dist/index.mjs

@@ -4348,19 +4348,20 @@ var DropdownActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [updated, setUpdated] = useState15(false);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState15(answerMap);
   useEffect6(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = Object.keys(materialMap).map(
-      (materialMapKey, index) => Object.keys(materialMap[materialMapKey])[0]
-    );
-    onChange(answerMap, 0, Object.keys(materialMap[0])[0]);
-    setUpdated(true);
-  }, [showCorrectAnswer]);
-  useEffect6(() => {
-    if (!updated) return;
-    setUpdated(false);
-  }, [updated]);
+    if (showCorrectAnswer) {
+      const correctAnswerMap = {};
+      Object.keys(materialMap).forEach((materialMapKey) => {
+        correctAnswerMap[materialMapKey] = Object.keys(
+          materialMap[materialMapKey]
+        )[0];
+      });
+      setDisplayAnswerMap(correctAnswerMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap, materialMap]);
   const checkAnswerState = (correctAnswer, learnerAnswer) => {
     if (!isPreview) return null;
     if (correctAnswer === learnerAnswer) {
@@ -4371,66 +4372,66 @@ var DropdownActivityMaterialContent = ({
   return /* @__PURE__ */ jsxs15("div", { className: "flex flex-row flex-wrap items-center", children: [
     /* @__PURE__ */ jsx25("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx25("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
     /* @__PURE__ */ jsx25("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx25(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx25("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
-      const answerKey = Object.keys(materialMap[materialKey])[0];
-      const learnerAnswerState = checkAnswerState(
-        answerKey,
-        answerMap[materialKey]
-      );
-      return /* @__PURE__ */ jsx25("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx25("div", { className: "mx-2", children: /* @__PURE__ */ jsxs15("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-        /* @__PURE__ */ jsx25("div", { className: "my-auto", children: /* @__PURE__ */ jsxs15("p", { className: "text-xl", children: [
-          parseFloat(materialKey) + 1,
-          "."
-        ] }) }),
-        /* @__PURE__ */ jsxs15("div", { className: "w-full relative", children: [
-          /* @__PURE__ */ jsx25("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx25("div", { className: "flex-1", children: /* @__PURE__ */ jsx25(
-            InputGroup_default,
-            {
-              type: "select",
-              value: answerMap[materialKey],
-              optionList: shuffleArray(
-                materialMap[materialKey][answerKey]
-              ).map((materialOption) => ({
-                text: /* @__PURE__ */ jsx25("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                  materialOption
-                ).map((inputPart, index2) => /* @__PURE__ */ jsx25(
-                  "span",
+    /* @__PURE__ */ jsx25("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 = checkAnswerState(
+          answerKey,
+          displayAnswerMap[materialKey]
+        );
+        return /* @__PURE__ */ jsx25("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx25("div", { className: "mx-2", children: /* @__PURE__ */ jsxs15("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+          /* @__PURE__ */ jsx25("div", { className: "my-auto", children: /* @__PURE__ */ jsxs15("p", { className: "text-xl", children: [
+            parseFloat(materialKey) + 1,
+            "."
+          ] }) }),
+          /* @__PURE__ */ jsxs15("div", { className: "w-full relative", children: [
+            /* @__PURE__ */ jsx25("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx25("div", { className: "flex-1", children: /* @__PURE__ */ jsx25(
+              InputGroup_default,
+              {
+                type: "select",
+                value: displayAnswerMap[materialKey],
+                optionList: shuffleArray(
+                  materialMap[materialKey][answerKey]
+                ).map((materialOption) => ({
+                  text: /* @__PURE__ */ jsx25("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    materialOption
+                  ).map((inputPart, index2) => /* @__PURE__ */ jsx25(
+                    "span",
+                    {
+                      className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-xl", children: /* @__PURE__ */ jsx25(
+                        InlineMath2,
+                        {
+                          math: inputPart.value
+                        }
+                      ) }) : inputPart.value
+                    },
+                    index2
+                  )) }),
+                  value: materialOption
+                })),
+                onChange: (e) => {
+                  onChange(
+                    answerMap,
+                    materialKey,
+                    e.target.value
+                  );
+                }
+              }
+            ) }) : /* @__PURE__ */ jsx25(
+              MediaDropdown_default,
+              {
+                id: materialKey,
+                answer: displayAnswerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx25("div", { className: "w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ jsx25("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx25("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx25(
+                  ShowMaterialMediaByContentType_default,
                   {
-                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-xl", children: /* @__PURE__ */ jsx25(
-                      InlineMath2,
-                      {
-                        math: inputPart.value
-                      }
-                    ) }) : inputPart.value
+                    contentType: contentMap.type,
+                    src: displayAnswerMap[materialKey],
+                    canFullScreen: false
                   },
-                  index2
-                )) }),
-                value: materialOption
-              })),
-              onChange: (e) => {
-                onChange(
-                  answerMap,
-                  materialKey,
-                  e.target.value
-                );
-              }
-            }
-          ) }) : /* @__PURE__ */ jsx25(
-            MediaDropdown_default,
-            {
-              id: materialKey,
-              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx25("div", { className: "w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ jsx25("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx25("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx25(
-                ShowMaterialMediaByContentType_default,
-                {
-                  contentType: contentMap.type,
-                  src: answerMap[materialKey],
-                  canFullScreen: false
-                },
-                `${uniqueValue}-${index}`
-              ),
-              optionList: materialMap[materialKey][answerKey].map(
-                (materialOption, index2) => ({
+                  `${uniqueValue}-${index}`
+                ),
+                optionList: materialMap[materialKey][answerKey].map((materialOption, index2) => ({
                   id: index2,
                   media: /* @__PURE__ */ jsx25("div", { children: /* @__PURE__ */ jsx25(
                     ShowMaterialMediaByContentType_default,
@@ -4448,37 +4449,37 @@ var DropdownActivityMaterialContent = ({
                       e.target.currentSrc
                     );
                   }
-                })
-              )
-            }
-          ) : /* @__PURE__ */ jsx25("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-            answerMap[materialKey]
-          ).map((inputPart, index2) => /* @__PURE__ */ jsx25(
-            "span",
-            {
-              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-xl", children: /* @__PURE__ */ jsx25(InlineMath2, { math: inputPart.value }) }) : inputPart.value
-            },
-            index2
-          )) }) }),
-          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx25("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx25(
-            BaseImage_default,
-            {
-              src: "/icons/checkbox.webp",
-              alt: "chekbbox",
-              size: "small"
-            }
-          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx25("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx25(
-            BaseImage_default,
-            {
-              src: "/icons/cross-red.webp",
-              alt: "cross-red",
-              size: "small"
-            }
-          ) }) : null
-        ] })
-      ] }) }) }, index);
-    }) })
+                }))
+              }
+            ) : /* @__PURE__ */ jsx25("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+              displayAnswerMap[materialKey]
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx25(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-xl", children: /* @__PURE__ */ jsx25(InlineMath2, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )) }) }),
+            learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx25("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx25(
+              BaseImage_default,
+              {
+                src: "/icons/checkbox.webp",
+                alt: "chekbbox",
+                size: "small"
+              }
+            ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx25("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx25(
+              BaseImage_default,
+              {
+                src: "/icons/cross-red.webp",
+                alt: "cross-red",
+                size: "small"
+              }
+            ) }) : null
+          ] })
+        ] }) }) }, index);
+      }
+    ) })
   ] });
 };
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
@@ -4585,6 +4586,7 @@ var FillInTheBlanksActivityMaterialContent = ({
   const [draggedElement, setDraggedElement] = useState17(
     null
   );
+  const [displayAnswerMap, setDisplayAnswerMap] = useState17(answerMap);
   const dragElementRef = useRef4(null);
   const [mousePosition, setMousePosition] = useState17({
     x: 0,
@@ -4598,12 +4600,18 @@ var FillInTheBlanksActivityMaterialContent = ({
     setShuffleOptionList(shuffleArray(optionList));
   }, [optionList]);
   useEffect8(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = Object.keys(materialMap).map(
-      (materialMapKey) => JSON.parse(materialMap[materialMapKey])[0]
-    );
-    onChange(answerMap, 0, JSON.parse(materialMap[0])[0]);
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      const correctAnswerMap = {};
+      Object.keys(materialMap).forEach((materialMapKey) => {
+        correctAnswerMap[materialMapKey] = JSON.parse(
+          materialMap[materialMapKey]
+        )[0];
+      });
+      setDisplayAnswerMap(correctAnswerMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap, materialMap]);
   const checkAnswerState = (correctAnswerList, learnerAnswer) => {
     if (!isPreview) return null;
     const foundIndex = correctAnswerList.findIndex(
@@ -4614,8 +4622,10 @@ var FillInTheBlanksActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  const checkAnswerProvided = (answerMap2, option) => {
-    return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
+  const checkAnswerProvided = (currentAnswerMap, option) => {
+    return Object.keys(currentAnswerMap).findIndex(
+      (key) => currentAnswerMap[key] === option
+    ) !== -1;
   };
   const handleMouseDown = (e, option) => {
     e.preventDefault();
@@ -4747,7 +4757,7 @@ var FillInTheBlanksActivityMaterialContent = ({
           }
         ),
         /* @__PURE__ */ jsx28("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
-          (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ jsx28(
+          (option, index) => checkAnswerProvided(displayAnswerMap, option) ? /* @__PURE__ */ jsx28(
             ShowMaterialMediaByContentType_default,
             {
               contentType: contentMap.type,
@@ -4797,10 +4807,10 @@ var FillInTheBlanksActivityMaterialContent = ({
             index
           )
         ) }),
-        /* @__PURE__ */ jsx28("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+        /* @__PURE__ */ jsx28("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
           const learnerAnswerState = checkAnswerState(
             JSON.parse(materialMap[materialKey]),
-            answerMap[materialKey]
+            displayAnswerMap[materialKey]
           );
           return /* @__PURE__ */ jsx28("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx28("div", { className: "mx-2", children: /* @__PURE__ */ jsx28(
             "div",
@@ -4819,17 +4829,17 @@ var FillInTheBlanksActivityMaterialContent = ({
                   /* @__PURE__ */ jsx28("div", { className: "flex-1", children: /* @__PURE__ */ jsx28(
                     "div",
                     {
-                      className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2 cursor-pointer" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
+                      className: `w-full min-h-[44px] border rounded-lg ${displayAnswerMap[materialKey] ? "border-catchup-blue-400 px-2 cursor-pointer" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
                       onClick: (e) => {
-                        if (answerMap[materialKey]) {
+                        if (displayAnswerMap[materialKey]) {
                           e.stopPropagation();
                           onChange(answerMap, materialKey, "");
                         }
                       },
-                      children: answerMap[materialKey] ? /* @__PURE__ */ jsx28(
+                      children: displayAnswerMap[materialKey] ? /* @__PURE__ */ jsx28(
                         InputWithSpecialExpression_default,
                         {
-                          value: answerMap[materialKey],
+                          value: displayAnswerMap[materialKey],
                           showSpecialOnly: false
                         }
                       ) : null
@@ -4850,7 +4860,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                       size: "small"
                     }
                   ) }) : null
-                ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx28(
+                ] }) : displayAnswerMap[materialKey] === "" ? /* @__PURE__ */ jsx28(
                   "div",
                   {
                     className: `w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
@@ -4868,14 +4878,14 @@ var FillInTheBlanksActivityMaterialContent = ({
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
-                        src: answerMap[materialKey],
+                        src: displayAnswerMap[materialKey],
                         canFullScreen: true
                       },
                       `${uniqueValue}-${index}`
                     )
                   }
                 ) : /* @__PURE__ */ jsx28("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-                  answerMap[materialKey]
+                  displayAnswerMap[materialKey]
                 ).map((inputPart, index2) => /* @__PURE__ */ jsx28(
                   "span",
                   {
@@ -4995,6 +5005,7 @@ var GroupingActivityMaterialContent = ({
     null
   );
   const [shuffledMaterialList, setShuffledMaterialList] = useState19([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState19(answerMap);
   const dragElementRef = useRef5(null);
   const [mousePosition, setMousePosition] = useState19({
     x: 0,
@@ -5027,8 +5038,11 @@ var GroupingActivityMaterialContent = ({
     hasShuffledRef.current = true;
   }, [materialMap]);
   useEffect10(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = materialMap;
+    if (showCorrectAnswer) {
+      setDisplayAnswerMap(materialMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
   }, [showCorrectAnswer, answerMap, materialMap]);
   useEffect10(() => {
     if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
@@ -5074,10 +5088,10 @@ var GroupingActivityMaterialContent = ({
     };
     requestAnimationFrame(animate);
   }, [dropTargetKey]);
-  const retrieveFilteredMaterialList = (answerMap2) => {
+  const retrieveFilteredMaterialList = (currentAnswerMap) => {
     const selectedValueList = [];
-    Object.keys(answerMap2).forEach((key) => {
-      answerMap2[key].forEach((value) => {
+    Object.keys(currentAnswerMap).forEach((key) => {
+      currentAnswerMap[key].forEach((value) => {
         selectedValueList.push(value);
       });
     });
@@ -5168,7 +5182,7 @@ var GroupingActivityMaterialContent = ({
       setSelectedValue(null);
     }
   };
-  const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
+  const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
   return /* @__PURE__ */ jsxs19("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx30(
       "div",
@@ -5270,7 +5284,7 @@ var GroupingActivityMaterialContent = ({
       }) }),
       /* @__PURE__ */ jsx30(DividerLine_default, {})
     ] }) : null,
-    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
+    Object.keys(displayAnswerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
       /* @__PURE__ */ jsx30("div", { className: "w-1/3", children: /* @__PURE__ */ jsx30(
         "div",
         {
@@ -5297,7 +5311,7 @@ var GroupingActivityMaterialContent = ({
           onMouseLeave: () => setDropTargetKey(null),
           onClick: () => handleDropZoneClick(answerMapKey),
           className: `${dropTargetKey === answerMapKey ? "bg-catchup-light-blue ring-2 ring-blue-400" : ""} flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1 transition-all duration-200`,
-          children: /* @__PURE__ */ jsx30("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ jsx30("div", { className: "flex flex-row items-center gap-2 w-max h-full", children: answerMap[answerMapKey].map(
+          children: /* @__PURE__ */ jsx30("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ jsx30("div", { className: "flex flex-row items-center gap-2 w-max h-full", children: displayAnswerMap[answerMapKey].map(
             (answerMapValue, answerMapIndex) => {
               const learnerAnswerState = checkAnswerState(
                 materialMap[answerMapKey],
@@ -5428,6 +5442,7 @@ var MatchingActivityMaterialContent = ({
     null
   );
   const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState20(answerMap);
   const dragElementRef = useRef6(null);
   const [mousePosition, setMousePosition] = useState20({
     x: 0,
@@ -5458,9 +5473,12 @@ var MatchingActivityMaterialContent = ({
     hasShuffledRef.current = true;
   }, [materialMap]);
   useEffect11(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = materialMap;
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      setDisplayAnswerMap(materialMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap, materialMap]);
   useEffect11(() => {
     if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
     const dropZoneElement = dropZoneRefs.current[dropTargetKey];
@@ -5505,10 +5523,10 @@ var MatchingActivityMaterialContent = ({
     };
     requestAnimationFrame(animate);
   }, [dropTargetKey]);
-  const retrieveFilteredMaterialList = (answerMap2) => {
+  const retrieveFilteredMaterialList = (currentAnswerMap) => {
     const selectedValueList = [];
-    Object.keys(answerMap2).forEach((key) => {
-      selectedValueList.push(answerMap2[key]);
+    Object.keys(currentAnswerMap).forEach((key) => {
+      selectedValueList.push(currentAnswerMap[key]);
     });
     return shuffledMaterialList.filter(
       (material) => selectedValueList.findIndex((value) => material === value) === -1
@@ -5593,7 +5611,7 @@ var MatchingActivityMaterialContent = ({
       setSelectedValue(null);
     }
   };
-  const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
+  const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
   return /* @__PURE__ */ jsxs21("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx32(
       "div",
@@ -5700,10 +5718,10 @@ var MatchingActivityMaterialContent = ({
       ),
       /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx32(DividerLine_default, {}) })
     ] }) : null,
-    Object.keys(answerMap).map((answerMapKey, index) => {
+    Object.keys(displayAnswerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
-        answerMap[answerMapKey]
+        displayAnswerMap[answerMapKey]
       );
       return /* @__PURE__ */ jsxs21("div", { className: "flex flex-row w-full", children: [
         /* @__PURE__ */ jsx32("div", { className: "w-1/3", children: /* @__PURE__ */ jsx32(
@@ -5738,13 +5756,13 @@ var MatchingActivityMaterialContent = ({
                 className: "h-full flex-1 flex flex-row items-center justify-center px-4",
                 onClick: (e) => {
                   e.stopPropagation();
-                  if (checkCanAnswerQuestion() && answerMap[answerMapKey]) {
+                  if (checkCanAnswerQuestion() && displayAnswerMap[answerMapKey]) {
                     onChange(answerMap, answerMapKey, null);
                     setSelectedValue(null);
                   }
                 },
-                children: answerMap[answerMapKey] ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                  answerMap[answerMapKey]
+                children: displayAnswerMap[answerMapKey] ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  displayAnswerMap[answerMapKey]
                 ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
                   "span",
                   {
@@ -5756,7 +5774,7 @@ var MatchingActivityMaterialContent = ({
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
-                    src: answerMap[answerMapKey],
+                    src: displayAnswerMap[answerMapKey],
                     canFullScreen: false
                   },
                   `${uniqueValue}-${index}`
@@ -5816,6 +5834,7 @@ var MatchingActivityContent = ({
 var MatchingActivityContent_default = MatchingActivityContent;
 
 // src/components/activities/material-contents/MCMAActivityMaterialContent.tsx
+import { useEffect as useEffect12, useState as useState21 } from "react";
 import { InlineMath as InlineMath7 } from "react-katex";
 import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var MCMAActivityMaterialContent = ({
@@ -5825,8 +5844,21 @@ var MCMAActivityMaterialContent = ({
   contentMap,
   checkCanAnswerQuestion,
   onChange,
-  isPreview
+  isPreview,
+  showCorrectAnswer
 }) => {
+  const [displayAnswerMap, setDisplayAnswerMap] = useState21(answerMap);
+  useEffect12(() => {
+    if (showCorrectAnswer) {
+      const correctAnswerMap = {};
+      Object.keys(materialMap).forEach((materialKey) => {
+        correctAnswerMap[materialKey] = JSON.parse(materialKey);
+      });
+      setDisplayAnswerMap(correctAnswerMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap, materialMap]);
   const retrieveCorrectAnswerList = () => {
     return JSON.parse(Object.keys(materialMap)[0]);
   };
@@ -5848,7 +5880,7 @@ var MCMAActivityMaterialContent = ({
       /* @__PURE__ */ jsx34("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx34(DividerLine_default, {}) }),
       checkCanAnswerQuestion() ? /* @__PURE__ */ jsx34("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
-          const foundAnswer = answerMap[materialKey].find(
+          const foundAnswer = displayAnswerMap[materialKey].find(
             (learnerAnswer) => learnerAnswer === materialSubKey
           );
           const learnerAnswerState = checkAnswerState(
@@ -5870,7 +5902,7 @@ var MCMAActivityMaterialContent = ({
                 /* @__PURE__ */ jsx34(
                   BaseImage_default,
                   {
-                    src: answerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
+                    src: displayAnswerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
                     alt: "checkbox",
                     size: "small",
                     onClick: () => {
@@ -5901,7 +5933,7 @@ var MCMAActivityMaterialContent = ({
           );
         }
       ) }) : /* @__PURE__ */ jsx34("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-        answerMap[materialKey]
+        displayAnswerMap[materialKey]
       ).map((inputPart, index2) => /* @__PURE__ */ jsx34(
         "span",
         {
@@ -5923,6 +5955,7 @@ var MCMAActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
+  showCorrectAnswer,
   isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
@@ -5953,7 +5986,8 @@ var MCMAActivityContent = ({
         contentMap,
         checkCanAnswerQuestion: canAnswerQuestion,
         onChange: handleMCMAAnswerOnChange,
-        isPreview
+        isPreview,
+        showCorrectAnswer
       }
     ) })
   ] });
@@ -5961,6 +5995,7 @@ var MCMAActivityContent = ({
 var MCMAActivityContent_default = MCMAActivityContent;
 
 // src/components/activities/material-contents/MCSAActivityMaterialContent.tsx
+import { useEffect as useEffect13, useState as useState22 } from "react";
 import { InlineMath as InlineMath8 } from "react-katex";
 import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var MCSAActivityMaterialContent = ({
@@ -5970,8 +6005,21 @@ var MCSAActivityMaterialContent = ({
   contentMap,
   checkCanAnswerQuestion,
   onChange,
-  isPreview
+  isPreview,
+  showCorrectAnswer
 }) => {
+  const [displayAnswerMap, setDisplayAnswerMap] = useState22(answerMap);
+  useEffect13(() => {
+    if (showCorrectAnswer) {
+      const correctAnswerMap = {};
+      Object.keys(materialMap).forEach((materialKey) => {
+        correctAnswerMap[materialKey] = materialMap[materialKey][0];
+      });
+      setDisplayAnswerMap(correctAnswerMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap, materialMap]);
   const retrieveCorrectAnswer = () => {
     return Object.keys(materialMap)[0];
   };
@@ -5997,7 +6045,7 @@ var MCSAActivityMaterialContent = ({
               const learnerAnswerState = checkAnswerState(
                 correctAnswer,
                 materialSubKey,
-                answerMap[materialKey]
+                displayAnswerMap[materialKey]
               );
               return /* @__PURE__ */ jsxs25(
                 "div",
@@ -6010,7 +6058,7 @@ var MCSAActivityMaterialContent = ({
                     /* @__PURE__ */ jsx36(
                       BaseImage_default,
                       {
-                        src: answerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
+                        src: displayAnswerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
                         alt: "circle",
                         size: "small",
                         onClick: () => {
@@ -6043,7 +6091,7 @@ var MCSAActivityMaterialContent = ({
           )
         }
       ) : /* @__PURE__ */ jsx36("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-        answerMap[materialKey]
+        displayAnswerMap[materialKey]
       ).map((inputPart, index2) => /* @__PURE__ */ jsx36(
         "span",
         {
@@ -6065,6 +6113,7 @@ var MCSAActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
+  showCorrectAnswer,
   isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
@@ -6088,6 +6137,7 @@ var MCSAActivityContent = ({
         contentMap,
         checkCanAnswerQuestion: canAnswerQuestion,
         onChange: handleMCSAAnswerOnChange,
+        showCorrectAnswer,
         isPreview
       }
     ) })
@@ -6268,21 +6318,21 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-import { useEffect as useEffect13, useState as useState22, useRef as useRef7 } from "react";
+import { useEffect as useEffect15, useState as useState24, useRef as useRef7 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
 
 // src/hooks/useScreenSize.ts
-import { useState as useState21, useEffect as useEffect12 } from "react";
+import { useState as useState23, useEffect as useEffect14 } from "react";
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = useState21({
+  const [containerSize, setContainerSize] = useState23({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = useState21({
+  const [screenSize, setScreenSize] = useState23({
     width: window.innerWidth,
     height: window.innerHeight
   });
-  useEffect12(() => {
+  useEffect14(() => {
     const handleResize = () => {
       setScreenSize({
         width: window.innerWidth,
@@ -6318,25 +6368,25 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedKey, setSelectedKey] = useState22(null);
-  const [draggedKey, setDraggedKey] = useState22(null);
-  const [dropTargetKey, setDropTargetKey] = useState22(null);
-  const [draggedElement, setDraggedElement] = useState22(
+  const [selectedKey, setSelectedKey] = useState24(null);
+  const [draggedKey, setDraggedKey] = useState24(null);
+  const [dropTargetKey, setDropTargetKey] = useState24(null);
+  const [draggedElement, setDraggedElement] = useState24(
     null
   );
   const dragElementRef = useRef7(null);
-  const [mousePosition, setMousePosition] = useState22({
+  const [mousePosition, setMousePosition] = useState24({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = useState22({
+  const [touchPosition, setTouchPosition] = useState24({
     x: 0,
     y: 0
   });
   const { screenSize } = useScreenSize_default();
-  const [view, setView] = useState22("PC");
-  const [displayAnswerMap, setDisplayAnswerMap] = useState22(answerMap);
-  useEffect13(() => {
+  const [view, setView] = useState24("PC");
+  const [displayAnswerMap, setDisplayAnswerMap] = useState24(answerMap);
+  useEffect15(() => {
     if (!screenSize) return;
     if (screenSize.width <= 1024) {
       setView("TABLET");
@@ -6344,7 +6394,7 @@ var OrderingActivityMaterialContent = ({
       setView("PC");
     }
   }, [screenSize]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
       Object.keys(answerMap).forEach((answerKey, index) => {
@@ -6635,7 +6685,7 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
-import { useEffect as useEffect14, useState as useState23 } from "react";
+import { useEffect as useEffect16, useState as useState25 } from "react";
 import { InlineMath as InlineMath10 } from "react-katex";
 import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
@@ -6648,9 +6698,9 @@ var TrueFalseActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = useState23([]);
-  const [displayAnswerMap, setDisplayAnswerMap] = useState23(answerMap);
-  useEffect14(() => {
+  const [shuffleOptionList, setShuffleOptionList] = useState25([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState25(answerMap);
+  useEffect16(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -6660,7 +6710,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  useEffect14(() => {
+  useEffect16(() => {
     if (showCorrectAnswer) {
       setDisplayAnswerMap(materialMap);
     } else {
@@ -6949,7 +6999,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { useEffect as useEffect15, useState as useState24 } from "react";
+import { useEffect as useEffect17, useState as useState26 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
 import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
@@ -7016,11 +7066,11 @@ var ActivityPreviewByData = ({
   isFullScreen = false,
   showCorrectAnswer = false
 }) => {
-  const [selectedType, setSelectedType] = useState24(null);
-  const [optionList, setOptionList] = useState24([]);
-  const [answerMapMap, setAnswerMapMap] = useState24({});
-  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState24([]);
-  useEffect15(() => {
+  const [selectedType, setSelectedType] = useState26(null);
+  const [optionList, setOptionList] = useState26([]);
+  const [answerMapMap, setAnswerMapMap] = useState26({});
+  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState26([]);
+  useEffect17(() => {
     if (!data) return;
     let currentActivityTemplateMapList = JSON.parse(
       JSON.stringify(ACTIVITY_TEMPLATE_LIST)
@@ -7038,7 +7088,7 @@ var ActivityPreviewByData = ({
     }
     setActivityTemplateTypeList(currentActivityTemplateMapList);
   }, [data, answerType, typeList]);
-  useEffect15(() => {
+  useEffect17(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentOptionList = [];
     for (const activityTemplateType of activityTemplateTypeList) {
@@ -7058,11 +7108,11 @@ var ActivityPreviewByData = ({
     }
     setOptionList(currentOptionList);
   }, [activityTemplateTypeList, showDifficulty]);
-  useEffect15(() => {
+  useEffect17(() => {
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
-  useEffect15(() => {
+  useEffect17(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentAnswerMapMap = {};
     for (const activityTemplateMap of activityTemplateTypeList) {
@@ -7146,6 +7196,7 @@ var ActivityPreviewByData = ({
     }
   };
   if (!data) return null;
+  console.log(optionList);
   return /* @__PURE__ */ jsxs36("div", { children: [
     showType && optionList.length > 0 ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
       /* @__PURE__ */ jsxs36("div", { className: "mb-4", children: [
@@ -7245,7 +7296,7 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-import { useEffect as useEffect16, useState as useState25 } from "react";
+import { useEffect as useEffect18, useState as useState27 } from "react";
 import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 var PageTravelGroup = ({
   isImageProcessing,
@@ -7255,13 +7306,13 @@ var PageTravelGroup = ({
   setPageNumber,
   setImageReady
 }) => {
-  const [totalPageNumber, setTotalPageNumber] = useState25(0);
-  const [newPageNumber, setNewPageNumber] = useState25(0);
-  useEffect16(() => {
+  const [totalPageNumber, setTotalPageNumber] = useState27(0);
+  const [newPageNumber, setNewPageNumber] = useState27(0);
+  useEffect18(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
   }, [initialTotalPageNumber]);
-  useEffect16(() => {
+  useEffect18(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
   return /* @__PURE__ */ jsxs39("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [