catchup-library-web 1.20.11 → 1.20.13

package/dist/index.js

@@ -4816,7 +4816,7 @@ var DropdownActivityContent = ({
 var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
-var import_react_katex3 = require("react-katex");
+var import_react_katex4 = require("react-katex");
 var import_react19 = require("react");
 var import_react20 = require("react");
 var import_react_dnd3 = require("react-dnd");
@@ -4880,8 +4880,32 @@ var DroppableItem = ({
 };
 var DroppableItem_default = DroppableItem;
 
-// src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
+// src/components/texts/InputWithSpecialExpression.tsx
+var import_react_katex3 = require("react-katex");
 var import_jsx_runtime29 = require("react/jsx-runtime");
+var InputWithSpecialExpression = ({
+  value,
+  showSpecialOnly
+}) => {
+  const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "span",
+    {
+      className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+    }
+  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "span",
+    {
+      className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+    }
+  )) }) });
+};
+var InputWithSpecialExpression_default = InputWithSpecialExpression;
+
+// src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4940,12 +4964,12 @@ var FillInTheBlanksActivityMaterialContent = ({
     return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         ShowMaterialMediaByContentType_default,
         {
           contentType: contentMap.type,
@@ -4953,12 +4977,12 @@ var FillInTheBlanksActivityMaterialContent = ({
           canFullScreen: true
         },
         `${uniqueValue}-${index}`
-      ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         DraggableItem_default,
         {
           item: { index: option },
           type: "FILL_IN_THE_BLANKS",
-          component: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          component: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "div",
             {
               className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
@@ -4966,9 +4990,15 @@ var FillInTheBlanksActivityMaterialContent = ({
                 setSelectedOption(option);
                 setPasteOptionIndex(null);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: option })
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                InputWithSpecialExpression_default,
+                {
+                  value: option,
+                  showSpecialOnly: true
+                }
+              ) })
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "div",
             {
               className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
@@ -4976,7 +5006,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                 setSelectedOption(option);
                 setPasteOptionIndex(null);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4994,12 +5024,12 @@ var FillInTheBlanksActivityMaterialContent = ({
         index
       )
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
       const learnerAnswerState = checkAnswerState(
         JSON.parse(materialMap[materialKey]),
         answerMap[materialKey]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         DroppableItem_default,
         {
           item: { index },
@@ -5007,35 +5037,38 @@ var FillInTheBlanksActivityMaterialContent = ({
           target: pasteOptionIndex,
           setTarget: setPasteOptionIndex,
           dropRef: drop,
-          component: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("p", { className: "text-xl", children: [
+          component: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { className: "text-xl", children: [
               parseFloat(materialKey) + 1,
               "."
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                InputGroup_default,
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                "div",
                 {
-                  type: "textarea",
-                  value: answerMap[materialKey],
-                  useMinHeight: false,
-                  onChange: (e) => {
-                    onChange(
-                      answer,
-                      materialKey,
-                      e.target.value
-                    );
-                  }
+                  className: `w-full min-h-[44px] p-3 border rounded-lg ${answerMap[materialKey] ? "bg-white border-gray-300" : "bg-gray-50 border-gray-200 border-dashed"}`,
+                  onClick: () => {
+                    if (answerMap[materialKey]) {
+                      onChange(answer, materialKey, "");
+                    }
+                  },
+                  children: answerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    InputWithSpecialExpression_default,
+                    {
+                      value: answerMap[materialKey],
+                      showSpecialOnly: true
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-gray-400 italic" })
                 }
               ) }),
-              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/checkbox.webp",
                   alt: "checkbox",
                   size: "small"
                 }
-              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/cross-red.webp",
@@ -5043,20 +5076,20 @@ var FillInTheBlanksActivityMaterialContent = ({
                   size: "small"
                 }
               ) }) : null
-            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime30.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"}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "div",
               {
                 className: "flex-1 cursor-pointer",
                 onClick: () => {
                   onChange(answer, materialKey, "");
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5066,13 +5099,13 @@ var FillInTheBlanksActivityMaterialContent = ({
                   `${uniqueValue}-${index}`
                 )
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
               answerMap[materialKey]
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }, materialKey) })
@@ -5087,7 +5120,7 @@ var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMate
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
 var import_react21 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var FillInTheBlanksActivityContent = ({
   answer,
   data,
@@ -5155,8 +5188,8 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(newAnswerMap);
     changeAnswer(newAnswer);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -5165,9 +5198,9 @@ var FillInTheBlanksActivityContent = ({
         templateType: "FILL_IN_THE_BLANKS"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5188,8 +5221,8 @@ var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 // src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
 var import_react22 = require("react");
 var import_react_dnd4 = require("react-dnd");
-var import_react_katex4 = require("react-katex");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react_katex5 = require("react-katex");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5279,15 +5312,15 @@ var GroupingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           DraggableItem_default,
           {
             item: { index: materialValue },
             type: "GROUPING",
-            component: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            component: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "div",
               {
                 className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} ${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 transition-all duration-300`,
@@ -5301,16 +5334,16 @@ var GroupingActivityMaterialContent = ({
                     setSelectedValue(null);
                   }
                 },
-                children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialValue
-                ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
-                )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5333,31 +5366,31 @@ var GroupingActivityMaterialContent = ({
           index
         );
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "overflow-y-auto max-h-[600px]", children: Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-y-auto max-h-[600px]", children: Object.keys(answerMap).map((answerMapKey, index) => /* @__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)(
         "div",
         {
           className: `border-catchup-blue ${contentMap.type === "TEXT" ? "h-catchup-activity-text-outer-box-item" : "h-catchup-activity-media-outer-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-            (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+            (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
           ) }) })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-full py-3", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-full py-3", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             DroppableItem_default,
             {
               item: { index: answerMapKey },
@@ -5365,17 +5398,17 @@ var GroupingActivityMaterialContent = ({
               target: selectedTargetKey,
               setTarget: setSelectedTargetKey,
               dropRef: drop,
-              component: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-row items-center gap-2 w-max h-full", children: answerMap[answerMapKey].map(
+              component: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-row items-center gap-2 w-max h-full", children: answerMap[answerMapKey].map(
                 (answerMapValue, answerMapIndex) => {
                   const learnerAnswerState = checkAnswerState(
                     materialMap[answerMapKey],
                     answerMapValue
                   );
-                  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     "div",
                     {
                       className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"}`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                         "div",
                         {
                           className: `${learnerAnswerState === "EMPTY" ? "border-catchup-lighter-gray" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"} border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`,
@@ -5391,21 +5424,21 @@ var GroupingActivityMaterialContent = ({
                               setSelectedValue(null);
                             }
                           },
-                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                             answerMapValue
-                          ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                          ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                             "span",
                             {
                               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                                import_react_katex4.InlineMath,
+                              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                                import_react_katex5.InlineMath,
                                 {
                                   math: inputPart.value
                                 }
                               ) }) : inputPart.value
                             },
                             index2
-                          )) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                          )) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                             ShowMaterialMediaByContentType_default,
                             {
                               contentType: contentMap.type,
@@ -5431,7 +5464,7 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 
 // src/components/activities/GroupingActivityContent.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var GroupingActivityContent = ({
   answer,
   data,
@@ -5456,16 +5489,16 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: groupingBodyMap,
         templateType: "GROUPING"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       GroupingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5485,8 +5518,8 @@ var GroupingActivityContent_default = GroupingActivityContent;
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
 var import_react23 = require("react");
 var import_react_dnd5 = require("react-dnd");
-var import_react_katex5 = require("react-katex");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react_katex6 = require("react-katex");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5567,19 +5600,19 @@ var MatchingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
           ref: itemsRef,
           className: "flex-shrink-0 flex flex-row gap-x-4 gap-y-4 overflow-x-auto py-2",
-          children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             DraggableItem_default,
             {
               item: { index: materialValue },
               type: "MATCHING",
-              component: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              component: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 "div",
                 {
                   className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} ${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 transition-all duration-300`,
@@ -5593,16 +5626,16 @@ var MatchingActivityMaterialContent = ({
                       setSelectedValue(null);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                     materialValue
-                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
-                  )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -5626,32 +5659,32 @@ var MatchingActivityMaterialContent = ({
           ))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DividerLine_default, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "overflow-y-auto max-h-[600px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "overflow-y-auto max-h-[600px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-row w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-row w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             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 transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               answerMapKey
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }) })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} ${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 transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
@@ -5660,7 +5693,7 @@ var MatchingActivityMaterialContent = ({
                 setSelectedValue(null);
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               DroppableItem_default,
               {
                 item: { index: answerMapKey },
@@ -5668,7 +5701,7 @@ var MatchingActivityMaterialContent = ({
                 target: selectedTargetKey,
                 setTarget: setSelectedTargetKey,
                 dropRef: drop,
-                component: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                component: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   "div",
                   {
                     className: "h-full flex-1 flex flex-row items-center justify-center px-4",
@@ -5681,16 +5714,16 @@ var MatchingActivityMaterialContent = ({
                         );
                       }
                     },
-                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       answerMap[answerMapKey]
-                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
-                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -5713,7 +5746,7 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 
 // src/components/activities/MatchingActivityContent.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var MatchingActivityContent = ({
   answer,
   data,
@@ -5734,16 +5767,16 @@ var MatchingActivityContent = ({
     answerMap[key] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: matchingBodyMap,
         templateType: "MATCHING"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       MatchingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5761,8 +5794,8 @@ var MatchingActivityContent = ({
 var MatchingActivityContent_default = MatchingActivityContent;
 
 // src/components/activities/material-contents/MCMAActivityMaterialContent.tsx
-var import_react_katex6 = require("react-katex");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react_katex7 = require("react-katex");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var MCMAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5795,10 +5828,10 @@ var MCMAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswerList = retrieveCorrectAnswerList();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
           const foundAnswer = answerMap[materialKey].find(
             (learnerAnswer) => learnerAnswer === materialSubKey
@@ -5811,7 +5844,7 @@ var MCMAActivityMaterialContent = ({
           const foundIndex = correctAnswerList.findIndex(
             (correctAnswer) => correctAnswer === materialSubKey
           );
-          return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
             "div",
             {
               className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && foundIndex !== -1 || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
@@ -5819,7 +5852,7 @@ var MCMAActivityMaterialContent = ({
                 onChange(answer, materialKey, materialSubKey);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   BaseImage_default,
                   {
                     src: answerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -5829,16 +5862,16 @@ var MCMAActivityMaterialContent = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialSubKey
-                ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index3
-                )) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                )) }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5852,13 +5885,13 @@ var MCMAActivityMaterialContent = ({
             index2
           );
         }
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) }, materialKey)
@@ -5868,7 +5901,7 @@ var MCMAActivityMaterialContent = ({
 var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
 
 // src/components/activities/MCMAActivityContent.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var MCMAActivityContent = ({
   answer,
   data,
@@ -5896,11 +5929,11 @@ var MCMAActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       MCMAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5917,8 +5950,8 @@ var MCMAActivityContent = ({
 var MCMAActivityContent_default = MCMAActivityContent;
 
 // src/components/activities/material-contents/MCSAActivityMaterialContent.tsx
-var import_react_katex7 = require("react-katex");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react_katex8 = require("react-katex");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var MCSAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5948,10 +5981,10 @@ var MCSAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswer = retrieveCorrectAnswer();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "div",
         {
           className: `flex flex-row w-full ${Object.keys(materialMap[materialKey]).length <= 4 ? "justify-center" : ""} flex-wrap`,
@@ -5962,7 +5995,7 @@ var MCSAActivityMaterialContent = ({
                 materialSubKey,
                 answerMap[materialKey]
               );
-              return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                 "div",
                 {
                   className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && materialSubKey === correctAnswer || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
@@ -5970,7 +6003,7 @@ var MCSAActivityMaterialContent = ({
                     onChange(answer, materialKey, materialSubKey);
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       BaseImage_default,
                       {
                         src: answerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
@@ -5980,16 +6013,16 @@ var MCSAActivityMaterialContent = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialSubKey
-                    ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_katex8.InlineMath, { math: inputPart.value }) }) : inputPart.value
                       },
                       index3
-                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -6005,13 +6038,13 @@ var MCSAActivityMaterialContent = ({
             }
           )
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_katex8.InlineMath, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) })
@@ -6021,7 +6054,7 @@ var MCSAActivityMaterialContent = ({
 var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
 
 // src/components/activities/MCSAActivityContent.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var MCSAActivityContent = ({
   answer,
   data,
@@ -6042,11 +6075,11 @@ var MCSAActivityContent = ({
     answerMap[key] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       MCSAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6091,7 +6124,7 @@ var retrieveDocumentTypeFromExtension = (format) => {
 };
 
 // src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var OpenEndedActivityMaterialContent = ({
   answer,
   contentMap,
@@ -6121,7 +6154,7 @@ var OpenEndedActivityMaterialContent = ({
       documentType = retrieveDocumentTypeFromExtension(extension);
     }
     if (documentType === "IMAGE") {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         BaseImage_default,
         {
           src: answerMapAnswer,
@@ -6131,9 +6164,9 @@ var OpenEndedActivityMaterialContent = ({
         }
       ) });
     } else if (documentType === "PDF") {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BasePDF_default, { file: answerMapAnswer });
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BasePDF_default, { file: answerMapAnswer });
     } else if (documentType === "AUDIO") {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-[56px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-[56px]", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "audio",
         {
           className: "h-full w-full rounded-catchup-xlarge",
@@ -6144,7 +6177,7 @@ var OpenEndedActivityMaterialContent = ({
         }
       ) });
     } else if (documentType === "TEXT") {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         InputGroup_default,
         {
           type: "textarea",
@@ -6163,7 +6196,7 @@ var OpenEndedActivityMaterialContent = ({
     const answerMapAnswer = answerMap2["ANSWER"];
     const extension = answerMapAnswer.split(".").pop();
     const documentType = retrieveDocumentTypeFromExtension(extension);
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: documentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: documentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       BaseImage_default,
       {
         src: answerMapAnswer,
@@ -6171,11 +6204,11 @@ var OpenEndedActivityMaterialContent = ({
         size: "custom",
         className: "w-[80%] rounded-catchup-xlarge"
       }
-    ) }) : documentType === "PDF" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BasePDF_default, { file: answerMapAnswer }) }) : null });
+    ) }) : documentType === "PDF" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BasePDF_default, { file: answerMapAnswer }) }) : null });
   };
   const RenderAudioContent = (answerMap2) => {
     const answerMapAnswer = answerMap2["ANSWER"];
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-[56px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-[56px]", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "audio",
       {
         className: "h-full w-full rounded-catchup-xlarge",
@@ -6187,16 +6220,16 @@ var OpenEndedActivityMaterialContent = ({
     ) });
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DividerLine_default, {}) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DividerLine_default, {}) }),
     contentMap.type === "TEXT" ? RenderTextContent(answerMap) : contentMap.type === "IMAGE" ? RenderImageContent(answerMap) : contentMap.type === "AUDIO" ? RenderAudioContent(answerMap) : null
   ] }) });
 };
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 
 // src/components/activities/OpenEndedActivityContent.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var OpenEndedActivityContent = ({
   answer,
   data,
@@ -6217,12 +6250,12 @@ var OpenEndedActivityContent = ({
     answerMap["ANSWER"] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "div",
       {
         className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%]" : "w-full"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           ActivityBodyContent_default,
           {
             bodyMap: openEndedBodyMap,
@@ -6231,16 +6264,16 @@ var OpenEndedActivityContent = ({
         )
       }
     ),
-    showMaterialContent ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    showMaterialContent ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "div",
         {
           className: `${isFullScreen ? "contents" : "contents md:hidden"}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DividerLine_default, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DividerLine_default, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(VerticalDividerLine_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(VerticalDividerLine_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         OpenEndedActivityMaterialContent_default,
         {
           answer,
@@ -6257,7 +6290,7 @@ var OpenEndedActivityContent_default = OpenEndedActivityContent;
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
 var import_react26 = require("react");
 var import_react_dnd7 = require("react-dnd");
-var import_react_katex8 = require("react-katex");
+var import_react_katex9 = require("react-katex");
 
 // src/hooks/useScreenSize.ts
 var import_react24 = require("react");
@@ -6297,7 +6330,7 @@ var useScreenSize_default = useScreenSize;
 // src/components/dnds/DraggableDroppableItem.tsx
 var import_react25 = require("react");
 var import_react_dnd6 = require("react-dnd");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var DraggableDroppableItem = ({
   item,
   type,
@@ -6334,19 +6367,19 @@ var DraggableDroppableItem = ({
   });
   const opacity = isDragging ? 0.4 : 1;
   drag(drop(ref));
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "div",
     {
       className: `${isDragging ? "w-[0px] opacity-0" : "w-full opacity-100"} transition-all duration-500`,
       ref: dropRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref, className: "w-full", style: { opacity }, children: component })
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, className: "w-full", style: { opacity }, children: component })
     }
   );
 };
 var DraggableDroppableItem_default = DraggableDroppableItem;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6372,7 +6405,7 @@ var OrderingActivityMaterialContent = ({
   });
   (0, import_react26.useEffect)(() => {
     if (!screenSize) return;
-    if (screenSize.width <= 768) {
+    if (screenSize.width <= 1024) {
       setView("TABLET");
     } else {
       setView("PC");
@@ -6439,12 +6472,12 @@ var OrderingActivityMaterialContent = ({
     return 0;
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
     const learnerAnswerState = checkAnswerState(
       answerMap[materialKey] + "",
       index + ""
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "div",
       {
         className: `flex flex-row items-center my-4 mx-2`,
@@ -6452,20 +6485,20 @@ var OrderingActivityMaterialContent = ({
           marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-catchup-activity-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "h-catchup-activity-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             "div",
             {
               className: `${selectedKey === materialKey ? "border-2 border-catchup-light-gray" : "border-2 border-catchup-blue"} flex flex-col items-center justify-center transition-all duration-300 rounded-catchup-full w-[50px] h-[50px]`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             DraggableDroppableItem_default,
             {
               item: { index: materialKey },
               type: "ORDERING",
               dropRef: drop,
-              component: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              component: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 "div",
                 {
                   className: `${canDrop ? selectedKey !== materialKey ? selectedTargetKey === materialKey ? "bg-catchup-light-blue rounded-catchup-xlarge" : "bg-catchup-light-blue rounded-catchup-xlarge opacity-40" : "" : ""} ${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"}`,
@@ -6474,16 +6507,16 @@ var OrderingActivityMaterialContent = ({
                       setSelectedKey(materialKey);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                     materialMap[answerMap[materialKey]]
-                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_katex8.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
-                  )) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  )) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -6515,7 +6548,7 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var OrderingActivityContent = ({
   answer,
   data,
@@ -6539,16 +6572,16 @@ var OrderingActivityContent = ({
     answerMap[secondaryKey] = prevValue;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: orderingBodyMap,
         templateType: "ORDERING"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6567,8 +6600,8 @@ var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
 var import_react27 = require("react");
-var import_react_katex9 = require("react-katex");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react_katex10 = require("react-katex");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6621,14 +6654,14 @@ var TrueFalseActivityMaterialContent = ({
     return "INCORRECT";
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
     ] }),
-    checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
+    checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
       const correctAnswer = materialMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
@@ -6639,21 +6672,21 @@ var TrueFalseActivityMaterialContent = ({
         correctAnswer,
         learnerAnswer
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         "div",
         {
           className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 ${learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               shuffleOption
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
-            )) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            )) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6662,8 +6695,8 @@ var TrueFalseActivityMaterialContent = ({
               },
               `${uniqueValue}-${index}`
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 BaseImage_default,
                 {
                   src: answerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6674,7 +6707,7 @@ var TrueFalseActivityMaterialContent = ({
                   }
                 }
               ) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 BaseImage_default,
                 {
                   src: answerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6690,14 +6723,14 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-      answerMap.trueList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { children: item }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "underline", children: i18n_default.t("true") }) })
+    }) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+      answerMap.trueList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { children: item }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "underline", children: i18n_default.t("true") }) })
       ] })),
-      answerMap.falseList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { children: item }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "underline", children: i18n_default.t("false") }) })
+      answerMap.falseList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { children: item }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))
     ] })
   ] });
@@ -6705,7 +6738,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 
 // src/components/activities/TrueFalseActivityContent.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var TrueFalseActivityContent = ({
   answer,
   data,
@@ -6756,17 +6789,17 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: trueFalseBodyMap,
         templateType: "GROUPING"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       TrueFalseActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6784,8 +6817,8 @@ var TrueFalseActivityContent = ({
 var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
 // src/components/activities/solution-contents/ActivitySolutionContent.tsx
-var import_react_katex10 = require("react-katex");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_react_katex11 = require("react-katex");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -6815,8 +6848,8 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
     Object.keys(solutionMap).map((key) => {
       let currentItem;
       try {
@@ -6826,12 +6859,12 @@ var ActivitySolutionContent = ({
         return null;
       }
       const { value } = currentItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
-        (inputPart, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
+        (inputPart, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "span",
           {
             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -6842,8 +6875,8 @@ var ActivitySolutionContent = ({
 var ActivitySolutionContent_default = ActivitySolutionContent;
 
 // src/components/activities/evaluation-rubric-contents/ActivityEvaluationRubricContent.tsx
-var import_react_katex11 = require("react-katex");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react_katex12 = require("react-katex");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -6864,6 +6897,7 @@ var ActivityEvaluationRubricContent = ({
   if (!evaluationRubricMapKey) return null;
   const evaluationRubricMapString = data[evaluationRubricMapKey];
   let evaluationRubricMap;
+  if (!evaluationRubricMapString) return;
   try {
     evaluationRubricMap = JSON.parse(evaluationRubricMapString);
   } catch (error) {
@@ -6872,21 +6906,21 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
     Object.keys(evaluationRubricMap).map((key, index) => {
       const currentItem = JSON.parse(evaluationRubricMap[key]);
       const { value } = currentItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "p",
         {
           className: "my-1 text-xl whitespace-pre-wrap",
           children: constructInputWithSpecialExpressionList(value).map(
-            (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
@@ -6903,28 +6937,28 @@ var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 var import_react28 = require("react");
 
 // src/components/boxes/SelectionBox.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
       className: `${option.id === selectedId ? "border-catchup-blue-400" : "border-catchup-gray-100 hover:border-catchup-blue-500"} border-2 rounded-catchup-xlarge py-3 px-8 cursor-pointer duration-300 transition-all`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
           children: [
             option.icon,
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { children: option.text }),
-              option.subText ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: "text-md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { children: option.text }),
+              option.subText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("p", { className: "text-md", children: [
                 "(",
                 option.subText,
                 ")"
@@ -6940,7 +6974,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ActivityPreviewByData = ({
   data,
   showType,
@@ -6998,11 +7032,11 @@ var ActivityPreviewByData = ({
   }, [data, lockedType, typeOptionList, showDifficulty]);
   if (!data) return;
   const answer = constructAnswerBasedOnData(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
-    showType ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mb-4", children: [
-        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+    showType ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mb-4", children: [
+        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           SelectionBox_default,
           {
             optionList,
@@ -7013,9 +7047,9 @@ var ActivityPreviewByData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DividerLine_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DividerLine_default, {})
     ] }) : null,
-    selectedType ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    selectedType ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       OrderingActivityContent_default,
       {
         answer,
@@ -7029,7 +7063,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       DropdownActivityContent_default,
       {
         answer,
@@ -7043,7 +7077,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       MCSAActivityContent_default,
       {
         answer,
@@ -7057,7 +7091,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       MCMAActivityContent_default,
       {
         answer,
@@ -7071,7 +7105,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       MatchingActivityContent_default,
       {
         answer,
@@ -7084,7 +7118,7 @@ var ActivityPreviewByData = ({
         isPreview: true,
         showCorrectAnswer: true
       }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       GroupingActivityContent_default,
       {
         answer,
@@ -7097,7 +7131,7 @@ var ActivityPreviewByData = ({
         isPreview: true,
         showCorrectAnswer: true
       }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       FillInTheBlanksActivityContent_default,
       {
         answer,
@@ -7111,7 +7145,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       OpenEndedActivityContent_default,
       {
         answer,
@@ -7123,7 +7157,7 @@ var ActivityPreviewByData = ({
         isPreview: true,
         isFullScreen
       }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       TrueFalseActivityContent_default,
       {
         answer,
@@ -7138,14 +7172,14 @@ var ActivityPreviewByData = ({
         isFullScreen
       }
     ) : null }, selectedType) : null,
-    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7158,7 +7192,7 @@ var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/activities/ActivityPreviewByAnswerData.tsx
 var import_react29 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var ActivityPreviewByAnswerData = ({
   data,
   showType = true,
@@ -7266,38 +7300,38 @@ var ActivityPreviewByAnswerData = ({
     };
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           OpenEndedActivityContent_default,
           __spreadProps(__spreadValues({}, commonProps), {
             showMaterialContent: true
           })
         ) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
       default:
         return null;
     }
   };
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mb-4", children: [
-        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "mb-4", children: [
+        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           SelectionBox_default,
           {
             optionList,
@@ -7308,20 +7342,20 @@ var ActivityPreviewByAnswerData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DividerLine_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col my-2 w-full p-5", children: [
-      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ActivityEmptyContent_default, {}) : null,
-      selectedType ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { children: RenderSelectedActivityContent() }, selectedType) : null
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col my-2 w-full p-5", children: [
+      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ActivityEmptyContent_default, {}) : null,
+      selectedType ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: RenderSelectedActivityContent() }, selectedType) : null
     ] }),
-    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7333,17 +7367,17 @@ var ActivityPreviewByAnswerData = ({
 var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
 
 // src/components/errors/StatusError.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var StatusError = ({
   statusCode,
   statusText,
   textSize
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "text-center my-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "text-center my-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
         "(",
         statusCode ? `${statusCode} - ` : null,
         statusText,
@@ -7355,9 +7389,9 @@ var StatusError = ({
 var StatusError_default = StatusError;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7367,7 +7401,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7377,9 +7411,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       InputGroup_default,
       {
         type,
@@ -7396,7 +7430,7 @@ var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
 var import_react30 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7414,8 +7448,8 @@ var PageTravelGroup = ({
   (0, import_react30.useEffect)(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
+    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       BaseImage_default,
       {
         size: "small",
@@ -7433,7 +7467,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "p",
       {
         className: `${pageNumber === index ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -7448,7 +7482,7 @@ var PageTravelGroup = ({
         children: index + 1
       }
     ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       BaseImage_default,
       {
         size: "small",
@@ -7466,7 +7500,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "input",
       {
         className: `w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input`,
@@ -7490,14 +7524,14 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7512,14 +7546,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7529,7 +7563,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { children: option.text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -7540,7 +7574,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7550,7 +7584,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
@@ -7558,8 +7592,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7568,20 +7602,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         "p",
         {
           className: `${selectedId === option.id ? "text-catchup-white bg-catchup-blue-500" : "text-catchup-gray-300"} transition-all duration-300 rounded-catchup-medium px-2 py-1`,
@@ -7595,34 +7629,34 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var ActivityTemplateLabel = ({
   title,
   icon,
   font
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CategoryLabel.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var CategoryLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       BaseImage_default,
       {
         src: "/icons/category-label.webp",
@@ -7630,40 +7664,40 @@ var CategoryLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var CategoryLabel_default = CategoryLabel;
 
 // src/components/labels/CoterieLabel.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -7671,16 +7705,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7688,53 +7722,29 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "", children: value }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
-// src/components/texts/InputWithSpecialExpression.tsx
-var import_react_katex12 = require("react-katex");
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var InputWithSpecialExpression = ({
-  value,
-  showSpecialOnly
-}) => {
-  const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-    "span",
-    {
-      className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
-    }
-  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-    "span",
-    {
-      className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
-    }
-  )) }) });
-};
-var InputWithSpecialExpression_default = InputWithSpecialExpression;
-
 // src/components/titles/BaseTitle.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var BaseTitle = ({