catchup-library-web 2.6.11 → 2.6.13

package/dist/index.mjs

@@ -848,8 +848,64 @@ var ApproveButton = ({
 };
 var ApproveButton_default = ApproveButton;
 
+// src/components/buttons/StartButton.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var StartButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  icon
+}) => {
+  const [loading, setLoading] = useState9(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__ */ jsx12(
+    "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__ */ jsx12(
+        BaseLoading_default,
+        {
+          height: currentLoadingSize,
+          width: currentLoadingSize,
+          primaryColor: "#ffffff",
+          secondaryColor: "#ffffff"
+        }
+      ) : /* @__PURE__ */ jsxs9("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
+        icon ? /* @__PURE__ */ jsx12("span", { children: icon }) : null,
+        /* @__PURE__ */ jsx12("p", { children: title })
+      ] })
+    }
+  );
+};
+var StartButton_default = StartButton;
+
 // src/components/cards/FullCard.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var FullCard = ({
   backgroundColor,
   borderColor,
@@ -857,7 +913,7 @@ var FullCard = ({
   usePadding,
   children
 }) => {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       className: `min-h-full 
@@ -865,7 +921,7 @@ var FullCard = ({
         ${borderColor ? borderColor : "border-catchup-gray-50"} 
         ${opacity ? opacity : "opacity-100"} 
         rounded-catchup-xlarge w-full `,
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx13(
         "div",
         {
           className: `flex flex-col mx-auto ${usePadding === false ? "p-0" : "p-6"} h-full`,
@@ -878,14 +934,14 @@ var FullCard = ({
 var FullCard_default = FullCard;
 
 // src/components/cards/BaseCard.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var BaseCard = ({ children }) => {
-  return /* @__PURE__ */ jsx13("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsx13("div", { className: "bg-catchup-white rounded-catchup-xlarge h-catchup-card w-catchup-card shadow-dropdown", children: /* @__PURE__ */ jsx13("div", { className: "flex flex-col mx-auto p-8 h-full", children }) }) });
+  return /* @__PURE__ */ jsx14("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsx14("div", { className: "bg-catchup-white rounded-catchup-xlarge h-catchup-card w-catchup-card shadow-dropdown", children: /* @__PURE__ */ jsx14("div", { className: "flex flex-col mx-auto p-8 h-full", children }) }) });
 };
 var BaseCard_default = BaseCard;
 
 // src/components/loading/BaseLoadingWithText.tsx
-import { useEffect as useEffect2, useState as useState9 } from "react";
+import { useEffect as useEffect2, useState as useState10 } from "react";
 
 // src/language/i18n.ts
 import i18n from "i18next";
@@ -894,13 +950,13 @@ i18n.use(initReactI18next);
 var i18n_default = i18n;
 
 // src/components/loading/BaseLoadingWithText.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var BaseLoadingWithText = (props) => {
   const { height, width, size, primaryColor, secondaryColor, hideText } = props;
-  const [initialTimestamp, setInitialTimestamp] = useState9(
+  const [initialTimestamp, setInitialTimestamp] = useState10(
     (/* @__PURE__ */ new Date()).getTime()
   );
-  const [currentTimestamp, setCurrentTimeStamp] = useState9(
+  const [currentTimestamp, setCurrentTimeStamp] = useState10(
     (/* @__PURE__ */ new Date()).getTime()
   );
   let timerId;
@@ -942,8 +998,8 @@ var BaseLoadingWithText = (props) => {
     textWidth = 250;
   }
   const loadingText = retrieveLoadingText();
-  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ jsx15(
       BaseLoading_default,
       {
         height,
@@ -953,12 +1009,12 @@ var BaseLoadingWithText = (props) => {
         secondaryColor
       }
     ),
-    !hideText && size !== "small" ? /* @__PURE__ */ jsx14(
+    !hideText && size !== "small" ? /* @__PURE__ */ jsx15(
       "div",
       {
         className: `${textClassName} text-center`,
         style: { width: textWidth },
-        children: /* @__PURE__ */ jsx14("p", { className: "font-bold", children: loadingText })
+        children: /* @__PURE__ */ jsx15("p", { className: "font-bold", children: loadingText })
       }
     ) : null
   ] });
@@ -969,36 +1025,36 @@ var BaseLoadingWithText_default = BaseLoadingWithText;
 import Modal from "react-modal";
 
 // src/components/titles/BaseTitle.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ jsxs10("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxs11("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ jsxs10("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__ */ jsxs11("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__ */ jsx15("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ jsx16("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/dividers/DividerLine.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var DividerLine = () => {
-  return /* @__PURE__ */ jsx16("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
+  return /* @__PURE__ */ jsx17("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
 };
 var DividerLine_default = DividerLine;
 
 // src/components/modals/BaseModal.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var BaseModal = ({
   title,
   isOpen,
@@ -1007,7 +1063,7 @@ var BaseModal = ({
   onRequestClose,
   children
 }) => {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Modal,
     {
       isOpen,
@@ -1035,14 +1091,14 @@ var BaseModal = ({
         }
       },
       contentLabel: "",
-      children: /* @__PURE__ */ jsx17(
+      children: /* @__PURE__ */ jsx18(
         "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__ */ jsxs11(FullCard_default, { children: [
-            /* @__PURE__ */ jsxs11("div", { className: "flex flex-row justify-between", children: [
-              /* @__PURE__ */ jsx17(BaseTitle_default, { title }),
-              /* @__PURE__ */ jsx17(
+          children: /* @__PURE__ */ jsxs12(FullCard_default, { children: [
+            /* @__PURE__ */ jsxs12("div", { className: "flex flex-row justify-between", children: [
+              /* @__PURE__ */ jsx18(BaseTitle_default, { title }),
+              /* @__PURE__ */ jsx18(
                 BaseImage_default,
                 {
                   src: "/icons/cross-red.webp",
@@ -1052,8 +1108,8 @@ var BaseModal = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx17(DividerLine_default, {}),
-            /* @__PURE__ */ jsx17("div", { className: "max-h-[calc(98vh-120px)] overflow-auto", children })
+            /* @__PURE__ */ jsx18(DividerLine_default, {}),
+            /* @__PURE__ */ jsx18("div", { className: "max-h-[calc(98vh-120px)] overflow-auto", children })
           ] })
         }
       )
@@ -1063,20 +1119,20 @@ var BaseModal = ({
 var BaseModal_default = BaseModal;
 
 // src/components/pdfs/BasePDF.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { Document, Page } from "react-pdf";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var BasePDF = ({ file }) => {
-  const [pageNumber, setPageNumber] = useState10(1);
-  const [numberOfPages, setNumberOfPages] = useState10(0);
+  const [pageNumber, setPageNumber] = useState11(1);
+  const [numberOfPages, setNumberOfPages] = useState11(0);
   const handleOnDocumentLoadSuccess = ({ numPages }) => {
     setPageNumber(1);
     setNumberOfPages(numPages);
   };
-  return /* @__PURE__ */ jsxs12(Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
-    /* @__PURE__ */ jsx18(Page, { pageNumber }),
-    /* @__PURE__ */ jsxs12("div", { className: "flex flex-row items-center justify-center", children: [
-      pageNumber === 1 ? null : /* @__PURE__ */ jsx18("div", { className: "px-2", children: /* @__PURE__ */ jsx18("div", { className: "cursor-pointer", children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs13(Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
+    /* @__PURE__ */ jsx19(Page, { pageNumber }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex flex-row items-center justify-center", children: [
+      pageNumber === 1 ? null : /* @__PURE__ */ jsx19("div", { className: "px-2", children: /* @__PURE__ */ jsx19("div", { className: "cursor-pointer", children: /* @__PURE__ */ jsx19(
         BaseImage_default,
         {
           alt: "arrow-left",
@@ -1087,7 +1143,7 @@ var BasePDF = ({ file }) => {
           }
         }
       ) }) }),
-      Array.from(Array(numberOfPages).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx18("div", { className: "px-2", children: /* @__PURE__ */ jsx18(
+      Array.from(Array(numberOfPages).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx19("div", { className: "px-2", children: /* @__PURE__ */ jsx19(
         "p",
         {
           className: `${pageNumber === index + 1 ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -1097,7 +1153,7 @@ var BasePDF = ({ file }) => {
           children: index + 1
         }
       ) }, index)),
-      numberOfPages === 0 || pageNumber === numberOfPages ? null : /* @__PURE__ */ jsx18("div", { className: "px-2", children: /* @__PURE__ */ jsx18("div", { className: "cursor-pointer", children: /* @__PURE__ */ jsx18(
+      numberOfPages === 0 || pageNumber === numberOfPages ? null : /* @__PURE__ */ jsx19("div", { className: "px-2", children: /* @__PURE__ */ jsx19("div", { className: "cursor-pointer", children: /* @__PURE__ */ jsx19(
         BaseImage_default,
         {
           src: "/icons/arrow-right.webp",
@@ -1114,14 +1170,14 @@ var BasePDF = ({ file }) => {
 var BasePDF_default = BasePDF;
 
 // src/components/activities/empty-contents/ActivityEmptyContent.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ActivityEmptyContent = () => {
-  return /* @__PURE__ */ jsx19("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__ */ jsx19("p", { className: "text-lg", children: i18n_default.t("you_have_set_this_activity_as_empty") }) });
+  return /* @__PURE__ */ jsx20("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__ */ jsx20("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
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import Modal2 from "react-modal";
 
 // src/utilization/CatchtivityUtilization.ts
@@ -3140,15 +3196,15 @@ var retrieveActivityCountOptionList = () => {
 
 // src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
 import { InlineMath } from "react-katex";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var ShowBodyMediaByContentType = ({
   index,
   type,
   value,
   size
 }) => {
-  const [showFullScreen, setShowFullScreen] = useState11(false);
-  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState11("");
+  const [showFullScreen, setShowFullScreen] = useState12(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState12("");
   const convertToPercentage = (size2) => {
     switch (size2) {
       case "1/3":
@@ -3162,17 +3218,17 @@ var ShowBodyMediaByContentType = ({
     }
   };
   const renderSpecialExpressions = (inputPart, inputPartIndex) => {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       "span",
       {
         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ jsx20("span", { className: "text-xl", children: /* @__PURE__ */ jsx20(InlineMath, { math: inputPart.value }) }) : inputPart.value
+        children: inputPart.isEquation ? /* @__PURE__ */ jsx21("span", { className: "text-xl", children: /* @__PURE__ */ jsx21(InlineMath, { math: inputPart.value }) }) : inputPart.value
       },
       inputPartIndex
     );
   };
   const renderTextContent = (text, itemKey) => {
-    return /* @__PURE__ */ jsx20("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(text).map(
+    return /* @__PURE__ */ jsx21("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(text).map(
       (inputPart, inputPartIndex) => renderSpecialExpressions(inputPart, inputPartIndex)
     ) }, itemKey);
   };
@@ -3204,7 +3260,7 @@ var ShowBodyMediaByContentType = ({
         currentIndex++;
         const itemKey = `text-inside-${index}-${currentIndex}`;
         valuePartList.push(
-          /* @__PURE__ */ jsx20("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+          /* @__PURE__ */ jsx21("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
             (inputPart, inputPartIndex) => renderSpecialExpressions(inputPart, inputPartIndex)
           ) }, itemKey)
         );
@@ -3221,7 +3277,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21(
               "p",
               {
                 className: "text-xl",
@@ -3240,12 +3296,12 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsxs14(
             "div",
             {
               className: "relative w-[200px]",
               children: [
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx21(
                   BaseImage_default,
                   {
                     src: imageSource,
@@ -3254,12 +3310,12 @@ var ShowBodyMediaByContentType = ({
                     className: "rounded-catchup-xlarge"
                   }
                 ),
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx21(
                   "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__ */ jsx20(
+                    children: /* @__PURE__ */ jsx21(
                       BaseImage_default,
                       {
                         src: "/icons/arrow-up.webp",
@@ -3288,7 +3344,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21(
               "p",
               {
                 className: "text-xl",
@@ -3307,7 +3363,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             "video",
             {
               src: videoSource,
@@ -3330,7 +3386,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21(
               "p",
               {
                 className: "text-xl",
@@ -3349,7 +3405,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             "audio",
             {
               src: audioSource,
@@ -3374,13 +3430,13 @@ var ShowBodyMediaByContentType = ({
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
         valuePartList.push(
-          /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsxs14(
             "div",
             {
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
               children: [
-                /* @__PURE__ */ jsx20("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx20("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-                /* @__PURE__ */ jsx20("span", { className: "text-xl", children: imageText })
+                /* @__PURE__ */ jsx21("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx21("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+                /* @__PURE__ */ jsx21("span", { className: "text-xl", children: imageText })
               ]
             },
             `img-desc-${index}-${currentIndex}`
@@ -3394,7 +3450,7 @@ var ShowBodyMediaByContentType = ({
     return valuePartList;
   };
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       Modal2,
       {
         isOpen: showFullScreen,
@@ -3423,8 +3479,8 @@ var ShowBodyMediaByContentType = ({
           }
         },
         contentLabel: "Image Fullscreen View",
-        children: /* @__PURE__ */ jsxs13("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ jsx20("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx20(
+        children: /* @__PURE__ */ jsxs14("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ jsx21("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx21(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -3436,7 +3492,7 @@ var ShowBodyMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx21(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -3452,10 +3508,10 @@ var ShowBodyMediaByContentType = ({
   const RenderMainContent = () => {
     switch (type) {
       case "TEXT":
-        return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx20("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
+        return /* @__PURE__ */ jsx21("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx21("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsx21("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx21(
             BaseImage_default,
             {
               src: value,
@@ -3465,12 +3521,12 @@ var ShowBodyMediaByContentType = ({
               imageClassName: "max-h-[50vh] max-w-full object-contain rounded-catchup-xlarge"
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             "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__ */ jsx20(
+              children: /* @__PURE__ */ jsx21(
                 BaseImage_default,
                 {
                   src: "/icons/arrow-up.webp",
@@ -3483,7 +3539,7 @@ var ShowBodyMediaByContentType = ({
           )
         ] }) });
       case "VIDEO":
-        return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsx21("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx21(
           "video",
           {
             src: value,
@@ -3492,12 +3548,12 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "AUDIO":
-        return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx20("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+        return /* @__PURE__ */ jsx21("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx21("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs13("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: "w-full", children: [
     RenderShowFullScreenItem(),
     RenderMainContent()
   ] }, `body-content-${index}`);
@@ -3505,7 +3561,7 @@ var ShowBodyMediaByContentType = ({
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
 // src/components/activities/body-contents/ActivityBodyContent.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var ActivityBodyContent = ({
   templateType,
   bodyMap,
@@ -3586,7 +3642,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ jsx21("div", { className: "flex flex-col", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22("div", { className: "flex flex-col", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx22(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -3600,9 +3656,9 @@ var ActivityBodyContent = ({
 var ActivityBodyContent_default = ActivityBodyContent;
 
 // src/components/dividers/VerticalDividerLine.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var VerticalDividerLine = () => {
-  return /* @__PURE__ */ jsx22("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
+  return /* @__PURE__ */ jsx23("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
 };
 var VerticalDividerLine_default = VerticalDividerLine;
 
@@ -3612,8 +3668,8 @@ import { InlineMath as InlineMath2 } from "react-katex";
 // src/components/groups/InputGroup.tsx
 import Select from "react-select";
 import Switch from "react-switch";
-import { useEffect as useEffect3, useRef, useState as useState12, useCallback } from "react";
-import { Fragment, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef, useState as useState13, useCallback } from "react";
+import { Fragment, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var InputGroup = ({
   type,
   title,
@@ -3640,8 +3696,8 @@ var InputGroup = ({
 }) => {
   const textAreaRef = useRef(null);
   const latexTextAreaRef = useRef(null);
-  const [showMathConstructor, setShowMathConstructor] = useState12(false);
-  const [mathValue, setMathValue] = useState12("");
+  const [showMathConstructor, setShowMathConstructor] = useState13(false);
+  const [mathValue, setMathValue] = useState13("");
   const mathFieldRef = useRef(null);
   useEffect3(() => {
     if (!textAreaRef) return;
@@ -3728,7 +3784,7 @@ var InputGroup = ({
     setShowMathConstructor(true);
   };
   const MathConstructorModal = () => {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       BaseModal_default,
       {
         title: i18n_default.t("math_editor"),
@@ -3739,8 +3795,8 @@ var InputGroup = ({
         onRequestClose: () => {
           setShowMathConstructor(false);
         },
-        children: /* @__PURE__ */ jsx23("div", { className: "bg-catchup-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs14("div", { className: "p-6 space-y-6", children: [
-          /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsx23("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsx24("div", { className: "bg-catchup-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs15("div", { className: "p-6 space-y-6", children: [
+          /* @__PURE__ */ jsx24("div", { children: /* @__PURE__ */ jsx24("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ jsx24(
             "math-field",
             {
               ref: mathFieldRef,
@@ -3766,10 +3822,10 @@ var InputGroup = ({
               }
             }
           ) }) }),
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx23("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
-            /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsxs15("div", { children: [
+            /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
+            /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx24(
                 "textarea",
                 {
                   ref: latexTextAreaRef,
@@ -3779,7 +3835,7 @@ var InputGroup = ({
                   placeholder: i18n_default.t("latex_will_appear_here")
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 "button",
                 {
                   onClick: handleCopyLatex,
@@ -3795,13 +3851,13 @@ var InputGroup = ({
     );
   };
   const CheckboxInputGroup = () => {
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         className: "flex flex-row items-center gap-x-1 cursor-pointer",
         onClick,
         children: [
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24(
             BaseImage_default,
             {
               src: value ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -3811,15 +3867,15 @@ var InputGroup = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx23("p", { className: "", children: title })
+          /* @__PURE__ */ jsx24("p", { className: "", children: title })
         ]
       }
     );
   };
   const FileInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ jsx23("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsxs15("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx24(
         "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",
@@ -3836,9 +3892,9 @@ var InputGroup = ({
     ] });
   };
   const DateInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ jsx23("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsxs15("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx24(
         "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`,
@@ -3855,9 +3911,9 @@ var InputGroup = ({
     ] });
   };
   const SearchableSelectInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ jsx23("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
-      /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsxs15("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
+      /* @__PURE__ */ jsx24(
         Select,
         {
           options: convertOptionListToSelectComponent(
@@ -3920,16 +3976,16 @@ var InputGroup = ({
     ] });
   };
   const TextAreaInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "my-1 flex-1 flex flex-col relative", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "flex flex-row justify-between items-center", children: [
-        /* @__PURE__ */ jsx23("div", { children: title ? /* @__PURE__ */ jsx23("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ jsx23("div", { children: value && limit ? /* @__PURE__ */ jsxs14("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "my-1 flex-1 flex flex-col relative", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsx24("div", { children: title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ jsx24("div", { children: value && limit ? /* @__PURE__ */ jsxs15("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
         ] }) : null })
       ] }),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         "textarea",
         {
           ref: textAreaRef,
@@ -3942,22 +3998,22 @@ var InputGroup = ({
           onKeyDown
         }
       ),
-      useMath && /* @__PURE__ */ jsx23(
+      useMath && /* @__PURE__ */ jsx24(
         "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__ */ jsxs14("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ jsx23("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
-            /* @__PURE__ */ jsx23(
+          children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ jsx24("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ jsx24(
               "svg",
               {
                 className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx23(
+                children: /* @__PURE__ */ jsx24(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3974,20 +4030,20 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "my-1 relative", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "flex flex-row justify-between items-center", children: [
-        /* @__PURE__ */ jsx23("div", { children: title ? /* @__PURE__ */ jsx23("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ jsx23("div", { children: value && limit ? /* @__PURE__ */ jsxs14("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "my-1 relative", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsx24("div", { children: title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ jsx24("div", { children: value && limit ? /* @__PURE__ */ jsxs15("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
         ] }) : null })
       ] }),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         "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__ */ jsx23(
+          children: /* @__PURE__ */ jsx24(
             "input",
             {
               disabled,
@@ -4005,22 +4061,22 @@ var InputGroup = ({
           )
         }
       ),
-      useMath && /* @__PURE__ */ jsx23(
+      useMath && /* @__PURE__ */ jsx24(
         "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__ */ jsxs14("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ jsx23("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
-            /* @__PURE__ */ jsx23(
+          children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ jsx24("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ jsx24(
               "svg",
               {
                 className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx23(
+                children: /* @__PURE__ */ jsx24(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -4037,9 +4093,9 @@ var InputGroup = ({
     ] });
   };
   const SwitchInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col my-1", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center", children: [
-        /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col my-1", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ jsx24(
           Switch,
           {
             onChange: () => {
@@ -4058,7 +4114,7 @@ var InputGroup = ({
             disabled
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "p",
           {
             className: `${checked ? "font-bold" : "text-catchup-gray"} px-2 transition-all duration-300`,
@@ -4066,7 +4122,7 @@ var InputGroup = ({
           }
         )
       ] }),
-      description ? /* @__PURE__ */ jsx23("p", { className: "text-md text-catchup-gray-300 mt-1 ml-12", children: description }) : null
+      description ? /* @__PURE__ */ jsx24("p", { className: "text-md text-catchup-gray-300 mt-1 ml-12", children: description }) : null
     ] });
   };
   const RenderMainContent = () => {
@@ -4088,16 +4144,16 @@ var InputGroup = ({
       return SwitchInputGroup();
     }
   };
-  return /* @__PURE__ */ jsxs14(Fragment, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment, { children: [
     RenderMainContent(),
-    /* @__PURE__ */ jsx23(MathConstructorModal, {})
+    /* @__PURE__ */ jsx24(MathConstructorModal, {})
   ] });
 };
 var InputGroup_default = InputGroup;
 
 // src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
 import { useEffect as useEffect6 } from "react";
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 
 // src/utilization/AppUtilization.ts
 var colors = [
@@ -4221,10 +4277,10 @@ var getSystemLanguageFromCurriculumType = (curriculumType) => {
 };
 
 // src/components/dropdowns/MediaDropdown.tsx
-import { useState as useState13, useEffect as useEffect4, useRef as useRef2 } from "react";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState14, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var MediaDropdown = ({ id, answer, optionList }) => {
-  const [showDropdown, setShowDropdown] = useState13(false);
+  const [showDropdown, setShowDropdown] = useState14(false);
   const dropdownRef = useRef2(null);
   useEffect4(() => {
     const handleClickOutside = (event) => {
@@ -4252,8 +4308,8 @@ var MediaDropdown = ({ id, answer, optionList }) => {
     }
     setShowDropdown(false);
   };
-  return /* @__PURE__ */ jsxs15("div", { ref: dropdownRef, className: "w-full relative", children: [
-    /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs16("div", { ref: dropdownRef, className: "w-full relative", children: [
+    /* @__PURE__ */ jsx25(
       "div",
       {
         className: "w-full flex flex-col items-center justify-center cursor-pointer",
@@ -4261,16 +4317,16 @@ var MediaDropdown = ({ id, answer, optionList }) => {
         children: answer
       }
     ),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(
       "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__ */ jsxs15(
+        children: optionList.map((option, index) => /* @__PURE__ */ jsxs16(
           "li",
           {
             className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
             children: [
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 "div",
                 {
                   className: `w-full flex flex-col my-2 cursor-pointer ${option.divClassNames ? option.divClassNames : ""}`,
@@ -4278,7 +4334,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
                   children: option.media
                 }
               ),
-              index !== optionList.length - 1 ? /* @__PURE__ */ jsx24("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
+              index !== optionList.length - 1 ? /* @__PURE__ */ jsx25("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
             ]
           },
           option.id
@@ -4290,25 +4346,25 @@ var MediaDropdown = ({ id, answer, optionList }) => {
 var MediaDropdown_default = MediaDropdown;
 
 // src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx
-import { useEffect as useEffect5, useRef as useRef3, useState as useState14 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState15 } from "react";
 import Modal3 from "react-modal";
-import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var ShowMaterialMediaByContentType = ({
   key,
   contentType,
   src,
   canFullScreen
 }) => {
-  const [showFullScreen, setShowFullScreen] = useState14(false);
-  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState14(null);
-  const [isLoaded, setIsLoaded] = useState14(false);
+  const [showFullScreen, setShowFullScreen] = useState15(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState15(null);
+  const [isLoaded, setIsLoaded] = useState15(false);
   const imageRef = useRef3(null);
   const videoRef = useRef3(null);
   useEffect5(() => {
     setIsLoaded(false);
   }, []);
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx26(
       Modal3,
       {
         isOpen: showFullScreen,
@@ -4339,8 +4395,8 @@ var ShowMaterialMediaByContentType = ({
           }
         },
         contentLabel: "",
-        children: /* @__PURE__ */ jsxs16("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ jsx25("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx25(
+        children: /* @__PURE__ */ jsxs17("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ jsx26("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx26(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -4352,7 +4408,7 @@ var ShowMaterialMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx26(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -4365,10 +4421,10 @@ var ShowMaterialMediaByContentType = ({
       }
     );
   };
-  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs16(Fragment2, { children: [
+  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs17(Fragment2, { children: [
     RenderShowFullScreenItem(),
-    /* @__PURE__ */ jsx25("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx25("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs16("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
-      /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx26("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs17("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
+      /* @__PURE__ */ jsx26(
         BaseImage_default,
         {
           src,
@@ -4383,7 +4439,7 @@ var ShowMaterialMediaByContentType = ({
           }
         }
       ),
-      src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx25(
+      src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx26(
         "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",
@@ -4395,7 +4451,7 @@ var ShowMaterialMediaByContentType = ({
             setShowFullScreen(true);
             setSelectedFullScreenItem(src);
           },
-          children: /* @__PURE__ */ jsx25(
+          children: /* @__PURE__ */ jsx26(
             BaseImage_default,
             {
               src: "/icons/arrow-up.webp",
@@ -4407,7 +4463,7 @@ var ShowMaterialMediaByContentType = ({
         }
       ) : null
     ] }) }) })
-  ] }) : contentType === "VIDEO" ? /* @__PURE__ */ jsx25("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx25("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx25("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ jsx25(
+  ] }) : contentType === "VIDEO" ? /* @__PURE__ */ jsx26("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx26("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx26("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ jsx26(
     "video",
     {
       ref: videoRef,
@@ -4417,7 +4473,7 @@ var ShowMaterialMediaByContentType = ({
       onClick: () => {
       }
     }
-  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx25("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx25("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx25("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ jsx25(
+  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx26("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx26("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx26("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ jsx26(
     "audio",
     {
       className: "w-full rounded-catchup-xlarge",
@@ -4431,7 +4487,7 @@ var ShowMaterialMediaByContentType = ({
 var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
 
 // src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var DropdownActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -4442,7 +4498,7 @@ var DropdownActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [displayAnswerMap, setDisplayAnswerMap] = useState15(answerMap);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState16(answerMap);
   useEffect6(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
@@ -4463,23 +4519,23 @@ var DropdownActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsx26("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx26("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
-    /* @__PURE__ */ jsx26("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx26(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx26("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx26("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
+  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx27("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx27("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
+    /* @__PURE__ */ jsx27("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx27(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx27("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx27("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__ */ jsx26("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx26("div", { className: "mx-2", children: /* @__PURE__ */ jsxs17("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-          /* @__PURE__ */ jsx26("div", { className: "my-auto", children: /* @__PURE__ */ jsxs17("p", { className: "text-xl", children: [
+        return /* @__PURE__ */ jsx27("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx27("div", { className: "mx-2", children: /* @__PURE__ */ jsxs18("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+          /* @__PURE__ */ jsx27("div", { className: "my-auto", children: /* @__PURE__ */ jsxs18("p", { className: "text-xl", children: [
             parseFloat(materialKey) + 1,
             "."
           ] }) }),
-          /* @__PURE__ */ jsxs17("div", { className: "w-full relative", children: [
-            /* @__PURE__ */ jsx26("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx26("div", { className: "flex-1", children: /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsxs18("div", { className: "w-full relative", children: [
+            /* @__PURE__ */ jsx27("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx27("div", { className: "flex-1", children: /* @__PURE__ */ jsx27(
               InputGroup_default,
               {
                 type: "select",
@@ -4487,13 +4543,13 @@ var DropdownActivityMaterialContent = ({
                 optionList: shuffleArray(
                   materialMap[materialKey][answerKey]
                 ).map((materialOption) => ({
-                  text: /* @__PURE__ */ jsx26("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  text: /* @__PURE__ */ jsx27("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                     materialOption
-                  ).map((inputPart, index2) => /* @__PURE__ */ jsx26(
+                  ).map((inputPart, index2) => /* @__PURE__ */ jsx27(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ jsx26("span", { className: "text-xl", children: /* @__PURE__ */ jsx26(
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx27("span", { className: "text-xl", children: /* @__PURE__ */ jsx27(
                         InlineMath2,
                         {
                           math: inputPart.value
@@ -4512,11 +4568,11 @@ var DropdownActivityMaterialContent = ({
                   );
                 }
               }
-            ) }) : /* @__PURE__ */ jsx26(
+            ) }) : /* @__PURE__ */ jsx27(
               MediaDropdown_default,
               {
                 id: materialKey,
-                answer: displayAnswerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx26("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__ */ jsx26("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx26("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx26(
+                answer: displayAnswerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx27("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__ */ jsx27("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx27("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx27(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -4527,7 +4583,7 @@ var DropdownActivityMaterialContent = ({
                 ),
                 optionList: materialMap[materialKey][answerKey].map((materialOption, index2) => ({
                   id: index2,
-                  media: /* @__PURE__ */ jsx26("div", { children: /* @__PURE__ */ jsx26(
+                  media: /* @__PURE__ */ jsx27("div", { children: /* @__PURE__ */ jsx27(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -4545,24 +4601,24 @@ var DropdownActivityMaterialContent = ({
                   }
                 }))
               }
-            ) : /* @__PURE__ */ jsx26("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            ) : /* @__PURE__ */ jsx27("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               displayAnswerMap[materialKey]
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx26(
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx27(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx26("span", { className: "text-xl", children: /* @__PURE__ */ jsx26(InlineMath2, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx27("span", { className: "text-xl", children: /* @__PURE__ */ jsx27(InlineMath2, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }) }),
-            learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx26("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx26(
+            learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx27("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx27(
               BaseImage_default,
               {
                 src: "/icons/checkbox.webp",
                 alt: "chekbbox",
                 size: "small"
               }
-            ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx26("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx26(
+            ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx27("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx27(
               BaseImage_default,
               {
                 src: "/icons/cross-red.webp",
@@ -4579,8 +4635,8 @@ var DropdownActivityMaterialContent = ({
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
-import { useState as useState16, useEffect as useEffect7 } from "react";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useState as useState17, useEffect as useEffect7 } from "react";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 var DropdownActivityContent = ({
   answerMap,
   data,
@@ -4593,7 +4649,7 @@ var DropdownActivityContent = ({
   const contentMap = parseContentMapFromData(data);
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
-  const [currentAnswerMap, setCurrentAnswerMap] = useState16(answerMap);
+  const [currentAnswerMap, setCurrentAnswerMap] = useState17(answerMap);
   useEffect7(() => {
     setCurrentAnswerMap(answerMap);
   }, [answerMap]);
@@ -4603,8 +4659,8 @@ var DropdownActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs18("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ jsx27("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs19("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx28(
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
@@ -4613,9 +4669,9 @@ var DropdownActivityContent = ({
         templateType: "DROPDOWN"
       }
     ) }),
-    /* @__PURE__ */ jsx27("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx27(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx27("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx27(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx27("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx28(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx28(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx28(
       DropdownActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -4634,34 +4690,34 @@ var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
 import { InlineMath as InlineMath4 } from "react-katex";
-import { useState as useState17, useEffect as useEffect8, useRef as useRef4 } from "react";
+import { useState as useState18, useEffect as useEffect8, useRef as useRef4 } from "react";
 
 // src/components/texts/InputWithSpecialExpression.tsx
 import { InlineMath as InlineMath3 } from "react-katex";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx28("div", { className: "m-2", children: /* @__PURE__ */ jsx28("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx28(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx29("div", { className: "m-2", children: /* @__PURE__ */ jsx29("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx29(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-lg", children: /* @__PURE__ */ jsx28(InlineMath3, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-lg", children: /* @__PURE__ */ jsx29(InlineMath3, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ jsx28("div", { className: "m-2", children: /* @__PURE__ */ jsx28("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx28(
+  )) }) }) : null : /* @__PURE__ */ jsx29("div", { className: "m-2", children: /* @__PURE__ */ jsx29("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx29(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-lg", children: /* @__PURE__ */ jsx28(InlineMath3, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-lg", children: /* @__PURE__ */ jsx29(InlineMath3, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -4673,20 +4729,20 @@ var FillInTheBlanksActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = useState17([]);
-  const [selectedOption, setSelectedOption] = useState17(null);
-  const [draggedOption, setDraggedOption] = useState17(null);
-  const [dropTargetIndex, setDropTargetIndex] = useState17(null);
-  const [draggedElement, setDraggedElement] = useState17(
+  const [shuffleOptionList, setShuffleOptionList] = useState18([]);
+  const [selectedOption, setSelectedOption] = useState18(null);
+  const [draggedOption, setDraggedOption] = useState18(null);
+  const [dropTargetIndex, setDropTargetIndex] = useState18(null);
+  const [draggedElement, setDraggedElement] = useState18(
     null
   );
-  const [displayAnswerMap, setDisplayAnswerMap] = useState17(answerMap);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState18(answerMap);
   const dragElementRef = useRef4(null);
-  const [mousePosition, setMousePosition] = useState17({
+  const [mousePosition, setMousePosition] = useState18({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = useState17({
+  const [touchPosition, setTouchPosition] = useState18({
     x: 0,
     y: 0
   });
@@ -4790,16 +4846,16 @@ var FillInTheBlanksActivityMaterialContent = ({
       setSelectedOption(null);
     }
   };
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: "flex flex-col h-full",
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
       children: [
-        /* @__PURE__ */ jsx29("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx29("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
-        /* @__PURE__ */ jsx29("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx29(DividerLine_default, {}) }),
-        draggedOption && mousePosition.x > 0 && /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx30("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+        /* @__PURE__ */ jsx30("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx30(DividerLine_default, {}) }),
+        draggedOption && mousePosition.x > 0 && /* @__PURE__ */ jsx30(
           "div",
           {
             className: "fixed pointer-events-none z-50 opacity-80",
@@ -4808,13 +4864,13 @@ var FillInTheBlanksActivityMaterialContent = ({
               top: `${mousePosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx29("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx29(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx30("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx30(
               InputWithSpecialExpression_default,
               {
                 value: draggedOption,
                 showSpecialOnly: false
               }
-            ) }) }) : /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx29(
+            ) }) }) : /* @__PURE__ */ jsx30("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx30(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -4825,7 +4881,7 @@ var FillInTheBlanksActivityMaterialContent = ({
             ) })
           }
         ),
-        draggedOption && touchPosition.x > 0 && /* @__PURE__ */ jsx29(
+        draggedOption && touchPosition.x > 0 && /* @__PURE__ */ jsx30(
           "div",
           {
             className: "fixed pointer-events-none z-50 opacity-80",
@@ -4834,13 +4890,13 @@ var FillInTheBlanksActivityMaterialContent = ({
               top: `${touchPosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx29("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx29(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx30("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx30(
               InputWithSpecialExpression_default,
               {
                 value: draggedOption,
                 showSpecialOnly: false
               }
-            ) }) }) : /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx29(
+            ) }) }) : /* @__PURE__ */ jsx30("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx30(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -4851,9 +4907,9 @@ var FillInTheBlanksActivityMaterialContent = ({
             ) })
           }
         ),
-        /* @__PURE__ */ jsxs19("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [
-          /* @__PURE__ */ jsx29("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__ */ jsx29(
+        /* @__PURE__ */ jsxs20("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [
+          /* @__PURE__ */ jsx30("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__ */ jsx30(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -4861,7 +4917,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                 canFullScreen: true
               },
               `${uniqueValue}-${index}`
-            ) : /* @__PURE__ */ jsx29(
+            ) : /* @__PURE__ */ jsx30(
               "div",
               {
                 ref: draggedOption === option ? dragElementRef : null,
@@ -4871,12 +4927,12 @@ var FillInTheBlanksActivityMaterialContent = ({
                 onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
                 onTouchMove: handleTouchMove,
                 onTouchEnd: handleTouchEnd,
-                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx29(
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30(
                   "div",
                   {
                     className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
                     onClick: () => handleSelectOption(option),
-                    children: /* @__PURE__ */ jsx29("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx29(
+                    children: /* @__PURE__ */ jsx30("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx30(
                       InputWithSpecialExpression_default,
                       {
                         value: option,
@@ -4884,12 +4940,12 @@ var FillInTheBlanksActivityMaterialContent = ({
                       }
                     ) })
                   }
-                ) : /* @__PURE__ */ jsx29(
+                ) : /* @__PURE__ */ jsx30(
                   "div",
                   {
                     className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
                     onClick: () => handleSelectOption(option),
-                    children: /* @__PURE__ */ jsx29(
+                    children: /* @__PURE__ */ jsx30(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -4904,12 +4960,12 @@ var FillInTheBlanksActivityMaterialContent = ({
               index
             )
           ) }),
-          /* @__PURE__ */ jsx29("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
+          /* @__PURE__ */ jsx30("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__ */ jsx29("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx29("div", { className: "mx-2", children: /* @__PURE__ */ jsx29(
+            return /* @__PURE__ */ jsx30("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx30("div", { className: "mx-2", children: /* @__PURE__ */ jsx30(
               "div",
               {
                 "data-drop-zone": materialKey,
@@ -4917,13 +4973,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__ */ jsxs19("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-                  /* @__PURE__ */ jsx29("div", { className: "my-auto", children: /* @__PURE__ */ jsxs19("p", { className: "text-xl", children: [
+                children: /* @__PURE__ */ jsxs20("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+                  /* @__PURE__ */ jsx30("div", { className: "my-auto", children: /* @__PURE__ */ jsxs20("p", { className: "text-xl", children: [
                     parseFloat(materialKey) + 1,
                     "."
                   ] }) }),
-                  /* @__PURE__ */ jsx29("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs19("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsx29("div", { className: "flex-1", children: /* @__PURE__ */ jsx29(
+                  /* @__PURE__ */ jsx30("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsx30("div", { className: "flex-1", children: /* @__PURE__ */ jsx30(
                       "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"}`,
@@ -4933,7 +4989,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                             onChange(answerMap, materialKey, "");
                           }
                         },
-                        children: displayAnswerMap[materialKey] ? /* @__PURE__ */ jsx29(
+                        children: displayAnswerMap[materialKey] ? /* @__PURE__ */ jsx30(
                           InputWithSpecialExpression_default,
                           {
                             value: displayAnswerMap[materialKey],
@@ -4942,14 +4998,14 @@ var FillInTheBlanksActivityMaterialContent = ({
                         ) : null
                       }
                     ) }),
-                    learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx29("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx29(
+                    learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
                       BaseImage_default,
                       {
                         src: "/icons/checkbox.webp",
                         alt: "checkbox",
                         size: "small"
                       }
-                    ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx29("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx29(
+                    ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
                       BaseImage_default,
                       {
                         src: "/icons/cross-red.webp",
@@ -4957,13 +5013,13 @@ var FillInTheBlanksActivityMaterialContent = ({
                         size: "small"
                       }
                     ) }) : null
-                  ] }) : displayAnswerMap[materialKey] === "" ? /* @__PURE__ */ jsx29(
+                  ] }) : displayAnswerMap[materialKey] === "" ? /* @__PURE__ */ jsx30(
                     "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__ */ jsx29("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx29("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
+                      children: /* @__PURE__ */ jsx30("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx30("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
                     }
-                  ) : /* @__PURE__ */ jsx29(
+                  ) : /* @__PURE__ */ jsx30(
                     "div",
                     {
                       className: "flex-1 cursor-pointer",
@@ -4971,7 +5027,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                         e.stopPropagation();
                         onChange(answerMap, materialKey, "");
                       },
-                      children: /* @__PURE__ */ jsx29(
+                      children: /* @__PURE__ */ jsx30(
                         ShowMaterialMediaByContentType_default,
                         {
                           contentType: contentMap.type,
@@ -4981,13 +5037,13 @@ var FillInTheBlanksActivityMaterialContent = ({
                         `${uniqueValue}-${index}`
                       )
                     }
-                  ) : /* @__PURE__ */ jsx29("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+                  ) : /* @__PURE__ */ jsx30("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
                     displayAnswerMap[materialKey]
-                  ).map((inputPart, index2) => /* @__PURE__ */ jsx29(
+                  ).map((inputPart, index2) => /* @__PURE__ */ jsx30(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-xl", children: /* @__PURE__ */ jsx29(InlineMath4, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-xl", children: /* @__PURE__ */ jsx30(InlineMath4, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
                   )) }, materialKey) })
@@ -5003,8 +5059,8 @@ var FillInTheBlanksActivityMaterialContent = ({
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
-import { useState as useState18, useEffect as useEffect9 } from "react";
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useState as useState19, useEffect as useEffect9 } from "react";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var FillInTheBlanksActivityContent = ({
   answerMap,
   data,
@@ -5024,7 +5080,7 @@ var FillInTheBlanksActivityContent = ({
     "FILL_IN_THE_BLANKS"
   );
   const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList ? JSON.parse(data.fillInTheBlanksIncorrectList) : [];
-  const [currentAnswerMap, setCurrentAnswerMap] = useState18(answerMap);
+  const [currentAnswerMap, setCurrentAnswerMap] = useState19(answerMap);
   useEffect9(() => {
     setCurrentAnswerMap(answerMap);
   }, [answerMap]);
@@ -5052,8 +5108,8 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs20("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs21("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ jsx31("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx31(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -5062,9 +5118,9 @@ var FillInTheBlanksActivityContent = ({
         templateType: "FILL_IN_THE_BLANKS"
       }
     ) }),
-    /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx30(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx30(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx31(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx31("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx31(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx31("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx31(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5083,9 +5139,9 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
-import { useEffect as useEffect10, useRef as useRef5, useState as useState19 } from "react";
+import { useEffect as useEffect10, useRef as useRef5, useState as useState20 } from "react";
 import { InlineMath as InlineMath5 } from "react-katex";
-import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5096,20 +5152,20 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState19(null);
-  const [draggedValue, setDraggedValue] = useState19(null);
-  const [dropTargetKey, setDropTargetKey] = useState19(null);
-  const [draggedElement, setDraggedElement] = useState19(
+  const [selectedValue, setSelectedValue] = useState20(null);
+  const [draggedValue, setDraggedValue] = useState20(null);
+  const [dropTargetKey, setDropTargetKey] = useState20(null);
+  const [draggedElement, setDraggedElement] = useState20(
     null
   );
-  const [shuffledMaterialList, setShuffledMaterialList] = useState19([]);
-  const [displayAnswerMap, setDisplayAnswerMap] = useState19(answerMap);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState20(answerMap);
   const dragElementRef = useRef5(null);
-  const [mousePosition, setMousePosition] = useState19({
+  const [mousePosition, setMousePosition] = useState20({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = useState19({
+  const [touchPosition, setTouchPosition] = useState20({
     x: 0,
     y: 0
   });
@@ -5282,8 +5338,8 @@ var GroupingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
-    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx32(
       "div",
       {
         className: "fixed pointer-events-none z-50 opacity-80",
@@ -5292,16 +5348,16 @@ var GroupingActivityMaterialContent = ({
           top: `${mousePosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
-          (inputPart, index) => /* @__PURE__ */ jsx31(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ jsx32("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__PURE__ */ jsx32(
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(InlineMath5, { math: inputPart.value }) }) : inputPart.value
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx31(
+        ) }) }) }) : /* @__PURE__ */ jsx32("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx32(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5312,7 +5368,7 @@ var GroupingActivityMaterialContent = ({
         ) })
       }
     ),
-    draggedValue && touchPosition.x > 0 && /* @__PURE__ */ jsx31(
+    draggedValue && touchPosition.x > 0 && /* @__PURE__ */ jsx32(
       "div",
       {
         className: "fixed pointer-events-none z-50 opacity-80",
@@ -5321,16 +5377,16 @@ var GroupingActivityMaterialContent = ({
           top: `${touchPosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
-          (inputPart, index) => /* @__PURE__ */ jsx31(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ jsx32("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__PURE__ */ jsx32(
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(InlineMath5, { math: inputPart.value }) }) : inputPart.value
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx31(
+        ) }) }) }) : /* @__PURE__ */ jsx32("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx32(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5341,9 +5397,9 @@ var GroupingActivityMaterialContent = ({
         ) })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs21(Fragment3, { children: [
-      /* @__PURE__ */ jsx31("div", { className: "flex-shrink-0 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
-        return /* @__PURE__ */ jsx31(
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs22(Fragment3, { children: [
+      /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
+        return /* @__PURE__ */ jsx32(
           "div",
           {
             ref: draggedValue === materialValue ? dragElementRef : null,
@@ -5353,21 +5409,21 @@ var GroupingActivityMaterialContent = ({
             onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
-            children: /* @__PURE__ */ jsx31(
+            children: /* @__PURE__ */ jsx32(
               "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__ */ jsx31("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx32("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialValue
-                ).map((inputPart, index2) => /* @__PURE__ */ jsx31(
+                ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(InlineMath5, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
-                )) }) }) : /* @__PURE__ */ jsx31(
+                )) }) }) : /* @__PURE__ */ jsx32(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5382,27 +5438,27 @@ var GroupingActivityMaterialContent = ({
           index
         );
       }) }),
-      /* @__PURE__ */ jsx31("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx31(DividerLine_default, {}) })
+      /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx32(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ jsx31("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs21("div", { className: "flex flex-row w-full", children: [
-      /* @__PURE__ */ jsx31("div", { className: "w-1/3", children: /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs22("div", { className: "flex flex-row w-full", children: [
+      /* @__PURE__ */ jsx32("div", { className: "w-1/3", children: /* @__PURE__ */ jsx32(
         "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__ */ jsx31("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx31("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-            (inputPart, index2) => /* @__PURE__ */ jsx31(
+          children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+            (inputPart, index2) => /* @__PURE__ */ jsx32(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(InlineMath5, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
           ) }) })
         }
       ) }),
-      /* @__PURE__ */ jsx31("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-      /* @__PURE__ */ jsx31("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ jsx31("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+      /* @__PURE__ */ jsx32("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ jsx32("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx32(
         "div",
         {
           ref: (el) => dropZoneRefs.current[answerMapKey] = el,
@@ -5411,17 +5467,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__ */ jsx31("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ jsx31("div", { className: "flex flex-row items-center gap-2 w-max h-full", children: displayAnswerMap[answerMapKey].map(
+          children: /* @__PURE__ */ jsx32("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ jsx32("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__ */ jsx31("div", { className: "p-1", children: /* @__PURE__ */ jsx31(
+              return /* @__PURE__ */ jsx32("div", { className: "p-1", children: /* @__PURE__ */ jsx32(
                 "div",
                 {
                   className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"}`,
-                  children: /* @__PURE__ */ jsx31(
+                  children: /* @__PURE__ */ jsx32(
                     "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`,
@@ -5437,13 +5493,13 @@ var GroupingActivityMaterialContent = ({
                           setSelectedValue(null);
                         }
                       },
-                      children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx31("div", { className: "m-2", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                      children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx32("div", { className: "m-2", children: /* @__PURE__ */ jsx32("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                         answerMapValue
-                      ).map((inputPart, index2) => /* @__PURE__ */ jsx31(
+                      ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
                         "span",
                         {
                           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                          children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(
+                          children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(
                             InlineMath5,
                             {
                               math: inputPart.value
@@ -5451,7 +5507,7 @@ var GroupingActivityMaterialContent = ({
                           ) }) : inputPart.value
                         },
                         index2
-                      )) }) }) }) : /* @__PURE__ */ jsx31(
+                      )) }) }) }) : /* @__PURE__ */ jsx32(
                         ShowMaterialMediaByContentType_default,
                         {
                           contentType: contentMap.type,
@@ -5474,7 +5530,7 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 
 // src/components/activities/GroupingActivityContent.tsx
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var GroupingActivityContent = ({
   answerMap,
   data,
@@ -5496,12 +5552,12 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs22("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs23("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ jsx33(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx33(
           ActivityBodyContent_default,
           {
             bodyMap: groupingBodyMap,
@@ -5510,13 +5566,13 @@ var GroupingActivityContent = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx32("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx32(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx32("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx32(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx33(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx33("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx33(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx33(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx33(
           GroupingActivityMaterialContent_default,
           {
             uniqueValue: JSON.stringify(data.contentMap),
@@ -5536,9 +5592,9 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
-import { useEffect as useEffect11, useRef as useRef6, useState as useState20 } from "react";
+import { useEffect as useEffect11, useRef as useRef6, useState as useState21 } from "react";
 import { InlineMath as InlineMath6 } from "react-katex";
-import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5549,20 +5605,20 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState20(null);
-  const [draggedValue, setDraggedValue] = useState20(null);
-  const [dropTargetKey, setDropTargetKey] = useState20(null);
-  const [draggedElement, setDraggedElement] = useState20(
+  const [selectedValue, setSelectedValue] = useState21(null);
+  const [draggedValue, setDraggedValue] = useState21(null);
+  const [dropTargetKey, setDropTargetKey] = useState21(null);
+  const [draggedElement, setDraggedElement] = useState21(
     null
   );
-  const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
-  const [displayAnswerMap, setDisplayAnswerMap] = useState20(answerMap);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState21([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState21(answerMap);
   const dragElementRef = useRef6(null);
-  const [mousePosition, setMousePosition] = useState20({
+  const [mousePosition, setMousePosition] = useState21({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = useState20({
+  const [touchPosition, setTouchPosition] = useState21({
     x: 0,
     y: 0
   });
@@ -5727,8 +5783,8 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
-    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx34(
       "div",
       {
         className: "fixed pointer-events-none z-50 opacity-80",
@@ -5737,16 +5793,16 @@ var MatchingActivityMaterialContent = ({
           top: `${mousePosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
-          (inputPart, index) => /* @__PURE__ */ jsx33(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx34("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx34("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ jsx34("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__PURE__ */ jsx34(
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx34("span", { className: "text-xl", children: /* @__PURE__ */ jsx34(InlineMath6, { math: inputPart.value }) }) : inputPart.value
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx33(
+        ) }) }) }) : /* @__PURE__ */ jsx34("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx34(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5757,7 +5813,7 @@ var MatchingActivityMaterialContent = ({
         ) })
       }
     ),
-    draggedValue && touchPosition.x > 0 && /* @__PURE__ */ jsx33(
+    draggedValue && touchPosition.x > 0 && /* @__PURE__ */ jsx34(
       "div",
       {
         className: "fixed pointer-events-none z-50 opacity-80",
@@ -5766,16 +5822,16 @@ var MatchingActivityMaterialContent = ({
           top: `${touchPosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
-          (inputPart, index) => /* @__PURE__ */ jsx33(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx34("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx34("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ jsx34("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__PURE__ */ jsx34(
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx34("span", { className: "text-xl", children: /* @__PURE__ */ jsx34(InlineMath6, { math: inputPart.value }) }) : inputPart.value
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx33(
+        ) }) }) }) : /* @__PURE__ */ jsx34("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx34(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5786,13 +5842,13 @@ var MatchingActivityMaterialContent = ({
         ) })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
-      /* @__PURE__ */ jsx33(
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs24(Fragment4, { children: [
+      /* @__PURE__ */ jsx34(
         "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__ */ jsx33(
+          children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ jsx34(
             "div",
             {
               ref: draggedValue === materialValue ? dragElementRef : null,
@@ -5802,21 +5858,21 @@ var MatchingActivityMaterialContent = ({
               onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
               onTouchMove: handleTouchMove,
               onTouchEnd: handleTouchEnd,
-              children: /* @__PURE__ */ jsx33(
+              children: /* @__PURE__ */ jsx34(
                 "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__ */ jsx33("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-hidden px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx34("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-hidden px-4", children: /* @__PURE__ */ jsx34("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                     materialValue
-                  ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
+                  ).map((inputPart, index2) => /* @__PURE__ */ jsx34(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx34("span", { className: "text-xl", children: /* @__PURE__ */ jsx34(InlineMath6, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
-                  )) }) }) : /* @__PURE__ */ jsx33(
+                  )) }) }) : /* @__PURE__ */ jsx34(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -5832,32 +5888,32 @@ var MatchingActivityMaterialContent = ({
           ))
         }
       ),
-      /* @__PURE__ */ jsx33("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx33(DividerLine_default, {}) })
+      /* @__PURE__ */ jsx34("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx34(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ jsx33("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((answerMapKey, index) => {
+    /* @__PURE__ */ jsx34("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__ */ jsxs23("div", { className: "flex flex-row w-full", children: [
-        /* @__PURE__ */ jsx33("div", { className: "w-1/3", children: /* @__PURE__ */ jsx33(
+      return /* @__PURE__ */ jsxs24("div", { className: "flex flex-row w-full", children: [
+        /* @__PURE__ */ jsx34("div", { className: "w-1/3", children: /* @__PURE__ */ jsx34(
           "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__ */ jsx33("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-              (inputPart, index2) => /* @__PURE__ */ jsx33(
+            children: /* @__PURE__ */ jsx34("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx34("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+              (inputPart, index2) => /* @__PURE__ */ jsx34(
                 "span",
                 {
                   className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                  children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                  children: inputPart.isEquation ? /* @__PURE__ */ jsx34("span", { className: "text-xl", children: /* @__PURE__ */ jsx34(InlineMath6, { math: inputPart.value }) }) : inputPart.value
                 },
                 index2
               )
             ) }) })
           }
         ) }),
-        /* @__PURE__ */ jsx33("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-        /* @__PURE__ */ jsx33("div", { className: "flex-1", children: /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+        /* @__PURE__ */ jsx34("div", { className: "flex-1", children: /* @__PURE__ */ jsx34(
           "div",
           {
             ref: (el) => dropZoneRefs.current[answerMapKey] = el,
@@ -5866,7 +5922,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__ */ jsx33(
+            children: /* @__PURE__ */ jsx34(
               "div",
               {
                 className: "h-full flex-1 flex flex-row items-center justify-center px-4",
@@ -5877,16 +5933,16 @@ var MatchingActivityMaterialContent = ({
                     setSelectedValue(null);
                   }
                 },
-                children: displayAnswerMap[answerMapKey] ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                children: displayAnswerMap[answerMapKey] ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx34("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   displayAnswerMap[answerMapKey]
-                ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
+                ).map((inputPart, index2) => /* @__PURE__ */ jsx34(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx34("span", { className: "text-xl", children: /* @__PURE__ */ jsx34(InlineMath6, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
-                )) }) : /* @__PURE__ */ jsx33(
+                )) }) : /* @__PURE__ */ jsx34(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5906,7 +5962,7 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 
 // src/components/activities/MatchingActivityContent.tsx
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var MatchingActivityContent = ({
   answerMap,
   data,
@@ -5924,12 +5980,12 @@ var MatchingActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs24("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs25("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ jsx35(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ jsx34(
+        children: /* @__PURE__ */ jsx35(
           ActivityBodyContent_default,
           {
             bodyMap: matchingBodyMap,
@@ -5938,13 +5994,13 @@ var MatchingActivityContent = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx34(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx34(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx35(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx35(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx35(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ jsx34(
+        children: /* @__PURE__ */ jsx35(
           MatchingActivityMaterialContent_default,
           {
             uniqueValue: JSON.stringify(data.contentMap),
@@ -5964,9 +6020,9 @@ var MatchingActivityContent = ({
 var MatchingActivityContent_default = MatchingActivityContent;
 
 // src/components/activities/material-contents/MCMAActivityMaterialContent.tsx
-import { useEffect as useEffect12, useState as useState21 } from "react";
+import { useEffect as useEffect12, useState as useState22 } from "react";
 import { InlineMath as InlineMath7 } from "react-katex";
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 var MCMAActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5977,7 +6033,7 @@ var MCMAActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [displayAnswerMap, setDisplayAnswerMap] = useState21(answerMap);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState22(answerMap);
   useEffect12(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
@@ -6004,11 +6060,11 @@ var MCMAActivityMaterialContent = ({
     return "INCORRECT";
   };
   const correctAnswerList = retrieveCorrectAnswerList();
-  return /* @__PURE__ */ jsx35("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ jsx35("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsxs25("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
-      /* @__PURE__ */ jsx35("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx35("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
-      /* @__PURE__ */ jsx35("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx35(DividerLine_default, {}) }),
-      /* @__PURE__ */ jsx35("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ jsx35("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
+  return /* @__PURE__ */ jsx36("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
+    return /* @__PURE__ */ jsx36("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsxs26("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
+      /* @__PURE__ */ jsx36("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx36("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
+      /* @__PURE__ */ jsx36("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx36(DividerLine_default, {}) }),
+      /* @__PURE__ */ jsx36("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ jsx36("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
           const foundAnswer = displayAnswerMap[materialKey].find(
             (learnerAnswer) => learnerAnswer === materialSubKey
@@ -6021,7 +6077,7 @@ var MCMAActivityMaterialContent = ({
           const foundIndex = correctAnswerList.findIndex(
             (correctAnswer) => correctAnswer === materialSubKey
           );
-          return /* @__PURE__ */ jsxs25(
+          return /* @__PURE__ */ jsxs26(
             "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" : ""}`,
@@ -6029,7 +6085,7 @@ var MCMAActivityMaterialContent = ({
                 onChange(answerMap, materialKey, materialSubKey);
               },
               children: [
-                /* @__PURE__ */ jsx35(
+                /* @__PURE__ */ jsx36(
                   BaseImage_default,
                   {
                     src: displayAnswerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6039,16 +6095,16 @@ var MCMAActivityMaterialContent = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx35("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx35("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                /* @__PURE__ */ jsx36("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx36("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialSubKey
-                ).map((inputPart, index3) => /* @__PURE__ */ jsx35(
+                ).map((inputPart, index3) => /* @__PURE__ */ jsx36(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx35("span", { className: "text-xl", children: /* @__PURE__ */ jsx35(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx36("span", { className: "text-xl", children: /* @__PURE__ */ jsx36(InlineMath7, { math: inputPart.value }) }) : inputPart.value
                   },
                   index3
-                )) }) : /* @__PURE__ */ jsx35(
+                )) }) : /* @__PURE__ */ jsx36(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -6062,13 +6118,13 @@ var MCMAActivityMaterialContent = ({
             index2
           );
         }
-      ) }) : /* @__PURE__ */ jsx35("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+      ) }) : /* @__PURE__ */ jsx36("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
         displayAnswerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ jsx35(
+      ).map((inputPart, index2) => /* @__PURE__ */ jsx36(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ jsx35("span", { className: "text-xl", children: /* @__PURE__ */ jsx35(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx36("span", { className: "text-xl", children: /* @__PURE__ */ jsx36(InlineMath7, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) }, materialKey) })
@@ -6078,7 +6134,7 @@ var MCMAActivityMaterialContent = ({
 var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
 
 // src/components/activities/MCMAActivityContent.tsx
-import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 var MCMAActivityContent = ({
   answerMap,
   data,
@@ -6103,11 +6159,11 @@ var MCMAActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs26("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx36(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
-    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx36(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx36(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs27("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx37(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
+    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx37(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx37(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx37(
       MCMAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6125,9 +6181,9 @@ var MCMAActivityContent = ({
 var MCMAActivityContent_default = MCMAActivityContent;
 
 // src/components/activities/material-contents/MCSAActivityMaterialContent.tsx
-import { useEffect as useEffect13, useState as useState22 } from "react";
+import { useEffect as useEffect13, useState as useState23 } from "react";
 import { InlineMath as InlineMath8 } from "react-katex";
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var MCSAActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6138,7 +6194,7 @@ var MCSAActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [displayAnswerMap, setDisplayAnswerMap] = useState22(answerMap);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState23(answerMap);
   useEffect13(() => {
     if (showCorrectAnswer) {
       const correctAnswer2 = retrieveCorrectAnswer();
@@ -6159,11 +6215,11 @@ var MCSAActivityMaterialContent = ({
     return "INCORRECT";
   };
   const correctAnswer = retrieveCorrectAnswer();
-  return /* @__PURE__ */ jsx37("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ jsx37("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsxs27("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
-      /* @__PURE__ */ jsx37("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx37("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
-      /* @__PURE__ */ jsx37("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx37(DividerLine_default, {}) }),
-      /* @__PURE__ */ jsx37("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
+    return /* @__PURE__ */ jsx38("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsxs28("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
+      /* @__PURE__ */ jsx38("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx38("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
+      /* @__PURE__ */ jsx38("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx38(DividerLine_default, {}) }),
+      /* @__PURE__ */ jsx38("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ jsx38(
         "div",
         {
           className: `flex flex-row w-full ${Object.keys(materialMap[materialKey]).length <= 4 ? "justify-center" : ""} flex-wrap`,
@@ -6174,7 +6230,7 @@ var MCSAActivityMaterialContent = ({
                 materialSubKey,
                 displayAnswerMap[materialKey]
               );
-              return /* @__PURE__ */ jsxs27(
+              return /* @__PURE__ */ jsxs28(
                 "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" : ""}`,
@@ -6182,7 +6238,7 @@ var MCSAActivityMaterialContent = ({
                     onChange(answerMap, materialKey, materialSubKey);
                   },
                   children: [
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       BaseImage_default,
                       {
                         src: displayAnswerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
@@ -6192,16 +6248,16 @@ var MCSAActivityMaterialContent = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx37("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx37("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    /* @__PURE__ */ jsx38("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx38("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialSubKey
-                    ).map((inputPart, index3) => /* @__PURE__ */ jsx37(
+                    ).map((inputPart, index3) => /* @__PURE__ */ jsx38(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx37("span", { className: "text-xl", children: /* @__PURE__ */ jsx37(InlineMath8, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx38("span", { className: "text-xl", children: /* @__PURE__ */ jsx38(InlineMath8, { math: inputPart.value }) }) : inputPart.value
                       },
                       index3
-                    )) }) : /* @__PURE__ */ jsx37(
+                    )) }) : /* @__PURE__ */ jsx38(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -6217,13 +6273,13 @@ var MCSAActivityMaterialContent = ({
             }
           )
         }
-      ) : /* @__PURE__ */ jsx37("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+      ) : /* @__PURE__ */ jsx38("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
         displayAnswerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ jsx37(
+      ).map((inputPart, index2) => /* @__PURE__ */ jsx38(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ jsx37("span", { className: "text-xl", children: /* @__PURE__ */ jsx37(InlineMath8, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx38("span", { className: "text-xl", children: /* @__PURE__ */ jsx38(InlineMath8, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) }) })
@@ -6233,7 +6289,7 @@ var MCSAActivityMaterialContent = ({
 var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
 
 // src/components/activities/MCSAActivityContent.tsx
-import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 var MCSAActivityContent = ({
   answerMap,
   data,
@@ -6251,11 +6307,11 @@ var MCSAActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs28("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx38(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
-    /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx38(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx38(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs29("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx39(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
+    /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx39(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx39(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx39(
       MCSAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6362,7 +6418,7 @@ var retrieveAcceptedFormats = (fileType) => {
 };
 
 // src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx
-import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var OpenEndedActivityMaterialContent = ({
   answerMap,
   contentMap,
@@ -6377,7 +6433,7 @@ var OpenEndedActivityMaterialContent = ({
       fileType = retrieveFileTypeFromExtension(extension);
     }
     if (fileType === "IMAGE") {
-      return /* @__PURE__ */ jsx39("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx39(
+      return /* @__PURE__ */ jsx40("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx40(
         BaseImage_default,
         {
           src: answerMapAnswer,
@@ -6387,9 +6443,9 @@ var OpenEndedActivityMaterialContent = ({
         }
       ) });
     } else if (fileType === "PDF") {
-      return /* @__PURE__ */ jsx39(BasePDF_default, { file: answerMapAnswer });
+      return /* @__PURE__ */ jsx40(BasePDF_default, { file: answerMapAnswer });
     } else if (fileType === "AUDIO") {
-      return /* @__PURE__ */ jsx39("div", { className: "h-[56px]", children: /* @__PURE__ */ jsx39(
+      return /* @__PURE__ */ jsx40("div", { className: "h-[56px]", children: /* @__PURE__ */ jsx40(
         "audio",
         {
           className: "h-full w-full rounded-catchup-xlarge",
@@ -6400,7 +6456,7 @@ var OpenEndedActivityMaterialContent = ({
         }
       ) });
     } else if (fileType === "TEXT") {
-      return /* @__PURE__ */ jsx39(
+      return /* @__PURE__ */ jsx40(
         InputGroup_default,
         {
           type: "textarea",
@@ -6419,7 +6475,7 @@ var OpenEndedActivityMaterialContent = ({
     const answerMapAnswer = answerMap2["ANSWER"];
     const extension = answerMapAnswer.split(".").pop();
     const fileType = retrieveFileTypeFromExtension(extension);
-    return /* @__PURE__ */ jsx39(Fragment5, { children: fileType === "IMAGE" ? /* @__PURE__ */ jsx39("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx40(Fragment5, { children: fileType === "IMAGE" ? /* @__PURE__ */ jsx40("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx40(
       BaseImage_default,
       {
         src: answerMapAnswer,
@@ -6427,11 +6483,11 @@ var OpenEndedActivityMaterialContent = ({
         size: "custom",
         className: "w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
       }
-    ) }) : fileType === "PDF" ? /* @__PURE__ */ jsx39("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx39(BasePDF_default, { file: answerMapAnswer }) }) : null });
+    ) }) : fileType === "PDF" ? /* @__PURE__ */ jsx40("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx40(BasePDF_default, { file: answerMapAnswer }) }) : null });
   };
   const RenderAudioContent = (answerMap2) => {
     const answerMapAnswer = answerMap2["ANSWER"];
-    return /* @__PURE__ */ jsx39("div", { className: "h-[56px]", children: /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx40("div", { className: "h-[56px]", children: /* @__PURE__ */ jsx40(
       "audio",
       {
         className: "h-full w-full rounded-catchup-xlarge",
@@ -6442,16 +6498,16 @@ var OpenEndedActivityMaterialContent = ({
       }
     ) });
   };
-  return /* @__PURE__ */ jsxs29("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsx39("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx39("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
-    /* @__PURE__ */ jsx39("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx39(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx39("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__ */ jsxs30("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx40("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx40("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
+    /* @__PURE__ */ jsx40("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx40(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx40("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
-import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var OpenEndedActivityContent = ({
   answerMap,
   data,
@@ -6468,12 +6524,12 @@ var OpenEndedActivityContent = ({
     answerMap2["ANSWER"] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs30("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs31("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ jsx41(
       "div",
       {
         className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto" : "w-full"}`,
-        children: /* @__PURE__ */ jsx40(
+        children: /* @__PURE__ */ jsx41(
           ActivityBodyContent_default,
           {
             bodyMap: openEndedBodyMap,
@@ -6482,16 +6538,16 @@ var OpenEndedActivityContent = ({
         )
       }
     ),
-    showMaterialContent ? /* @__PURE__ */ jsxs30(Fragment6, { children: [
-      /* @__PURE__ */ jsx40(
+    showMaterialContent ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
+      /* @__PURE__ */ jsx41(
         "div",
         {
           className: `${isFullScreen ? "contents" : "contents md:hidden"}`,
-          children: /* @__PURE__ */ jsx40(DividerLine_default, {})
+          children: /* @__PURE__ */ jsx41(DividerLine_default, {})
         }
       ),
-      /* @__PURE__ */ jsx40("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx40(VerticalDividerLine_default, {}) }),
-      /* @__PURE__ */ jsx40("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx41("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx41(VerticalDividerLine_default, {}) }),
+      /* @__PURE__ */ jsx41("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx41(
         OpenEndedActivityMaterialContent_default,
         {
           answerMap,
@@ -6506,9 +6562,9 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-import { useEffect as useEffect14, useState as useState23, useRef as useRef7 } from "react";
+import { useEffect as useEffect14, useState as useState24, useRef as useRef7 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
-import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6519,22 +6575,22 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedKey, setSelectedKey] = useState23(null);
-  const [draggedKey, setDraggedKey] = useState23(null);
-  const [dropTargetKey, setDropTargetKey] = useState23(null);
-  const [draggedElement, setDraggedElement] = useState23(
+  const [selectedKey, setSelectedKey] = useState24(null);
+  const [draggedKey, setDraggedKey] = useState24(null);
+  const [dropTargetKey, setDropTargetKey] = useState24(null);
+  const [draggedElement, setDraggedElement] = useState24(
     null
   );
   const dragElementRef = useRef7(null);
-  const [mousePosition, setMousePosition] = useState23({
+  const [mousePosition, setMousePosition] = useState24({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = useState23({
+  const [touchPosition, setTouchPosition] = useState24({
     x: 0,
     y: 0
   });
-  const [displayAnswerMap, setDisplayAnswerMap] = useState23(answerMap);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState24(answerMap);
   useEffect14(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
@@ -6626,14 +6682,14 @@ var OrderingActivityMaterialContent = ({
     }
     setDraggedKey(null);
   };
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: "flex flex-col h-full",
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
       children: [
-        draggedKey && mousePosition.x > 0 && /* @__PURE__ */ jsx41(
+        draggedKey && mousePosition.x > 0 && /* @__PURE__ */ jsx42(
           "div",
           {
             className: "fixed pointer-events-none z-50 opacity-80",
@@ -6642,16 +6698,16 @@ var OrderingActivityMaterialContent = ({
               top: `${mousePosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx41("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx42("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx42("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               materialMap[displayAnswerMap[draggedKey]]
-            ).map((inputPart, index) => /* @__PURE__ */ jsx41(
+            ).map((inputPart, index) => /* @__PURE__ */ jsx42(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx41("span", { className: "text-xl", children: /* @__PURE__ */ jsx41(InlineMath9, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-xl", children: /* @__PURE__ */ jsx42(InlineMath9, { math: inputPart.value }) }) : inputPart.value
               },
               index
-            )) }) }) : /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx41(
+            )) }) }) : /* @__PURE__ */ jsx42("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx42(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6662,7 +6718,7 @@ var OrderingActivityMaterialContent = ({
             ) })
           }
         ),
-        draggedKey && touchPosition.x > 0 && /* @__PURE__ */ jsx41(
+        draggedKey && touchPosition.x > 0 && /* @__PURE__ */ jsx42(
           "div",
           {
             className: "fixed pointer-events-none z-50 opacity-80",
@@ -6671,16 +6727,16 @@ var OrderingActivityMaterialContent = ({
               top: `${touchPosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx41("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx42("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx42("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               materialMap[displayAnswerMap[draggedKey]]
-            ).map((inputPart, index) => /* @__PURE__ */ jsx41(
+            ).map((inputPart, index) => /* @__PURE__ */ jsx42(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx41("span", { className: "text-xl", children: /* @__PURE__ */ jsx41(InlineMath9, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-xl", children: /* @__PURE__ */ jsx42(InlineMath9, { math: inputPart.value }) }) : inputPart.value
               },
               index
-            )) }) }) : /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx41(
+            )) }) }) : /* @__PURE__ */ jsx42("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx42(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6691,24 +6747,24 @@ var OrderingActivityMaterialContent = ({
             ) })
           }
         ),
-        /* @__PURE__ */ jsx41("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
+        /* @__PURE__ */ jsx42("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__ */ jsx41("div", { className: "w-full", children: /* @__PURE__ */ jsxs31(
+          return /* @__PURE__ */ jsx42("div", { className: "w-full", children: /* @__PURE__ */ jsxs32(
             "div",
             {
               className: `flex flex-row items-center my-4 mx-2`,
               children: [
-                /* @__PURE__ */ jsx41("div", { className: "mr-3", children: /* @__PURE__ */ jsx41("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__ */ jsx41(
+                /* @__PURE__ */ jsx42("div", { className: "mr-3", children: /* @__PURE__ */ jsx42("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__ */ jsx42(
                   "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__ */ jsx41("p", { className: "", children: parseFloat(materialKey) + 1 })
+                    children: /* @__PURE__ */ jsx42("p", { className: "", children: parseFloat(materialKey) + 1 })
                   }
                 ) }) }),
-                /* @__PURE__ */ jsx41(
+                /* @__PURE__ */ jsx42(
                   "div",
                   {
                     ref: draggedKey === materialKey ? dragElementRef : null,
@@ -6721,21 +6777,21 @@ var OrderingActivityMaterialContent = ({
                     onTouchStart: (e) => handleTouchStart(e, materialKey, e.currentTarget),
                     onTouchMove: handleTouchMove,
                     onTouchEnd: handleTouchEnd,
-                    children: /* @__PURE__ */ jsx41(
+                    children: /* @__PURE__ */ jsx42(
                       "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__ */ jsx41("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx42("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                           materialMap[displayAnswerMap[materialKey]]
-                        ).map((inputPart, index2) => /* @__PURE__ */ jsx41(
+                        ).map((inputPart, index2) => /* @__PURE__ */ jsx42(
                           "span",
                           {
                             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                            children: inputPart.isEquation ? /* @__PURE__ */ jsx41("span", { className: "text-xl", children: /* @__PURE__ */ jsx41(InlineMath9, { math: inputPart.value }) }) : inputPart.value
+                            children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-xl", children: /* @__PURE__ */ jsx42(InlineMath9, { math: inputPart.value }) }) : inputPart.value
                           },
                           index2
-                        )) }) : /* @__PURE__ */ jsx41(
+                        )) }) : /* @__PURE__ */ jsx42(
                           ShowMaterialMediaByContentType_default,
                           {
                             contentType: contentMap.type,
@@ -6759,7 +6815,7 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var OrderingActivityContent = ({
   answerMap,
   data,
@@ -6779,12 +6835,12 @@ var OrderingActivityContent = ({
     answerMap2[secondaryKey] = prevValue;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs32("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs33("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ jsx43(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ jsx42(
+        children: /* @__PURE__ */ jsx43(
           ActivityBodyContent_default,
           {
             bodyMap: orderingBodyMap,
@@ -6793,13 +6849,13 @@ var OrderingActivityContent = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx42(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx42(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx43(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx43(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx43(
       "div",
       {
         className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`,
-        children: /* @__PURE__ */ jsx42(
+        children: /* @__PURE__ */ jsx43(
           OrderingActivityMaterialContent_default,
           {
             uniqueValue: JSON.stringify(data.contentMap),
@@ -6819,9 +6875,9 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
-import { useEffect as useEffect15, useState as useState24 } from "react";
+import { useEffect as useEffect15, useState as useState25 } from "react";
 import { InlineMath as InlineMath10 } from "react-katex";
-import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6832,8 +6888,8 @@ var TrueFalseActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = useState24([]);
-  const [displayAnswerMap, setDisplayAnswerMap] = useState24(answerMap);
+  const [shuffleOptionList, setShuffleOptionList] = useState25([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState25(answerMap);
   useEffect15(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
@@ -6858,14 +6914,14 @@ var TrueFalseActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsx43("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx43("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
-    /* @__PURE__ */ jsx43("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx43(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsxs33("div", { className: "flex flex-row justify-end items-center gap-x-2 flex-shrink-0", children: [
-      /* @__PURE__ */ jsx43("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx43("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
-      /* @__PURE__ */ jsx43("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx43("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
+  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx44("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx44("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
+    /* @__PURE__ */ jsx44("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx44(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsxs34("div", { className: "flex flex-row justify-end items-center gap-x-2 flex-shrink-0", children: [
+      /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
+      /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
     ] }),
-    /* @__PURE__ */ jsx43("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ jsx43("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
+    /* @__PURE__ */ jsx44("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ jsx44("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";
@@ -6876,21 +6932,21 @@ var TrueFalseActivityMaterialContent = ({
         correctAnswer,
         learnerAnswer
       );
-      return /* @__PURE__ */ jsxs33(
+      return /* @__PURE__ */ jsxs34(
         "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__ */ jsx43("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx43("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            /* @__PURE__ */ jsx44("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx44("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               shuffleOption
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx43(
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx44(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx43("span", { className: "text-xl", children: /* @__PURE__ */ jsx43(InlineMath10, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx44("span", { className: "text-xl", children: /* @__PURE__ */ jsx44(InlineMath10, { math: inputPart.value }) }) : inputPart.value
               },
               index2
-            )) }) : /* @__PURE__ */ jsx43(
+            )) }) : /* @__PURE__ */ jsx44(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6899,8 +6955,8 @@ var TrueFalseActivityMaterialContent = ({
               },
               `${uniqueValue}-${index}`
             ) }),
-            /* @__PURE__ */ jsxs33("div", { className: "flex flex-row items-center gap-x-2", children: [
-              /* @__PURE__ */ jsx43("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx43("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsxs34("div", { className: "flex flex-row items-center gap-x-2", children: [
+              /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx44(
                 BaseImage_default,
                 {
                   src: displayAnswerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6911,7 +6967,7 @@ var TrueFalseActivityMaterialContent = ({
                   }
                 }
               ) }) }),
-              /* @__PURE__ */ jsx43("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx43("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx44(
                 BaseImage_default,
                 {
                   src: displayAnswerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6927,14 +6983,14 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ jsxs33(Fragment7, { children: [
-      displayAnswerMap.trueList.map((item) => /* @__PURE__ */ jsxs33("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ jsx43("div", { className: "flex-1", children: /* @__PURE__ */ jsx43("p", { children: item }) }),
-        /* @__PURE__ */ jsx43("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx43("p", { className: "underline", children: i18n_default.t("true") }) })
+    }) }) : /* @__PURE__ */ jsxs34(Fragment7, { children: [
+      displayAnswerMap.trueList.map((item) => /* @__PURE__ */ jsxs34("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx44("div", { className: "flex-1", children: /* @__PURE__ */ jsx44("p", { children: item }) }),
+        /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "underline", children: i18n_default.t("true") }) })
       ] })),
-      displayAnswerMap.falseList.map((item) => /* @__PURE__ */ jsxs33("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ jsx43("div", { className: "flex-1", children: /* @__PURE__ */ jsx43("p", { children: item }) }),
-        /* @__PURE__ */ jsx43("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx43("p", { className: "underline", children: i18n_default.t("false") }) })
+      displayAnswerMap.falseList.map((item) => /* @__PURE__ */ jsxs34("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx44("div", { className: "flex-1", children: /* @__PURE__ */ jsx44("p", { children: item }) }),
+        /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))
     ] }) })
   ] });
@@ -6942,7 +6998,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 
 // src/components/activities/TrueFalseActivityContent.tsx
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var TrueFalseActivityContent = ({
   answerMap,
   data,
@@ -6986,17 +7042,17 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs34("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
-    /* @__PURE__ */ jsx44("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs35("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+    /* @__PURE__ */ jsx45("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx45(
       ActivityBodyContent_default,
       {
         bodyMap: trueFalseBodyMap,
         templateType: "GROUPING"
       }
     ) }),
-    /* @__PURE__ */ jsx44("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx44(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx44("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx44(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx44("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx45(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx45("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx45(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx45("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx45(
       TrueFalseActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -7015,7 +7071,7 @@ var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
 // src/components/activities/solution-contents/ActivitySolutionContent.tsx
 import { InlineMath as InlineMath11 } from "react-katex";
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -7047,8 +7103,8 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  return /* @__PURE__ */ jsx45("div", { className: "mx-2", children: /* @__PURE__ */ jsxs35("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ jsx45("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
+  return /* @__PURE__ */ jsx46("div", { className: "mx-2", children: /* @__PURE__ */ jsxs36("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ jsx46("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
     Object.keys(solutionMap).map((key) => {
       let currentItem;
       try {
@@ -7058,12 +7114,12 @@ var ActivitySolutionContent = ({
         return null;
       }
       const { value } = currentItem;
-      return /* @__PURE__ */ jsx45("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
-        (inputPart, partIndex) => /* @__PURE__ */ jsx45(
+      return /* @__PURE__ */ jsx46("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
+        (inputPart, partIndex) => /* @__PURE__ */ jsx46(
           "span",
           {
             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ jsx45("span", { className: "text-xl", children: /* @__PURE__ */ jsx45(InlineMath11, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ jsx46("span", { className: "text-xl", children: /* @__PURE__ */ jsx46(InlineMath11, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -7075,7 +7131,7 @@ var ActivitySolutionContent_default = ActivitySolutionContent;
 
 // src/components/activities/evaluation-rubric-contents/ActivityEvaluationRubricContent.tsx
 import { InlineMath as InlineMath12 } from "react-katex";
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -7105,8 +7161,8 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  return /* @__PURE__ */ jsxs36("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ jsx46("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
+  return /* @__PURE__ */ jsxs37("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ jsx47("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;
@@ -7117,18 +7173,18 @@ var ActivityEvaluationRubricContent = ({
         points = parseFloat(matchedRegex[1]);
         evaluationRubric = matchedRegex[2];
       }
-      return /* @__PURE__ */ jsxs36("div", { className: "my-2 flex flex-row gap-x-3", children: [
-        /* @__PURE__ */ jsxs36("div", { className: "font-bold text-xl whitespace-nowrap", children: [
+      return /* @__PURE__ */ jsxs37("div", { className: "my-2 flex flex-row gap-x-3", children: [
+        /* @__PURE__ */ jsxs37("div", { className: "font-bold text-xl whitespace-nowrap", children: [
           points,
           " ",
           i18n_default.t("points")
         ] }),
-        /* @__PURE__ */ jsx46("p", { className: "flex-1 text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(evaluationRubric).map(
-          (inputPart, inputIndex) => /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47("p", { className: "flex-1 text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(evaluationRubric).map(
+          (inputPart, inputIndex) => /* @__PURE__ */ jsx47(
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ jsx46("span", { className: "text-xl", children: /* @__PURE__ */ jsx46(InlineMath12, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx47("span", { className: "text-xl", children: /* @__PURE__ */ jsx47(InlineMath12, { math: inputPart.value }) }) : inputPart.value
             },
             inputIndex
           )
@@ -7140,31 +7196,31 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { useEffect as useEffect16, useState as useState25 } from "react";
+import { useEffect as useEffect16, useState as useState26 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
-import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ jsx47("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx48(
     "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__ */ jsxs37(
+      children: /* @__PURE__ */ jsxs38(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
           children: [
             option.icon,
-            /* @__PURE__ */ jsxs37("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx47("p", { children: option.text }),
-              option.subText ? /* @__PURE__ */ jsxs37("p", { className: "text-md", children: [
+            /* @__PURE__ */ jsxs38("div", { className: "flex-1 flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx48("p", { children: option.text }),
+              option.subText ? /* @__PURE__ */ jsxs38("p", { className: "text-md", children: [
                 "(",
                 option.subText,
                 ")"
@@ -7180,7 +7236,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { Fragment as Fragment8, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var ACTIVITY_TEMPLATE_LIST = [
   { type: "ORDERING", materialMap: "orderingMaterialMap" },
   { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
@@ -7211,10 +7267,10 @@ var ActivityPreviewByData = ({
   showMaterialContent = true,
   isPreview = true
 }) => {
-  const [selectedType, setSelectedType] = useState25(null);
-  const [optionList, setOptionList] = useState25([]);
-  const [answerMapMap, setAnswerMapMap] = useState25({});
-  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState25([]);
+  const [selectedType, setSelectedType] = useState26(null);
+  const [optionList, setOptionList] = useState26([]);
+  const [answerMapMap, setAnswerMapMap] = useState26({});
+  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState26([]);
   useEffect16(() => {
     if (!data) return;
     let currentActivityTemplateMapList = JSON.parse(
@@ -7289,44 +7345,44 @@ var ActivityPreviewByData = ({
     }
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(OrderingActivityContent_default, __spreadValues({}, commonProps))
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+          isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx49(OrderingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(DropdownActivityContent_default, __spreadValues({}, commonProps))
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+          isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx49(DropdownActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(MCSAActivityContent_default, __spreadValues({}, commonProps))
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+          isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx49(MCSAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(MCMAActivityContent_default, __spreadValues({}, commonProps))
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+          isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx49(MCMAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(MatchingActivityContent_default, __spreadValues({}, commonProps))
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+          isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx49(MatchingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(GroupingActivityContent_default, __spreadValues({}, commonProps))
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+          isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx49(GroupingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+          isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx49(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(
+        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+          isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx49(
             OpenEndedActivityContent_default,
             __spreadProps(__spreadValues({}, commonProps), {
               showMaterialContent
@@ -7334,20 +7390,20 @@ var ActivityPreviewByData = ({
           )
         ] }) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+          isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx49(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       default:
         return null;
     }
   };
   if (!data) return null;
-  return /* @__PURE__ */ jsxs38("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-      /* @__PURE__ */ jsxs38("div", { className: "mb-2", children: [
-        showDescription ? /* @__PURE__ */ jsx48("div", { className: "my-2", children: /* @__PURE__ */ jsx48("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs39("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+      /* @__PURE__ */ jsxs39("div", { className: "mb-2", children: [
+        showDescription ? /* @__PURE__ */ jsx49("div", { className: "my-2", children: /* @__PURE__ */ jsx49("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+        /* @__PURE__ */ jsx49(
           SelectionBox_default,
           {
             optionList,
@@ -7358,17 +7414,17 @@ var ActivityPreviewByData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx48(DividerLine_default, {})
+      /* @__PURE__ */ jsx49(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ jsx48("div", { className: "flex flex-col mb-2 w-full", children: RenderSelectedActivityContent() }),
-    selectedType && showSolution ? /* @__PURE__ */ jsx48("div", { className: "mb-2", children: /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx49("div", { className: "flex flex-col mb-2 w-full", children: RenderSelectedActivityContent() }),
+    selectedType && showSolution ? /* @__PURE__ */ jsx49("div", { className: "mb-2", children: /* @__PURE__ */ jsx49(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx48("div", { className: "mb-2", children: /* @__PURE__ */ jsx48(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx49("div", { className: "mb-2", children: /* @__PURE__ */ jsx49(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7380,17 +7436,17 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/errors/StatusError.tsx
-import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 var StatusError = ({
   statusCode,
   statusText,
   textSize
 }) => {
-  return /* @__PURE__ */ jsxs39("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ jsx49("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
-    /* @__PURE__ */ jsxs39("div", { className: "text-center my-5", children: [
-      /* @__PURE__ */ jsx49("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
-      /* @__PURE__ */ jsxs39("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
+  return /* @__PURE__ */ jsxs40("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ jsx50("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
+    /* @__PURE__ */ jsxs40("div", { className: "text-center my-5", children: [
+      /* @__PURE__ */ jsx50("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
+      /* @__PURE__ */ jsxs40("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
         "(",
         statusCode ? `${statusCode} - ` : null,
         statusText,
@@ -7402,9 +7458,9 @@ var StatusError = ({
 var StatusError_default = StatusError;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7414,7 +7470,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7424,9 +7480,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ jsxs40("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ jsx51("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx51("p", { children: title }) }),
-    /* @__PURE__ */ jsx51("div", { className: "flex-1", children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs41("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ jsx52("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx52("p", { children: title }) }),
+    /* @__PURE__ */ jsx52("div", { className: "flex-1", children: /* @__PURE__ */ jsx52(
       InputGroup_default,
       {
         type,
@@ -7442,8 +7498,8 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-import { useEffect as useEffect17, useState as useState26 } from "react";
-import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
+import { useEffect as useEffect17, useState as useState27 } from "react";
+import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7452,8 +7508,8 @@ var PageTravelGroup = ({
   setPageNumber,
   setImageReady
 }) => {
-  const [totalPageNumber, setTotalPageNumber] = useState26(0);
-  const [newPageNumber, setNewPageNumber] = useState26(0);
+  const [totalPageNumber, setTotalPageNumber] = useState27(0);
+  const [newPageNumber, setNewPageNumber] = useState27(0);
   useEffect17(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
@@ -7469,8 +7525,8 @@ var PageTravelGroup = ({
       setImageReady(false);
     }
   };
-  return /* @__PURE__ */ jsxs41("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
-    /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs42("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
+    /* @__PURE__ */ jsx53(
       "button",
       {
         className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
@@ -7479,12 +7535,12 @@ var PageTravelGroup = ({
         children: "\u2190"
       }
     ),
-    /* @__PURE__ */ jsxs41("p", { className: "text-md", children: [
+    /* @__PURE__ */ jsxs42("p", { className: "text-md", children: [
       pageNumber + 1,
       " / ",
       totalPageNumber
     ] }),
-    /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx53(
       "button",
       {
         className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
@@ -7493,7 +7549,7 @@ var PageTravelGroup = ({
         children: "\u2192"
       }
     ),
-    /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx53(
       "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",
@@ -7516,13 +7572,13 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 
 // src/hooks/useScreenSize.ts
-import { useState as useState27, useEffect as useEffect18 } from "react";
+import { useState as useState28, useEffect as useEffect18 } from "react";
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = useState27({
+  const [containerSize, setContainerSize] = useState28({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = useState27({
+  const [screenSize, setScreenSize] = useState28({
     width: window.innerWidth,
     height: window.innerHeight
   });
@@ -7551,14 +7607,14 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ jsx53("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx54(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7573,14 +7629,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ jsxs42(
+      children: /* @__PURE__ */ jsxs43(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx54(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7590,7 +7646,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ jsx53("div", { className: "flex-1", children: /* @__PURE__ */ jsx53("p", { children: option.text }) })
+            /* @__PURE__ */ jsx54("div", { className: "flex-1", children: /* @__PURE__ */ jsx54("p", { children: option.text }) })
           ]
         }
       )
@@ -7601,7 +7657,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7611,7 +7667,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx54("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__ */ jsxs43(
+  return /* @__PURE__ */ jsx55("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__ */ jsxs44(
     "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`,
@@ -7619,8 +7675,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ jsx54("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ jsx54("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ jsx55("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx55("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7629,20 +7685,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ jsx55("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__ */ jsx55(
+  return /* @__PURE__ */ jsx56("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__ */ jsx56(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ jsx55(
+      children: /* @__PURE__ */ jsx56(
         "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`,
@@ -7656,7 +7712,7 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/tabs/SelectionTabPill.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var SelectionTabPill = ({
   optionList,
   selectedId,
@@ -7664,12 +7720,12 @@ var SelectionTabPill = ({
   selectedClassName,
   unselectedClassName
 }) => {
-  return /* @__PURE__ */ jsx56("div", { className: "flex flex-wrap items-center gap-3 my-2", children: optionList.map((option, index) => /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57("div", { className: "flex flex-wrap items-center gap-3 my-2", children: optionList.map((option, index) => /* @__PURE__ */ jsx57(
     "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__ */ jsx56("span", { className: "text-base font-semibold", children: option.title })
+      children: /* @__PURE__ */ jsx57("span", { className: "text-base font-semibold", children: option.title })
     },
     index
   )) });
@@ -7677,7 +7733,7 @@ var SelectionTabPill = ({
 var SelectionTabPill_default = SelectionTabPill;
 
 // src/components/labels/Label.tsx
-import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
 var Label = ({
   title,
   icon,
@@ -7687,7 +7743,7 @@ var Label = ({
   backgroundColor,
   textColor
 }) => {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     "div",
     {
       className: "px-3 py-1 gap-x-3 border rounded-catchup-2xlarge text-center",
@@ -7697,9 +7753,9 @@ var Label = ({
         background: backgroundColor,
         color: textColor
       },
-      children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
+      children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
         icon,
-        /* @__PURE__ */ jsx57("p", { className: font, children: title })
+        /* @__PURE__ */ jsx58("p", { className: font, children: title })
       ] })
     }
   );
@@ -7707,9 +7763,9 @@ var Label = ({
 var Label_default = Label;
 
 // src/components/labels/AmberLabel.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var AmberLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Label_default,
     {
       title,
@@ -7724,9 +7780,9 @@ var AmberLabel = ({ title, icon, font }) => {
 var AmberLabel_default = AmberLabel;
 
 // src/components/labels/TealLabel.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var TealLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Label_default,
     {
       title,
@@ -7741,9 +7797,9 @@ var TealLabel = ({ title, icon, font }) => {
 var TealLabel_default = TealLabel;
 
 // src/components/labels/PurpleLabel.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var PurpleLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     Label_default,
     {
       title,
@@ -7758,9 +7814,9 @@ var PurpleLabel = ({ title, icon, font }) => {
 var PurpleLabel_default = PurpleLabel;
 
 // src/components/labels/GreenLabel.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var GreenLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     Label_default,
     {
       title,
@@ -7775,9 +7831,9 @@ var GreenLabel = ({ title, icon, font }) => {
 var GreenLabel_default = GreenLabel;
 
 // src/components/labels/BlueLabel.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var BlueLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     Label_default,
     {
       title,
@@ -7792,9 +7848,9 @@ var BlueLabel = ({ title, icon, font }) => {
 var BlueLabel_default = BlueLabel;
 
 // src/components/labels/OrangeLabel.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var OrangeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     Label_default,
     {
       title,
@@ -7809,9 +7865,9 @@ var OrangeLabel = ({ title, icon, font }) => {
 var OrangeLabel_default = OrangeLabel;
 
 // src/components/labels/RedLabel.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var RedLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     Label_default,
     {
       title,
@@ -7826,9 +7882,9 @@ var RedLabel = ({ title, icon, font }) => {
 var RedLabel_default = RedLabel;
 
 // src/components/labels/LimeLabel.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var LimeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     Label_default,
     {
       title,
@@ -7843,9 +7899,9 @@ var LimeLabel = ({ title, icon, font }) => {
 var LimeLabel_default = LimeLabel;
 
 // src/components/labels/CoralLabel.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var CoralLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     Label_default,
     {
       title,
@@ -7860,9 +7916,9 @@ var CoralLabel = ({ title, icon, font }) => {
 var CoralLabel_default = CoralLabel;
 
 // src/components/labels/CyanLabel.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var CyanLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     Label_default,
     {
       title,
@@ -7877,9 +7933,9 @@ var CyanLabel = ({ title, icon, font }) => {
 var CyanLabel_default = CyanLabel;
 
 // src/components/labels/GrayLabel.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var GrayLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     Label_default,
     {
       title,
@@ -7894,20 +7950,20 @@ var GrayLabel = ({ title, icon, font }) => {
 var GrayLabel_default = GrayLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs46 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ jsxs45("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ jsx69(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ jsx69("div", { className: "flex-1", children: /* @__PURE__ */ jsx69("p", { className: "", children: value }) })
+  return /* @__PURE__ */ jsxs46("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ jsx70(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx70("div", { className: "flex-1", children: /* @__PURE__ */ jsx70("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/SubTitle.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ jsx70("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ jsx71("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -10790,6 +10846,7 @@ export {
   SelectionTab_default as SelectionTab,
   SelectionTabFill_default as SelectionTabFill,
   SelectionTabPill_default as SelectionTabPill,
+  StartButton_default as StartButton,
   StatusError_default as StatusError,
   SubTitle_default as SubTitle,
   THREE_MONTHS,