catchup-library-web 1.12.3 → 1.12.5

package/dist/index.mjs

@@ -683,6 +683,31 @@ var ApproveButton = ({
 };
 var ApproveButton_default = ApproveButton;
 
+// src/components/cards/FullCard.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var FullCard = ({
+  bgColor,
+  opacity,
+  isShadowed,
+  usePadding,
+  children
+}) => {
+  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: `flex-1 ${bgColor ? bgColor : ""} ${opacity ? opacity : "opacity-100"} rounded-catchup-xlarge w-full border border-catchup-gray-50 bg-catchup-white`,
+      children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: `flex flex-col mx-auto ${usePadding === false ? "p-0" : "p-6"} h-full`,
+          children
+        }
+      )
+    }
+  ) });
+};
+var FullCard_default = FullCard;
+
 // src/components/loading/BaseLoadingWithText.tsx
 import { useEffect, useState as useState8 } from "react";
 
@@ -693,7 +718,7 @@ i18n.use(initReactI18next);
 var i18n_default = i18n;
 
 // src/components/loading/BaseLoadingWithText.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var BaseLoadingWithText = (props) => {
   const { height, width, size, primaryColor, secondaryColor, hideText } = props;
   const [initialTimestamp, setInitialTimestamp] = useState8(
@@ -742,7 +767,7 @@ var BaseLoadingWithText = (props) => {
   }
   const loadingText = retrieveLoadingText();
   return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       BaseLoading_default,
       {
         height,
@@ -752,12 +777,12 @@ var BaseLoadingWithText = (props) => {
         secondaryColor
       }
     ),
-    !hideText && size !== "small" ? /* @__PURE__ */ jsx9(
+    !hideText && size !== "small" ? /* @__PURE__ */ jsx10(
       "div",
       {
         className: `${textClassName} text-center`,
         style: { width: textWidth },
-        children: /* @__PURE__ */ jsx9("p", { className: "font-bold", children: loadingText })
+        children: /* @__PURE__ */ jsx10("p", { className: "font-bold", children: loadingText })
       }
     ) : null
   ] });
@@ -766,7 +791,7 @@ var BaseLoadingWithText_default = BaseLoadingWithText;
 
 // src/components/modals/BaseModal.tsx
 import Modal from "react-modal";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var BaseModal = ({
   isOpen,
   size,
@@ -775,7 +800,7 @@ var BaseModal = ({
   customSize,
   children
 }) => {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Modal,
     {
       isOpen,
@@ -804,7 +829,7 @@ var BaseModal = ({
         }
       },
       contentLabel: "",
-      children: customSize ? /* @__PURE__ */ jsx10("div", { className: `${customSize}`, children }) : /* @__PURE__ */ jsx10(
+      children: customSize ? /* @__PURE__ */ jsx11("div", { className: `${customSize}`, children }) : /* @__PURE__ */ jsx11(
         "div",
         {
           className: `${size === "small" ? "w-[600px]" : size === "medium" ? "w-[900px]" : "w-[600px] lg:w-[900px] xl:w-[1200px] 2xl:w-[1500px]"}`,
@@ -817,9 +842,9 @@ var BaseModal = ({
 var BaseModal_default = BaseModal;
 
 // src/components/activities/empty-content/ActivityEmptyContent.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var ActivityEmptyContent = () => {
-  return /* @__PURE__ */ jsx11("div", { className: "flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 my-5 bg-catchup-orange", children: /* @__PURE__ */ jsx11("div", { className: "", children: /* @__PURE__ */ jsx11("p", { className: "text-catchup-white text-xl", children: i18n_default.t("you_have_set_this_activity_as_empty") }) }) });
+  return /* @__PURE__ */ jsx12("div", { className: "flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 my-5 bg-catchup-orange", children: /* @__PURE__ */ jsx12("div", { className: "", children: /* @__PURE__ */ jsx12("p", { className: "text-catchup-white text-xl", children: i18n_default.t("you_have_set_this_activity_as_empty") }) }) });
 };
 var ActivityEmptyContent_default = ActivityEmptyContent;
 
@@ -2893,7 +2918,7 @@ var constructActivityItemListSolutionOnly = (solutionMap) => {
 
 // src/components/activities/body-content/ShowBodyMediaByContentType.tsx
 import { InlineMath } from "react-katex";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var ShowBodyMediaByContentType = ({
   index,
   type,
@@ -2915,11 +2940,11 @@ var ShowBodyMediaByContentType = ({
     }
   };
   const renderSpecialExpressions = (inputPart, partIndex, parentKey) => {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "span",
       {
         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ jsx12("span", { className: "text-2xl", children: /* @__PURE__ */ jsx12(InlineMath, { math: inputPart.value }) }) : inputPart.value
+        children: inputPart.isEquation ? /* @__PURE__ */ jsx13("span", { className: "text-2xl", children: /* @__PURE__ */ jsx13(InlineMath, { math: inputPart.value }) }) : inputPart.value
       },
       `${parentKey}-expr-${partIndex}`
     );
@@ -2939,7 +2964,7 @@ var ShowBodyMediaByContentType = ({
   };
   const renderTextContent = (text, itemKey) => {
     const balancedText = balanceSpecialChars(text);
-    return /* @__PURE__ */ jsx12("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(balancedText).map(
+    return /* @__PURE__ */ jsx13("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(balancedText).map(
       (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
     ) }, itemKey);
   };
@@ -2972,7 +2997,7 @@ var ShowBodyMediaByContentType = ({
         currentIndex++;
         const itemKey = `text-inside-${index}-${currentIndex}`;
         valuePartList.push(
-          /* @__PURE__ */ jsx12("span", { className: "text-xl font-bold whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+          /* @__PURE__ */ jsx13("span", { className: "text-xl font-bold whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(textInsideTag).map(
             (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
           ) }, itemKey)
         );
@@ -2992,7 +3017,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "p",
               {
                 className: "text-xl",
@@ -3016,7 +3041,7 @@ var ShowBodyMediaByContentType = ({
             {
               className: "relative w-[200px]",
               children: [
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(
                   BaseImage_default,
                   {
                     src: imageSource,
@@ -3025,12 +3050,12 @@ var ShowBodyMediaByContentType = ({
                     className: "rounded-catchup-xlarge"
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(
                   "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__ */ jsx12(
+                    children: /* @__PURE__ */ jsx13(
                       BaseImage_default,
                       {
                         src: "/icons/arrow-up.webp",
@@ -3059,7 +3084,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "p",
               {
                 className: "text-xl",
@@ -3078,7 +3103,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "video",
             {
               src: videoSource,
@@ -3101,7 +3126,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "p",
               {
                 className: "text-xl",
@@ -3120,7 +3145,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "audio",
             {
               src: audioSource,
@@ -3151,8 +3176,8 @@ var ShowBodyMediaByContentType = ({
             {
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
               children: [
-                /* @__PURE__ */ jsx12("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx12("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-                /* @__PURE__ */ jsx12("span", { className: "text-xl whitespace-pre-wrap", children: imageText })
+                /* @__PURE__ */ jsx13("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx13("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+                /* @__PURE__ */ jsx13("span", { className: "text-xl whitespace-pre-wrap", children: imageText })
               ]
             },
             `img-desc-${index}-${currentIndex}`
@@ -3166,7 +3191,7 @@ var ShowBodyMediaByContentType = ({
     return valuePartList;
   };
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Modal2,
       {
         isOpen: showFullScreen,
@@ -3196,7 +3221,7 @@ var ShowBodyMediaByContentType = ({
         },
         contentLabel: "Image Fullscreen View",
         children: /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ jsx12("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx13(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -3208,7 +3233,7 @@ var ShowBodyMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx12("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx13(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -3224,16 +3249,16 @@ var ShowBodyMediaByContentType = ({
   const RenderMainContent = () => {
     switch (type) {
       case "TEXT":
-        return /* @__PURE__ */ jsx12("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: retrieveValueParts(value) });
+        return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: retrieveValueParts(value) });
       case "IMAGE":
-        return /* @__PURE__ */ jsx12("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs8(
+        return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs8(
           "div",
           {
             className: `${convertToPercentage(
               size || ""
             )} rounded-catchup-xlarge relative`,
             children: [
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 BaseImage_default,
                 {
                   src: value,
@@ -3242,12 +3267,12 @@ var ShowBodyMediaByContentType = ({
                   className: "w-full rounded-catchup-xlarge"
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "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__ */ jsx12(
+                  children: /* @__PURE__ */ jsx13(
                     BaseImage_default,
                     {
                       src: "/icons/arrow-up.webp",
@@ -3262,7 +3287,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "VIDEO":
-        return /* @__PURE__ */ jsx12("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx13(
           "video",
           {
             src: value,
@@ -3273,7 +3298,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "AUDIO":
-        return /* @__PURE__ */ jsx12("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx12("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+        return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx13("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
       default:
         return null;
     }
@@ -3286,7 +3311,7 @@ var ShowBodyMediaByContentType = ({
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
 // src/components/activities/body-content/ActivityBodyContent.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var ActivityBodyContent = ({
   templateType,
   bodyMap,
@@ -3367,7 +3392,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ jsx13("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx14(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -3381,16 +3406,16 @@ var ActivityBodyContent = ({
 var ActivityBodyContent_default = ActivityBodyContent;
 
 // src/components/dividers/DividerLine.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var DividerLine = () => {
-  return /* @__PURE__ */ jsx14("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
+  return /* @__PURE__ */ jsx15("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
 };
 var DividerLine_default = DividerLine;
 
 // src/components/dividers/VerticalDividerLine.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var VerticalDividerLine = () => {
-  return /* @__PURE__ */ jsx15("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
+  return /* @__PURE__ */ jsx16("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
 };
 var VerticalDividerLine_default = VerticalDividerLine;
 
@@ -3399,8 +3424,8 @@ import { InlineMath as InlineMath2 } from "react-katex";
 
 // src/components/groups/InputGroup.tsx
 import Select from "react-select";
-import { useEffect as useEffect2, useRef, useState as useState10 } from "react";
-import { Fragment, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useRef, useState as useState10, useCallback } from "react";
+import { Fragment, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var InputGroup = ({
   type,
   title,
@@ -3422,9 +3447,9 @@ var InputGroup = ({
   useMath
 }) => {
   const textAreaRef = useRef(null);
+  const [showMathConstructor, setShowMathConstructor] = useState10(false);
+  const [mathValue, setMathValue] = useState10("");
   const mathFieldRef = useRef(null);
-  const [isMathMode, setIsMathMode] = useState10(false);
-  const [showMathOverlay, setShowMathOverlay] = useState10(false);
   useEffect2(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3441,18 +3466,7 @@ var InputGroup = ({
         customElements.define("math-field", MathfieldElement);
       }
     });
-  }, [useMath, type, placeholder, title]);
-  useEffect2(() => {
-    const handleClickOutside = (event) => {
-      if (showMathOverlay && event.target instanceof Element && !event.target.closest(".math-overlay")) {
-        setShowMathOverlay(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [showMathOverlay]);
+  }, [useMath]);
   const retrieveNullableOptionList = () => {
     if (!optionList) return [];
     const currentOptionList = {
@@ -3480,88 +3494,95 @@ var InputGroup = ({
       onChange && onChange(e);
     }
   };
-  const handleMathFieldChange = (event) => {
-    const mathField = event.currentTarget;
-    const syntheticEvent = {
-      target: {
-        value: mathField.value,
-        type: "text"
-      }
-    };
-    onChange && onChange(syntheticEvent);
-  };
-  const handleMathFieldFocus = (event) => {
-    const syntheticEvent = {
-      target: event.currentTarget
-    };
-    onFocus && onFocus(syntheticEvent);
+  const handleMathFieldChange = useCallback(() => {
+    if (!mathFieldRef.current) return;
+    const latexValue = mathFieldRef.current.value;
+    const wasFocused = mathFieldRef.current === document.activeElement;
+    const cursorPosition = mathFieldRef.current.position;
+    setMathValue(latexValue);
+    if (wasFocused) {
+      setTimeout(() => {
+        if (mathFieldRef.current) {
+          mathFieldRef.current.focus();
+          mathFieldRef.current.position = cursorPosition;
+        }
+      }, 0);
+    }
+  }, []);
+  const handleCopyLatex = () => {
+    navigator.clipboard.writeText(`$$${mathValue}$$`);
   };
-  const handleMathModeToggle = (mode) => {
-    setIsMathMode(mode);
-    setShowMathOverlay(false);
+  const handleOpenMathConstructor = () => {
+    setMathValue("");
+    setShowMathConstructor(true);
   };
-  const MathModeOverlay = () => {
-    if (!showMathOverlay) return null;
-    return /* @__PURE__ */ jsx16("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ jsxs9("div", { className: "math-overlay bg-white rounded-lg p-6 shadow-xl max-w-sm w-full mx-4", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex justify-between items-center mb-4", children: [
-        /* @__PURE__ */ jsx16("h3", { className: "text-lg font-semibold text-catchup-gray-400", children: i18n_default.t("select_input_mode") }),
-        /* @__PURE__ */ jsx16(
-          "button",
-          {
-            className: "text-catchup-gray-300 hover:text-catchup-gray-400 transition-colors",
-            onClick: () => setShowMathOverlay(false),
-            children: /* @__PURE__ */ jsx16(
-              "svg",
+  const MathConstructorModal = () => {
+    return /* @__PURE__ */ jsx17(
+      BaseModal_default,
+      {
+        isOpen: showMathConstructor,
+        onAfterOpen: () => {
+        },
+        onRequestClose: () => {
+          setShowMathConstructor(false);
+        },
+        size: "large",
+        children: /* @__PURE__ */ jsx17(FullCard_default, { children: /* @__PURE__ */ jsx17("div", { className: "bg-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs9("div", { className: "p-6 space-y-6", children: [
+          /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("math_editor") }),
+            /* @__PURE__ */ jsx17("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ jsx17(
+              "math-field",
               {
-                className: "w-6 h-6",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx16(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M6 18L18 6M6 6l12 12"
-                  }
-                )
+                ref: mathFieldRef,
+                value: mathValue,
+                onInput: handleMathFieldChange,
+                placeholder: i18n_default.t("expression"),
+                "virtual-keyboard-mode": "off",
+                "smart-fence": true,
+                "smart-mode": true,
+                "smart-superscript": true,
+                style: {
+                  fontSize: "18px",
+                  paddingRight: "16px",
+                  paddingLeft: "16px",
+                  paddingTop: "8px",
+                  paddingBottom: "8px",
+                  border: "none",
+                  outline: "none",
+                  width: "100%",
+                  backgroundColor: "transparent",
+                  borderRadius: "16px",
+                  fontFamily: "inherit"
+                }
               }
-            )
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx16(
-          "button",
-          {
-            className: `w-full p-3 rounded-lg border-2 transition-all duration-200 ${!isMathMode ? "border-catchup-blue-400 bg-catchup-blue-50" : "border-catchup-gray-100 hover:border-catchup-gray-200"}`,
-            onClick: () => handleMathModeToggle(false),
-            children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-3", children: [
-              /* @__PURE__ */ jsx16("div", { className: "w-4 h-4 rounded-full border-2 border-catchup-blue-400 flex items-center justify-center", children: !isMathMode && /* @__PURE__ */ jsx16("div", { className: "w-2 h-2 rounded-full bg-catchup-blue-400" }) }),
-              /* @__PURE__ */ jsxs9("div", { className: "text-left", children: [
-                /* @__PURE__ */ jsx16("p", { className: "font-medium text-catchup-gray-400", children: i18n_default.t("text_mode") }),
-                /* @__PURE__ */ jsx16("p", { className: "text-sm text-catchup-gray-300", children: "Regular text input" })
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx16(
-          "button",
-          {
-            className: `w-full p-3 rounded-lg border-2 transition-all duration-200 ${isMathMode ? "border-catchup-blue-400 bg-catchup-blue-50" : "border-catchup-gray-100 hover:border-catchup-gray-200"}`,
-            onClick: () => handleMathModeToggle(true),
-            children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-3", children: [
-              /* @__PURE__ */ jsx16("div", { className: "w-4 h-4 rounded-full border-2 border-catchup-blue-400 flex items-center justify-center", children: isMathMode && /* @__PURE__ */ jsx16("div", { className: "w-2 h-2 rounded-full bg-catchup-blue-400" }) }),
-              /* @__PURE__ */ jsxs9("div", { className: "text-left", children: [
-                /* @__PURE__ */ jsx16("p", { className: "font-medium text-catchup-gray-400", children: i18n_default.t("math_mode") }),
-                /* @__PURE__ */ jsx16("p", { className: "text-sm text-catchup-gray-300", children: "Mathematical expressions" })
-              ] })
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
+            /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx17(
+                "textarea",
+                {
+                  readOnly: true,
+                  value: mathValue,
+                  className: "w-full py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large font-mono text-sm resize-none focus:outline-none",
+                  placeholder: i18n_default.t("latex_will_appear_here")
+                }
+              ),
+              /* @__PURE__ */ jsx17(
+                "button",
+                {
+                  onClick: handleCopyLatex,
+                  className: "absolute top-2 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-sm hover:bg-catchup-blue-500 transition-colors",
+                  disabled: !mathValue,
+                  children: i18n_default.t("copy")
+                }
+              )
             ] })
-          }
-        )
-      ] })
-    ] }) });
+          ] })
+        ] }) }) })
+      }
+    );
   };
   const CheckboxInputGroup = () => {
     return /* @__PURE__ */ jsxs9(
@@ -3570,7 +3591,7 @@ var InputGroup = ({
         className: "flex flex-row items-center gap-x-1 cursor-pointer",
         onClick,
         children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             BaseImage_default,
             {
               src: value ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -3580,15 +3601,15 @@ var InputGroup = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx16("p", { className: "", children: title })
+          /* @__PURE__ */ jsx17("p", { className: "", children: title })
         ]
       }
     );
   };
   const FileInputGroup = () => {
     return /* @__PURE__ */ jsxs9("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ jsx16("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ jsx16(
+      title ? /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx17(
         "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",
@@ -3606,8 +3627,8 @@ var InputGroup = ({
   };
   const DateInputGroup = () => {
     return /* @__PURE__ */ jsxs9("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ jsx16("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ jsx16(
+      title ? /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx17(
         "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`,
@@ -3623,8 +3644,8 @@ var InputGroup = ({
   };
   const SearchableSelectInputGroup = () => {
     return /* @__PURE__ */ jsxs9("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ jsx16("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
-      /* @__PURE__ */ jsx16(
+      title ? /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
+      /* @__PURE__ */ jsx17(
         Select,
         {
           options: convertOptionListToSelectComponent(
@@ -3689,78 +3710,48 @@ var InputGroup = ({
   const TextAreaInputGroup = () => {
     return /* @__PURE__ */ jsxs9("div", { className: "my-1 flex-1 flex flex-col relative", children: [
       /* @__PURE__ */ jsxs9("div", { className: "flex flex-row justify-between items-center", children: [
-        /* @__PURE__ */ jsx16("div", { children: title ? /* @__PURE__ */ jsx16("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ jsx16("div", { children: value && limit ? /* @__PURE__ */ jsxs9("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+        /* @__PURE__ */ jsx17("div", { children: title ? /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ jsx17("div", { children: value && limit ? /* @__PURE__ */ jsxs9("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
         ] }) : null })
       ] }),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(
         "textarea",
         {
           ref: textAreaRef,
           disabled,
-          className: `w-full h-[44px] ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
+          className: `w-full h-[44px] ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input ${useMath ? "pr-20" : ""}`,
           placeholder: errorText ? errorText : placeholder,
           value,
-          onLoad: (e) => {
-            console.log(e);
-          },
           onChange: handleTextAreaOnChange,
           onFocus,
           onKeyDown
         }
       ),
-      useMath && isMathMode && /* @__PURE__ */ jsx16("div", { className: "absolute inset-0 bg-white border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ jsx16(
-        "math-field",
-        {
-          ref: mathFieldRef,
-          value: value || "",
-          onInput: handleMathFieldChange,
-          onFocus: handleMathFieldFocus,
-          placeholder: errorText ? errorText : placeholder,
-          disabled,
-          "virtual-keyboard-mode": "off",
-          "smart-fence": true,
-          "smart-mode": true,
-          "smart-superscript": true,
-          style: {
-            fontSize: "16px",
-            padding: "8px 16px",
-            border: "none",
-            outline: "none",
-            width: "100%",
-            height: "100%",
-            backgroundColor: "transparent",
-            borderRadius: "16px",
-            fontFamily: "inherit",
-            color: disabled ? "#9ca3af" : "#000000"
-          }
-        }
-      ) }),
-      useMath && /* @__PURE__ */ jsx16(
+      useMath && /* @__PURE__ */ jsx17(
         "button",
         {
-          className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-white border border-catchup-gray-100 rounded-md px-3 py-1 shadow-sm hover:shadow-md transition-shadow duration-200 z-10",
-          onClick: () => setShowMathOverlay(true),
+          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__ */ jsxs9("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ jsx16("span", { className: "text-sm font-medium text-catchup-gray-400", children: isMathMode ? "\u{1D453}(x)" : "Aa" }),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ jsx17(
               "svg",
               {
-                className: "w-3 h-3 text-catchup-gray-300",
+                className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx16(
+                children: /* @__PURE__ */ jsx17(
                   "path",
                   {
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     strokeWidth: 2,
-                    d: "M19 9l-7 7-7-7"
+                    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
                   }
                 )
               }
@@ -3772,42 +3763,16 @@ var InputGroup = ({
   };
   const TextInputGroup = () => {
     return /* @__PURE__ */ jsxs9("div", { className: "my-1 relative", children: [
-      title ? /* @__PURE__ */ jsx16("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ jsx16(
+      title ? /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx17(
         "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-white"}`,
-          children: useMath && isMathMode ? /* @__PURE__ */ jsx16(
-            "math-field",
-            {
-              ref: mathFieldRef,
-              value: value || "",
-              onInput: handleMathFieldChange,
-              onFocus: handleMathFieldFocus,
-              placeholder: errorText ? errorText : placeholder,
-              disabled,
-              "virtual-keyboard-mode": "off",
-              "smart-fence": true,
-              "smart-mode": true,
-              "smart-superscript": true,
-              style: {
-                fontSize: "16px",
-                padding: "8px 16px",
-                border: "none",
-                outline: "none",
-                width: "100%",
-                minHeight: "44px",
-                backgroundColor: "transparent",
-                borderRadius: "16px",
-                fontFamily: "inherit",
-                color: disabled ? "#9ca3af" : "#000000"
-              }
-            }
-          ) : /* @__PURE__ */ jsx16(
+          children: /* @__PURE__ */ jsx17(
             "input",
             {
               disabled,
-              className: `w-full py-2 px-4 border-none rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 ${disabled ? "bg-catchup-lighter-gray" : ""} ${errorText ? "placeholder:text-catchup-red placeholder:opacity-80" : ""}`,
+              className: `w-full py-2 px-4 border-none rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 ${disabled ? "bg-catchup-lighter-gray" : ""} ${errorText ? "placeholder:text-catchup-red placeholder:opacity-80" : ""} ${useMath ? "pr-20" : ""}`,
               type,
               defaultValue,
               placeholder: errorText ? errorText : placeholder,
@@ -3819,28 +3784,28 @@ var InputGroup = ({
           )
         }
       ),
-      useMath && /* @__PURE__ */ jsx16(
+      useMath && /* @__PURE__ */ jsx17(
         "button",
         {
-          className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-white border border-catchup-gray-100 rounded-md px-3 py-1 shadow-sm hover:shadow-md transition-shadow duration-200",
-          onClick: () => setShowMathOverlay(true),
+          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__ */ jsxs9("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ jsx16("span", { className: "text-sm font-medium text-catchup-gray-400", children: isMathMode ? "\u{1D453}(x)" : "Aa" }),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ jsx17(
               "svg",
               {
-                className: "w-3 h-3 text-catchup-gray-300",
+                className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx16(
+                children: /* @__PURE__ */ jsx17(
                   "path",
                   {
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     strokeWidth: 2,
-                    d: "M19 9l-7 7-7-7"
+                    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
                   }
                 )
               }
@@ -3869,7 +3834,7 @@ var InputGroup = ({
   };
   return /* @__PURE__ */ jsxs9(Fragment, { children: [
     RenderMainContent(),
-    /* @__PURE__ */ jsx16(MathModeOverlay, {})
+    /* @__PURE__ */ jsx17(MathConstructorModal, {})
   ] });
 };
 var InputGroup_default = InputGroup;
@@ -3977,7 +3942,7 @@ var getColorByIndex = (index) => {
 
 // src/components/dropdowns/MediaDropdown.tsx
 import { useState as useState11 } from "react";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var MediaDropdown = ({ id, answer, optionList }) => {
   const [showDropdown, setShowDropdown] = useState11(false);
   return /* @__PURE__ */ jsxs10(
@@ -3991,8 +3956,8 @@ var MediaDropdown = ({ id, answer, optionList }) => {
         setShowDropdown(false);
       },
       children: [
-        /* @__PURE__ */ jsx17("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
+        /* @__PURE__ */ jsx18(
           "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`,
@@ -4001,7 +3966,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
               {
                 className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
                 children: [
-                  /* @__PURE__ */ jsx17(
+                  /* @__PURE__ */ jsx18(
                     "div",
                     {
                       className: `w-full flex flex-col my-2 ${option.divClassNames ? option.divClassNames : ""}`,
@@ -4009,7 +3974,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
                       children: option.media
                     }
                   ),
-                  index !== optionList.length - 1 ? /* @__PURE__ */ jsx17("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
+                  index !== optionList.length - 1 ? /* @__PURE__ */ jsx18("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
                 ]
               },
               option.id
@@ -4026,7 +3991,7 @@ var MediaDropdown_default = MediaDropdown;
 // src/components/activities/material-content/ShowMaterialMediaByContentType.tsx
 import { useEffect as useEffect3, useRef as useRef2, useState as useState12 } from "react";
 import Modal3 from "react-modal";
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var ShowMaterialMediaByContentType = ({
   key,
   contentType,
@@ -4054,7 +4019,7 @@ var ShowMaterialMediaByContentType = ({
     }
   }, [isLoaded, key]);
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       Modal3,
       {
         isOpen: showFullScreen,
@@ -4086,7 +4051,7 @@ var ShowMaterialMediaByContentType = ({
         },
         contentLabel: "",
         children: /* @__PURE__ */ jsxs11("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ jsx18("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx19(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -4098,7 +4063,7 @@ var ShowMaterialMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx19(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -4113,12 +4078,12 @@ var ShowMaterialMediaByContentType = ({
   };
   return contentType === "IMAGE" ? /* @__PURE__ */ jsxs11("div", { children: [
     RenderShowFullScreenItem(),
-    /* @__PURE__ */ jsx18("div", { className: "my-2", children: /* @__PURE__ */ jsx18("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsx19("div", { className: "my-2", children: /* @__PURE__ */ jsx19("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsxs11(
       "div",
       {
         className: `${isFullHeight ? "h-catchup-activity-box-item" : "max-w-catchup-activity-box-item"}  flex flex-col justify-center items-center relative`,
         children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             BaseImage_default,
             {
               src,
@@ -4131,7 +4096,7 @@ var ShowMaterialMediaByContentType = ({
               }
             }
           ),
-          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx18(
+          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx19(
             "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",
@@ -4143,7 +4108,7 @@ var ShowMaterialMediaByContentType = ({
                 setShowFullScreen(true);
                 setSelectedFullScreenItem(src);
               },
-              children: /* @__PURE__ */ jsx18(
+              children: /* @__PURE__ */ jsx19(
                 BaseImage_default,
                 {
                   src: "/icons/arrow-up.webp",
@@ -4157,7 +4122,7 @@ var ShowMaterialMediaByContentType = ({
         ]
       }
     ) }) })
-  ] }, key) : contentType === "VIDEO" ? /* @__PURE__ */ jsx18("div", { className: "my-2", children: /* @__PURE__ */ jsx18("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx18("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx18(
+  ] }, key) : contentType === "VIDEO" ? /* @__PURE__ */ jsx19("div", { className: "my-2", children: /* @__PURE__ */ jsx19("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx19("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx19(
     "video",
     {
       className: "h-catchup-activity-box-item rounded-catchup-xlarge",
@@ -4166,7 +4131,7 @@ var ShowMaterialMediaByContentType = ({
       onClick: () => {
       }
     }
-  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx18("div", { className: "my-2", children: /* @__PURE__ */ jsx18("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx18("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx18(
+  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx19("div", { className: "my-2", children: /* @__PURE__ */ jsx19("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx19("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx19(
     "audio",
     {
       className: "h-catchup-activity-box-item rounded-catchup-xlarge",
@@ -4180,7 +4145,7 @@ var ShowMaterialMediaByContentType = ({
 var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
 
 // src/components/activities/material-content/DropdownActivityMaterialContent.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 var DropdownActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4224,21 +4189,21 @@ var DropdownActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   return /* @__PURE__ */ jsxs12("div", { className: "flex flex-row flex-wrap items-center", children: [
-    /* @__PURE__ */ jsx19("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx19("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
-    /* @__PURE__ */ jsx19("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx19(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx19("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+    /* @__PURE__ */ jsx20("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx20("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
+    /* @__PURE__ */ jsx20("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx20(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx20("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
       const answerKey = Object.keys(materialMap[materialKey])[0];
       const learnerAnswerState = checkAnswerState(
         answerKey,
         answerMap[materialKey]
       );
-      return /* @__PURE__ */ jsx19("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx19("div", { className: "mx-2", children: /* @__PURE__ */ jsxs12("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-        /* @__PURE__ */ jsx19("div", { className: "my-auto", children: /* @__PURE__ */ jsxs12("p", { className: "text-xl", children: [
+      return /* @__PURE__ */ jsx20("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx20("div", { className: "mx-2", children: /* @__PURE__ */ jsxs12("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+        /* @__PURE__ */ jsx20("div", { className: "my-auto", children: /* @__PURE__ */ jsxs12("p", { className: "text-xl", children: [
           parseFloat(materialKey) + 1,
           "."
         ] }) }),
         /* @__PURE__ */ jsxs12("div", { className: "w-full relative", children: [
-          /* @__PURE__ */ jsx19("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx19("div", { className: "flex-1", children: /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx20("div", { className: "flex-1", children: /* @__PURE__ */ jsx20(
             InputGroup_default,
             {
               type: "select",
@@ -4246,13 +4211,13 @@ var DropdownActivityMaterialContent = ({
               optionList: shuffleArray(
                 materialMap[materialKey][answerKey]
               ).map((materialOption) => ({
-                text: /* @__PURE__ */ jsx19("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                text: /* @__PURE__ */ jsx20("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialOption
-                ).map((inputPart, index2) => /* @__PURE__ */ jsx19(
+                ).map((inputPart, index2) => /* @__PURE__ */ jsx20(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx19("span", { className: "text-2xl", children: /* @__PURE__ */ jsx19(
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx20("span", { className: "text-2xl", children: /* @__PURE__ */ jsx20(
                       InlineMath2,
                       {
                         math: inputPart.value
@@ -4267,11 +4232,11 @@ var DropdownActivityMaterialContent = ({
                 onChange(answer, materialKey, e.target.value);
               }
             }
-          ) }) : /* @__PURE__ */ jsx19(
+          ) }) : /* @__PURE__ */ jsx20(
             MediaDropdown_default,
             {
               id: materialKey,
-              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx19("div", { className: "w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ jsx19("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx19("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx19(
+              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx20("div", { className: "w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ jsx20("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx20("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx20(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4283,7 +4248,7 @@ var DropdownActivityMaterialContent = ({
               optionList: materialMap[materialKey][answerKey].map(
                 (materialOption, index2) => ({
                   id: index2,
-                  media: /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(
+                  media: /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -4302,24 +4267,24 @@ var DropdownActivityMaterialContent = ({
                 })
               )
             }
-          ) : /* @__PURE__ */ jsx19("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+          ) : /* @__PURE__ */ jsx20("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
             answerMap[materialKey]
-          ).map((inputPart, index2) => /* @__PURE__ */ jsx19(
+          ).map((inputPart, index2) => /* @__PURE__ */ jsx20(
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ jsx19("span", { className: "text-2xl", children: /* @__PURE__ */ jsx19(InlineMath2, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx20("span", { className: "text-2xl", children: /* @__PURE__ */ jsx20(InlineMath2, { math: inputPart.value }) }) : inputPart.value
             },
             index2
           )) }) }),
-          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx19("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx19(
+          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx20("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx20(
             BaseImage_default,
             {
               src: "/icons/checkbox.webp",
               alt: "chekbbox",
               size: "small"
             }
-          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx19("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx19(
+          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx20("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx20(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -4336,7 +4301,7 @@ var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
 import { useState as useState14, useEffect as useEffect5 } from "react";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var DropdownActivityContent = ({
   answer,
   data,
@@ -4379,7 +4344,7 @@ var DropdownActivityContent = ({
     changeAnswer(newAnswer);
   };
   return /* @__PURE__ */ jsxs13("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx20("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx21(
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
@@ -4388,9 +4353,9 @@ var DropdownActivityContent = ({
         templateType: "DROPDOWN"
       }
     ) }),
-    /* @__PURE__ */ jsx20("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx20(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx20("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx20(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx20("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx21(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx21("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx21(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx21("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx21(
       DropdownActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -4415,7 +4380,7 @@ import { useDrop as useDrop2 } from "react-dnd";
 
 // src/components/dnds/DraggableItem.tsx
 import { useDrag } from "react-dnd";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var DraggableItem = ({
   key,
   item,
@@ -4437,11 +4402,11 @@ var DraggableItem = ({
     })
   });
   const opacity = isDragging ? 0.4 : 1;
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       className: `${isDragging ? "w-[0px] opacity-0" : "opacity-100"} transition-all duration-500`,
-      children: /* @__PURE__ */ jsx21("div", { ref: drag, className: "", style: { opacity }, children: component })
+      children: /* @__PURE__ */ jsx22("div", { ref: drag, className: "", style: { opacity }, children: component })
     },
     key
   );
@@ -4451,7 +4416,7 @@ var DraggableItem_default = DraggableItem;
 // src/components/dnds/DroppableItem.tsx
 import { useRef as useRef3 } from "react";
 import { useDrop } from "react-dnd";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var DroppableItem = ({
   key,
   item,
@@ -4471,7 +4436,7 @@ var DroppableItem = ({
     }
   });
   dropRef(drop(ref));
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: `w-full transition-all duration-500 h-full`,
@@ -4484,7 +4449,7 @@ var DroppableItem = ({
 var DroppableItem_default = DroppableItem;
 
 // src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4545,10 +4510,10 @@ var FillInTheBlanksActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   return /* @__PURE__ */ jsxs14("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
   }, children: [
-    /* @__PURE__ */ jsx23("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx23("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
-    /* @__PURE__ */ jsx23("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx23(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx23("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
-      (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ jsx23("div", { className: "opacity-30", children: /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx24("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+    /* @__PURE__ */ jsx24("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx24(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx24("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
+      (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ jsx24("div", { className: "opacity-30", children: /* @__PURE__ */ jsx24(
         ShowMaterialMediaByContentType_default,
         {
           contentType: contentMap.type,
@@ -4556,12 +4521,12 @@ var FillInTheBlanksActivityMaterialContent = ({
           canFullScreen: true
         },
         `${uniqueValue}-${index}`
-      ) }, index) : /* @__PURE__ */ jsx23(
+      ) }, index) : /* @__PURE__ */ jsx24(
         DraggableItem_default,
         {
           item: { index: option },
           type: "FILL_IN_THE_BLANKS",
-          component: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx23(
+          component: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx24(
             "div",
             {
               className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
@@ -4569,9 +4534,9 @@ var FillInTheBlanksActivityMaterialContent = ({
                 setSelectedOption(option);
                 setPasteOptionIndex(null);
               },
-              children: /* @__PURE__ */ jsx23("p", { className: "italic whitespace-pre-wrap", children: option })
+              children: /* @__PURE__ */ jsx24("p", { className: "italic whitespace-pre-wrap", children: option })
             }
-          ) : /* @__PURE__ */ jsx23(
+          ) : /* @__PURE__ */ jsx24(
             "div",
             {
               className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
@@ -4579,7 +4544,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                 setSelectedOption(option);
                 setPasteOptionIndex(null);
               },
-              children: /* @__PURE__ */ jsx23(
+              children: /* @__PURE__ */ jsx24(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4597,12 +4562,12 @@ var FillInTheBlanksActivityMaterialContent = ({
         index
       )
     ) }),
-    /* @__PURE__ */ jsx23("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+    /* @__PURE__ */ jsx24("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
       const learnerAnswerState = checkAnswerState(
         JSON.parse(materialMap[materialKey]),
         answerMap[materialKey]
       );
-      return /* @__PURE__ */ jsx23("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx23("div", { className: "mx-2", children: /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx24("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx24("div", { className: "mx-2", children: /* @__PURE__ */ jsx24(
         DroppableItem_default,
         {
           item: { index },
@@ -4611,12 +4576,12 @@ var FillInTheBlanksActivityMaterialContent = ({
           setTarget: setPasteOptionIndex,
           dropRef: drop,
           component: /* @__PURE__ */ jsxs14("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-            /* @__PURE__ */ jsx23("div", { className: "my-auto", children: /* @__PURE__ */ jsxs14("p", { className: "text-xl", children: [
+            /* @__PURE__ */ jsx24("div", { className: "my-auto", children: /* @__PURE__ */ jsxs14("p", { className: "text-xl", children: [
               parseFloat(materialKey) + 1,
               "."
             ] }) }),
-            /* @__PURE__ */ jsx23("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx23("div", { className: "flex-1", children: /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx24("div", { className: "flex-1", children: /* @__PURE__ */ jsx24(
                 InputGroup_default,
                 {
                   type: "textarea",
@@ -4631,14 +4596,14 @@ var FillInTheBlanksActivityMaterialContent = ({
                   }
                 }
               ) }),
-              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx23("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx23(
+              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx24("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx24(
                 BaseImage_default,
                 {
                   src: "/icons/checkbox.webp",
                   alt: "checkbox",
                   size: "small"
                 }
-              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx23("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx23(
+              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx24("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx24(
                 BaseImage_default,
                 {
                   src: "/icons/cross-red.webp",
@@ -4646,20 +4611,20 @@ var FillInTheBlanksActivityMaterialContent = ({
                   size: "small"
                 }
               ) }) : null
-            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx23(
+            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx24(
               "div",
               {
                 className: `w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-                children: /* @__PURE__ */ jsx23("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx23("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
+                children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx24("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
               }
-            ) : /* @__PURE__ */ jsx23(
+            ) : /* @__PURE__ */ jsx24(
               "div",
               {
                 className: "flex-1 cursor-pointer",
                 onClick: () => {
                   onChange(answer, materialKey, "");
                 },
-                children: /* @__PURE__ */ jsx23(
+                children: /* @__PURE__ */ jsx24(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -4669,13 +4634,13 @@ var FillInTheBlanksActivityMaterialContent = ({
                   `${uniqueValue}-${index}`
                 )
               }
-            ) : /* @__PURE__ */ jsx23("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+            ) : /* @__PURE__ */ jsx24("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
               answerMap[materialKey]
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx23(
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx24(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx23("span", { className: "text-2xl", children: /* @__PURE__ */ jsx23(InlineMath3, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx24("span", { className: "text-2xl", children: /* @__PURE__ */ jsx24(InlineMath3, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }, materialKey) })
@@ -4690,7 +4655,7 @@ var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMate
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
 import { useState as useState16, useEffect as useEffect7 } from "react";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var FillInTheBlanksActivityContent = ({
   answer,
   data,
@@ -4758,7 +4723,7 @@ var FillInTheBlanksActivityContent = ({
     changeAnswer(newAnswer);
   };
   return /* @__PURE__ */ jsxs15("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx24("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx25(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -4767,9 +4732,9 @@ var FillInTheBlanksActivityContent = ({
         templateType: "FILL_IN_THE_BLANKS"
       }
     ) }),
-    /* @__PURE__ */ jsx24("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx24(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx24("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx24(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx24("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx25(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx25("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx25(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx25("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx25(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -4828,7 +4793,7 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4928,18 +4893,18 @@ var GroupingActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
   return /* @__PURE__ */ jsxs16(Fragment2, { children: [
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(
       "div",
       {
         ref: itemsRef,
         className: "flex-1 flex flex-row gap-x-4 gap-y-4 overflow-auto py-2",
         children: filteredMaterialList.map((materialValue, index) => {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             DraggableItem_default,
             {
               item: { index: materialValue },
               type: "GROUPING",
-              component: /* @__PURE__ */ jsx25(
+              component: /* @__PURE__ */ jsx26(
                 "div",
                 {
                   className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} h-catchup-activity-covering-box-item flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
@@ -4953,22 +4918,22 @@ var GroupingActivityMaterialContent = ({
                       setSelectedValue(null);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx25(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx26(
                     "div",
                     {
                       className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                      children: /* @__PURE__ */ jsx25("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                      children: /* @__PURE__ */ jsx26("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                         materialValue
-                      ).map((inputPart, index2) => /* @__PURE__ */ jsx25(
+                      ).map((inputPart, index2) => /* @__PURE__ */ jsx26(
                         "span",
                         {
                           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                          children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-2xl", children: /* @__PURE__ */ jsx25(InlineMath4, { math: inputPart.value }) }) : inputPart.value
+                          children: inputPart.isEquation ? /* @__PURE__ */ jsx26("span", { className: "text-2xl", children: /* @__PURE__ */ jsx26(InlineMath4, { math: inputPart.value }) }) : inputPart.value
                         },
                         index2
                       )) })
                     }
-                  ) : /* @__PURE__ */ jsx25(
+                  ) : /* @__PURE__ */ jsx26(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -4993,22 +4958,22 @@ var GroupingActivityMaterialContent = ({
         })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx25(DividerLine_default, {}) : null,
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx26(DividerLine_default, {}) : null,
     Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs16("div", { className: "flex flex-row w-full", children: [
-      /* @__PURE__ */ jsx25("div", { className: "w-1/3", children: /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26("div", { className: "w-1/3", children: /* @__PURE__ */ jsx26(
         "div",
         {
           className: `border-catchup-blue h-catchup-activity-outer-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3`,
-          children: /* @__PURE__ */ jsx25(
+          children: /* @__PURE__ */ jsx26(
             "div",
             {
               className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-              children: /* @__PURE__ */ jsx25("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                (inputPart, index2) => /* @__PURE__ */ jsx25(
+              children: /* @__PURE__ */ jsx26("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+                (inputPart, index2) => /* @__PURE__ */ jsx26(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-2xl", children: /* @__PURE__ */ jsx25(InlineMath4, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx26("span", { className: "text-2xl", children: /* @__PURE__ */ jsx26(InlineMath4, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
                 )
@@ -5017,12 +4982,12 @@ var GroupingActivityMaterialContent = ({
           )
         }
       ) }),
-      /* @__PURE__ */ jsx25("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-      /* @__PURE__ */ jsx25("div", { className: "flex-1", ref, children: /* @__PURE__ */ jsx25("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+      /* @__PURE__ */ jsx26("div", { className: "flex-1", ref, children: /* @__PURE__ */ jsx26("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx26(
         "div",
         {
           className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1`,
-          children: /* @__PURE__ */ jsx25(
+          children: /* @__PURE__ */ jsx26(
             DroppableItem_default,
             {
               item: { index: answerMapKey },
@@ -5030,7 +4995,7 @@ var GroupingActivityMaterialContent = ({
               target: selectedTargetKey,
               setTarget: setSelectedTargetKey,
               dropRef: drop,
-              component: /* @__PURE__ */ jsx25(
+              component: /* @__PURE__ */ jsx26(
                 "div",
                 {
                   className: "h-full flex-1 flex flex-row items-center overflow-x-auto",
@@ -5043,7 +5008,7 @@ var GroupingActivityMaterialContent = ({
                         materialMap[answerMapKey],
                         answerMapValue
                       );
-                      return /* @__PURE__ */ jsx25("div", { className: "p-1", children: /* @__PURE__ */ jsx25("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ jsx25(
+                      return /* @__PURE__ */ jsx26("div", { className: "p-1", children: /* @__PURE__ */ jsx26("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ jsx26(
                         "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`,
@@ -5059,17 +5024,17 @@ var GroupingActivityMaterialContent = ({
                               setSelectedValue(null);
                             }
                           },
-                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx25(
+                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx26(
                             "div",
                             {
                               className: `flex flex-col items-center justify-center transition-all duration-300 min-h-[64px] min-w-[200px]`,
-                              children: /* @__PURE__ */ jsx25("div", { className: "m-2", children: /* @__PURE__ */ jsx25("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                              children: /* @__PURE__ */ jsx26("div", { className: "m-2", children: /* @__PURE__ */ jsx26("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                                 answerMapValue
-                              ).map((inputPart, index2) => /* @__PURE__ */ jsx25(
+                              ).map((inputPart, index2) => /* @__PURE__ */ jsx26(
                                 "span",
                                 {
                                   className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                                  children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-2xl", children: /* @__PURE__ */ jsx25(
+                                  children: inputPart.isEquation ? /* @__PURE__ */ jsx26("span", { className: "text-2xl", children: /* @__PURE__ */ jsx26(
                                     InlineMath4,
                                     {
                                       math: inputPart.value
@@ -5079,7 +5044,7 @@ var GroupingActivityMaterialContent = ({
                                 index2
                               )) }) })
                             }
-                          ) : /* @__PURE__ */ jsx25(
+                          ) : /* @__PURE__ */ jsx26(
                             ShowMaterialMediaByContentType_default,
                             {
                               contentType: contentMap.type,
@@ -5105,7 +5070,7 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 
 // src/components/activities/GroupingActivityContent.tsx
-import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var GroupingActivityContent = ({
   answer,
   data,
@@ -5131,15 +5096,15 @@ var GroupingActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs17(Fragment3, { children: [
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       ActivityBodyContent_default,
       {
         bodyMap: groupingBodyMap,
         templateType: "GROUPING"
       }
     ),
-    /* @__PURE__ */ jsx26(DividerLine_default, {}),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(DividerLine_default, {}),
+    /* @__PURE__ */ jsx27(
       GroupingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5160,7 +5125,7 @@ var GroupingActivityContent_default = GroupingActivityContent;
 import { useEffect as useEffect10, useRef as useRef5, useState as useState19 } from "react";
 import { useDrop as useDrop4 } from "react-dnd";
 import { InlineMath as InlineMath5 } from "react-katex";
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5257,17 +5222,17 @@ var MatchingActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
   return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       "div",
       {
         ref: itemsRef,
         className: "flex-1 flex flex-row gap-x-4 gap-y-4 overflow-auto py-2",
-        children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ jsx27(
+        children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ jsx28(
           DraggableItem_default,
           {
             item: { index: materialValue },
             type: "MATCHING",
-            component: /* @__PURE__ */ jsx27(
+            component: /* @__PURE__ */ jsx28(
               "div",
               {
                 className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} h-catchup-activity-covering-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
@@ -5281,22 +5246,22 @@ var MatchingActivityMaterialContent = ({
                     setSelectedValue(null);
                   }
                 },
-                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx27(
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx28(
                   "div",
                   {
                     className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                    children: /* @__PURE__ */ jsx27("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: /* @__PURE__ */ jsx28("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialValue
-                    ).map((inputPart, index2) => /* @__PURE__ */ jsx27(
+                    ).map((inputPart, index2) => /* @__PURE__ */ jsx28(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx27("span", { className: "text-2xl", children: /* @__PURE__ */ jsx27(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-2xl", children: /* @__PURE__ */ jsx28(InlineMath5, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
                     )) })
                   }
-                ) : /* @__PURE__ */ jsx27(
+                ) : /* @__PURE__ */ jsx28(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5320,27 +5285,27 @@ var MatchingActivityMaterialContent = ({
         ))
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx27(DividerLine_default, {}) : null,
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx28(DividerLine_default, {}) : null,
     Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
       );
       return /* @__PURE__ */ jsxs18("div", { className: "flex flex-row w-full", children: [
-        /* @__PURE__ */ jsx27("div", { className: "w-1/3", children: /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28("div", { className: "w-1/3", children: /* @__PURE__ */ jsx28(
           "div",
           {
             className: `h-catchup-activity-outer-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__ */ jsx27(
+            children: /* @__PURE__ */ jsx28(
               "div",
               {
                 className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-                children: /* @__PURE__ */ jsx27("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                  (inputPart, index2) => /* @__PURE__ */ jsx27(
+                children: /* @__PURE__ */ jsx28("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+                  (inputPart, index2) => /* @__PURE__ */ jsx28(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ jsx27("span", { className: "text-2xl", children: /* @__PURE__ */ jsx27(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-2xl", children: /* @__PURE__ */ jsx28(InlineMath5, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
                   )
@@ -5349,8 +5314,8 @@ var MatchingActivityMaterialContent = ({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx27("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-        /* @__PURE__ */ jsx27("div", { className: "flex-1", children: /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+        /* @__PURE__ */ jsx28("div", { className: "flex-1", children: /* @__PURE__ */ jsx28(
           "div",
           {
             className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} h-catchup-activity-outer-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"}`,
@@ -5359,7 +5324,7 @@ var MatchingActivityMaterialContent = ({
                 setSelectedValue(null);
               }
             },
-            children: /* @__PURE__ */ jsx27(
+            children: /* @__PURE__ */ jsx28(
               DroppableItem_default,
               {
                 item: { index: answerMapKey },
@@ -5367,7 +5332,7 @@ var MatchingActivityMaterialContent = ({
                 target: selectedTargetKey,
                 setTarget: setSelectedTargetKey,
                 dropRef: drop,
-                component: /* @__PURE__ */ jsx27(
+                component: /* @__PURE__ */ jsx28(
                   "div",
                   {
                     className: `h-full flex-1 flex flex-row items-center justify-center `,
@@ -5380,16 +5345,16 @@ var MatchingActivityMaterialContent = ({
                         );
                       }
                     },
-                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx27("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx28("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       answerMap[answerMapKey]
-                    ).map((inputPart, index2) => /* @__PURE__ */ jsx27(
+                    ).map((inputPart, index2) => /* @__PURE__ */ jsx28(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx27("span", { className: "text-2xl", children: /* @__PURE__ */ jsx27(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-2xl", children: /* @__PURE__ */ jsx28(InlineMath5, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
-                    )) }) : /* @__PURE__ */ jsx27(
+                    )) }) : /* @__PURE__ */ jsx28(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -5412,7 +5377,7 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 
 // src/components/activities/MatchingActivityContent.tsx
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var MatchingActivityContent = ({
   answer,
   data,
@@ -5434,15 +5399,15 @@ var MatchingActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29(
       ActivityBodyContent_default,
       {
         bodyMap: matchingBodyMap,
         templateType: "MATCHING"
       }
     ),
-    /* @__PURE__ */ jsx28(DividerLine_default, {}),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29(DividerLine_default, {}),
+    /* @__PURE__ */ jsx29(
       MatchingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5461,7 +5426,7 @@ var MatchingActivityContent_default = MatchingActivityContent;
 
 // src/components/activities/material-content/MCMAActivityMaterialContent.tsx
 import { InlineMath as InlineMath6 } from "react-katex";
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var MCMAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5494,10 +5459,10 @@ var MCMAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswerList = retrieveCorrectAnswerList();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ jsx29("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs20("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
-      /* @__PURE__ */ jsx29("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx29("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
-      /* @__PURE__ */ jsx29("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx29(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx29("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
+    return /* @__PURE__ */ jsx30("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs20("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
+      /* @__PURE__ */ jsx30("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx30("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
+      /* @__PURE__ */ jsx30("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx30(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx30("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
           const foundAnswer = answerMap[materialKey].find(
             (learnerAnswer) => learnerAnswer === materialSubKey
@@ -5518,7 +5483,7 @@ var MCMAActivityMaterialContent = ({
                 onChange(answer, materialKey, materialSubKey);
               },
               children: [
-                /* @__PURE__ */ jsx29(
+                /* @__PURE__ */ jsx30(
                   BaseImage_default,
                   {
                     src: answerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -5528,16 +5493,16 @@ var MCMAActivityMaterialContent = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx29("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx29("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                /* @__PURE__ */ jsx30("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialSubKey
-                ).map((inputPart, index3) => /* @__PURE__ */ jsx29(
+                ).map((inputPart, index3) => /* @__PURE__ */ jsx30(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-2xl", children: /* @__PURE__ */ jsx29(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-2xl", children: /* @__PURE__ */ jsx30(InlineMath6, { math: inputPart.value }) }) : inputPart.value
                   },
                   index3
-                )) }) : /* @__PURE__ */ jsx29(
+                )) }) : /* @__PURE__ */ jsx30(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5551,13 +5516,13 @@ var MCMAActivityMaterialContent = ({
             index2
           );
         }
-      ) }) : /* @__PURE__ */ jsx29("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+      ) }) : /* @__PURE__ */ jsx30("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
         answerMap[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-2xl", children: /* @__PURE__ */ jsx29(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-2xl", children: /* @__PURE__ */ jsx30(InlineMath6, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) }, materialKey)
@@ -5567,7 +5532,7 @@ var MCMAActivityMaterialContent = ({
 var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
 
 // src/components/activities/MCMAActivityContent.tsx
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var MCMAActivityContent = ({
   answer,
   data,
@@ -5595,10 +5560,10 @@ var MCMAActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs21("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx30(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
-    /* @__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"}`, children: /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx31(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
+    /* @__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"}`, children: /* @__PURE__ */ jsx31(
       MCMAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5616,7 +5581,7 @@ var MCMAActivityContent_default = MCMAActivityContent;
 
 // src/components/activities/material-content/MCSAActivityMaterialContent.tsx
 import { InlineMath as InlineMath7 } from "react-katex";
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var MCSAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5646,10 +5611,10 @@ var MCSAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswer = retrieveCorrectAnswer();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ jsx31("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
-      /* @__PURE__ */ jsx31("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx31("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
-      /* @__PURE__ */ jsx31("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx31(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
+      /* @__PURE__ */ jsx32("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx32("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
+      /* @__PURE__ */ jsx32("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx32(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx32(
         "div",
         {
           className: `flex flex-row w-full ${Object.keys(materialMap[materialKey]).length <= 4 ? "justify-center" : ""} flex-wrap`,
@@ -5668,7 +5633,7 @@ var MCSAActivityMaterialContent = ({
                     onChange(answer, materialKey, materialSubKey);
                   },
                   children: [
-                    /* @__PURE__ */ jsx31(
+                    /* @__PURE__ */ jsx32(
                       BaseImage_default,
                       {
                         src: answerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
@@ -5678,16 +5643,16 @@ var MCSAActivityMaterialContent = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx31("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    /* @__PURE__ */ jsx32("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialSubKey
-                    ).map((inputPart, index3) => /* @__PURE__ */ jsx31(
+                    ).map((inputPart, index3) => /* @__PURE__ */ jsx32(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(InlineMath7, { math: inputPart.value }) }) : inputPart.value
                       },
                       index3
-                    )) }) : /* @__PURE__ */ jsx31(
+                    )) }) : /* @__PURE__ */ jsx32(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -5703,13 +5668,13 @@ var MCSAActivityMaterialContent = ({
             }
           )
         }
-      ) : /* @__PURE__ */ jsx31("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+      ) : /* @__PURE__ */ jsx32("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).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(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(InlineMath7, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) })
@@ -5719,7 +5684,7 @@ var MCSAActivityMaterialContent = ({
 var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
 
 // src/components/activities/MCSAActivityContent.tsx
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var MCSAActivityContent = ({
   answer,
   data,
@@ -5740,10 +5705,10 @@ var MCSAActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs23("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx32("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx32(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
-    /* @__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("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx33(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
+    /* @__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"}`, children: /* @__PURE__ */ jsx33(
       MCSAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5760,7 +5725,7 @@ var MCSAActivityContent = ({
 var MCSAActivityContent_default = MCSAActivityContent;
 
 // src/components/activities/material-content/OpenEndedActivityMaterialContent.tsx
-import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var OpenEndedActivityMaterialContent = ({
   answer,
   contentMap,
@@ -5783,7 +5748,7 @@ var OpenEndedActivityMaterialContent = ({
   };
   const RenderTextContent = (answerMap2) => {
     const answerMapAnswer = answerMap2["ANSWER"];
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       InputGroup_default,
       {
         type: "textarea",
@@ -5796,16 +5761,16 @@ var OpenEndedActivityMaterialContent = ({
     );
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsx33(Fragment6, { children: /* @__PURE__ */ jsxs24("div", { className: "", children: [
-    /* @__PURE__ */ jsx33("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx33("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
-    /* @__PURE__ */ jsx33("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx33(DividerLine_default, {}) }),
+  return /* @__PURE__ */ jsx34(Fragment6, { children: /* @__PURE__ */ jsxs24("div", { className: "", children: [
+    /* @__PURE__ */ jsx34("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx34("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
+    /* @__PURE__ */ jsx34("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx34(DividerLine_default, {}) }),
     contentMap.type === "TEXT" ? RenderTextContent(answerMap) : null
   ] }) });
 };
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 
 // src/components/activities/OpenEndedActivityContent.tsx
-import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var OpenEndedActivityContent = ({
   answer,
   data,
@@ -5824,11 +5789,11 @@ var OpenEndedActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs25("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       "div",
       {
         className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%]" : "w-full"}`,
-        children: /* @__PURE__ */ jsx34(
+        children: /* @__PURE__ */ jsx35(
           ActivityBodyContent_default,
           {
             bodyMap: openEndedBodyMap,
@@ -5838,15 +5803,15 @@ var OpenEndedActivityContent = ({
       }
     ),
     showMaterialContent ? /* @__PURE__ */ jsxs25(Fragment7, { children: [
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx35(
         "div",
         {
           className: `${isFullScreen ? "contents" : "contents md:hidden"}`,
-          children: /* @__PURE__ */ jsx34(DividerLine_default, {})
+          children: /* @__PURE__ */ jsx35(DividerLine_default, {})
         }
       ),
-      /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx34(VerticalDividerLine_default, {}) }),
-      /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx34(
+      /* @__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"}`, children: /* @__PURE__ */ jsx35(
         OpenEndedActivityMaterialContent_default,
         {
           answer,
@@ -5867,7 +5832,7 @@ import { InlineMath as InlineMath8 } from "react-katex";
 // src/components/dnds/DraggableDroppableItem.tsx
 import { useRef as useRef6 } from "react";
 import { useDrag as useDrag2, useDrop as useDrop5 } from "react-dnd";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var DraggableDroppableItem = ({
   key,
   item,
@@ -5905,12 +5870,12 @@ var DraggableDroppableItem = ({
   });
   const opacity = isDragging ? 0.4 : 1;
   drag(drop(ref));
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       className: `${isDragging ? "w-[0px] opacity-0" : "w-full opacity-100"} transition-all duration-500`,
       ref: dropRef,
-      children: /* @__PURE__ */ jsx35("div", { ref, className: "w-full", style: { opacity }, children: component })
+      children: /* @__PURE__ */ jsx36("div", { ref, className: "w-full", style: { opacity }, children: component })
     },
     key
   );
@@ -5918,7 +5883,7 @@ var DraggableDroppableItem = ({
 var DraggableDroppableItem_default = DraggableDroppableItem;
 
 // src/components/activities/material-content/OrderingActivityMaterialContent.tsx
-import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5995,12 +5960,12 @@ var OrderingActivityMaterialContent = ({
     return 0;
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsx36("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+  return /* @__PURE__ */ jsx37("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
     const learnerAnswerState = checkAnswerState(
       answerMap[materialKey] + "",
       index + ""
     );
-    return /* @__PURE__ */ jsx36("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsx37("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs26(
       "div",
       {
         className: `flex flex-row items-center my-4 mx-2`,
@@ -6008,26 +5973,26 @@ var OrderingActivityMaterialContent = ({
           marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
         },
         children: [
-          /* @__PURE__ */ jsx36("div", { className: "mr-3", children: /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37("div", { className: "mr-3", children: /* @__PURE__ */ jsx37(
             "div",
             {
               className: `min-h-catchup-activity-outer-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300`,
-              children: /* @__PURE__ */ jsx36(
+              children: /* @__PURE__ */ jsx37(
                 "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__ */ jsx36("p", { className: "", children: parseFloat(materialKey) + 1 })
+                  children: /* @__PURE__ */ jsx37("p", { className: "", children: parseFloat(materialKey) + 1 })
                 }
               )
             }
           ) }),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             DraggableDroppableItem_default,
             {
               item: { index: materialKey },
               type: "ORDERING",
               dropRef: drop,
-              component: /* @__PURE__ */ jsx36(
+              component: /* @__PURE__ */ jsx37(
                 "div",
                 {
                   className: `${canDrop ? selectedKey !== materialKey ? selectedTargetKey === materialKey ? "bg-catchup-light-blue rounded-catchup-xlarge" : "bg-catchup-light-blue rounded-catchup-xlarge opacity-40" : "" : ""} flex-1 min-h-catchup-activity-outer-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"}`,
@@ -6036,16 +6001,16 @@ var OrderingActivityMaterialContent = ({
                       setSelectedKey(materialKey);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx36("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx37("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                     materialMap[answerMap[materialKey]]
-                  ).map((inputPart, index2) => /* @__PURE__ */ jsx36(
+                  ).map((inputPart, index2) => /* @__PURE__ */ jsx37(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ jsx36("span", { className: "text-2xl", children: /* @__PURE__ */ jsx36(InlineMath8, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx37("span", { className: "text-2xl", children: /* @__PURE__ */ jsx37(InlineMath8, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
-                  )) }) : /* @__PURE__ */ jsx36(
+                  )) }) : /* @__PURE__ */ jsx37(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -6077,7 +6042,7 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var OrderingActivityContent = ({
   answer,
   data,
@@ -6101,15 +6066,15 @@ var OrderingActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs27(Fragment8, { children: [
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       ActivityBodyContent_default,
       {
         bodyMap: orderingBodyMap,
         templateType: "ORDERING"
       }
     ),
-    /* @__PURE__ */ jsx37(DividerLine_default, {}),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(DividerLine_default, {}),
+    /* @__PURE__ */ jsx38(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6129,7 +6094,7 @@ var OrderingActivityContent_default = OrderingActivityContent;
 // src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
 import { useEffect as useEffect12, useState as useState21 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
-import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6183,13 +6148,13 @@ var TrueFalseActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   return /* @__PURE__ */ jsxs28("div", { className: "", children: [
-    /* @__PURE__ */ jsx38("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx38("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
-    /* @__PURE__ */ jsx38("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx38(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx39("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx39("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
+    /* @__PURE__ */ jsx39("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx39(DividerLine_default, {}) }),
     /* @__PURE__ */ jsxs28("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
-      /* @__PURE__ */ jsx38("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx38("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
-      /* @__PURE__ */ jsx38("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx38("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
+      /* @__PURE__ */ jsx39("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx39("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
+      /* @__PURE__ */ jsx39("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx39("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
     ] }),
-    checkCanAnswerQuestion() ? /* @__PURE__ */ jsx38("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
+    checkCanAnswerQuestion() ? /* @__PURE__ */ jsx39("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";
@@ -6205,16 +6170,16 @@ var TrueFalseActivityMaterialContent = ({
         {
           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__ */ jsx38("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx38("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            /* @__PURE__ */ jsx39("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx39("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               shuffleOption
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx38(
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx39(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx38("span", { className: "text-2xl", children: /* @__PURE__ */ jsx38(InlineMath9, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx39("span", { className: "text-2xl", children: /* @__PURE__ */ jsx39(InlineMath9, { math: inputPart.value }) }) : inputPart.value
               },
               index2
-            )) }) : /* @__PURE__ */ jsx38(
+            )) }) : /* @__PURE__ */ jsx39(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6224,7 +6189,7 @@ var TrueFalseActivityMaterialContent = ({
               `${uniqueValue}-${index}`
             ) }),
             /* @__PURE__ */ jsxs28("div", { className: "flex flex-row items-center gap-x-2", children: [
-              /* @__PURE__ */ jsx38("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx38("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx39("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx39(
                 BaseImage_default,
                 {
                   src: answerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6235,7 +6200,7 @@ var TrueFalseActivityMaterialContent = ({
                   }
                 }
               ) }) }),
-              /* @__PURE__ */ jsx38("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx38("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx39("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx39(
                 BaseImage_default,
                 {
                   src: answerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6253,12 +6218,12 @@ var TrueFalseActivityMaterialContent = ({
       );
     }) }) : /* @__PURE__ */ jsxs28(Fragment9, { children: [
       answerMap.trueList.map((item) => /* @__PURE__ */ jsxs28("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ jsx38("div", { className: "flex-1", children: /* @__PURE__ */ jsx38("p", { children: item }) }),
-        /* @__PURE__ */ jsx38("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx38("p", { className: "underline", children: i18n_default.t("true") }) })
+        /* @__PURE__ */ jsx39("div", { className: "flex-1", children: /* @__PURE__ */ jsx39("p", { children: item }) }),
+        /* @__PURE__ */ jsx39("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx39("p", { className: "underline", children: i18n_default.t("true") }) })
       ] })),
       answerMap.falseList.map((item) => /* @__PURE__ */ jsxs28("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ jsx38("div", { className: "flex-1", children: /* @__PURE__ */ jsx38("p", { children: item }) }),
-        /* @__PURE__ */ jsx38("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx38("p", { className: "underline", children: i18n_default.t("false") }) })
+        /* @__PURE__ */ jsx39("div", { className: "flex-1", children: /* @__PURE__ */ jsx39("p", { children: item }) }),
+        /* @__PURE__ */ jsx39("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx39("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))
     ] })
   ] });
@@ -6266,7 +6231,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 
 // src/components/activities/TrueFalseActivityContent.tsx
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 var TrueFalseActivityContent = ({
   answer,
   data,
@@ -6317,16 +6282,16 @@ var TrueFalseActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs29("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ jsx40(
       ActivityBodyContent_default,
       {
         bodyMap: trueFalseBodyMap,
         templateType: "GROUPING"
       }
     ) }),
-    /* @__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"}`, children: /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx40(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"}`, children: /* @__PURE__ */ jsx40(
       TrueFalseActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6345,7 +6310,7 @@ var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
 // src/components/activities/solution-content/ActivitySolutionContent.tsx
 import { InlineMath as InlineMath10 } from "react-katex";
-import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -6375,8 +6340,8 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  return /* @__PURE__ */ jsx40("div", { className: "mx-2", children: /* @__PURE__ */ jsxs30("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ jsx40("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
+  return /* @__PURE__ */ jsx41("div", { className: "mx-2", children: /* @__PURE__ */ jsxs30("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ jsx41("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
     Object.keys(solutionMap).map((key) => {
       let currentItem;
       try {
@@ -6386,12 +6351,12 @@ var ActivitySolutionContent = ({
         return null;
       }
       const { value } = currentItem;
-      return /* @__PURE__ */ jsx40("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
-        (inputPart, partIndex) => /* @__PURE__ */ jsx40(
+      return /* @__PURE__ */ jsx41("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
+        (inputPart, partIndex) => /* @__PURE__ */ jsx41(
           "span",
           {
             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ jsx40("span", { className: "text-2xl", children: /* @__PURE__ */ jsx40(InlineMath10, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ jsx41("span", { className: "text-2xl", children: /* @__PURE__ */ jsx41(InlineMath10, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -6403,7 +6368,7 @@ var ActivitySolutionContent_default = ActivitySolutionContent;
 
 // src/components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent.tsx
 import { InlineMath as InlineMath11 } from "react-katex";
-import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -6432,21 +6397,21 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  return /* @__PURE__ */ jsx41("div", { className: "mx-2", children: /* @__PURE__ */ jsxs31("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ jsx41("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
+  return /* @__PURE__ */ jsx42("div", { className: "mx-2", children: /* @__PURE__ */ jsxs31("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ jsx42("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
     Object.keys(evaluationRubricMap).map((key, index) => {
       const currentItem = JSON.parse(evaluationRubricMap[key]);
       const { value } = currentItem;
-      return /* @__PURE__ */ jsx41("p", { className: "my-3", children: /* @__PURE__ */ jsx41(
+      return /* @__PURE__ */ jsx42("p", { className: "my-3", children: /* @__PURE__ */ jsx42(
         "span",
         {
           className: "text-xl whitespace-pre-wrap",
           children: constructInputWithSpecialExpressionList(value).map(
-            (inputPart, index2) => /* @__PURE__ */ jsx41(
+            (inputPart, index2) => /* @__PURE__ */ jsx42(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx41("span", { className: "text-2xl", children: /* @__PURE__ */ jsx41(InlineMath11, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-2xl", children: /* @__PURE__ */ jsx42(InlineMath11, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
@@ -6463,13 +6428,13 @@ var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 import { useEffect as useEffect13, useState as useState22 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ jsx42("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx43(
     "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`,
@@ -6483,7 +6448,7 @@ var SelectionBox = ({
           children: [
             option.icon,
             /* @__PURE__ */ jsxs32("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx42("p", { children: option.text }),
+              /* @__PURE__ */ jsx43("p", { children: option.text }),
               option.subText ? /* @__PURE__ */ jsxs32("p", { className: "text-md", children: [
                 "(",
                 option.subText,
@@ -6500,7 +6465,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
 var ActivityPreviewByData = ({
   data,
   showType,
@@ -6585,8 +6550,8 @@ var ActivityPreviewByData = ({
   const answer = constructAnswerBasedOnData(data);
   return /* @__PURE__ */ jsxs33("div", { children: [
     showType ? /* @__PURE__ */ jsxs33("div", { className: "mb-4", children: [
-      showDescription ? /* @__PURE__ */ jsx43("div", { className: "my-2", children: /* @__PURE__ */ jsx43("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-      /* @__PURE__ */ jsx43(
+      showDescription ? /* @__PURE__ */ jsx44("div", { className: "my-2", children: /* @__PURE__ */ jsx44("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+      /* @__PURE__ */ jsx44(
         SelectionBox_default,
         {
           optionList,
@@ -6597,7 +6562,7 @@ var ActivityPreviewByData = ({
         }
       )
     ] }) : null,
-    selectedType ? /* @__PURE__ */ jsx43("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ jsx43(
+    selectedType ? /* @__PURE__ */ jsx44("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ jsx44(
       OrderingActivityContent_default,
       {
         answer,
@@ -6611,7 +6576,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ jsx43(
+    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ jsx44(
       DropdownActivityContent_default,
       {
         answer,
@@ -6625,7 +6590,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ jsx43(
+    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ jsx44(
       MCSAActivityContent_default,
       {
         answer,
@@ -6639,7 +6604,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ jsx43(
+    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ jsx44(
       MCMAActivityContent_default,
       {
         answer,
@@ -6653,7 +6618,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ jsx43(
+    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ jsx44(
       MatchingActivityContent_default,
       {
         answer,
@@ -6667,7 +6632,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ jsx43(
+    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ jsx44(
       GroupingActivityContent_default,
       {
         answer,
@@ -6681,7 +6646,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ jsx43(
+    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ jsx44(
       FillInTheBlanksActivityContent_default,
       {
         answer,
@@ -6695,7 +6660,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ jsx43(
+    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ jsx44(
       OpenEndedActivityContent_default,
       {
         answer,
@@ -6705,7 +6670,7 @@ var ActivityPreviewByData = ({
         data,
         isFullScreen
       }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ jsx43(
+    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ jsx44(
       TrueFalseActivityContent_default,
       {
         answer,
@@ -6720,14 +6685,14 @@ var ActivityPreviewByData = ({
         isFullScreen
       }
     ) : null }, selectedType) : null,
-    selectedType && showSolution ? /* @__PURE__ */ jsx43("div", { className: "my-4", children: /* @__PURE__ */ jsx43(
+    selectedType && showSolution ? /* @__PURE__ */ jsx44("div", { className: "my-4", children: /* @__PURE__ */ jsx44(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx43("div", { className: "my-4", children: /* @__PURE__ */ jsx43(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx44("div", { className: "my-4", children: /* @__PURE__ */ jsx44(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -6740,7 +6705,7 @@ var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/activities/ActivityPreviewByAnswerData.tsx
 import { useEffect as useEffect14, useState as useState23 } from "react";
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 var ActivityPreviewByAnswerData = ({
   data,
   showType = true,
@@ -6867,28 +6832,28 @@ var ActivityPreviewByAnswerData = ({
     };
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsx44(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsx45(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsx44(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsx45(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsx44(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsx45(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsx44(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsx45(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsx44(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsx45(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsx44(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsx45(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsx44(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsx45(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ jsx44(
+        return data.openEndedBodyMap ? /* @__PURE__ */ jsx45(
           OpenEndedActivityContent_default,
           __spreadProps(__spreadValues({}, commonProps), {
             showMaterialContent: true
           })
         ) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsx44(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsx45(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
       default:
         return null;
     }
@@ -6896,8 +6861,8 @@ var ActivityPreviewByAnswerData = ({
   if (!data) return null;
   return /* @__PURE__ */ jsxs34("div", { children: [
     showType && optionList.length > 0 ? /* @__PURE__ */ jsxs34("div", { className: "mb-4", children: [
-      showDescription ? /* @__PURE__ */ jsx44("div", { className: "my-2", children: /* @__PURE__ */ jsx44("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-      /* @__PURE__ */ jsx44(
+      showDescription ? /* @__PURE__ */ jsx45("div", { className: "my-2", children: /* @__PURE__ */ jsx45("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+      /* @__PURE__ */ jsx45(
         SelectionBox_default,
         {
           optionList,
@@ -6908,19 +6873,19 @@ var ActivityPreviewByAnswerData = ({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsx44(DividerLine_default, {}),
+    /* @__PURE__ */ jsx45(DividerLine_default, {}),
     /* @__PURE__ */ jsxs34("div", { className: "flex flex-col my-2 w-full p-5", children: [
-      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ jsx44(ActivityEmptyContent_default, {}) : null,
-      selectedType ? /* @__PURE__ */ jsx44("div", { children: RenderSelectedActivityContent() }, selectedType) : null
+      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ jsx45(ActivityEmptyContent_default, {}) : null,
+      selectedType ? /* @__PURE__ */ jsx45("div", { children: RenderSelectedActivityContent() }, selectedType) : null
     ] }),
-    selectedType && showSolution ? /* @__PURE__ */ jsx44("div", { className: "my-4", children: /* @__PURE__ */ jsx44(
+    selectedType && showSolution ? /* @__PURE__ */ jsx45("div", { className: "my-4", children: /* @__PURE__ */ jsx45(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx44("div", { className: "my-4", children: /* @__PURE__ */ jsx44(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx45("div", { className: "my-4", children: /* @__PURE__ */ jsx45(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -6932,9 +6897,9 @@ var ActivityPreviewByAnswerData = ({
 var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -6944,7 +6909,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -6955,8 +6920,8 @@ var LeftTextRightInputGroup = ({
   errorText
 }) => {
   return /* @__PURE__ */ jsxs35("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ jsx46("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx46("p", { children: title }) }),
-    /* @__PURE__ */ jsx46("div", { className: "flex-1", children: /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx47("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx47("p", { children: title }) }),
+    /* @__PURE__ */ jsx47("div", { className: "flex-1", children: /* @__PURE__ */ jsx47(
       InputGroup_default,
       {
         type,
@@ -6972,14 +6937,14 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  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: `${selectedIdList.findIndex(
@@ -7001,7 +6966,7 @@ var SelectionCheckbox = ({
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx47(
+            /* @__PURE__ */ jsx48(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7011,7 +6976,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ jsx47("div", { className: "flex-1", children: /* @__PURE__ */ jsx47("p", { children: option.text }) })
+            /* @__PURE__ */ jsx48("div", { className: "flex-1", children: /* @__PURE__ */ jsx48("p", { children: option.text }) })
           ]
         }
       )
@@ -7022,7 +6987,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7032,7 +6997,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx48("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__ */ jsxs37(
+  return /* @__PURE__ */ jsx49("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__ */ jsxs37(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
@@ -7040,8 +7005,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ jsx48("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ jsx48("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ jsx49("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx49("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7050,20 +7015,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ jsx49("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__ */ jsx49(
+  return /* @__PURE__ */ jsx50("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__ */ jsx50(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ jsx49(
+      children: /* @__PURE__ */ jsx50(
         "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`,
@@ -7077,57 +7042,57 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  return /* @__PURE__ */ jsx50("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx50(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx50("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx51("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx51(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx51("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx51("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs39("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx51(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx51("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx52("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs39("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx52(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx52("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CoterieLabel.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx52("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx52("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx53("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx53("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx53("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx53("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx54("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx54("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx54("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs40("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx54(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx54("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx55("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs40("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx55(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx55("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-import { jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs41 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx55("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs41("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs41("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx56(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -7135,16 +7100,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx55("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx56("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx56("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx57(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7152,55 +7117,55 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx56("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx57("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx57("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx57("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx58("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx58("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx58, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs43 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
   return /* @__PURE__ */ jsxs43("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ jsx58(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ jsx58("div", { className: "flex-1", children: /* @__PURE__ */ jsx58("p", { className: "", children: value }) })
+    /* @__PURE__ */ jsx59(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx59("div", { className: "flex-1", children: /* @__PURE__ */ jsx59("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/texts/InputWithSpecialExpression.tsx
 import { InlineMath as InlineMath12 } from "react-katex";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx59("div", { className: "m-2", children: /* @__PURE__ */ jsx59("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx59(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx60("div", { className: "m-2", children: /* @__PURE__ */ jsx60("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx60(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx59("span", { className: "text-lg", children: /* @__PURE__ */ jsx59(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx60("span", { className: "text-lg", children: /* @__PURE__ */ jsx60(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ jsx59("div", { className: "m-2", children: /* @__PURE__ */ jsx59("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx59(
+  )) }) }) : null : /* @__PURE__ */ jsx60("div", { className: "m-2", children: /* @__PURE__ */ jsx60("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx60(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx59("span", { className: "text-lg", children: /* @__PURE__ */ jsx59(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx60("span", { className: "text-lg", children: /* @__PURE__ */ jsx60(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/titles/BaseTitle.tsx
-import { jsx as jsx60, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
 var BaseTitle = ({
   title,
   totalItemCount,
@@ -7216,15 +7181,15 @@ var BaseTitle = ({
         itemName
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ jsx60("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ jsx61("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/titles/SubTitle.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ jsx61("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ jsx62("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -9693,6 +9658,7 @@ export {
   DividerLine_default as DividerLine,
   DropdownActivityContent_default as DropdownActivityContent,
   FillInTheBlanksActivityContent_default as FillInTheBlanksActivityContent,
+  FullCard_default as FullCard,
   GradeLabel_default as GradeLabel,
   GroupingActivityContent_default as GroupingActivityContent,
   InfoWithText_default as InfoWithText,