catchup-library-web 2.6.11 → 2.6.13

package/dist/index.js

@@ -122,6 +122,7 @@ __export(index_exports, {
   SelectionTab: () => SelectionTab_default,
   SelectionTabFill: () => SelectionTabFill_default,
   SelectionTabPill: () => SelectionTabPill_default,
+  StartButton: () => StartButton_default,
   StatusError: () => StatusError_default,
   SubTitle: () => SubTitle_default,
   THREE_MONTHS: () => THREE_MONTHS,
@@ -1085,8 +1086,64 @@ var ApproveButton = ({
 };
 var ApproveButton_default = ApproveButton;
 
-// src/components/cards/FullCard.tsx
+// src/components/buttons/StartButton.tsx
+var import_react9 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var StartButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  icon
+}) => {
+  const [loading, setLoading] = (0, import_react9.useState)(false);
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    yield onClick();
+    setLoading(false);
+  });
+  let currentHeightClassName;
+  let currentLoadingSize;
+  if (size === "small") {
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  } else if (size === "medium") {
+    currentHeightClassName = "h-12";
+    currentLoadingSize = 18;
+  } else if (size === "large") {
+    currentHeightClassName = "h-14";
+    currentLoadingSize = 20;
+  } else if (size === "unlimited") {
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "button",
+    {
+      className: `px-8 py-2 bg-gradient-to-r from-catchup-green to-catchup-hover-green text-catchup-white font-bold text-lg rounded-catchup-full shadow-card ${loading ? "" : disabled ? "opacity-50" : "hover:from-catchup-hover-green hover:to-catchup-green hover:shadow-full-card hover:scale-105"} transition-all duration-300 transform ${currentHeightClassName || ""}`,
+      onClick: internalOnClick,
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        BaseLoading_default,
+        {
+          height: currentLoadingSize,
+          width: currentLoadingSize,
+          primaryColor: "#ffffff",
+          secondaryColor: "#ffffff"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: icon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: title })
+      ] })
+    }
+  );
+};
+var StartButton_default = StartButton;
+
+// src/components/cards/FullCard.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FullCard = ({
   backgroundColor,
   borderColor,
@@ -1094,7 +1151,7 @@ var FullCard = ({
   usePadding,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       className: `min-h-full 
@@ -1102,7 +1159,7 @@ var FullCard = ({
         ${borderColor ? borderColor : "border-catchup-gray-50"} 
         ${opacity ? opacity : "opacity-100"} 
         rounded-catchup-xlarge w-full `,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
           className: `flex flex-col mx-auto ${usePadding === false ? "p-0" : "p-6"} h-full`,
@@ -1115,14 +1172,14 @@ var FullCard = ({
 var FullCard_default = FullCard;
 
 // src/components/cards/BaseCard.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var BaseCard = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "bg-catchup-white rounded-catchup-xlarge h-catchup-card w-catchup-card shadow-dropdown", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col mx-auto p-8 h-full", children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "bg-catchup-white rounded-catchup-xlarge h-catchup-card w-catchup-card shadow-dropdown", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col mx-auto p-8 h-full", children }) }) });
 };
 var BaseCard_default = BaseCard;
 
 // src/components/loading/BaseLoadingWithText.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/language/i18n.ts
 var import_i18next = __toESM(require("i18next"));
@@ -1131,19 +1188,19 @@ import_i18next.default.use(import_react_i18next.initReactI18next);
 var i18n_default = import_i18next.default;
 
 // src/components/loading/BaseLoadingWithText.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var BaseLoadingWithText = (props) => {
   const { height, width, size, primaryColor, secondaryColor, hideText } = props;
-  const [initialTimestamp, setInitialTimestamp] = (0, import_react9.useState)(
+  const [initialTimestamp, setInitialTimestamp] = (0, import_react10.useState)(
     (/* @__PURE__ */ new Date()).getTime()
   );
-  const [currentTimestamp, setCurrentTimeStamp] = (0, import_react9.useState)(
+  const [currentTimestamp, setCurrentTimeStamp] = (0, import_react10.useState)(
     (/* @__PURE__ */ new Date()).getTime()
   );
   let timerId;
   let textClassName;
   let textWidth;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     timerId = setInterval(() => {
       setCurrentTimeStamp((/* @__PURE__ */ new Date()).getTime());
     }, 1e3);
@@ -1179,8 +1236,8 @@ var BaseLoadingWithText = (props) => {
     textWidth = 250;
   }
   const loadingText = retrieveLoadingText();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       BaseLoading_default,
       {
         height,
@@ -1190,12 +1247,12 @@ var BaseLoadingWithText = (props) => {
         secondaryColor
       }
     ),
-    !hideText && size !== "small" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    !hideText && size !== "small" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         className: `${textClassName} text-center`,
         style: { width: textWidth },
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "font-bold", children: loadingText })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "font-bold", children: loadingText })
       }
     ) : null
   ] });
@@ -1206,36 +1263,36 @@ var BaseLoadingWithText_default = BaseLoadingWithText;
 var import_react_modal = __toESM(require("react-modal"));
 
 // src/components/titles/BaseTitle.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
+      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
         totalItemCount,
         " ",
         itemName
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/dividers/DividerLine.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var DividerLine = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
 };
 var DividerLine_default = DividerLine;
 
 // src/components/modals/BaseModal.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var BaseModal = ({
   title,
   isOpen,
@@ -1244,7 +1301,7 @@ var BaseModal = ({
   onRequestClose,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_react_modal.default,
     {
       isOpen,
@@ -1272,14 +1329,14 @@ var BaseModal = ({
         }
       },
       contentLabel: "",
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           className: `font-quicksand ${size === "small" ? "w-[600px]" : size === "medium" ? "w-[900px]" : "w-[600px] lg:w-[900px] xl:w-[1200px] 2xl:w-[1500px]"}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(FullCard_default, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-row justify-between", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BaseTitle_default, { title }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(FullCard_default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BaseTitle_default, { title }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/cross-red.webp",
@@ -1289,8 +1346,8 @@ var BaseModal = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DividerLine_default, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "max-h-[calc(98vh-120px)] overflow-auto", children })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DividerLine_default, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "max-h-[calc(98vh-120px)] overflow-auto", children })
           ] })
         }
       )
@@ -1300,20 +1357,20 @@ var BaseModal = ({
 var BaseModal_default = BaseModal;
 
 // src/components/pdfs/BasePDF.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_pdf = require("react-pdf");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var BasePDF = ({ file }) => {
-  const [pageNumber, setPageNumber] = (0, import_react10.useState)(1);
-  const [numberOfPages, setNumberOfPages] = (0, import_react10.useState)(0);
+  const [pageNumber, setPageNumber] = (0, import_react11.useState)(1);
+  const [numberOfPages, setNumberOfPages] = (0, import_react11.useState)(0);
   const handleOnDocumentLoadSuccess = ({ numPages }) => {
     setPageNumber(1);
     setNumberOfPages(numPages);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_pdf.Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_pdf.Page, { pageNumber }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row items-center justify-center", children: [
-      pageNumber === 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_pdf.Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_pdf.Page, { pageNumber }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-row items-center justify-center", children: [
+      pageNumber === 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         BaseImage_default,
         {
           alt: "arrow-left",
@@ -1324,7 +1381,7 @@ var BasePDF = ({ file }) => {
           }
         }
       ) }) }),
-      Array.from(Array(numberOfPages).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Array.from(Array(numberOfPages).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "p",
         {
           className: `${pageNumber === index + 1 ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -1334,7 +1391,7 @@ var BasePDF = ({ file }) => {
           children: index + 1
         }
       ) }, index)),
-      numberOfPages === 0 || pageNumber === numberOfPages ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      numberOfPages === 0 || pageNumber === numberOfPages ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         BaseImage_default,
         {
           src: "/icons/arrow-right.webp",
@@ -1351,14 +1408,14 @@ var BasePDF = ({ file }) => {
 var BasePDF_default = BasePDF;
 
 // src/components/activities/empty-contents/ActivityEmptyContent.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ActivityEmptyContent = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 mb-2 bg-catchup-orange text-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-lg", children: i18n_default.t("you_have_set_this_activity_as_empty") }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 mb-2 bg-catchup-orange text-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-lg", children: i18n_default.t("you_have_set_this_activity_as_empty") }) });
 };
 var ActivityEmptyContent_default = ActivityEmptyContent;
 
 // src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_modal2 = __toESM(require("react-modal"));
 
 // src/utilization/CatchtivityUtilization.ts
@@ -3377,15 +3434,15 @@ var retrieveActivityCountOptionList = () => {
 
 // src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
 var import_react_katex = require("react-katex");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ShowBodyMediaByContentType = ({
   index,
   type,
   value,
   size
 }) => {
-  const [showFullScreen, setShowFullScreen] = (0, import_react11.useState)(false);
-  const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react11.useState)("");
+  const [showFullScreen, setShowFullScreen] = (0, import_react12.useState)(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react12.useState)("");
   const convertToPercentage = (size2) => {
     switch (size2) {
       case "1/3":
@@ -3399,17 +3456,17 @@ var ShowBodyMediaByContentType = ({
     }
   };
   const renderSpecialExpressions = (inputPart, inputPartIndex) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "span",
       {
         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
+        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
       },
       inputPartIndex
     );
   };
   const renderTextContent = (text, itemKey) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(text).map(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(text).map(
       (inputPart, inputPartIndex) => renderSpecialExpressions(inputPart, inputPartIndex)
     ) }, itemKey);
   };
@@ -3441,7 +3498,7 @@ var ShowBodyMediaByContentType = ({
         currentIndex++;
         const itemKey = `text-inside-${index}-${currentIndex}`;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
             (inputPart, inputPartIndex) => renderSpecialExpressions(inputPart, inputPartIndex)
           ) }, itemKey)
         );
@@ -3458,7 +3515,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3477,12 +3534,12 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "div",
             {
               className: "relative w-[200px]",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   BaseImage_default,
                   {
                     src: imageSource,
@@ -3491,12 +3548,12 @@ var ShowBodyMediaByContentType = ({
                     className: "rounded-catchup-xlarge"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "div",
                   {
                     className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
                     onClick: () => handleOpenFullScreen(imageSource),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       BaseImage_default,
                       {
                         src: "/icons/arrow-up.webp",
@@ -3525,7 +3582,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3544,7 +3601,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "video",
             {
               src: videoSource,
@@ -3567,7 +3624,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3586,7 +3643,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "audio",
             {
               src: audioSource,
@@ -3611,13 +3668,13 @@ var ShowBodyMediaByContentType = ({
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "div",
             {
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xl", children: imageText })
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xl", children: imageText })
               ]
             },
             `img-desc-${index}-${currentIndex}`
@@ -3631,7 +3688,7 @@ var ShowBodyMediaByContentType = ({
     return valuePartList;
   };
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       import_react_modal2.default,
       {
         isOpen: showFullScreen,
@@ -3660,8 +3717,8 @@ var ShowBodyMediaByContentType = ({
           }
         },
         contentLabel: "Image Fullscreen View",
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -3673,7 +3730,7 @@ var ShowBodyMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -3689,10 +3746,10 @@ var ShowBodyMediaByContentType = ({
   const RenderMainContent = () => {
     switch (type) {
       case "TEXT":
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             BaseImage_default,
             {
               src: value,
@@ -3702,12 +3759,12 @@ var ShowBodyMediaByContentType = ({
               imageClassName: "max-h-[50vh] max-w-full object-contain rounded-catchup-xlarge"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
               onClick: () => handleOpenFullScreen(value),
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/arrow-up.webp",
@@ -3720,7 +3777,7 @@ var ShowBodyMediaByContentType = ({
           )
         ] }) });
       case "VIDEO":
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "video",
           {
             src: value,
@@ -3729,12 +3786,12 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "AUDIO":
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "w-full", children: [
     RenderShowFullScreenItem(),
     RenderMainContent()
   ] }, `body-content-${index}`);
@@ -3742,7 +3799,7 @@ var ShowBodyMediaByContentType = ({
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
 // src/components/activities/body-contents/ActivityBodyContent.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var ActivityBodyContent = ({
   templateType,
   bodyMap,
@@ -3823,7 +3880,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -3837,9 +3894,9 @@ var ActivityBodyContent = ({
 var ActivityBodyContent_default = ActivityBodyContent;
 
 // src/components/dividers/VerticalDividerLine.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var VerticalDividerLine = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
 };
 var VerticalDividerLine_default = VerticalDividerLine;
 
@@ -3849,8 +3906,8 @@ var import_react_katex2 = require("react-katex");
 // src/components/groups/InputGroup.tsx
 var import_react_select = __toESM(require("react-select"));
 var import_react_switch = __toESM(require("react-switch"));
-var import_react12 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var InputGroup = ({
   type,
   title,
@@ -3875,12 +3932,12 @@ var InputGroup = ({
   checked,
   description
 }) => {
-  const textAreaRef = (0, import_react12.useRef)(null);
-  const latexTextAreaRef = (0, import_react12.useRef)(null);
-  const [showMathConstructor, setShowMathConstructor] = (0, import_react12.useState)(false);
-  const [mathValue, setMathValue] = (0, import_react12.useState)("");
-  const mathFieldRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const textAreaRef = (0, import_react13.useRef)(null);
+  const latexTextAreaRef = (0, import_react13.useRef)(null);
+  const [showMathConstructor, setShowMathConstructor] = (0, import_react13.useState)(false);
+  const [mathValue, setMathValue] = (0, import_react13.useState)("");
+  const mathFieldRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
     if (value) {
@@ -3889,7 +3946,7 @@ var InputGroup = ({
       textAreaRef.current.style.height = `44px`;
     }
   }, [textAreaRef, value]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!latexTextAreaRef) return;
     if (!latexTextAreaRef.current) return;
     if (value) {
@@ -3898,7 +3955,7 @@ var InputGroup = ({
       latexTextAreaRef.current.style.height = `44px`;
     }
   }, [latexTextAreaRef, value]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!useMath) return;
     import("mathlive").then(({ MathfieldElement }) => {
       if (!customElements.get("math-field")) {
@@ -3942,7 +3999,7 @@ var InputGroup = ({
       onChange && onChange(e);
     }
   };
-  const handleMathFieldChange = (0, import_react12.useCallback)(() => {
+  const handleMathFieldChange = (0, import_react13.useCallback)(() => {
     if (!mathFieldRef.current) return;
     const latexValue = mathFieldRef.current.value;
     const wasFocused = mathFieldRef.current === document.activeElement;
@@ -3965,7 +4022,7 @@ var InputGroup = ({
     setShowMathConstructor(true);
   };
   const MathConstructorModal = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       BaseModal_default,
       {
         title: i18n_default.t("math_editor"),
@@ -3976,8 +4033,8 @@ var InputGroup = ({
         onRequestClose: () => {
           setShowMathConstructor(false);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-catchup-white rounded-lg overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "p-6 space-y-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "bg-catchup-white rounded-lg overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "p-6 space-y-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "math-field",
             {
               ref: mathFieldRef,
@@ -4003,10 +4060,10 @@ var InputGroup = ({
               }
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "textarea",
                 {
                   ref: latexTextAreaRef,
@@ -4016,7 +4073,7 @@ var InputGroup = ({
                   placeholder: i18n_default.t("latex_will_appear_here")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "button",
                 {
                   onClick: handleCopyLatex,
@@ -4032,13 +4089,13 @@ var InputGroup = ({
     );
   };
   const CheckboxInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         className: "flex flex-row items-center gap-x-1 cursor-pointer",
         onClick,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             BaseImage_default,
             {
               src: value ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -4048,15 +4105,15 @@ var InputGroup = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "", children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "", children: title })
         ]
       }
     );
   };
   const FileInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "input",
         {
           className: "w-full py-2 px-4 border border-catchup-gray-100 placeholder-catchup-gray-200 rounded-catchup-large text-black focus:outline-none focus:border-catchup-blue-400 focus:shadow-input",
@@ -4073,9 +4130,9 @@ var InputGroup = ({
     ] });
   };
   const DateInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "input",
         {
           className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error" : theme === "red" ? "border-catchup-red bg-catchup-red text-catchup-white focus:border-catchup-red" : "border-catchup-gray-100 placeholder-catchup-gray-200 focus:border-catchup-blue-400"} rounded-catchup-large text-black focus:outline-none focus:shadow-input`,
@@ -4092,9 +4149,9 @@ var InputGroup = ({
     ] });
   };
   const SearchableSelectInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         import_react_select.default,
         {
           options: convertOptionListToSelectComponent(
@@ -4157,16 +4214,16 @@ var InputGroup = ({
     ] });
   };
   const TextAreaInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "my-1 flex-1 flex flex-col relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: value && limit ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "my-1 flex-1 flex flex-col relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: value && limit ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
         ] }) : null })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "textarea",
         {
           ref: textAreaRef,
@@ -4179,22 +4236,22 @@ var InputGroup = ({
           onKeyDown
         }
       ),
-      useMath && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      useMath && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "button",
         {
           className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200 z-10",
           onClick: handleOpenMathConstructor,
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "svg",
               {
                 className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -4211,20 +4268,20 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "my-1 relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: value && limit ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "my-1 relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: value && limit ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
         ] }) : null })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-catchup-white"}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "input",
             {
               disabled,
@@ -4242,22 +4299,22 @@ var InputGroup = ({
           )
         }
       ),
-      useMath && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      useMath && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "button",
         {
           className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200",
           onClick: handleOpenMathConstructor,
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "svg",
               {
                 className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -4274,9 +4331,9 @@ var InputGroup = ({
     ] });
   };
   const SwitchInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col my-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-row items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col my-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_react_switch.default,
           {
             onChange: () => {
@@ -4295,7 +4352,7 @@ var InputGroup = ({
             disabled
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "p",
           {
             className: `${checked ? "font-bold" : "text-catchup-gray"} px-2 transition-all duration-300`,
@@ -4303,7 +4360,7 @@ var InputGroup = ({
           }
         )
       ] }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-md text-catchup-gray-300 mt-1 ml-12", children: description }) : null
+      description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-md text-catchup-gray-300 mt-1 ml-12", children: description }) : null
     ] });
   };
   const RenderMainContent = () => {
@@ -4325,16 +4382,16 @@ var InputGroup = ({
       return SwitchInputGroup();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
     RenderMainContent(),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MathConstructorModal, {})
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MathConstructorModal, {})
   ] });
 };
 var InputGroup_default = InputGroup;
 
 // src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
-var import_react15 = require("react");
 var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/utilization/AppUtilization.ts
 var colors = [
@@ -4458,12 +4515,12 @@ var getSystemLanguageFromCurriculumType = (curriculumType) => {
 };
 
 // src/components/dropdowns/MediaDropdown.tsx
-var import_react13 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var MediaDropdown = ({ id, answer, optionList }) => {
-  const [showDropdown, setShowDropdown] = (0, import_react13.useState)(false);
-  const dropdownRef = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
+  const [showDropdown, setShowDropdown] = (0, import_react14.useState)(false);
+  const dropdownRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setShowDropdown(false);
@@ -4489,8 +4546,8 @@ var MediaDropdown = ({ id, answer, optionList }) => {
     }
     setShowDropdown(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: dropdownRef, className: "w-full relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: dropdownRef, className: "w-full relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
         className: "w-full flex flex-col items-center justify-center cursor-pointer",
@@ -4498,16 +4555,16 @@ var MediaDropdown = ({ id, answer, optionList }) => {
         children: answer
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "ul",
       {
         className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
-        children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "li",
           {
             className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "div",
                 {
                   className: `w-full flex flex-col my-2 cursor-pointer ${option.divClassNames ? option.divClassNames : ""}`,
@@ -4515,7 +4572,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
                   children: option.media
                 }
               ),
-              index !== optionList.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
+              index !== optionList.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
             ]
           },
           option.id
@@ -4527,25 +4584,25 @@ var MediaDropdown = ({ id, answer, optionList }) => {
 var MediaDropdown_default = MediaDropdown;
 
 // src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_modal3 = __toESM(require("react-modal"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var ShowMaterialMediaByContentType = ({
   key,
   contentType,
   src,
   canFullScreen
 }) => {
-  const [showFullScreen, setShowFullScreen] = (0, import_react14.useState)(false);
-  const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react14.useState)(null);
-  const [isLoaded, setIsLoaded] = (0, import_react14.useState)(false);
-  const imageRef = (0, import_react14.useRef)(null);
-  const videoRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const [showFullScreen, setShowFullScreen] = (0, import_react15.useState)(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react15.useState)(null);
+  const [isLoaded, setIsLoaded] = (0, import_react15.useState)(false);
+  const imageRef = (0, import_react15.useRef)(null);
+  const videoRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     setIsLoaded(false);
   }, []);
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       import_react_modal3.default,
       {
         isOpen: showFullScreen,
@@ -4576,8 +4633,8 @@ var ShowMaterialMediaByContentType = ({
           }
         },
         contentLabel: "",
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -4589,7 +4646,7 @@ var ShowMaterialMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -4602,10 +4659,10 @@ var ShowMaterialMediaByContentType = ({
       }
     );
   };
-  return contentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+  return contentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
     RenderShowFullScreenItem(),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         BaseImage_default,
         {
           src,
@@ -4620,7 +4677,7 @@ var ShowMaterialMediaByContentType = ({
           }
         }
       ),
-      src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "div",
         {
           className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1 bg-catchup-white bg-opacity-80",
@@ -4632,7 +4689,7 @@ var ShowMaterialMediaByContentType = ({
             setShowFullScreen(true);
             setSelectedFullScreenItem(src);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             BaseImage_default,
             {
               src: "/icons/arrow-up.webp",
@@ -4644,7 +4701,7 @@ var ShowMaterialMediaByContentType = ({
         }
       ) : null
     ] }) }) })
-  ] }) : contentType === "VIDEO" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  ] }) : contentType === "VIDEO" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "video",
     {
       ref: videoRef,
@@ -4654,7 +4711,7 @@ var ShowMaterialMediaByContentType = ({
       onClick: () => {
       }
     }
-  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "audio",
     {
       className: "w-full rounded-catchup-xlarge",
@@ -4668,7 +4725,7 @@ var ShowMaterialMediaByContentType = ({
 var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
 
 // src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var DropdownActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -4679,8 +4736,8 @@ var DropdownActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react16.useState)(answerMap);
-  (0, import_react15.useEffect)(() => {
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react17.useState)(answerMap);
+  (0, import_react16.useEffect)(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
       Object.keys(materialMap).forEach((materialMapKey) => {
@@ -4700,23 +4757,23 @@ var DropdownActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
       (materialKey, index) => {
         const answerKey = Object.keys(materialMap[materialKey])[0];
         const learnerAnswerState = checkAnswerState(
           answerKey,
           displayAnswerMap[materialKey]
         );
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "text-xl", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "text-xl", children: [
             parseFloat(materialKey) + 1,
             "."
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "w-full relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               InputGroup_default,
               {
                 type: "select",
@@ -4724,13 +4781,13 @@ var DropdownActivityMaterialContent = ({
                 optionList: shuffleArray(
                   materialMap[materialKey][answerKey]
                 ).map((materialOption) => ({
-                  text: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  text: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                     materialOption
-                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                         import_react_katex2.InlineMath,
                         {
                           math: inputPart.value
@@ -4749,11 +4806,11 @@ var DropdownActivityMaterialContent = ({
                   );
                 }
               }
-            ) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            ) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               MediaDropdown_default,
               {
                 id: materialKey,
-                answer: displayAnswerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                answer: displayAnswerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -4764,7 +4821,7 @@ var DropdownActivityMaterialContent = ({
                 ),
                 optionList: materialMap[materialKey][answerKey].map((materialOption, index2) => ({
                   id: index2,
-                  media: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  media: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -4782,24 +4839,24 @@ var DropdownActivityMaterialContent = ({
                   }
                 }))
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               displayAnswerMap[materialKey]
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_katex2.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_katex2.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }) }),
-            learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               BaseImage_default,
               {
                 src: "/icons/checkbox.webp",
                 alt: "chekbbox",
                 size: "small"
               }
-            ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               BaseImage_default,
               {
                 src: "/icons/cross-red.webp",
@@ -4816,8 +4873,8 @@ var DropdownActivityMaterialContent = ({
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
-var import_react17 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var DropdownActivityContent = ({
   answerMap,
   data,
@@ -4830,8 +4887,8 @@ var DropdownActivityContent = ({
   const contentMap = parseContentMapFromData(data);
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
-  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react17.useState)(answerMap);
-  (0, import_react17.useEffect)(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react18.useState)(answerMap);
+  (0, import_react18.useEffect)(() => {
     setCurrentAnswerMap(answerMap);
   }, [answerMap]);
   const handleDropdownAnswerOnChange = (answerMap2, key, value) => {
@@ -4840,8 +4897,8 @@ var DropdownActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
@@ -4850,9 +4907,9 @@ var DropdownActivityContent = ({
         templateType: "DROPDOWN"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       DropdownActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -4871,34 +4928,34 @@ var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
 var import_react_katex4 = require("react-katex");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/texts/InputWithSpecialExpression.tsx
 var import_react_katex3 = require("react-katex");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+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_runtime28.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  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_runtime28.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      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_runtime28.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  )) }) }) : 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_runtime28.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      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_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -4910,27 +4967,27 @@ var FillInTheBlanksActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react18.useState)([]);
-  const [selectedOption, setSelectedOption] = (0, import_react18.useState)(null);
-  const [draggedOption, setDraggedOption] = (0, import_react18.useState)(null);
-  const [dropTargetIndex, setDropTargetIndex] = (0, import_react18.useState)(null);
-  const [draggedElement, setDraggedElement] = (0, import_react18.useState)(
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react19.useState)([]);
+  const [selectedOption, setSelectedOption] = (0, import_react19.useState)(null);
+  const [draggedOption, setDraggedOption] = (0, import_react19.useState)(null);
+  const [dropTargetIndex, setDropTargetIndex] = (0, import_react19.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react19.useState)(
     null
   );
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react18.useState)(answerMap);
-  const dragElementRef = (0, import_react18.useRef)(null);
-  const [mousePosition, setMousePosition] = (0, import_react18.useState)({
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react19.useState)(answerMap);
+  const dragElementRef = (0, import_react19.useRef)(null);
+  const [mousePosition, setMousePosition] = (0, import_react19.useState)({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = (0, import_react18.useState)({
+  const [touchPosition, setTouchPosition] = (0, import_react19.useState)({
     x: 0,
     y: 0
   });
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setShuffleOptionList(shuffleArray(optionList));
   }, [optionList]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
       Object.keys(materialMap).forEach((materialMapKey) => {
@@ -5027,16 +5084,16 @@ var FillInTheBlanksActivityMaterialContent = ({
       setSelectedOption(null);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: "flex flex-col h-full",
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hidden md:block flex-shrink-0", 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:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DividerLine_default, {}) }),
-        draggedOption && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:block flex-shrink-0", 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:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}) }),
+        draggedOption && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "div",
           {
             className: "fixed pointer-events-none z-50 opacity-80",
@@ -5045,13 +5102,13 @@ var FillInTheBlanksActivityMaterialContent = ({
               top: `${mousePosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               InputWithSpecialExpression_default,
               {
                 value: draggedOption,
                 showSpecialOnly: false
               }
-            ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__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 bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -5062,7 +5119,7 @@ var FillInTheBlanksActivityMaterialContent = ({
             ) })
           }
         ),
-        draggedOption && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        draggedOption && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "div",
           {
             className: "fixed pointer-events-none z-50 opacity-80",
@@ -5071,13 +5128,13 @@ var FillInTheBlanksActivityMaterialContent = ({
               top: `${touchPosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               InputWithSpecialExpression_default,
               {
                 value: draggedOption,
                 showSpecialOnly: false
               }
-            ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__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 bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -5088,9 +5145,9 @@ var FillInTheBlanksActivityMaterialContent = ({
             ) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [
-          /* @__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(displayAnswerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [
+          /* @__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(displayAnswerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -5098,7 +5155,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                 canFullScreen: true
               },
               `${uniqueValue}-${index}`
-            ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "div",
               {
                 ref: draggedOption === option ? dragElementRef : null,
@@ -5108,12 +5165,12 @@ var FillInTheBlanksActivityMaterialContent = ({
                 onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
                 onTouchMove: handleTouchMove,
                 onTouchEnd: handleTouchEnd,
-                children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   "div",
                   {
                     className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
                     onClick: () => handleSelectOption(option),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                       InputWithSpecialExpression_default,
                       {
                         value: option,
@@ -5121,12 +5178,12 @@ var FillInTheBlanksActivityMaterialContent = ({
                       }
                     ) })
                   }
-                ) : /* @__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 select-none",
                     onClick: () => handleSelectOption(option),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -5141,12 +5198,12 @@ var FillInTheBlanksActivityMaterialContent = ({
               index
             )
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
             const learnerAnswerState = checkAnswerState(
               JSON.parse(materialMap[materialKey]),
               displayAnswerMap[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)(
               "div",
               {
                 "data-drop-zone": materialKey,
@@ -5154,13 +5211,13 @@ var FillInTheBlanksActivityMaterialContent = ({
                 onMouseLeave: () => setDropTargetIndex(null),
                 onClick: () => handleDropZoneClick(materialKey),
                 className: `${dropTargetIndex === materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200 rounded-lg`,
-                children: /* @__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: [
+                children: /* @__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)(
+                  /* @__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",
                       {
                         className: `w-full min-h-[44px] border rounded-lg ${displayAnswerMap[materialKey] ? "border-catchup-blue-400 px-2 cursor-pointer" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
@@ -5170,7 +5227,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                             onChange(answerMap, materialKey, "");
                           }
                         },
-                        children: displayAnswerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                        children: displayAnswerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                           InputWithSpecialExpression_default,
                           {
                             value: displayAnswerMap[materialKey],
@@ -5179,14 +5236,14 @@ var FillInTheBlanksActivityMaterialContent = ({
                         ) : null
                       }
                     ) }),
-                    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",
@@ -5194,13 +5251,13 @@ var FillInTheBlanksActivityMaterialContent = ({
                         size: "small"
                       }
                     ) }) : null
-                  ] }) : displayAnswerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  ] }) : displayAnswerMap[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",
@@ -5208,7 +5265,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                         e.stopPropagation();
                         onChange(answerMap, materialKey, "");
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                         ShowMaterialMediaByContentType_default,
                         {
                           contentType: contentMap.type,
@@ -5218,13 +5275,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(
                     displayAnswerMap[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_katex4.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) })
@@ -5240,8 +5297,8 @@ var FillInTheBlanksActivityMaterialContent = ({
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
-var import_react19 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var FillInTheBlanksActivityContent = ({
   answerMap,
   data,
@@ -5261,8 +5318,8 @@ var FillInTheBlanksActivityContent = ({
     "FILL_IN_THE_BLANKS"
   );
   const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList ? JSON.parse(data.fillInTheBlanksIncorrectList) : [];
-  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react19.useState)(answerMap);
-  (0, import_react19.useEffect)(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react20.useState)(answerMap);
+  (0, import_react20.useEffect)(() => {
     setCurrentAnswerMap(answerMap);
   }, [answerMap]);
   const constructAnswerOptionList = () => {
@@ -5289,8 +5346,8 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -5299,9 +5356,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 md:overflow-y-auto"}`, 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 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5320,9 +5377,9 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_katex5 = require("react-katex");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5333,27 +5390,27 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = (0, import_react20.useState)(null);
-  const [draggedValue, setDraggedValue] = (0, import_react20.useState)(null);
-  const [dropTargetKey, setDropTargetKey] = (0, import_react20.useState)(null);
-  const [draggedElement, setDraggedElement] = (0, import_react20.useState)(
+  const [selectedValue, setSelectedValue] = (0, import_react21.useState)(null);
+  const [draggedValue, setDraggedValue] = (0, import_react21.useState)(null);
+  const [dropTargetKey, setDropTargetKey] = (0, import_react21.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react21.useState)(
     null
   );
-  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react20.useState)([]);
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react20.useState)(answerMap);
-  const dragElementRef = (0, import_react20.useRef)(null);
-  const [mousePosition, setMousePosition] = (0, import_react20.useState)({
+  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react21.useState)([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react21.useState)(answerMap);
+  const dragElementRef = (0, import_react21.useRef)(null);
+  const [mousePosition, setMousePosition] = (0, import_react21.useState)({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = (0, import_react20.useState)({
+  const [touchPosition, setTouchPosition] = (0, import_react21.useState)({
     x: 0,
     y: 0
   });
-  const ref = (0, import_react20.useRef)(null);
-  const dropZoneRefs = (0, import_react20.useRef)({});
-  const hasShuffledRef = (0, import_react20.useRef)(false);
-  (0, import_react20.useEffect)(() => {
+  const ref = (0, import_react21.useRef)(null);
+  const dropZoneRefs = (0, import_react21.useRef)({});
+  const hasShuffledRef = (0, import_react21.useRef)(false);
+  (0, import_react21.useEffect)(() => {
     if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
       const copyArray = JSON.parse(JSON.stringify(array));
@@ -5372,14 +5429,14 @@ var GroupingActivityMaterialContent = ({
     setShuffledMaterialList(shuffleArray2(materialList));
     hasShuffledRef.current = true;
   }, [materialMap]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (showCorrectAnswer) {
       setDisplayAnswerMap(materialMap);
     } else {
       setDisplayAnswerMap(answerMap);
     }
   }, [showCorrectAnswer, answerMap, materialMap]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
     const dropZoneElement = dropZoneRefs.current[dropTargetKey];
     if (!dropZoneElement) return;
@@ -5519,8 +5576,8 @@ var GroupingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
-    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         className: "fixed pointer-events-none z-50 opacity-80",
@@ -5529,16 +5586,16 @@ var GroupingActivityMaterialContent = ({
           top: `${mousePosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
-          (inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__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_katex5.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
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5549,7 +5606,7 @@ var GroupingActivityMaterialContent = ({
         ) })
       }
     ),
-    draggedValue && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    draggedValue && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         className: "fixed pointer-events-none z-50 opacity-80",
@@ -5558,16 +5615,16 @@ var GroupingActivityMaterialContent = ({
           top: `${touchPosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
-          (inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__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_katex5.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
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5578,9 +5635,9 @@ var GroupingActivityMaterialContent = ({
         ) })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-shrink-0 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-shrink-0 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "div",
           {
             ref: draggedValue === materialValue ? dragElementRef : null,
@@ -5590,21 +5647,21 @@ var GroupingActivityMaterialContent = ({
             onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            children: /* @__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`,
                 onClick: () => handleSelectItem(materialValue),
-                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_katex5.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,
@@ -5619,27 +5676,27 @@ var GroupingActivityMaterialContent = ({
           index
         );
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).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: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).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 text-center", 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 text-center", 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_katex5.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",
         {
           ref: (el) => dropZoneRefs.current[answerMapKey] = el,
@@ -5648,17 +5705,17 @@ var GroupingActivityMaterialContent = ({
           onMouseLeave: () => setDropTargetKey(null),
           onClick: () => handleDropZoneClick(answerMapKey),
           className: `${dropTargetKey === answerMapKey ? "bg-catchup-light-blue ring-2 ring-blue-400" : ""} flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1 transition-all duration-200`,
-          children: /* @__PURE__ */ (0, import_jsx_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: displayAnswerMap[answerMapKey].map(
+          children: /* @__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: displayAnswerMap[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`,
@@ -5674,13 +5731,13 @@ 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)(
+                          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
@@ -5688,7 +5745,7 @@ var GroupingActivityMaterialContent = ({
                           ) }) : inputPart.value
                         },
                         index2
-                      )) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                      )) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                         ShowMaterialMediaByContentType_default,
                         {
                           contentType: contentMap.type,
@@ -5711,7 +5768,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 = ({
   answerMap,
   data,
@@ -5733,12 +5790,12 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ActivityBodyContent_default,
           {
             bodyMap: groupingBodyMap,
@@ -5747,13 +5804,13 @@ var GroupingActivityContent = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           GroupingActivityMaterialContent_default,
           {
             uniqueValue: JSON.stringify(data.contentMap),
@@ -5773,9 +5830,9 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_katex6 = require("react-katex");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5786,27 +5843,27 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = (0, import_react21.useState)(null);
-  const [draggedValue, setDraggedValue] = (0, import_react21.useState)(null);
-  const [dropTargetKey, setDropTargetKey] = (0, import_react21.useState)(null);
-  const [draggedElement, setDraggedElement] = (0, import_react21.useState)(
+  const [selectedValue, setSelectedValue] = (0, import_react22.useState)(null);
+  const [draggedValue, setDraggedValue] = (0, import_react22.useState)(null);
+  const [dropTargetKey, setDropTargetKey] = (0, import_react22.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react22.useState)(
     null
   );
-  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react21.useState)([]);
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react21.useState)(answerMap);
-  const dragElementRef = (0, import_react21.useRef)(null);
-  const [mousePosition, setMousePosition] = (0, import_react21.useState)({
+  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react22.useState)([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react22.useState)(answerMap);
+  const dragElementRef = (0, import_react22.useRef)(null);
+  const [mousePosition, setMousePosition] = (0, import_react22.useState)({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = (0, import_react21.useState)({
+  const [touchPosition, setTouchPosition] = (0, import_react22.useState)({
     x: 0,
     y: 0
   });
-  const itemsRef = (0, import_react21.useRef)(null);
-  const dropZoneRefs = (0, import_react21.useRef)({});
-  const hasShuffledRef = (0, import_react21.useRef)(false);
-  (0, import_react21.useEffect)(() => {
+  const itemsRef = (0, import_react22.useRef)(null);
+  const dropZoneRefs = (0, import_react22.useRef)({});
+  const hasShuffledRef = (0, import_react22.useRef)(false);
+  (0, import_react22.useEffect)(() => {
     if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
       const copyArray = JSON.parse(JSON.stringify(array));
@@ -5823,14 +5880,14 @@ var MatchingActivityMaterialContent = ({
     setShuffledMaterialList(shuffleArray2(materialList));
     hasShuffledRef.current = true;
   }, [materialMap]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (showCorrectAnswer) {
       setDisplayAnswerMap(materialMap);
     } else {
       setDisplayAnswerMap(answerMap);
     }
   }, [showCorrectAnswer, answerMap, materialMap]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
     const dropZoneElement = dropZoneRefs.current[dropTargetKey];
     if (!dropZoneElement) return;
@@ -5964,8 +6021,8 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
-    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         className: "fixed pointer-events-none z-50 opacity-80",
@@ -5974,16 +6031,16 @@ var MatchingActivityMaterialContent = ({
           top: `${mousePosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
-          (inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__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_katex6.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
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5994,7 +6051,7 @@ var MatchingActivityMaterialContent = ({
         ) })
       }
     ),
-    draggedValue && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    draggedValue && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         className: "fixed pointer-events-none z-50 opacity-80",
@@ -6003,16 +6060,16 @@ var MatchingActivityMaterialContent = ({
           top: `${touchPosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
-          (inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__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_katex6.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
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -6023,13 +6080,13 @@ var MatchingActivityMaterialContent = ({
         ) })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    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)(
             "div",
             {
               ref: draggedValue === materialValue ? dragElementRef : null,
@@ -6039,21 +6096,21 @@ var MatchingActivityMaterialContent = ({
               onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
               onTouchMove: handleTouchMove,
               onTouchEnd: handleTouchEnd,
-              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              children: /* @__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`,
                   onClick: () => handleSelectItem(materialValue),
-                  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-hidden 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-hidden 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_katex6.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,
@@ -6069,32 +6126,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: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((answerMapKey, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         displayAnswerMap[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 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-              (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).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_katex6.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",
           {
             ref: (el) => dropZoneRefs.current[answerMapKey] = el,
@@ -6103,7 +6160,7 @@ var MatchingActivityMaterialContent = ({
             onMouseLeave: () => setDropTargetKey(null),
             onClick: () => handleDropZoneClick(answerMapKey),
             className: `${dropTargetKey === answerMapKey ? "bg-catchup-light-blue ring-2 ring-blue-400" : ""} ${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"}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "div",
               {
                 className: "h-full flex-1 flex flex-row items-center justify-center px-4",
@@ -6114,16 +6171,16 @@ var MatchingActivityMaterialContent = ({
                     setSelectedValue(null);
                   }
                 },
-                children: displayAnswerMap[answerMapKey] ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                children: displayAnswerMap[answerMapKey] ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   displayAnswerMap[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_katex6.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,
@@ -6143,7 +6200,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 = ({
   answerMap,
   data,
@@ -6161,12 +6218,12 @@ var MatchingActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           ActivityBodyContent_default,
           {
             bodyMap: matchingBodyMap,
@@ -6175,13 +6232,13 @@ var MatchingActivityContent = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           MatchingActivityMaterialContent_default,
           {
             uniqueValue: JSON.stringify(data.contentMap),
@@ -6201,9 +6258,9 @@ var MatchingActivityContent = ({
 var MatchingActivityContent_default = MatchingActivityContent;
 
 // src/components/activities/material-contents/MCMAActivityMaterialContent.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_react_katex7 = require("react-katex");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var MCMAActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6214,8 +6271,8 @@ var MCMAActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react22.useState)(answerMap);
-  (0, import_react22.useEffect)(() => {
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react23.useState)(answerMap);
+  (0, import_react23.useEffect)(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
       Object.keys(materialMap).forEach((materialKey) => {
@@ -6241,11 +6298,11 @@ var MCMAActivityMaterialContent = ({
     return "INCORRECT";
   };
   const correctAnswerList = retrieveCorrectAnswerList();
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:block flex-shrink-0", 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:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DividerLine_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: 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-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hidden md:block flex-shrink-0", 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:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DividerLine_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
           const foundAnswer = displayAnswerMap[materialKey].find(
             (learnerAnswer) => learnerAnswer === materialSubKey
@@ -6258,7 +6315,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" : ""}`,
@@ -6266,7 +6323,7 @@ var MCMAActivityMaterialContent = ({
                 onChange(answerMap, materialKey, materialSubKey);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   BaseImage_default,
                   {
                     src: displayAnswerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6276,16 +6333,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_katex7.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,
@@ -6299,13 +6356,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(
         displayAnswerMap[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_katex7.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) })
@@ -6315,7 +6372,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 = ({
   answerMap,
   data,
@@ -6340,11 +6397,11 @@ var MCMAActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, 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 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, 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 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       MCMAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6362,9 +6419,9 @@ var MCMAActivityContent = ({
 var MCMAActivityContent_default = MCMAActivityContent;
 
 // src/components/activities/material-contents/MCSAActivityMaterialContent.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_katex8 = require("react-katex");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var MCSAActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6375,8 +6432,8 @@ var MCSAActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react23.useState)(answerMap);
-  (0, import_react23.useEffect)(() => {
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react24.useState)(answerMap);
+  (0, import_react24.useEffect)(() => {
     if (showCorrectAnswer) {
       const correctAnswer2 = retrieveCorrectAnswer();
       setDisplayAnswerMap({ correctAnswer: correctAnswer2 });
@@ -6396,11 +6453,11 @@ var MCSAActivityMaterialContent = ({
     return "INCORRECT";
   };
   const correctAnswer = retrieveCorrectAnswer();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:block flex-shrink-0", 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:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DividerLine_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "hidden md:block flex-shrink-0", 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:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DividerLine_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "div",
         {
           className: `flex flex-row w-full ${Object.keys(materialMap[materialKey]).length <= 4 ? "justify-center" : ""} flex-wrap`,
@@ -6411,7 +6468,7 @@ var MCSAActivityMaterialContent = ({
                 materialSubKey,
                 displayAnswerMap[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" : ""}`,
@@ -6419,7 +6476,7 @@ var MCSAActivityMaterialContent = ({
                     onChange(answerMap, materialKey, materialSubKey);
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       BaseImage_default,
                       {
                         src: displayAnswerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
@@ -6429,16 +6486,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_katex8.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,
@@ -6454,13 +6511,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(
         displayAnswerMap[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_katex8.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
       )) }) })
@@ -6470,7 +6527,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 = ({
   answerMap,
   data,
@@ -6488,11 +6545,11 @@ var MCSAActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, 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 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, 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 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       MCSAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6599,7 +6656,7 @@ var retrieveAcceptedFormats = (fileType) => {
 };
 
 // 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 = ({
   answerMap,
   contentMap,
@@ -6614,7 +6671,7 @@ var OpenEndedActivityMaterialContent = ({
       fileType = retrieveFileTypeFromExtension(extension);
     }
     if (fileType === "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,
@@ -6624,9 +6681,9 @@ var OpenEndedActivityMaterialContent = ({
         }
       ) });
     } else if (fileType === "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 (fileType === "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",
@@ -6637,7 +6694,7 @@ var OpenEndedActivityMaterialContent = ({
         }
       ) });
     } else if (fileType === "TEXT") {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         InputGroup_default,
         {
           type: "textarea",
@@ -6656,7 +6713,7 @@ var OpenEndedActivityMaterialContent = ({
     const answerMapAnswer = answerMap2["ANSWER"];
     const extension = answerMapAnswer.split(".").pop();
     const fileType = retrieveFileTypeFromExtension(extension);
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: fileType === "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: fileType === "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,
@@ -6664,11 +6721,11 @@ var OpenEndedActivityMaterialContent = ({
         size: "custom",
         className: "w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
       }
-    ) }) : fileType === "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 });
+    ) }) : fileType === "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",
@@ -6679,16 +6736,16 @@ var OpenEndedActivityMaterialContent = ({
       }
     ) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:block flex-shrink-0", 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:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: contentMap.type === "TEXT" ? RenderTextContent(answerMap) : contentMap.type === "IMAGE" ? RenderImageContent(answerMap) : contentMap.type === "AUDIO" ? RenderAudioContent(answerMap) : null })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "hidden md:block flex-shrink-0", 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:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: 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 = ({
   answerMap,
   data,
@@ -6705,12 +6762,12 @@ var OpenEndedActivityContent = ({
     answerMap2["ANSWER"] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "div",
       {
         className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto" : "w-full"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           ActivityBodyContent_default,
           {
             bodyMap: openEndedBodyMap,
@@ -6719,16 +6776,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 md:overflow-y-auto"}`, 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 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         OpenEndedActivityMaterialContent_default,
         {
           answerMap,
@@ -6743,9 +6800,9 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_katex9 = require("react-katex");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6756,23 +6813,23 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedKey, setSelectedKey] = (0, import_react24.useState)(null);
-  const [draggedKey, setDraggedKey] = (0, import_react24.useState)(null);
-  const [dropTargetKey, setDropTargetKey] = (0, import_react24.useState)(null);
-  const [draggedElement, setDraggedElement] = (0, import_react24.useState)(
+  const [selectedKey, setSelectedKey] = (0, import_react25.useState)(null);
+  const [draggedKey, setDraggedKey] = (0, import_react25.useState)(null);
+  const [dropTargetKey, setDropTargetKey] = (0, import_react25.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react25.useState)(
     null
   );
-  const dragElementRef = (0, import_react24.useRef)(null);
-  const [mousePosition, setMousePosition] = (0, import_react24.useState)({
+  const dragElementRef = (0, import_react25.useRef)(null);
+  const [mousePosition, setMousePosition] = (0, import_react25.useState)({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = (0, import_react24.useState)({
+  const [touchPosition, setTouchPosition] = (0, import_react25.useState)({
     x: 0,
     y: 0
   });
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react24.useState)(answerMap);
-  (0, import_react24.useEffect)(() => {
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react25.useState)(answerMap);
+  (0, import_react25.useEffect)(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
       Object.keys(answerMap).forEach((answerKey, index) => {
@@ -6863,14 +6920,14 @@ var OrderingActivityMaterialContent = ({
     }
     setDraggedKey(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       className: "flex flex-col h-full",
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
       children: [
-        draggedKey && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        draggedKey && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "div",
           {
             className: "fixed pointer-events-none z-50 opacity-80",
@@ -6879,16 +6936,16 @@ var OrderingActivityMaterialContent = ({
               top: `${mousePosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               materialMap[displayAnswerMap[draggedKey]]
-            ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index
-            )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6899,7 +6956,7 @@ var OrderingActivityMaterialContent = ({
             ) })
           }
         ),
-        draggedKey && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        draggedKey && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "div",
           {
             className: "fixed pointer-events-none z-50 opacity-80",
@@ -6908,16 +6965,16 @@ var OrderingActivityMaterialContent = ({
               top: `${touchPosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               materialMap[displayAnswerMap[draggedKey]]
-            ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index
-            )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6928,24 +6985,24 @@ var OrderingActivityMaterialContent = ({
             ) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
           const learnerAnswerState = checkAnswerState(
             displayAnswerMap[materialKey] + "",
             index + ""
           );
-          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
             "div",
             {
               className: `flex flex-row items-center my-4 mx-2`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)(
+                /* @__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)(
                   "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_runtime41.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
                   }
                 ) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   "div",
                   {
                     ref: draggedKey === materialKey ? dragElementRef : null,
@@ -6958,21 +7015,21 @@ var OrderingActivityMaterialContent = ({
                     onTouchStart: (e) => handleTouchStart(e, materialKey, e.currentTarget),
                     onTouchMove: handleTouchMove,
                     onTouchEnd: handleTouchEnd,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime42.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 cursor-pointer p-3 ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
                         onClick: () => handleSelectItem(materialKey),
-                        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                           materialMap[displayAnswerMap[materialKey]]
-                        ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                        ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           "span",
                           {
                             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
                           },
                           index2
-                        )) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                        )) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           ShowMaterialMediaByContentType_default,
                           {
                             contentType: contentMap.type,
@@ -6996,7 +7053,7 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var OrderingActivityContent = ({
   answerMap,
   data,
@@ -7016,12 +7073,12 @@ var OrderingActivityContent = ({
     answerMap2[secondaryKey] = prevValue;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           ActivityBodyContent_default,
           {
             bodyMap: orderingBodyMap,
@@ -7030,13 +7087,13 @@ var OrderingActivityContent = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           OrderingActivityMaterialContent_default,
           {
             uniqueValue: JSON.stringify(data.contentMap),
@@ -7056,9 +7113,9 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_katex10 = require("react-katex");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -7069,9 +7126,9 @@ var TrueFalseActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react25.useState)([]);
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react25.useState)(answerMap);
-  (0, import_react25.useEffect)(() => {
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react26.useState)([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react26.useState)(answerMap);
+  (0, import_react26.useEffect)(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -7081,7 +7138,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (showCorrectAnswer) {
       setDisplayAnswerMap(materialMap);
     } else {
@@ -7095,14 +7152,14 @@ var TrueFalseActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row justify-end items-center gap-x-2 flex-shrink-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "hidden md:block flex-shrink-0", 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:block flex-shrink-0", 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 flex-shrink-0", 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") }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime44.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";
@@ -7113,21 +7170,21 @@ var TrueFalseActivityMaterialContent = ({
         correctAnswer,
         learnerAnswer
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime43.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            /* @__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(
               shuffleOption
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
-            )) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            )) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -7136,8 +7193,8 @@ var TrueFalseActivityMaterialContent = ({
               },
               `${uniqueValue}-${index}`
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__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)(
                 BaseImage_default,
                 {
                   src: displayAnswerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -7148,7 +7205,7 @@ var TrueFalseActivityMaterialContent = ({
                   }
                 }
               ) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__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)(
                 BaseImage_default,
                 {
                   src: displayAnswerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -7164,14 +7221,14 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-      displayAnswerMap.trueList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: item }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "underline", children: i18n_default.t("true") }) })
+    }) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      displayAnswerMap.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") }) })
       ] })),
-      displayAnswerMap.falseList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: item }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "underline", children: i18n_default.t("false") }) })
+      displayAnswerMap.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") }) })
       ] }))
     ] }) })
   ] });
@@ -7179,7 +7236,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 
 // src/components/activities/TrueFalseActivityContent.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var TrueFalseActivityContent = ({
   answerMap,
   data,
@@ -7223,17 +7280,17 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: trueFalseBodyMap,
         templateType: "GROUPING"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__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 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       TrueFalseActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -7252,7 +7309,7 @@ var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
 // src/components/activities/solution-contents/ActivitySolutionContent.tsx
 var import_react_katex11 = require("react-katex");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -7284,8 +7341,8 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
+  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") }),
     Object.keys(solutionMap).map((key) => {
       let currentItem;
       try {
@@ -7295,12 +7352,12 @@ var ActivitySolutionContent = ({
         return null;
       }
       const { value } = currentItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
-        (inputPart, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      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)(
           "span",
           {
             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -7312,7 +7369,7 @@ var ActivitySolutionContent_default = ActivitySolutionContent;
 
 // src/components/activities/evaluation-rubric-contents/ActivityEvaluationRubricContent.tsx
 var import_react_katex12 = require("react-katex");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -7342,8 +7399,8 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "p-4 border-catchup-gray-400 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("evaluation_rubric") }),
+  return /* @__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") }),
     Object.keys(evaluationRubricMap).map((key, index) => {
       const currentItem = JSON.parse(evaluationRubricMap[key]);
       const { value } = currentItem;
@@ -7354,18 +7411,18 @@ var ActivityEvaluationRubricContent = ({
         points = parseFloat(matchedRegex[1]);
         evaluationRubric = matchedRegex[2];
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "my-2 flex flex-row gap-x-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "font-bold text-xl whitespace-nowrap", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "my-2 flex flex-row gap-x-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "font-bold text-xl whitespace-nowrap", children: [
           points,
           " ",
           i18n_default.t("points")
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "flex-1 text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(evaluationRubric).map(
-          (inputPart, inputIndex) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "flex-1 text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(evaluationRubric).map(
+          (inputPart, inputIndex) => /* @__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_katex12.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_katex12.InlineMath, { math: inputPart.value }) }) : inputPart.value
             },
             inputIndex
           )
@@ -7377,31 +7434,31 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/boxes/SelectionBox.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsx)(
+  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)(
     "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_runtime47.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime47.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { children: option.text }),
-              option.subText ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "text-md", children: [
+            /* @__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: [
                 "(",
                 option.subText,
                 ")"
@@ -7417,7 +7474,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var ACTIVITY_TEMPLATE_LIST = [
   { type: "ORDERING", materialMap: "orderingMaterialMap" },
   { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
@@ -7448,11 +7505,11 @@ var ActivityPreviewByData = ({
   showMaterialContent = true,
   isPreview = true
 }) => {
-  const [selectedType, setSelectedType] = (0, import_react26.useState)(null);
-  const [optionList, setOptionList] = (0, import_react26.useState)([]);
-  const [answerMapMap, setAnswerMapMap] = (0, import_react26.useState)({});
-  const [activityTemplateTypeList, setActivityTemplateTypeList] = (0, import_react26.useState)([]);
-  (0, import_react26.useEffect)(() => {
+  const [selectedType, setSelectedType] = (0, import_react27.useState)(null);
+  const [optionList, setOptionList] = (0, import_react27.useState)([]);
+  const [answerMapMap, setAnswerMapMap] = (0, import_react27.useState)({});
+  const [activityTemplateTypeList, setActivityTemplateTypeList] = (0, import_react27.useState)([]);
+  (0, import_react27.useEffect)(() => {
     if (!data) return;
     let currentActivityTemplateMapList = JSON.parse(
       JSON.stringify(ACTIVITY_TEMPLATE_LIST)
@@ -7470,7 +7527,7 @@ var ActivityPreviewByData = ({
     }
     setActivityTemplateTypeList(currentActivityTemplateMapList);
   }, [data, answerType, typeList]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentOptionList = [];
     for (const activityTemplateType of activityTemplateTypeList) {
@@ -7490,11 +7547,11 @@ var ActivityPreviewByData = ({
     }
     setOptionList(currentOptionList);
   }, [activityTemplateTypeList, showDifficulty]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentAnswerMapMap = {};
     for (const activityTemplateMap of activityTemplateTypeList) {
@@ -7526,44 +7583,44 @@ var ActivityPreviewByData = ({
     }
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps))
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps))
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps))
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps))
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps))
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps))
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             OpenEndedActivityContent_default,
             __spreadProps(__spreadValues({}, commonProps), {
               showMaterialContent
@@ -7571,20 +7628,20 @@ var ActivityPreviewByData = ({
           )
         ] }) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       default:
         return null;
     }
   };
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mb-2", children: [
-        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mb-2", 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)(
           SelectionBox_default,
           {
             optionList,
@@ -7595,17 +7652,17 @@ var ActivityPreviewByData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DividerLine_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-col mb-2 w-full", children: RenderSelectedActivityContent() }),
-    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-col mb-2 w-full", children: RenderSelectedActivityContent() }),
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7617,17 +7674,17 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/errors/StatusError.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var StatusError = ({
   statusCode,
   statusText,
   textSize
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "text-center my-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "text-center my-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
         "(",
         statusCode ? `${statusCode} - ` : null,
         statusText,
@@ -7639,9 +7696,9 @@ var StatusError = ({
 var StatusError_default = StatusError;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7651,7 +7708,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7661,9 +7718,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       InputGroup_default,
       {
         type,
@@ -7679,8 +7736,8 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-var import_react27 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7689,13 +7746,13 @@ var PageTravelGroup = ({
   setPageNumber,
   setImageReady
 }) => {
-  const [totalPageNumber, setTotalPageNumber] = (0, import_react27.useState)(0);
-  const [newPageNumber, setNewPageNumber] = (0, import_react27.useState)(0);
-  (0, import_react27.useEffect)(() => {
+  const [totalPageNumber, setTotalPageNumber] = (0, import_react28.useState)(0);
+  const [newPageNumber, setNewPageNumber] = (0, import_react28.useState)(0);
+  (0, import_react28.useEffect)(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
   }, [initialTotalPageNumber]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
   const handlePageChange = (newPage) => {
@@ -7706,8 +7763,8 @@ var PageTravelGroup = ({
       setImageReady(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "button",
       {
         className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
@@ -7716,12 +7773,12 @@ var PageTravelGroup = ({
         children: "\u2190"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: "text-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "text-md", children: [
       pageNumber + 1,
       " / ",
       totalPageNumber
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "button",
       {
         className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
@@ -7730,7 +7787,7 @@ var PageTravelGroup = ({
         children: "\u2192"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.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",
@@ -7753,17 +7810,17 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 
 // src/hooks/useScreenSize.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = (0, import_react28.useState)({
+  const [containerSize, setContainerSize] = (0, import_react29.useState)({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = (0, import_react28.useState)({
+  const [screenSize, setScreenSize] = (0, import_react29.useState)({
     width: window.innerWidth,
     height: window.innerHeight
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const handleResize = () => {
       setScreenSize({
         width: window.innerWidth,
@@ -7788,14 +7845,14 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/boxes/SelectionCheckbox.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7810,14 +7867,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime53.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7827,7 +7884,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { children: option.text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -7838,7 +7895,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7848,7 +7905,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.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 px-4 py-2 cursor-pointer`,
@@ -7856,8 +7913,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7866,20 +7923,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.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`,
@@ -7893,7 +7950,7 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/tabs/SelectionTabPill.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var SelectionTabPill = ({
   optionList,
   selectedId,
@@ -7901,12 +7958,12 @@ var SelectionTabPill = ({
   selectedClassName,
   unselectedClassName
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex flex-wrap items-center gap-3 my-2", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-wrap items-center gap-3 my-2", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "button",
     {
       onClick: () => handleSelectOnClick(option.id),
       className: `px-4 py-2 rounded-catchup-full transition-all duration-200 cursor-pointer ${selectedId === option.id ? selectedClassName || "bg-catchup-blue text-catchup-white shadow-card" : unselectedClassName || "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-base font-semibold", children: option.title })
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-base font-semibold", children: option.title })
     },
     index
   )) });
@@ -7914,7 +7971,7 @@ var SelectionTabPill = ({
 var SelectionTabPill_default = SelectionTabPill;
 
 // src/components/labels/Label.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var Label = ({
   title,
   icon,
@@ -7924,7 +7981,7 @@ var Label = ({
   backgroundColor,
   textColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       className: "px-3 py-1 gap-x-3 border rounded-catchup-2xlarge text-center",
@@ -7934,9 +7991,9 @@ var Label = ({
         background: backgroundColor,
         color: textColor
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: font, children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: font, children: title })
       ] })
     }
   );
@@ -7944,9 +8001,9 @@ var Label = ({
 var Label_default = Label;
 
 // src/components/labels/AmberLabel.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var AmberLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     Label_default,
     {
       title,
@@ -7961,9 +8018,9 @@ var AmberLabel = ({ title, icon, font }) => {
 var AmberLabel_default = AmberLabel;
 
 // src/components/labels/TealLabel.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var TealLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Label_default,
     {
       title,
@@ -7978,9 +8035,9 @@ var TealLabel = ({ title, icon, font }) => {
 var TealLabel_default = TealLabel;
 
 // src/components/labels/PurpleLabel.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var PurpleLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Label_default,
     {
       title,
@@ -7995,9 +8052,9 @@ var PurpleLabel = ({ title, icon, font }) => {
 var PurpleLabel_default = PurpleLabel;
 
 // src/components/labels/GreenLabel.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var GreenLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     Label_default,
     {
       title,
@@ -8012,9 +8069,9 @@ var GreenLabel = ({ title, icon, font }) => {
 var GreenLabel_default = GreenLabel;
 
 // src/components/labels/BlueLabel.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var BlueLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     Label_default,
     {
       title,
@@ -8029,9 +8086,9 @@ var BlueLabel = ({ title, icon, font }) => {
 var BlueLabel_default = BlueLabel;
 
 // src/components/labels/OrangeLabel.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var OrangeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     Label_default,
     {
       title,
@@ -8046,9 +8103,9 @@ var OrangeLabel = ({ title, icon, font }) => {
 var OrangeLabel_default = OrangeLabel;
 
 // src/components/labels/RedLabel.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var RedLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     Label_default,
     {
       title,
@@ -8063,9 +8120,9 @@ var RedLabel = ({ title, icon, font }) => {
 var RedLabel_default = RedLabel;
 
 // src/components/labels/LimeLabel.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var LimeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     Label_default,
     {
       title,
@@ -8080,9 +8137,9 @@ var LimeLabel = ({ title, icon, font }) => {
 var LimeLabel_default = LimeLabel;
 
 // src/components/labels/CoralLabel.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var CoralLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     Label_default,
     {
       title,
@@ -8097,9 +8154,9 @@ var CoralLabel = ({ title, icon, font }) => {
 var CoralLabel_default = CoralLabel;
 
 // src/components/labels/CyanLabel.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var CyanLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     Label_default,
     {
       title,
@@ -8114,9 +8171,9 @@ var CyanLabel = ({ title, icon, font }) => {
 var CyanLabel_default = CyanLabel;
 
 // src/components/labels/GrayLabel.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var GrayLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     Label_default,
     {
       title,
@@ -8131,20 +8188,20 @@ var GrayLabel = ({ title, icon, font }) => {
 var GrayLabel_default = GrayLabel;
 
 // src/components/infos/InfoWithText.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "", children: value }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/SubTitle.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -11028,6 +11085,7 @@ var retrieveActivityMethodologyOptionList = () => {
   SelectionTab,
   SelectionTabFill,
   SelectionTabPill,
+  StartButton,
   StatusError,
   SubTitle,
   THREE_MONTHS,