catchup-library-web 2.2.2 → 2.2.4

package/dist/index.js

@@ -4571,19 +4571,20 @@ var DropdownActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [updated, setUpdated] = (0, import_react16.useState)(false);
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react16.useState)(answerMap);
   (0, import_react15.useEffect)(() => {
-    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]);
-  (0, import_react15.useEffect)(() => {
-    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) {
@@ -4594,66 +4595,66 @@ var DropdownActivityMaterialContent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-row flex-wrap items-center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("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__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "text-xl", children: [
-          parseFloat(materialKey) + 1,
-          "."
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            InputGroup_default,
-            {
-              type: "select",
-              value: answerMap[materialKey],
-              optionList: shuffleArray(
-                materialMap[materialKey][answerKey]
-              ).map((materialOption) => ({
-                text: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                  materialOption
-                ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                  "span",
+    /* @__PURE__ */ (0, import_jsx_runtime25.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 = checkAnswerState(
+          answerKey,
+          displayAnswerMap[materialKey]
+        );
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "text-xl", children: [
+            parseFloat(materialKey) + 1,
+            "."
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              InputGroup_default,
+              {
+                type: "select",
+                value: displayAnswerMap[materialKey],
+                optionList: shuffleArray(
+                  materialMap[materialKey][answerKey]
+                ).map((materialOption) => ({
+                  text: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    materialOption
+                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    "span",
+                    {
+                      className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                        import_react_katex2.InlineMath,
+                        {
+                          math: inputPart.value
+                        }
+                      ) }) : inputPart.value
+                    },
+                    index2
+                  )) }),
+                  value: materialOption
+                })),
+                onChange: (e) => {
+                  onChange(
+                    answerMap,
+                    materialKey,
+                    e.target.value
+                  );
+                }
+              }
+            ) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              MediaDropdown_default,
+              {
+                id: materialKey,
+                answer: displayAnswerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("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__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  ShowMaterialMediaByContentType_default,
                   {
-                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                      import_react_katex2.InlineMath,
-                      {
-                        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__ */ (0, import_jsx_runtime25.jsx)(
-            MediaDropdown_default,
-            {
-              id: materialKey,
-              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("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__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                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__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     ShowMaterialMediaByContentType_default,
@@ -4671,37 +4672,37 @@ var DropdownActivityMaterialContent = ({
                       e.target.currentSrc
                     );
                   }
-                })
-              )
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-            answerMap[materialKey]
-          ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            "span",
-            {
-              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_katex2.InlineMath, { math: inputPart.value }) }) : inputPart.value
-            },
-            index2
-          )) }) }),
-          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            BaseImage_default,
-            {
-              src: "/icons/checkbox.webp",
-              alt: "chekbbox",
-              size: "small"
-            }
-          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            BaseImage_default,
-            {
-              src: "/icons/cross-red.webp",
-              alt: "cross-red",
-              size: "small"
-            }
-          ) }) : null
-        ] })
-      ] }) }) }, index);
-    }) })
+                }))
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+              displayAnswerMap[materialKey]
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_katex2.InlineMath, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )) }) }),
+            learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              BaseImage_default,
+              {
+                src: "/icons/checkbox.webp",
+                alt: "chekbbox",
+                size: "small"
+              }
+            ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              BaseImage_default,
+              {
+                src: "/icons/cross-red.webp",
+                alt: "cross-red",
+                size: "small"
+              }
+            ) }) : null
+          ] })
+        ] }) }) }, index);
+      }
+    ) })
   ] });
 };
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
@@ -4808,6 +4809,7 @@ var FillInTheBlanksActivityMaterialContent = ({
   const [draggedElement, setDraggedElement] = (0, import_react18.useState)(
     null
   );
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react18.useState)(answerMap);
   const dragElementRef = (0, import_react18.useRef)(null);
   const [mousePosition, setMousePosition] = (0, import_react18.useState)({
     x: 0,
@@ -4821,12 +4823,18 @@ var FillInTheBlanksActivityMaterialContent = ({
     setShuffleOptionList(shuffleArray(optionList));
   }, [optionList]);
   (0, import_react18.useEffect)(() => {
-    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(
@@ -4837,8 +4845,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();
@@ -4970,7 +4980,7 @@ var FillInTheBlanksActivityMaterialContent = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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__ */ (0, import_jsx_runtime28.jsx)(
+          (option, index) => checkAnswerProvided(displayAnswerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             ShowMaterialMediaByContentType_default,
             {
               contentType: contentMap.type,
@@ -5020,10 +5030,10 @@ var FillInTheBlanksActivityMaterialContent = ({
             index
           )
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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__ */ (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.jsx)(
             "div",
@@ -5042,17 +5052,17 @@ var FillInTheBlanksActivityMaterialContent = ({
                   /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     "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__ */ (0, import_jsx_runtime28.jsx)(
+                      children: displayAnswerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                         InputWithSpecialExpression_default,
                         {
-                          value: answerMap[materialKey],
+                          value: displayAnswerMap[materialKey],
                           showSpecialOnly: false
                         }
                       ) : null
@@ -5073,7 +5083,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                       size: "small"
                     }
                   ) }) : null
-                ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                ] }) : displayAnswerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "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"}`,
@@ -5091,14 +5101,14 @@ var FillInTheBlanksActivityMaterialContent = ({
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
-                        src: answerMap[materialKey],
+                        src: displayAnswerMap[materialKey],
                         canFullScreen: true
                       },
                       `${uniqueValue}-${index}`
                     )
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-                  answerMap[materialKey]
+                  displayAnswerMap[materialKey]
                 ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "span",
                   {
@@ -5218,6 +5228,7 @@ var GroupingActivityMaterialContent = ({
     null
   );
   const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react20.useState)([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react20.useState)(answerMap);
   const dragElementRef = (0, import_react20.useRef)(null);
   const [mousePosition, setMousePosition] = (0, import_react20.useState)({
     x: 0,
@@ -5250,8 +5261,11 @@ var GroupingActivityMaterialContent = ({
     hasShuffledRef.current = true;
   }, [materialMap]);
   (0, import_react20.useEffect)(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = materialMap;
+    if (showCorrectAnswer) {
+      setDisplayAnswerMap(materialMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
   }, [showCorrectAnswer, answerMap, materialMap]);
   (0, import_react20.useEffect)(() => {
     if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
@@ -5297,10 +5311,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);
       });
     });
@@ -5391,7 +5405,7 @@ var GroupingActivityMaterialContent = ({
       setSelectedValue(null);
     }
   };
-  const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
+  const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "div",
@@ -5493,7 +5507,7 @@ var GroupingActivityMaterialContent = ({
       }) }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {})
     ] }) : null,
-    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row w-full", children: [
+    Object.keys(displayAnswerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
@@ -5520,7 +5534,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__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-row items-center gap-2 w-max h-full", children: answerMap[answerMapKey].map(
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-row items-center gap-2 w-max h-full", children: displayAnswerMap[answerMapKey].map(
             (answerMapValue, answerMapIndex) => {
               const learnerAnswerState = checkAnswerState(
                 materialMap[answerMapKey],
@@ -5651,6 +5665,7 @@ var MatchingActivityMaterialContent = ({
     null
   );
   const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react21.useState)([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react21.useState)(answerMap);
   const dragElementRef = (0, import_react21.useRef)(null);
   const [mousePosition, setMousePosition] = (0, import_react21.useState)({
     x: 0,
@@ -5681,9 +5696,12 @@ var MatchingActivityMaterialContent = ({
     hasShuffledRef.current = true;
   }, [materialMap]);
   (0, import_react21.useEffect)(() => {
-    if (!showCorrectAnswer) return;
-    answerMap = materialMap;
-  }, [showCorrectAnswer]);
+    if (showCorrectAnswer) {
+      setDisplayAnswerMap(materialMap);
+    } else {
+      setDisplayAnswerMap(answerMap);
+    }
+  }, [showCorrectAnswer, answerMap, materialMap]);
   (0, import_react21.useEffect)(() => {
     if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
     const dropZoneElement = dropZoneRefs.current[dropTargetKey];
@@ -5728,10 +5746,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
@@ -5816,7 +5834,7 @@ var MatchingActivityMaterialContent = ({
       setSelectedValue(null);
     }
   };
-  const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
+  const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
@@ -5923,10 +5941,10 @@ var MatchingActivityMaterialContent = ({
       ),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-row w-full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -5961,13 +5979,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__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                  answerMap[answerMapKey]
+                children: displayAnswerMap[answerMapKey] ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  displayAnswerMap[answerMapKey]
                 ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "span",
                   {
@@ -5979,7 +5997,7 @@ var MatchingActivityMaterialContent = ({
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
-                    src: answerMap[answerMapKey],
+                    src: displayAnswerMap[answerMapKey],
                     canFullScreen: false
                   },
                   `${uniqueValue}-${index}`
@@ -6039,6 +6057,7 @@ var MatchingActivityContent = ({
 var MatchingActivityContent_default = MatchingActivityContent;
 
 // src/components/activities/material-contents/MCMAActivityMaterialContent.tsx
+var import_react22 = require("react");
 var import_react_katex7 = require("react-katex");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var MCMAActivityMaterialContent = ({
@@ -6048,8 +6067,21 @@ var MCMAActivityMaterialContent = ({
   contentMap,
   checkCanAnswerQuestion,
   onChange,
-  isPreview
+  isPreview,
+  showCorrectAnswer
 }) => {
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react22.useState)(answerMap);
+  (0, import_react22.useEffect)(() => {
+    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]);
   };
@@ -6071,7 +6103,7 @@ var MCMAActivityMaterialContent = ({
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}) }),
       checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("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(
@@ -6093,7 +6125,7 @@ var MCMAActivityMaterialContent = ({
                 /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   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: () => {
@@ -6124,7 +6156,7 @@ var MCMAActivityMaterialContent = ({
           );
         }
       ) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-        answerMap[materialKey]
+        displayAnswerMap[materialKey]
       ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "span",
         {
@@ -6146,6 +6178,7 @@ var MCMAActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
+  showCorrectAnswer,
   isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
@@ -6176,7 +6209,8 @@ var MCMAActivityContent = ({
         contentMap,
         checkCanAnswerQuestion: canAnswerQuestion,
         onChange: handleMCMAAnswerOnChange,
-        isPreview
+        isPreview,
+        showCorrectAnswer
       }
     ) })
   ] });
@@ -6184,6 +6218,7 @@ var MCMAActivityContent = ({
 var MCMAActivityContent_default = MCMAActivityContent;
 
 // src/components/activities/material-contents/MCSAActivityMaterialContent.tsx
+var import_react23 = require("react");
 var import_react_katex8 = require("react-katex");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var MCSAActivityMaterialContent = ({
@@ -6193,8 +6228,21 @@ var MCSAActivityMaterialContent = ({
   contentMap,
   checkCanAnswerQuestion,
   onChange,
-  isPreview
+  isPreview,
+  showCorrectAnswer
 }) => {
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react23.useState)(answerMap);
+  (0, import_react23.useEffect)(() => {
+    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];
   };
@@ -6220,7 +6268,7 @@ var MCSAActivityMaterialContent = ({
               const learnerAnswerState = checkAnswerState(
                 correctAnswer,
                 materialSubKey,
-                answerMap[materialKey]
+                displayAnswerMap[materialKey]
               );
               return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                 "div",
@@ -6233,7 +6281,7 @@ var MCSAActivityMaterialContent = ({
                     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                       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: () => {
@@ -6266,7 +6314,7 @@ var MCSAActivityMaterialContent = ({
           )
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-        answerMap[materialKey]
+        displayAnswerMap[materialKey]
       ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "span",
         {
@@ -6288,6 +6336,7 @@ var MCSAActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
+  showCorrectAnswer,
   isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
@@ -6311,6 +6360,7 @@ var MCSAActivityContent = ({
         contentMap,
         checkCanAnswerQuestion: canAnswerQuestion,
         onChange: handleMCSAAnswerOnChange,
+        showCorrectAnswer,
         isPreview
       }
     ) })
@@ -6491,21 +6541,21 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_react_katex9 = require("react-katex");
 
 // src/hooks/useScreenSize.ts
-var import_react22 = require("react");
+var import_react24 = require("react");
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = (0, import_react22.useState)({
+  const [containerSize, setContainerSize] = (0, import_react24.useState)({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = (0, import_react22.useState)({
+  const [screenSize, setScreenSize] = (0, import_react24.useState)({
     width: window.innerWidth,
     height: window.innerHeight
   });
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const handleResize = () => {
       setScreenSize({
         width: window.innerWidth,
@@ -6541,25 +6591,25 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedKey, setSelectedKey] = (0, import_react23.useState)(null);
-  const [draggedKey, setDraggedKey] = (0, import_react23.useState)(null);
-  const [dropTargetKey, setDropTargetKey] = (0, import_react23.useState)(null);
-  const [draggedElement, setDraggedElement] = (0, import_react23.useState)(
+  const [selectedKey, setSelectedKey] = (0, import_react25.useState)(null);
+  const [draggedKey, setDraggedKey] = (0, import_react25.useState)(null);
+  const [dropTargetKey, setDropTargetKey] = (0, import_react25.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react25.useState)(
     null
   );
-  const dragElementRef = (0, import_react23.useRef)(null);
-  const [mousePosition, setMousePosition] = (0, import_react23.useState)({
+  const dragElementRef = (0, import_react25.useRef)(null);
+  const [mousePosition, setMousePosition] = (0, import_react25.useState)({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = (0, import_react23.useState)({
+  const [touchPosition, setTouchPosition] = (0, import_react25.useState)({
     x: 0,
     y: 0
   });
   const { screenSize } = useScreenSize_default();
-  const [view, setView] = (0, import_react23.useState)("PC");
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react23.useState)(answerMap);
-  (0, import_react23.useEffect)(() => {
+  const [view, setView] = (0, import_react25.useState)("PC");
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react25.useState)(answerMap);
+  (0, import_react25.useEffect)(() => {
     if (!screenSize) return;
     if (screenSize.width <= 1024) {
       setView("TABLET");
@@ -6567,7 +6617,7 @@ var OrderingActivityMaterialContent = ({
       setView("PC");
     }
   }, [screenSize]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
       Object.keys(answerMap).forEach((answerKey, index) => {
@@ -6858,7 +6908,7 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 var import_react_katex10 = require("react-katex");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var TrueFalseActivityMaterialContent = ({
@@ -6871,9 +6921,9 @@ var TrueFalseActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react24.useState)([]);
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react24.useState)(answerMap);
-  (0, import_react24.useEffect)(() => {
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react26.useState)([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react26.useState)(answerMap);
+  (0, import_react26.useEffect)(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -6883,7 +6933,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (showCorrectAnswer) {
       setDisplayAnswerMap(materialMap);
     } else {
@@ -7172,7 +7222,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 
 // src/components/boxes/SelectionBox.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
@@ -7239,11 +7289,11 @@ var ActivityPreviewByData = ({
   isFullScreen = false,
   showCorrectAnswer = false
 }) => {
-  const [selectedType, setSelectedType] = (0, import_react25.useState)(null);
-  const [optionList, setOptionList] = (0, import_react25.useState)([]);
-  const [answerMapMap, setAnswerMapMap] = (0, import_react25.useState)({});
-  const [activityTemplateTypeList, setActivityTemplateTypeList] = (0, import_react25.useState)([]);
-  (0, import_react25.useEffect)(() => {
+  const [selectedType, setSelectedType] = (0, import_react27.useState)(null);
+  const [optionList, setOptionList] = (0, import_react27.useState)([]);
+  const [answerMapMap, setAnswerMapMap] = (0, import_react27.useState)({});
+  const [activityTemplateTypeList, setActivityTemplateTypeList] = (0, import_react27.useState)([]);
+  (0, import_react27.useEffect)(() => {
     if (!data) return;
     let currentActivityTemplateMapList = JSON.parse(
       JSON.stringify(ACTIVITY_TEMPLATE_LIST)
@@ -7261,7 +7311,7 @@ var ActivityPreviewByData = ({
     }
     setActivityTemplateTypeList(currentActivityTemplateMapList);
   }, [data, answerType, typeList]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentOptionList = [];
     for (const activityTemplateType of activityTemplateTypeList) {
@@ -7281,11 +7331,11 @@ var ActivityPreviewByData = ({
     }
     setOptionList(currentOptionList);
   }, [activityTemplateTypeList, showDifficulty]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentAnswerMapMap = {};
     for (const activityTemplateMap of activityTemplateTypeList) {
@@ -7369,6 +7419,7 @@ var ActivityPreviewByData = ({
     }
   };
   if (!data) return null;
+  console.log(optionList);
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
     showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mb-4", children: [
@@ -7468,7 +7519,7 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var PageTravelGroup = ({
   isImageProcessing,
@@ -7478,13 +7529,13 @@ var PageTravelGroup = ({
   setPageNumber,
   setImageReady
 }) => {
-  const [totalPageNumber, setTotalPageNumber] = (0, import_react26.useState)(0);
-  const [newPageNumber, setNewPageNumber] = (0, import_react26.useState)(0);
-  (0, import_react26.useEffect)(() => {
+  const [totalPageNumber, setTotalPageNumber] = (0, import_react28.useState)(0);
+  const [newPageNumber, setNewPageNumber] = (0, import_react28.useState)(0);
+  (0, import_react28.useEffect)(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
   }, [initialTotalPageNumber]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [