npm - catchup-library-web - Versions diffs - 1.12.14 → 1.12.16 - Mend

catchup-library-web 1.12.14 → 1.12.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/index.d.mts +33 -1
package/dist/index.d.ts +33 -1
package/dist/index.js +818 -617
package/dist/index.mjs +803 -606
package/package.json +1 -1
package/src/components/bars/ProgressBar.tsx +85 -0
package/src/components/bars/ScoreBar.tsx +37 -0
package/src/components/bars/TimedProgressBar.tsx +58 -0
package/src/index.ts +4 -0
package/src/properties/BarProperties.ts +23 -0
package/src/utilization/DateUtilization.ts +45 -0

package/dist/index.mjs CHANGED Viewed

@@ -38,15 +38,164 @@ var __async = (__this, __arguments, generator) => {
   });
 };
+// src/components/bars/ProgressBar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ProgressBar = ({
+  title,
+  showRemainingTime,
+  totalTimeInSeconds,
+  remainingTimeInSeconds,
+  color,
+  borderColor,
+  height
+}) => {
+  const retrieveMinutes = () => {
+    return Math.floor(remainingTimeInSeconds / 60);
+  };
+  const retrieveSeconds = (minutes) => {
+    const minuteInSeconds = minutes * 60;
+    return Math.floor(remainingTimeInSeconds - minuteInSeconds);
+  };
+  const calculatePercentage = () => {
+    if (remainingTimeInSeconds < 0) {
+      return totalTimeInSeconds / totalTimeInSeconds * 100;
+    } else {
+      return (totalTimeInSeconds - remainingTimeInSeconds) / totalTimeInSeconds * 100;
+    }
+  };
+  const currentMinutes = retrieveMinutes();
+  const currentSeconds = retrieveSeconds(currentMinutes);
+  return /* @__PURE__ */ jsx("div", { className: "relative w-full ", children: /* @__PURE__ */ jsxs("div", { className: "", children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-6", children: /* @__PURE__ */ jsx("span", { className: "text-xl", children: title }) }) : null,
+    showRemainingTime ? /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-6", children: /* @__PURE__ */ jsxs("span", { className: "flex flex-row text-xl", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mx-1", children: [
+        currentMinutes < 0 ? `00` : currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes,
+        " "
+      ] }),
+      ":",
+      /* @__PURE__ */ jsxs("p", { className: "mx-1", children: [
+        currentSeconds < 0 ? `00` : currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds,
+        " "
+      ] })
+    ] }) }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${borderColor ? borderColor : "border-catchup-red"} border rounded-catchup-full`,
+        children: /* @__PURE__ */ jsx("div", { className: `w-full  ${height ? height : ""} `, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `rounded-catchup-full ${color ? color : "bg-catchup-red"} ${height ? height : "h-catchup-quicktivity"}`,
+            style: { width: `${calculatePercentage()}%` }
+          }
+        ) })
+      }
+    )
+  ] }) });
+};
+var ProgressBar_default = ProgressBar;
+// src/components/bars/TimedProgressBar.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TimedProgressBar = ({
+  title,
+  startTimer,
+  showRemainingTime,
+  totalTimeInSeconds,
+  remainingTimeInSeconds,
+  handleOnTimerEnds
+}) => {
+  const [timerRemainingTimeInSeconds, setTimerRemainingTimeInSeconds] = useState(remainingTimeInSeconds);
+  const [timerIntervalId, setTimerIntervalId] = useState(null);
+  let timerRemainingTimeInSecondsValue = 999999999999999;
+  useEffect(() => {
+    timerRemainingTimeInSecondsValue = remainingTimeInSeconds;
+    setTimerRemainingTimeInSeconds(timerRemainingTimeInSeconds);
+    if (timerIntervalId) {
+      clearInterval(timerIntervalId);
+    }
+    if (startTimer) {
+      const currentTimerIntervalId = setInterval(() => {
+        timerRemainingTimeInSecondsValue = timerRemainingTimeInSecondsValue - 0.05;
+        setTimerRemainingTimeInSeconds(timerRemainingTimeInSecondsValue);
+      }, 50);
+      setTimerIntervalId(currentTimerIntervalId);
+    } else {
+      if (timerIntervalId) {
+        clearInterval(timerIntervalId);
+        setTimerIntervalId(null);
+      }
+    }
+  }, [remainingTimeInSeconds, startTimer]);
+  useEffect(() => {
+    if (timerRemainingTimeInSeconds < 0) {
+      if (timerIntervalId) {
+        clearInterval(timerIntervalId);
+      }
+      handleOnTimerEnds(startTimer);
+    }
+  }, [timerRemainingTimeInSeconds]);
+  return /* @__PURE__ */ jsx2(
+    ProgressBar_default,
+    {
+      title,
+      showRemainingTime,
+      remainingTimeInSeconds: timerRemainingTimeInSeconds,
+      totalTimeInSeconds
+    }
+  );
+};
+var TimedProgressBar_default = TimedProgressBar;
+// src/components/bars/ScoreBar.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ScoreBar = ({ score, className }) => {
+  const getProgressBarColor = (score2) => {
+    if (score2 >= 70) return "bg-catchup-green";
+    if (score2 >= 30) return "bg-catchup-orange";
+    return "bg-catchup-red";
+  };
+  const getTextColor = (score2) => {
+    if (score2 >= 70) return "text-catchup-hover-green";
+    if (score2 >= 30) return "text-catchup-orange";
+    return "text-catchup-red";
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: `flex items-center gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex-1 h-5 bg-catchup-gray-100 rounded-catchup-full overflow-hidden", children: /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `h-full rounded-catchup-full transition-all duration-300 ${getProgressBarColor(
+          score
+        )}`,
+        style: { width: `${score}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2(
+      "span",
+      {
+        className: `min-w-[35px] font-semibold text-right ${getTextColor(
+          score
+        )}`,
+        children: [
+          score,
+          "%"
+        ]
+      }
+    )
+  ] });
+};
+var ScoreBar_default = ScoreBar;
 // src/components/buttons/PrimaryButton.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 // src/components/images/BaseImage.tsx
-import { useState, forwardRef } from "react";
+import { useState as useState2, forwardRef } from "react";
 // src/components/loading/BaseLoading.tsx
 import { Oval } from "react-loader-spinner";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var BaseLoading = ({
   height,
   width,
@@ -77,12 +226,12 @@ var BaseLoading = ({
     currentHeight = height;
     currentWidth = width;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: "flex justify-center items-center",
       style: { marginTop: currentMargin, marginBottom: currentMargin },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx4(
         Oval,
         {
           height: currentHeight,
@@ -103,7 +252,7 @@ var BaseLoading = ({
 var BaseLoading_default = BaseLoading;
 // src/components/images/BaseImage.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var BaseImage = forwardRef(
   (props, ref) => {
     const {
@@ -124,8 +273,8 @@ var BaseImage = forwardRef(
       dataToolTipHTML,
       borderRadius
     } = props;
-    const [key, setKey] = useState((/* @__PURE__ */ new Date()).getTime());
-    const [loading, setLoading] = useState(false);
+    const [key, setKey] = useState2((/* @__PURE__ */ new Date()).getTime());
+    const [loading, setLoading] = useState2(false);
     const handleOnClick = (e) => {
       e.preventDefault();
       if (showLoading) {
@@ -175,19 +324,19 @@ var BaseImage = forwardRef(
       currentWidthClassName = widthClassName;
       currentHeightClassName = heightClassName;
     }
-    return loading ? /* @__PURE__ */ jsx2(
+    return loading ? /* @__PURE__ */ jsx5(
       BaseLoading_default,
       {
         size: "small",
         primaryColor: "#57C2D3",
         secondaryColor: "#57C2D3"
       }
-    ) : /* @__PURE__ */ jsx2(
+    ) : /* @__PURE__ */ jsx5(
       "span",
       {
         className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer inline-block ${hidden ? "hidden" : ""}`,
         onClick: handleOnClick,
-        children: /* @__PURE__ */ jsx2(
+        children: /* @__PURE__ */ jsx5(
           "img",
           {
             ref,
@@ -211,7 +360,7 @@ BaseImage.displayName = "BaseImage";
 var BaseImage_default = BaseImage;
 // src/components/buttons/PrimaryButton.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var PrimaryButton = ({
   title,
   size,
@@ -221,7 +370,7 @@ var PrimaryButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = useState2(false);
+  const [loading, setLoading] = useState3(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -248,12 +397,12 @@ var PrimaryButton = ({
     currentLoadingSize = 14;
     currentHeightClassName = "h-8";
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx6(
     "button",
     {
       className: `border border-catchup-blue-500 bg-catchup-blue-500 text-catchup-white rounded-catchup-button ${loading ? "" : disabled ? "opacity-50" : "hover:bg-catchup-blue-700 active:bg-catchup-blue-500"} transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`,
       onClick: internalOnClick,
-      children: loading ? /* @__PURE__ */ jsx3(
+      children: loading ? /* @__PURE__ */ jsx6(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -261,8 +410,8 @@ var PrimaryButton = ({
           primaryColor: "#ffffff",
           secondaryColor: "#ffffff"
         }
-      ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
-        iconPosition === "left" ? /* @__PURE__ */ jsx3(
+      ) : /* @__PURE__ */ jsxs3("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx6(
           BaseImage_default,
           {
             src: "/icons/primary-button-arrow-left.webp",
@@ -270,8 +419,8 @@ var PrimaryButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ jsx3("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx3(
+        iconOnly ? null : /* @__PURE__ */ jsx6("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx6(
           BaseImage_default,
           {
             src: "/icons/primary-button-arrow-right.webp",
@@ -286,8 +435,8 @@ var PrimaryButton = ({
 var PrimaryButton_default = PrimaryButton;
 // src/components/buttons/SecondaryButton.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var SecondaryButton = ({
   title,
   size,
@@ -297,8 +446,8 @@ var SecondaryButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = useState3(false);
-  const [isHovered, setIsHovered] = useState3(false);
+  const [loading, setLoading] = useState4(false);
+  const [isHovered, setIsHovered] = useState4(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -325,7 +474,7 @@ var SecondaryButton = ({
     currentLoadingSize = 14;
     currentHeightClassName = "h-8";
   }
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       className: `border border-catchup-gray-400 bg-catchup-white text-catchup-gray-600 rounded-catchup-button ${loading ? "" : disabled ? "opacity-50" : "hover:bg-catchup-gray-400 hover:text-catchup-white hover:border-catchup-gray-400 active:bg-catchup-gray-500 active:border-catchup-gray-500 active:text-catchup-white"} transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`,
@@ -336,7 +485,7 @@ var SecondaryButton = ({
       onMouseLeave: () => {
         setIsHovered(false);
       },
-      children: loading ? /* @__PURE__ */ jsx4(
+      children: loading ? /* @__PURE__ */ jsx7(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -344,8 +493,8 @@ var SecondaryButton = ({
           primaryColor: "#55777f",
           secondaryColor: "#55777f"
         }
-      ) : /* @__PURE__ */ jsxs2("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
-        iconPosition === "left" ? /* @__PURE__ */ jsx4(
+      ) : /* @__PURE__ */ jsxs4("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx7(
           BaseImage_default,
           {
             src: "/icons/secondary-button-arrow-left.webp",
@@ -353,8 +502,8 @@ var SecondaryButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ jsx4("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx4(
+        iconOnly ? null : /* @__PURE__ */ jsx7("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx7(
           BaseImage_default,
           {
             src: "/icons/secondary-button-arrow-right.webp",
@@ -369,8 +518,8 @@ var SecondaryButton = ({
 var SecondaryButton_default = SecondaryButton;
 // src/components/buttons/CreateButton.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var CreateButton = ({
   title,
   size,
@@ -380,7 +529,7 @@ var CreateButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = useState4(false);
+  const [loading, setLoading] = useState5(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -407,12 +556,12 @@ var CreateButton = ({
     currentLoadingSize = 14;
     currentHeightClassName = "h-8";
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       className: `border border-catchup-blue-500 bg-catchup-blue-500 text-catchup-white rounded-catchup-button ${loading ? "" : disabled ? "opacity-50" : "hover:bg-catchup-blue-700 active:bg-catchup-blue-500"} transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`,
       onClick: internalOnClick,
-      children: loading ? /* @__PURE__ */ jsx5(
+      children: loading ? /* @__PURE__ */ jsx8(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -420,8 +569,8 @@ var CreateButton = ({
           primaryColor: "#ffffff",
           secondaryColor: "#ffffff"
         }
-      ) : /* @__PURE__ */ jsxs3("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
-        iconPosition === "left" ? /* @__PURE__ */ jsx5(
+      ) : /* @__PURE__ */ jsxs5("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx8(
           BaseImage_default,
           {
             src: "/icons/primary-button-create-white.webp",
@@ -429,8 +578,8 @@ var CreateButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ jsx5("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx5(
+        iconOnly ? null : /* @__PURE__ */ jsx8("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx8(
           BaseImage_default,
           {
             src: "/icons/primary-button-create-white.webp",
@@ -445,8 +594,8 @@ var CreateButton = ({
 var CreateButton_default = CreateButton;
 // src/components/buttons/DeleteButton.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var DeleteButton = ({
   title,
   size,
@@ -456,8 +605,8 @@ var DeleteButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = useState5(false);
-  const [isHovered, setIsHovered] = useState5(false);
+  const [loading, setLoading] = useState6(false);
+  const [isHovered, setIsHovered] = useState6(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -481,7 +630,7 @@ var DeleteButton = ({
     currentHeightClassName = "h-12";
     currentLoadingSize = 18;
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       className: `border border-catchup-red bg-catchup-white text-catchup-red rounded-catchup-button ${loading ? "" : disabled ? "opacity-50" : "hover:bg-catchup-red hover:text-catchup-white hover:border-catchup-red active:bg-catchup-red active:hover:border-catchup-red active:text-catchup-white active:opacity-80"} transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`,
@@ -492,7 +641,7 @@ var DeleteButton = ({
       onMouseLeave: () => {
         setIsHovered(false);
       },
-      children: loading ? /* @__PURE__ */ jsx6(
+      children: loading ? /* @__PURE__ */ jsx9(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -500,8 +649,8 @@ var DeleteButton = ({
           primaryColor: "#55777f",
           secondaryColor: "#55777f"
         }
-      ) : /* @__PURE__ */ jsxs4("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
-        iconPosition === "left" ? /* @__PURE__ */ jsx6(
+      ) : /* @__PURE__ */ jsxs6("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx9(
           BaseImage_default,
           {
             src: `${isHovered ? "/icons/remove-white.webp" : "/icons/remove-red.webp"}`,
@@ -509,8 +658,8 @@ var DeleteButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ jsx6("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx6(
+        iconOnly ? null : /* @__PURE__ */ jsx9("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx9(
           BaseImage_default,
           {
             src: `${isHovered ? "/icons/remove-white.webp" : "/icons/remove-red.webp"}`,
@@ -525,8 +674,8 @@ var DeleteButton = ({
 var DeleteButton_default = DeleteButton;
 // src/components/buttons/CancelButton.tsx
-import { useState as useState6 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var CancelButton = ({
   title,
   size,
@@ -536,8 +685,8 @@ var CancelButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = useState6(false);
-  const [isHovered, setIsHovered] = useState6(false);
+  const [loading, setLoading] = useState7(false);
+  const [isHovered, setIsHovered] = useState7(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -564,7 +713,7 @@ var CancelButton = ({
     currentLoadingSize = 14;
     currentHeightClassName = "h-8";
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       className: `border border-catchup-gray-400 bg-catchup-white text-catchup-gray-600 rounded-catchup-button ${loading ? "" : disabled ? "opacity-50" : "hover:bg-catchup-gray-400 hover:text-catchup-white hover:border-catchup-gray-400 active:bg-catchup-gray-500 active:border-catchup-gray-500 active:text-catchup-white"} transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`,
@@ -575,7 +724,7 @@ var CancelButton = ({
       onMouseLeave: () => {
         setIsHovered(false);
       },
-      children: loading ? /* @__PURE__ */ jsx7(
+      children: loading ? /* @__PURE__ */ jsx10(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -583,8 +732,8 @@ var CancelButton = ({
           primaryColor: "#55777f",
           secondaryColor: "#55777f"
         }
-      ) : /* @__PURE__ */ jsxs5("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
-        iconPosition === "left" ? /* @__PURE__ */ jsx7(
+      ) : /* @__PURE__ */ jsxs7("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx10(
           BaseImage_default,
           {
             src: `${isHovered ? "/icons/cancel-button-arrow-left-white.webp" : "/icons/cancel-button-arrow-left.webp"}`,
@@ -592,8 +741,8 @@ var CancelButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ jsx7("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx7(
+        iconOnly ? null : /* @__PURE__ */ jsx10("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx10(
           BaseImage_default,
           {
             src: `${isHovered ? "/icons/cancel-button-arrow-left-white.webp" : "/icons/cancel-button-arrow-left.webp"}`,
@@ -608,8 +757,8 @@ var CancelButton = ({
 var CancelButton_default = CancelButton;
 // src/components/buttons/ApproveButton.tsx
-import { useState as useState7 } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var ApproveButton = ({
   title,
   size,
@@ -619,7 +768,7 @@ var ApproveButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = useState7(false);
+  const [loading, setLoading] = useState8(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -646,12 +795,12 @@ var ApproveButton = ({
     currentLoadingSize = 14;
     currentHeightClassName = "h-8";
   }
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       className: `border border-catchup-green bg-catchup-green text-catchup-white rounded-catchup-button ${loading ? "" : disabled ? "opacity-50" : "hover:bg-catchup-hover-green active:bg-catchup-green"} transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`,
       onClick: internalOnClick,
-      children: loading ? /* @__PURE__ */ jsx8(
+      children: loading ? /* @__PURE__ */ jsx11(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -659,8 +808,8 @@ var ApproveButton = ({
           primaryColor: "#ffffff",
           secondaryColor: "#ffffff"
         }
-      ) : /* @__PURE__ */ jsxs6("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
-        iconPosition === "left" ? /* @__PURE__ */ jsx8(
+      ) : /* @__PURE__ */ jsxs8("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx11(
           BaseImage_default,
           {
             src: "/icons/primary-button-arrow-left.webp",
@@ -668,8 +817,8 @@ var ApproveButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ jsx8("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx8(
+        iconOnly ? null : /* @__PURE__ */ jsx11("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx11(
           BaseImage_default,
           {
             src: "/icons/primary-button-arrow-right.webp",
@@ -684,7 +833,7 @@ var ApproveButton = ({
 var ApproveButton_default = ApproveButton;
 // src/components/cards/FullCard.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var FullCard = ({
   bgColor,
   opacity,
@@ -692,11 +841,11 @@ var FullCard = ({
   usePadding,
   children
 }) => {
-  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsx12(
     "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(
+      children: /* @__PURE__ */ jsx12(
         "div",
         {
           className: `flex flex-col mx-auto ${usePadding === false ? "p-0" : "p-6"} h-full`,
@@ -709,7 +858,7 @@ var FullCard = ({
 var FullCard_default = FullCard;
 // src/components/loading/BaseLoadingWithText.tsx
-import { useEffect, useState as useState8 } from "react";
+import { useEffect as useEffect2, useState as useState9 } from "react";
 // src/language/i18n.ts
 import i18n from "i18next";
@@ -718,19 +867,19 @@ i18n.use(initReactI18next);
 var i18n_default = i18n;
 // src/components/loading/BaseLoadingWithText.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var BaseLoadingWithText = (props) => {
   const { height, width, size, primaryColor, secondaryColor, hideText } = props;
-  const [initialTimestamp, setInitialTimestamp] = useState8(
+  const [initialTimestamp, setInitialTimestamp] = useState9(
     (/* @__PURE__ */ new Date()).getTime()
   );
-  const [currentTimestamp, setCurrentTimeStamp] = useState8(
+  const [currentTimestamp, setCurrentTimeStamp] = useState9(
     (/* @__PURE__ */ new Date()).getTime()
   );
   let timerId;
   let textClassName;
   let textWidth;
-  useEffect(() => {
+  useEffect2(() => {
     timerId = setInterval(() => {
       setCurrentTimeStamp((/* @__PURE__ */ new Date()).getTime());
     }, 1e3);
@@ -766,8 +915,8 @@ var BaseLoadingWithText = (props) => {
     textWidth = 250;
   }
   const loadingText = retrieveLoadingText();
-  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ jsx13(
       BaseLoading_default,
       {
         height,
@@ -777,12 +926,12 @@ var BaseLoadingWithText = (props) => {
         secondaryColor
       }
     ),
-    !hideText && size !== "small" ? /* @__PURE__ */ jsx10(
+    !hideText && size !== "small" ? /* @__PURE__ */ jsx13(
       "div",
       {
         className: `${textClassName} text-center`,
         style: { width: textWidth },
-        children: /* @__PURE__ */ jsx10("p", { className: "font-bold", children: loadingText })
+        children: /* @__PURE__ */ jsx13("p", { className: "font-bold", children: loadingText })
       }
     ) : null
   ] });
@@ -791,7 +940,7 @@ var BaseLoadingWithText_default = BaseLoadingWithText;
 // src/components/modals/BaseModal.tsx
 import Modal from "react-modal";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var BaseModal = ({
   isOpen,
   size,
@@ -800,7 +949,7 @@ var BaseModal = ({
   customSize,
   children
 }) => {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     Modal,
     {
       isOpen,
@@ -828,7 +977,7 @@ var BaseModal = ({
         }
       },
       contentLabel: "",
-      children: customSize ? /* @__PURE__ */ jsx11("div", { className: `${customSize} font-quicksand`, children }) : /* @__PURE__ */ jsx11(
+      children: customSize ? /* @__PURE__ */ jsx14("div", { className: `${customSize} font-quicksand`, children }) : /* @__PURE__ */ jsx14(
         "div",
         {
           className: `font-quicksand ${size === "small" ? "w-[600px]" : size === "medium" ? "w-[900px]" : "w-[600px] lg:w-[900px] xl:w-[1200px] 2xl:w-[1500px]"}`,
@@ -841,14 +990,14 @@ var BaseModal = ({
 var BaseModal_default = BaseModal;
 // src/components/activities/empty-content/ActivityEmptyContent.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var ActivityEmptyContent = () => {
-  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") }) }) });
+  return /* @__PURE__ */ jsx15("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__ */ jsx15("div", { className: "", children: /* @__PURE__ */ jsx15("p", { className: "text-catchup-white text-xl", children: i18n_default.t("you_have_set_this_activity_as_empty") }) }) });
 };
 var ActivityEmptyContent_default = ActivityEmptyContent;
 // src/components/activities/body-content/ShowBodyMediaByContentType.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import Modal2 from "react-modal";
 // src/utilization/CatchtivityUtilization.ts
@@ -2917,15 +3066,15 @@ var constructActivityItemListSolutionOnly = (solutionMap) => {
 // src/components/activities/body-content/ShowBodyMediaByContentType.tsx
 import { InlineMath } from "react-katex";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var ShowBodyMediaByContentType = ({
   index,
   type,
   value,
   size
 }) => {
-  const [showFullScreen, setShowFullScreen] = useState9(false);
-  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState9("");
+  const [showFullScreen, setShowFullScreen] = useState10(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState10("");
   const convertToPercentage = (size2) => {
     switch (size2) {
       case "1/3":
@@ -2939,11 +3088,11 @@ var ShowBodyMediaByContentType = ({
     }
   };
   const renderSpecialExpressions = (inputPart, partIndex, parentKey) => {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx16(
       "span",
       {
         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ jsx13("span", { className: "text-2xl", children: /* @__PURE__ */ jsx13(InlineMath, { math: inputPart.value }) }) : inputPart.value
+        children: inputPart.isEquation ? /* @__PURE__ */ jsx16("span", { className: "text-2xl", children: /* @__PURE__ */ jsx16(InlineMath, { math: inputPart.value }) }) : inputPart.value
       },
       `${parentKey}-expr-${partIndex}`
     );
@@ -2963,7 +3112,7 @@ var ShowBodyMediaByContentType = ({
   };
   const renderTextContent = (text, itemKey) => {
     const balancedText = balanceSpecialChars(text);
-    return /* @__PURE__ */ jsx13("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(balancedText).map(
+    return /* @__PURE__ */ jsx16("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(balancedText).map(
       (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
     ) }, itemKey);
   };
@@ -2996,7 +3145,7 @@ var ShowBodyMediaByContentType = ({
         currentIndex++;
         const itemKey = `text-inside-${index}-${currentIndex}`;
         valuePartList.push(
-          /* @__PURE__ */ jsx13("span", { className: "text-xl font-bold whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+          /* @__PURE__ */ jsx16("span", { className: "text-xl font-bold whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(textInsideTag).map(
             (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
           ) }, itemKey)
         );
@@ -3016,7 +3165,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx16(
               "p",
               {
                 className: "text-xl",
@@ -3035,12 +3184,12 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsxs10(
             "div",
             {
               className: "relative w-[200px]",
               children: [
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx16(
                   BaseImage_default,
                   {
                     src: imageSource,
@@ -3049,12 +3198,12 @@ var ShowBodyMediaByContentType = ({
                     className: "rounded-catchup-xlarge"
                   }
                 ),
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx16(
                   "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__ */ jsx13(
+                    children: /* @__PURE__ */ jsx16(
                       BaseImage_default,
                       {
                         src: "/icons/arrow-up.webp",
@@ -3083,7 +3232,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx16(
               "p",
               {
                 className: "text-xl",
@@ -3102,7 +3251,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx16(
             "video",
             {
               src: videoSource,
@@ -3125,7 +3274,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx16(
               "p",
               {
                 className: "text-xl",
@@ -3144,7 +3293,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx16(
             "audio",
             {
               src: audioSource,
@@ -3170,13 +3319,13 @@ var ShowBodyMediaByContentType = ({
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
         valuePartList.push(
-          /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsxs10(
             "div",
             {
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
               children: [
-                /* @__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 })
+                /* @__PURE__ */ jsx16("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx16("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+                /* @__PURE__ */ jsx16("span", { className: "text-xl whitespace-pre-wrap", children: imageText })
               ]
             },
             `img-desc-${index}-${currentIndex}`
@@ -3190,7 +3339,7 @@ var ShowBodyMediaByContentType = ({
     return valuePartList;
   };
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx16(
       Modal2,
       {
         isOpen: showFullScreen,
@@ -3219,8 +3368,8 @@ var ShowBodyMediaByContentType = ({
           }
         },
         contentLabel: "Image Fullscreen View",
-        children: /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ jsx13("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsxs10("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ jsx16("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx16(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -3232,7 +3381,7 @@ var ShowBodyMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx16(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -3248,16 +3397,16 @@ var ShowBodyMediaByContentType = ({
   const RenderMainContent = () => {
     switch (type) {
       case "TEXT":
-        return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: retrieveValueParts(value) });
+        return /* @__PURE__ */ jsx16("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: retrieveValueParts(value) });
       case "IMAGE":
-        return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs8(
+        return /* @__PURE__ */ jsx16("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs10(
           "div",
           {
             className: `${convertToPercentage(
               size || ""
             )} rounded-catchup-xlarge relative`,
             children: [
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx16(
                 BaseImage_default,
                 {
                   src: value,
@@ -3266,12 +3415,12 @@ var ShowBodyMediaByContentType = ({
                   className: "w-full rounded-catchup-xlarge"
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx16(
                 "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__ */ jsx13(
+                  children: /* @__PURE__ */ jsx16(
                     BaseImage_default,
                     {
                       src: "/icons/arrow-up.webp",
@@ -3286,7 +3435,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "VIDEO":
-        return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx13(
+        return /* @__PURE__ */ jsx16("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx16(
           "video",
           {
             src: value,
@@ -3297,12 +3446,12 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "AUDIO":
-        return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx13("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+        return /* @__PURE__ */ jsx16("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx16("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "w-full", children: [
     RenderShowFullScreenItem(),
     RenderMainContent()
   ] }, `body-content-${index}`);
@@ -3310,7 +3459,7 @@ var ShowBodyMediaByContentType = ({
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 // src/components/activities/body-content/ActivityBodyContent.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var ActivityBodyContent = ({
   templateType,
   bodyMap,
@@ -3391,7 +3540,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ jsx14("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx17(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -3405,16 +3554,16 @@ var ActivityBodyContent = ({
 var ActivityBodyContent_default = ActivityBodyContent;
 // src/components/dividers/DividerLine.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var DividerLine = () => {
-  return /* @__PURE__ */ jsx15("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
+  return /* @__PURE__ */ jsx18("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
 };
 var DividerLine_default = DividerLine;
 // src/components/dividers/VerticalDividerLine.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var VerticalDividerLine = () => {
-  return /* @__PURE__ */ jsx16("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
+  return /* @__PURE__ */ jsx19("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
 };
 var VerticalDividerLine_default = VerticalDividerLine;
@@ -3423,8 +3572,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, useCallback } from "react";
-import { Fragment, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef, useState as useState11, useCallback } from "react";
+import { Fragment, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var InputGroup = ({
   type,
   title,
@@ -3447,10 +3596,10 @@ var InputGroup = ({
 }) => {
   const textAreaRef = useRef(null);
   const latexTextAreaRef = useRef(null);
-  const [showMathConstructor, setShowMathConstructor] = useState10(false);
-  const [mathValue, setMathValue] = useState10("");
+  const [showMathConstructor, setShowMathConstructor] = useState11(false);
+  const [mathValue, setMathValue] = useState11("");
   const mathFieldRef = useRef(null);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
     if (value) {
@@ -3459,7 +3608,7 @@ var InputGroup = ({
       textAreaRef.current.style.height = `44px`;
     }
   }, [textAreaRef, value]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!latexTextAreaRef) return;
     if (!latexTextAreaRef.current) return;
     if (value) {
@@ -3468,7 +3617,7 @@ var InputGroup = ({
       latexTextAreaRef.current.style.height = `44px`;
     }
   }, [latexTextAreaRef, value]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!useMath) return;
     import("mathlive").then(({ MathfieldElement }) => {
       if (!customElements.get("math-field")) {
@@ -3526,7 +3675,7 @@ var InputGroup = ({
     setShowMathConstructor(true);
   };
   const MathConstructorModal = () => {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx20(
       BaseModal_default,
       {
         isOpen: showMathConstructor,
@@ -3536,10 +3685,10 @@ var InputGroup = ({
           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(
+        children: /* @__PURE__ */ jsx20(FullCard_default, { children: /* @__PURE__ */ jsx20("div", { className: "bg-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs11("div", { className: "p-6 space-y-6", children: [
+          /* @__PURE__ */ jsxs11("div", { children: [
+            /* @__PURE__ */ jsx20("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("math_editor") }),
+            /* @__PURE__ */ jsx20("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ jsx20(
               "math-field",
               {
                 ref: mathFieldRef,
@@ -3566,10 +3715,10 @@ var InputGroup = ({
               }
             ) })
           ] }),
-          /* @__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(
+          /* @__PURE__ */ jsxs11("div", { children: [
+            /* @__PURE__ */ jsx20("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
+            /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx20(
                 "textarea",
                 {
                   ref: latexTextAreaRef,
@@ -3579,7 +3728,7 @@ var InputGroup = ({
                   placeholder: i18n_default.t("latex_will_appear_here")
                 }
               ),
-              /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx20(
                 "button",
                 {
                   onClick: handleCopyLatex,
@@ -3595,13 +3744,13 @@ var InputGroup = ({
     );
   };
   const CheckboxInputGroup = () => {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: "flex flex-row items-center gap-x-1 cursor-pointer",
         onClick,
         children: [
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx20(
             BaseImage_default,
             {
               src: value ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -3611,15 +3760,15 @@ var InputGroup = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx17("p", { className: "", children: title })
+          /* @__PURE__ */ jsx20("p", { className: "", children: title })
         ]
       }
     );
   };
   const FileInputGroup = () => {
-    return /* @__PURE__ */ jsxs9("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsxs11("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ jsx20("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx20(
         "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",
@@ -3636,9 +3785,9 @@ var InputGroup = ({
     ] });
   };
   const DateInputGroup = () => {
-    return /* @__PURE__ */ jsxs9("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsxs11("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ jsx20("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx20(
         "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`,
@@ -3653,9 +3802,9 @@ var InputGroup = ({
     ] });
   };
   const SearchableSelectInputGroup = () => {
-    return /* @__PURE__ */ jsxs9("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
-      /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsxs11("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ jsx20("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
+      /* @__PURE__ */ jsx20(
         Select,
         {
           options: convertOptionListToSelectComponent(
@@ -3718,16 +3867,16 @@ 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__ */ 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: [
+    return /* @__PURE__ */ jsxs11("div", { className: "my-1 flex-1 flex flex-col relative", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsx20("div", { children: title ? /* @__PURE__ */ jsx20("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ jsx20("div", { children: value && limit ? /* @__PURE__ */ jsxs11("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
         ] }) : null })
       ] }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx20(
         "textarea",
         {
           ref: textAreaRef,
@@ -3740,22 +3889,22 @@ var InputGroup = ({
           onKeyDown
         }
       ),
-      useMath && /* @__PURE__ */ jsx17(
+      useMath && /* @__PURE__ */ jsx20(
         "button",
         {
           className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200 z-10",
           onClick: handleOpenMathConstructor,
           type: "button",
-          children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
-            /* @__PURE__ */ jsx17(
+          children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ jsx20(
               "svg",
               {
                 className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx17(
+                children: /* @__PURE__ */ jsx20(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3772,13 +3921,13 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
-    return /* @__PURE__ */ jsxs9("div", { className: "my-1 relative", children: [
-      title ? /* @__PURE__ */ jsx17("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsxs11("div", { className: "my-1 relative", children: [
+      title ? /* @__PURE__ */ jsx20("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsx20(
         "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: /* @__PURE__ */ jsx17(
+          children: /* @__PURE__ */ jsx20(
             "input",
             {
               disabled,
@@ -3794,22 +3943,22 @@ var InputGroup = ({
           )
         }
       ),
-      useMath && /* @__PURE__ */ jsx17(
+      useMath && /* @__PURE__ */ jsx20(
         "button",
         {
           className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200",
           onClick: handleOpenMathConstructor,
           type: "button",
-          children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
-            /* @__PURE__ */ jsx17(
+          children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ jsx20(
               "svg",
               {
                 className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx17(
+                children: /* @__PURE__ */ jsx20(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3842,16 +3991,16 @@ var InputGroup = ({
       return CheckboxInputGroup();
     }
   };
-  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment, { children: [
     RenderMainContent(),
-    /* @__PURE__ */ jsx17(MathConstructorModal, {})
+    /* @__PURE__ */ jsx20(MathConstructorModal, {})
   ] });
 };
 var InputGroup_default = InputGroup;
 // src/components/activities/material-content/DropdownActivityMaterialContent.tsx
-import { useEffect as useEffect4 } from "react";
-import { useState as useState13 } from "react";
+import { useEffect as useEffect5 } from "react";
+import { useState as useState14 } from "react";
 // src/utilization/AppUtilization.ts
 var colors = [
@@ -3951,11 +4100,11 @@ var getColorByIndex = (index) => {
 };
 // src/components/dropdowns/MediaDropdown.tsx
-import { useState as useState11 } from "react";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useState as useState12 } from "react";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var MediaDropdown = ({ id, answer, optionList }) => {
-  const [showDropdown, setShowDropdown] = useState11(false);
-  return /* @__PURE__ */ jsxs10(
+  const [showDropdown, setShowDropdown] = useState12(false);
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: "w-full relative",
@@ -3966,17 +4115,17 @@ var MediaDropdown = ({ id, answer, optionList }) => {
         setShowDropdown(false);
       },
       children: [
-        /* @__PURE__ */ jsx18("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx21("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
+        /* @__PURE__ */ jsx21(
           "ul",
           {
             className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
-            children: optionList.map((option, index) => /* @__PURE__ */ jsxs10(
+            children: optionList.map((option, index) => /* @__PURE__ */ jsxs12(
               "li",
               {
                 className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
                 children: [
-                  /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsx21(
                     "div",
                     {
                       className: `w-full flex flex-col my-2 ${option.divClassNames ? option.divClassNames : ""}`,
@@ -3984,7 +4133,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
                       children: option.media
                     }
                   ),
-                  index !== optionList.length - 1 ? /* @__PURE__ */ jsx18("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
+                  index !== optionList.length - 1 ? /* @__PURE__ */ jsx21("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
                 ]
               },
               option.id
@@ -3999,24 +4148,24 @@ var MediaDropdown = ({ id, answer, optionList }) => {
 var MediaDropdown_default = MediaDropdown;
 // src/components/activities/material-content/ShowMaterialMediaByContentType.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState12 } from "react";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState13 } from "react";
 import Modal3 from "react-modal";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var ShowMaterialMediaByContentType = ({
   key,
   contentType,
   src,
   canFullScreen
 }) => {
-  const [showFullScreen, setShowFullScreen] = useState12(false);
-  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState12(null);
-  const [isLoaded, setIsLoaded] = useState12(false);
-  const [isFullHeight, setIsFullHeight] = useState12(false);
+  const [showFullScreen, setShowFullScreen] = useState13(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState13(null);
+  const [isLoaded, setIsLoaded] = useState13(false);
+  const [isFullHeight, setIsFullHeight] = useState13(false);
   const imageRef = useRef2(null);
-  useEffect3(() => {
+  useEffect4(() => {
     setIsLoaded(false);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isLoaded) return;
     if (!imageRef) return;
     if (!imageRef.current) return;
@@ -4029,7 +4178,7 @@ var ShowMaterialMediaByContentType = ({
     }
   }, [isLoaded, key]);
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx22(
       Modal3,
       {
         isOpen: showFullScreen,
@@ -4060,8 +4209,8 @@ var ShowMaterialMediaByContentType = ({
           }
         },
         contentLabel: "",
-        children: /* @__PURE__ */ jsxs11("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ jsx19("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsxs13("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ jsx22("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx22(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -4073,7 +4222,7 @@ var ShowMaterialMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx22(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -4086,14 +4235,14 @@ var ShowMaterialMediaByContentType = ({
       }
     );
   };
-  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs11("div", { children: [
+  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs13("div", { children: [
     RenderShowFullScreenItem(),
-    /* @__PURE__ */ jsx19("div", { className: "my-2", children: /* @__PURE__ */ jsx19("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsx22("div", { className: "my-2", children: /* @__PURE__ */ jsx22("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsxs13(
       "div",
       {
         className: `${isFullHeight ? "h-catchup-activity-box-item" : "max-w-catchup-activity-box-item"}  flex flex-col justify-center items-center relative`,
         children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx22(
             BaseImage_default,
             {
               src,
@@ -4106,7 +4255,7 @@ var ShowMaterialMediaByContentType = ({
               }
             }
           ),
-          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx19(
+          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx22(
             "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",
@@ -4118,7 +4267,7 @@ var ShowMaterialMediaByContentType = ({
                 setShowFullScreen(true);
                 setSelectedFullScreenItem(src);
               },
-              children: /* @__PURE__ */ jsx19(
+              children: /* @__PURE__ */ jsx22(
                 BaseImage_default,
                 {
                   src: "/icons/arrow-up.webp",
@@ -4132,7 +4281,7 @@ var ShowMaterialMediaByContentType = ({
         ]
       }
     ) }) })
-  ] }, 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(
+  ] }, key) : contentType === "VIDEO" ? /* @__PURE__ */ jsx22("div", { className: "my-2", children: /* @__PURE__ */ jsx22("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx22("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx22(
     "video",
     {
       className: "h-catchup-activity-box-item rounded-catchup-xlarge",
@@ -4141,7 +4290,7 @@ var ShowMaterialMediaByContentType = ({
       onClick: () => {
       }
     }
-  ) }) }) }) : 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(
+  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx22("div", { className: "my-2", children: /* @__PURE__ */ jsx22("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx22("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx22(
     "audio",
     {
       className: "h-catchup-activity-box-item rounded-catchup-xlarge",
@@ -4155,7 +4304,7 @@ var ShowMaterialMediaByContentType = ({
 var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
 // src/components/activities/material-content/DropdownActivityMaterialContent.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var DropdownActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4166,8 +4315,8 @@ var DropdownActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [updated, setUpdated] = useState13(false);
-  useEffect4(() => {
+  const [updated, setUpdated] = useState14(false);
+  useEffect5(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "DROPDOWN"
@@ -4180,7 +4329,7 @@ var DropdownActivityMaterialContent = ({
     onChange(answer, 0, Object.keys(materialMap[0])[0]);
     setUpdated(true);
   }, [showCorrectAnswer]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!updated) return;
     setUpdated(false);
   }, [updated]);
@@ -4198,22 +4347,22 @@ var DropdownActivityMaterialContent = ({
     return "INCORRECT";
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-row flex-wrap items-center", children: [
-    /* @__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) => {
+  return /* @__PURE__ */ jsxs14("div", { className: "flex flex-row flex-wrap items-center", 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_dropdown_text") }) }),
+    /* @__PURE__ */ jsx23("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx23(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx23("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__ */ 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: [
+      return /* @__PURE__ */ jsx23("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx23("div", { className: "mx-2", children: /* @__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: [
           parseFloat(materialKey) + 1,
           "."
         ] }) }),
-        /* @__PURE__ */ jsxs12("div", { className: "w-full relative", children: [
-          /* @__PURE__ */ jsx20("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx20("div", { className: "flex-1", children: /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs14("div", { className: "w-full relative", children: [
+          /* @__PURE__ */ jsx23("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx23("div", { className: "flex-1", children: /* @__PURE__ */ jsx23(
             InputGroup_default,
             {
               type: "select",
@@ -4221,13 +4370,13 @@ var DropdownActivityMaterialContent = ({
               optionList: shuffleArray(
                 materialMap[materialKey][answerKey]
               ).map((materialOption) => ({
-                text: /* @__PURE__ */ jsx20("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                text: /* @__PURE__ */ jsx23("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialOption
-                ).map((inputPart, index2) => /* @__PURE__ */ jsx20(
+                ).map((inputPart, index2) => /* @__PURE__ */ jsx23(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx20("span", { className: "text-2xl", children: /* @__PURE__ */ jsx20(
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx23("span", { className: "text-2xl", children: /* @__PURE__ */ jsx23(
                       InlineMath2,
                       {
                         math: inputPart.value
@@ -4242,11 +4391,11 @@ var DropdownActivityMaterialContent = ({
                 onChange(answer, materialKey, e.target.value);
               }
             }
-          ) }) : /* @__PURE__ */ jsx20(
+          ) }) : /* @__PURE__ */ jsx23(
             MediaDropdown_default,
             {
               id: materialKey,
-              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(
+              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx23("div", { className: "w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed 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_select") }) }) }) : /* @__PURE__ */ jsx23(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4258,7 +4407,7 @@ var DropdownActivityMaterialContent = ({
               optionList: materialMap[materialKey][answerKey].map(
                 (materialOption, index2) => ({
                   id: index2,
-                  media: /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(
+                  media: /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsx23(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -4277,24 +4426,24 @@ var DropdownActivityMaterialContent = ({
                 })
               )
             }
-          ) : /* @__PURE__ */ jsx20("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+          ) : /* @__PURE__ */ jsx23("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
             answerMap[materialKey]
-          ).map((inputPart, index2) => /* @__PURE__ */ jsx20(
+          ).map((inputPart, index2) => /* @__PURE__ */ jsx23(
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ jsx20("span", { className: "text-2xl", children: /* @__PURE__ */ jsx20(InlineMath2, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx23("span", { className: "text-2xl", children: /* @__PURE__ */ jsx23(InlineMath2, { math: inputPart.value }) }) : inputPart.value
             },
             index2
           )) }) }),
-          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx20("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx20(
+          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx23("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx23(
             BaseImage_default,
             {
               src: "/icons/checkbox.webp",
               alt: "chekbbox",
               size: "small"
             }
-          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx20("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx20(
+          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx23("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx23(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -4310,8 +4459,8 @@ var DropdownActivityMaterialContent = ({
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 // src/components/activities/DropdownActivityContent.tsx
-import { useState as useState14, useEffect as useEffect5 } from "react";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState15, useEffect as useEffect6 } from "react";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var DropdownActivityContent = ({
   answer,
   data,
@@ -4324,7 +4473,7 @@ var DropdownActivityContent = ({
   const contentMap = parseContentMapFromData(data);
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
-  const [currentAnswerMap, setCurrentAnswerMap] = useState14(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = useState15(() => {
     return retrieveCurrentAnswerMap();
   });
   function retrieveCurrentAnswerMap() {
@@ -4333,7 +4482,7 @@ var DropdownActivityContent = ({
     );
     return answer.data[foundIndex].answerMap;
   }
-  useEffect5(() => {
+  useEffect6(() => {
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
   const handleDropdownAnswerOnChange = (answerObj, key, value) => {
@@ -4353,8 +4502,8 @@ var DropdownActivityContent = ({
     setCurrentAnswerMap(newAnswerMap);
     changeAnswer(newAnswer);
   };
-  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx21("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx21(
+  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(
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
@@ -4363,9 +4512,9 @@ var DropdownActivityContent = ({
         templateType: "DROPDOWN"
       }
     ) }),
-    /* @__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(
+    /* @__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(
       DropdownActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -4384,13 +4533,13 @@ var DropdownActivityContent_default = DropdownActivityContent;
 // src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
 import { InlineMath as InlineMath3 } from "react-katex";
-import { useState as useState15 } from "react";
-import { useEffect as useEffect6 } from "react";
+import { useState as useState16 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { useDrop as useDrop2 } from "react-dnd";
 // src/components/dnds/DraggableItem.tsx
 import { useDrag } from "react-dnd";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var DraggableItem = ({
   key,
   item,
@@ -4412,11 +4561,11 @@ var DraggableItem = ({
     })
   });
   const opacity = isDragging ? 0.4 : 1;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: `${isDragging ? "w-[0px] opacity-0" : "opacity-100"} transition-all duration-500`,
-      children: /* @__PURE__ */ jsx22("div", { ref: drag, className: "", style: { opacity }, children: component })
+      children: /* @__PURE__ */ jsx25("div", { ref: drag, className: "", style: { opacity }, children: component })
     },
     key
   );
@@ -4426,7 +4575,7 @@ var DraggableItem_default = DraggableItem;
 // src/components/dnds/DroppableItem.tsx
 import { useRef as useRef3 } from "react";
 import { useDrop } from "react-dnd";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var DroppableItem = ({
   key,
   item,
@@ -4446,7 +4595,7 @@ var DroppableItem = ({
     }
   });
   dropRef(drop(ref));
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: `w-full transition-all duration-500 h-full`,
@@ -4459,7 +4608,7 @@ var DroppableItem = ({
 var DroppableItem_default = DroppableItem;
 // src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4471,9 +4620,9 @@ var FillInTheBlanksActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = useState15([]);
-  const [selectedOption, setSelectedOption] = useState15(null);
-  const [pasteOptionIndex, setPasteOptionIndex] = useState15(null);
+  const [shuffleOptionList, setShuffleOptionList] = useState16([]);
+  const [selectedOption, setSelectedOption] = useState16(null);
+  const [pasteOptionIndex, setPasteOptionIndex] = useState16(null);
   const [{ isOver, canDrop }, drop] = useDrop2({
     accept: "FILL_IN_THE_BLANKS",
     drop: () => {
@@ -4483,10 +4632,10 @@ var FillInTheBlanksActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  useEffect6(() => {
+  useEffect7(() => {
     setShuffleOptionList(shuffleArray(optionList));
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
@@ -4518,12 +4667,12 @@ var FillInTheBlanksActivityMaterialContent = ({
     return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsxs14("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
+  return /* @__PURE__ */ jsxs16("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
   }, children: [
-    /* @__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(
+    /* @__PURE__ */ jsx27("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx27("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+    /* @__PURE__ */ jsx27("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx27(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx27("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__ */ jsx27("div", { className: "opacity-30", children: /* @__PURE__ */ jsx27(
         ShowMaterialMediaByContentType_default,
         {
           contentType: contentMap.type,
@@ -4531,12 +4680,12 @@ var FillInTheBlanksActivityMaterialContent = ({
           canFullScreen: true
         },
         `${uniqueValue}-${index}`
-      ) }, index) : /* @__PURE__ */ jsx24(
+      ) }, index) : /* @__PURE__ */ jsx27(
         DraggableItem_default,
         {
           item: { index: option },
           type: "FILL_IN_THE_BLANKS",
-          component: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx24(
+          component: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx27(
             "div",
             {
               className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
@@ -4544,9 +4693,9 @@ var FillInTheBlanksActivityMaterialContent = ({
                 setSelectedOption(option);
                 setPasteOptionIndex(null);
               },
-              children: /* @__PURE__ */ jsx24("p", { className: "italic whitespace-pre-wrap", children: option })
+              children: /* @__PURE__ */ jsx27("p", { className: "italic whitespace-pre-wrap", children: option })
             }
-          ) : /* @__PURE__ */ jsx24(
+          ) : /* @__PURE__ */ jsx27(
             "div",
             {
               className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
@@ -4554,7 +4703,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                 setSelectedOption(option);
                 setPasteOptionIndex(null);
               },
-              children: /* @__PURE__ */ jsx24(
+              children: /* @__PURE__ */ jsx27(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4572,12 +4721,12 @@ var FillInTheBlanksActivityMaterialContent = ({
         index
       )
     ) }),
-    /* @__PURE__ */ jsx24("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+    /* @__PURE__ */ jsx27("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__ */ jsx24("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx24("div", { className: "mx-2", children: /* @__PURE__ */ jsx24(
+      return /* @__PURE__ */ jsx27("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx27("div", { className: "mx-2", children: /* @__PURE__ */ jsx27(
         DroppableItem_default,
         {
           item: { index },
@@ -4585,13 +4734,13 @@ var FillInTheBlanksActivityMaterialContent = ({
           target: pasteOptionIndex,
           setTarget: setPasteOptionIndex,
           dropRef: drop,
-          component: /* @__PURE__ */ jsxs14("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-            /* @__PURE__ */ jsx24("div", { className: "my-auto", children: /* @__PURE__ */ jsxs14("p", { className: "text-xl", children: [
+          component: /* @__PURE__ */ jsxs16("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+            /* @__PURE__ */ jsx27("div", { className: "my-auto", children: /* @__PURE__ */ jsxs16("p", { className: "text-xl", children: [
               parseFloat(materialKey) + 1,
               "."
             ] }) }),
-            /* @__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(
+            /* @__PURE__ */ jsx27("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx27("div", { className: "flex-1", children: /* @__PURE__ */ jsx27(
                 InputGroup_default,
                 {
                   type: "textarea",
@@ -4606,14 +4755,14 @@ var FillInTheBlanksActivityMaterialContent = ({
                   }
                 }
               ) }),
-              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx24("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx24(
+              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx27("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx27(
                 BaseImage_default,
                 {
                   src: "/icons/checkbox.webp",
                   alt: "checkbox",
                   size: "small"
                 }
-              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx24("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx24(
+              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx27("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx27(
                 BaseImage_default,
                 {
                   src: "/icons/cross-red.webp",
@@ -4621,20 +4770,20 @@ var FillInTheBlanksActivityMaterialContent = ({
                   size: "small"
                 }
               ) }) : null
-            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx24(
+            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx27(
               "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__ */ 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") }) })
+                children: /* @__PURE__ */ jsx27("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx27("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
               }
-            ) : /* @__PURE__ */ jsx24(
+            ) : /* @__PURE__ */ jsx27(
               "div",
               {
                 className: "flex-1 cursor-pointer",
                 onClick: () => {
                   onChange(answer, materialKey, "");
                 },
-                children: /* @__PURE__ */ jsx24(
+                children: /* @__PURE__ */ jsx27(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -4644,13 +4793,13 @@ var FillInTheBlanksActivityMaterialContent = ({
                   `${uniqueValue}-${index}`
                 )
               }
-            ) : /* @__PURE__ */ jsx24("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+            ) : /* @__PURE__ */ jsx27("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
               answerMap[materialKey]
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx24(
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx27(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx24("span", { className: "text-2xl", children: /* @__PURE__ */ jsx24(InlineMath3, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx27("span", { className: "text-2xl", children: /* @__PURE__ */ jsx27(InlineMath3, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }, materialKey) })
@@ -4664,8 +4813,8 @@ var FillInTheBlanksActivityMaterialContent = ({
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 // src/components/activities/FillInTheBlanksActivityContent.tsx
-import { useState as useState16, useEffect as useEffect7 } from "react";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState17, useEffect as useEffect8 } from "react";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var FillInTheBlanksActivityContent = ({
   answer,
   data,
@@ -4685,7 +4834,7 @@ var FillInTheBlanksActivityContent = ({
     "FILL_IN_THE_BLANKS"
   );
   const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList ? JSON.parse(data.fillInTheBlanksIncorrectList) : [];
-  const [currentAnswerMap, setCurrentAnswerMap] = useState16(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = useState17(() => {
     return retrieveCurrentAnswerMap();
   });
   function retrieveCurrentAnswerMap() {
@@ -4694,7 +4843,7 @@ var FillInTheBlanksActivityContent = ({
     );
     return answer.data[foundIndex].answerMap;
   }
-  useEffect7(() => {
+  useEffect8(() => {
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
   const constructAnswerOptionList = () => {
@@ -4732,8 +4881,8 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(newAnswerMap);
     changeAnswer(newAnswer);
   };
-  return /* @__PURE__ */ jsxs15("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx25("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx28(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -4742,9 +4891,9 @@ var FillInTheBlanksActivityContent = ({
         templateType: "FILL_IN_THE_BLANKS"
       }
     ) }),
-    /* @__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(
+    /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx28(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx28(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx28(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -4763,22 +4912,22 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-import { useEffect as useEffect9, useRef as useRef4, useState as useState18 } from "react";
+import { useEffect as useEffect10, useRef as useRef4, useState as useState19 } from "react";
 import { useDrop as useDrop3 } from "react-dnd";
 import { InlineMath as InlineMath4 } from "react-katex";
 // src/hooks/useScreenSize.ts
-import { useState as useState17, useEffect as useEffect8 } from "react";
+import { useState as useState18, useEffect as useEffect9 } from "react";
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = useState17({
+  const [containerSize, setContainerSize] = useState18({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = useState17({
+  const [screenSize, setScreenSize] = useState18({
     width: window.innerWidth,
     height: window.innerHeight
   });
-  useEffect8(() => {
+  useEffect9(() => {
     const handleResize = () => {
       setScreenSize({
         width: window.innerWidth,
@@ -4803,7 +4952,7 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4814,10 +4963,10 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState18(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState18(null);
-  const [isShuffled, setIsShuffled] = useState18(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState18([]);
+  const [selectedValue, setSelectedValue] = useState19(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState19(null);
+  const [isShuffled, setIsShuffled] = useState19(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState19([]);
   const { screenSize, containerSize } = useScreenSize_default();
   const [{ isOver, canDrop }, drop] = useDrop3({
     accept: "GROUPING",
@@ -4830,14 +4979,14 @@ var GroupingActivityMaterialContent = ({
   });
   const ref = useRef4(null);
   const itemsRef = useRef4(null);
-  const [maxWidth, setMaxWidth] = useState18(0);
-  useEffect9(() => {
+  const [maxWidth, setMaxWidth] = useState19(0);
+  useEffect10(() => {
     if (!ref) return;
     if (!ref.current) return;
     if (!screenSize) return;
     setMaxWidth(ref.current.offsetWidth - 12);
   }, [ref, screenSize]);
-  useEffect9(() => {
+  useEffect10(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -4858,7 +5007,7 @@ var GroupingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "GROUPING"
@@ -4902,19 +5051,19 @@ var GroupingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ jsxs16(Fragment2, { children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs18(Fragment2, { children: [
+    /* @__PURE__ */ jsx29(
       "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__ */ jsx26(
+          return /* @__PURE__ */ jsx29(
             DraggableItem_default,
             {
               item: { index: materialValue },
               type: "GROUPING",
-              component: /* @__PURE__ */ jsx26(
+              component: /* @__PURE__ */ jsx29(
                 "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`,
@@ -4928,22 +5077,22 @@ var GroupingActivityMaterialContent = ({
                       setSelectedValue(null);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx26(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx29(
                     "div",
                     {
                       className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                      children: /* @__PURE__ */ jsx26("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                      children: /* @__PURE__ */ jsx29("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                         materialValue
-                      ).map((inputPart, index2) => /* @__PURE__ */ jsx26(
+                      ).map((inputPart, index2) => /* @__PURE__ */ jsx29(
                         "span",
                         {
                           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                          children: inputPart.isEquation ? /* @__PURE__ */ jsx26("span", { className: "text-2xl", children: /* @__PURE__ */ jsx26(InlineMath4, { math: inputPart.value }) }) : inputPart.value
+                          children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-2xl", children: /* @__PURE__ */ jsx29(InlineMath4, { math: inputPart.value }) }) : inputPart.value
                         },
                         index2
                       )) })
                     }
-                  ) : /* @__PURE__ */ jsx26(
+                  ) : /* @__PURE__ */ jsx29(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -4968,22 +5117,22 @@ var GroupingActivityMaterialContent = ({
         })
       }
     ),
-    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__ */ jsx26("div", { className: "w-1/3", children: /* @__PURE__ */ jsx26(
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx29(DividerLine_default, {}) : null,
+    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs18("div", { className: "flex flex-row w-full", children: [
+      /* @__PURE__ */ jsx29("div", { className: "w-1/3", children: /* @__PURE__ */ jsx29(
         "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__ */ jsx26(
+          children: /* @__PURE__ */ jsx29(
             "div",
             {
               className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-              children: /* @__PURE__ */ jsx26("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                (inputPart, index2) => /* @__PURE__ */ jsx26(
+              children: /* @__PURE__ */ jsx29("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+                (inputPart, index2) => /* @__PURE__ */ jsx29(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx26("span", { className: "text-2xl", children: /* @__PURE__ */ jsx26(InlineMath4, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-2xl", children: /* @__PURE__ */ jsx29(InlineMath4, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
                 )
@@ -4992,12 +5141,12 @@ var GroupingActivityMaterialContent = ({
           )
         }
       ) }),
-      /* @__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(
+      /* @__PURE__ */ jsx29("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+      /* @__PURE__ */ jsx29("div", { className: "flex-1", ref, children: /* @__PURE__ */ jsx29("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx29(
         "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__ */ jsx26(
+          children: /* @__PURE__ */ jsx29(
             DroppableItem_default,
             {
               item: { index: answerMapKey },
@@ -5005,7 +5154,7 @@ var GroupingActivityMaterialContent = ({
               target: selectedTargetKey,
               setTarget: setSelectedTargetKey,
               dropRef: drop,
-              component: /* @__PURE__ */ jsx26(
+              component: /* @__PURE__ */ jsx29(
                 "div",
                 {
                   className: "h-full flex-1 flex flex-row items-center overflow-x-auto",
@@ -5018,7 +5167,7 @@ var GroupingActivityMaterialContent = ({
                         materialMap[answerMapKey],
                         answerMapValue
                       );
-                      return /* @__PURE__ */ jsx26("div", { className: "p-1", children: /* @__PURE__ */ jsx26("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ jsx26(
+                      return /* @__PURE__ */ jsx29("div", { className: "p-1", children: /* @__PURE__ */ jsx29("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ jsx29(
                         "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`,
@@ -5034,17 +5183,17 @@ var GroupingActivityMaterialContent = ({
                               setSelectedValue(null);
                             }
                           },
-                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx26(
+                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx29(
                             "div",
                             {
                               className: `flex flex-col items-center justify-center transition-all duration-300 min-h-[64px] min-w-[200px]`,
-                              children: /* @__PURE__ */ jsx26("div", { className: "m-2", children: /* @__PURE__ */ jsx26("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                              children: /* @__PURE__ */ jsx29("div", { className: "m-2", children: /* @__PURE__ */ jsx29("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                                 answerMapValue
-                              ).map((inputPart, index2) => /* @__PURE__ */ jsx26(
+                              ).map((inputPart, index2) => /* @__PURE__ */ jsx29(
                                 "span",
                                 {
                                   className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                                  children: inputPart.isEquation ? /* @__PURE__ */ jsx26("span", { className: "text-2xl", children: /* @__PURE__ */ jsx26(
+                                  children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-2xl", children: /* @__PURE__ */ jsx29(
                                     InlineMath4,
                                     {
                                       math: inputPart.value
@@ -5054,7 +5203,7 @@ var GroupingActivityMaterialContent = ({
                                 index2
                               )) }) })
                             }
-                          ) : /* @__PURE__ */ jsx26(
+                          ) : /* @__PURE__ */ jsx29(
                             ShowMaterialMediaByContentType_default,
                             {
                               contentType: contentMap.type,
@@ -5080,7 +5229,7 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 // src/components/activities/GroupingActivityContent.tsx
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 var GroupingActivityContent = ({
   answer,
   data,
@@ -5105,16 +5254,16 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ jsxs17(Fragment3, { children: [
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs19(Fragment3, { children: [
+    /* @__PURE__ */ jsx30(
       ActivityBodyContent_default,
       {
         bodyMap: groupingBodyMap,
         templateType: "GROUPING"
       }
     ),
-    /* @__PURE__ */ jsx27(DividerLine_default, {}),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx30(DividerLine_default, {}),
+    /* @__PURE__ */ jsx30(
       GroupingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5132,10 +5281,10 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 // src/components/activities/material-content/MatchingActivityMaterialContent.tsx
-import { useEffect as useEffect10, useRef as useRef5, useState as useState19 } from "react";
+import { useEffect as useEffect11, useRef as useRef5, useState as useState20 } from "react";
 import { useDrop as useDrop4 } from "react-dnd";
 import { InlineMath as InlineMath5 } from "react-katex";
-import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5146,10 +5295,10 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState19(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState19(null);
-  const [isShuffled, setIsShuffled] = useState19(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState19([]);
+  const [selectedValue, setSelectedValue] = useState20(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState20(null);
+  const [isShuffled, setIsShuffled] = useState20(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
   const [{ isOver, canDrop }, drop] = useDrop4({
     accept: "MATCHING",
     drop: () => {
@@ -5161,7 +5310,7 @@ var MatchingActivityMaterialContent = ({
   });
   const { containerSize } = useScreenSize_default();
   const itemsRef = useRef5(null);
-  useEffect10(() => {
+  useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5180,13 +5329,13 @@ var MatchingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!itemsRef) return;
     if (!itemsRef.current) return;
     if (!containerSize) return;
@@ -5231,18 +5380,18 @@ var MatchingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-    /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs20(Fragment4, { children: [
+    /* @__PURE__ */ jsx31(
       "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__ */ jsx28(
+        children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ jsx31(
           DraggableItem_default,
           {
             item: { index: materialValue },
             type: "MATCHING",
-            component: /* @__PURE__ */ jsx28(
+            component: /* @__PURE__ */ jsx31(
               "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`,
@@ -5256,22 +5405,22 @@ var MatchingActivityMaterialContent = ({
                     setSelectedValue(null);
                   }
                 },
-                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx28(
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31(
                   "div",
                   {
                     className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                    children: /* @__PURE__ */ jsx28("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: /* @__PURE__ */ jsx31("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialValue
-                    ).map((inputPart, index2) => /* @__PURE__ */ jsx28(
+                    ).map((inputPart, index2) => /* @__PURE__ */ jsx31(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-2xl", children: /* @__PURE__ */ jsx28(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath5, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
                     )) })
                   }
-                ) : /* @__PURE__ */ jsx28(
+                ) : /* @__PURE__ */ jsx31(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5295,27 +5444,27 @@ var MatchingActivityMaterialContent = ({
         ))
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx28(DividerLine_default, {}) : null,
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx31(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__ */ jsx28("div", { className: "w-1/3", children: /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsxs20("div", { className: "flex flex-row w-full", children: [
+        /* @__PURE__ */ jsx31("div", { className: "w-1/3", children: /* @__PURE__ */ jsx31(
           "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__ */ jsx28(
+            children: /* @__PURE__ */ jsx31(
               "div",
               {
                 className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-                children: /* @__PURE__ */ jsx28("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                  (inputPart, index2) => /* @__PURE__ */ jsx28(
+                children: /* @__PURE__ */ jsx31("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+                  (inputPart, index2) => /* @__PURE__ */ jsx31(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-2xl", children: /* @__PURE__ */ jsx28(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath5, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
                   )
@@ -5324,8 +5473,8 @@ var MatchingActivityMaterialContent = ({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx28("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-        /* @__PURE__ */ jsx28("div", { className: "flex-1", children: /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx31("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+        /* @__PURE__ */ jsx31("div", { className: "flex-1", children: /* @__PURE__ */ jsx31(
           "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"}`,
@@ -5334,7 +5483,7 @@ var MatchingActivityMaterialContent = ({
                 setSelectedValue(null);
               }
             },
-            children: /* @__PURE__ */ jsx28(
+            children: /* @__PURE__ */ jsx31(
               DroppableItem_default,
               {
                 item: { index: answerMapKey },
@@ -5342,7 +5491,7 @@ var MatchingActivityMaterialContent = ({
                 target: selectedTargetKey,
                 setTarget: setSelectedTargetKey,
                 dropRef: drop,
-                component: /* @__PURE__ */ jsx28(
+                component: /* @__PURE__ */ jsx31(
                   "div",
                   {
                     className: `h-full flex-1 flex flex-row items-center justify-center `,
@@ -5355,16 +5504,16 @@ var MatchingActivityMaterialContent = ({
                         );
                       }
                     },
-                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx28("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       answerMap[answerMapKey]
-                    ).map((inputPart, index2) => /* @__PURE__ */ jsx28(
+                    ).map((inputPart, index2) => /* @__PURE__ */ jsx31(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-2xl", children: /* @__PURE__ */ jsx28(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath5, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
-                    )) }) : /* @__PURE__ */ jsx28(
+                    )) }) : /* @__PURE__ */ jsx31(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -5387,7 +5536,7 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 // src/components/activities/MatchingActivityContent.tsx
-import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var MatchingActivityContent = ({
   answer,
   data,
@@ -5408,16 +5557,16 @@ var MatchingActivityContent = ({
     answerMap[key] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    /* @__PURE__ */ jsx32(
       ActivityBodyContent_default,
       {
         bodyMap: matchingBodyMap,
         templateType: "MATCHING"
       }
     ),
-    /* @__PURE__ */ jsx29(DividerLine_default, {}),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx32(DividerLine_default, {}),
+    /* @__PURE__ */ jsx32(
       MatchingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5436,7 +5585,7 @@ var MatchingActivityContent_default = MatchingActivityContent;
 // src/components/activities/material-content/MCMAActivityMaterialContent.tsx
 import { InlineMath as InlineMath6 } from "react-katex";
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 var MCMAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5469,10 +5618,10 @@ var MCMAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswerList = retrieveCorrectAnswerList();
   return Object.keys(materialMap).map((materialKey, index) => {
-    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(
+    return /* @__PURE__ */ jsx33("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__ */ jsx33("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx33("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
+      /* @__PURE__ */ jsx33("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx33(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx33("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
           const foundAnswer = answerMap[materialKey].find(
             (learnerAnswer) => learnerAnswer === materialSubKey
@@ -5485,7 +5634,7 @@ var MCMAActivityMaterialContent = ({
           const foundIndex = correctAnswerList.findIndex(
             (correctAnswer) => correctAnswer === materialSubKey
           );
-          return /* @__PURE__ */ jsxs20(
+          return /* @__PURE__ */ jsxs22(
             "div",
             {
               className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && foundIndex !== -1 || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
@@ -5493,7 +5642,7 @@ var MCMAActivityMaterialContent = ({
                 onChange(answer, materialKey, materialSubKey);
               },
               children: [
-                /* @__PURE__ */ jsx30(
+                /* @__PURE__ */ jsx33(
                   BaseImage_default,
                   {
                     src: answerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -5503,16 +5652,16 @@ var MCMAActivityMaterialContent = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx30("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                /* @__PURE__ */ jsx33("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialSubKey
-                ).map((inputPart, index3) => /* @__PURE__ */ jsx30(
+                ).map((inputPart, index3) => /* @__PURE__ */ jsx33(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-2xl", children: /* @__PURE__ */ jsx30(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-2xl", children: /* @__PURE__ */ jsx33(InlineMath6, { math: inputPart.value }) }) : inputPart.value
                   },
                   index3
-                )) }) : /* @__PURE__ */ jsx30(
+                )) }) : /* @__PURE__ */ jsx33(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5526,13 +5675,13 @@ var MCMAActivityMaterialContent = ({
             index2
           );
         }
-      ) }) : /* @__PURE__ */ jsx30("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+      ) }) : /* @__PURE__ */ jsx33("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ jsx30(
+      ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-2xl", children: /* @__PURE__ */ jsx30(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-2xl", children: /* @__PURE__ */ jsx33(InlineMath6, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) }, materialKey)
@@ -5542,7 +5691,7 @@ var MCMAActivityMaterialContent = ({
 var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
 // src/components/activities/MCMAActivityContent.tsx
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var MCMAActivityContent = ({
   answer,
   data,
@@ -5569,11 +5718,11 @@ var MCMAActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__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(
+  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx34(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
+    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx34(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx34(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx34(
       MCMAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5591,7 +5740,7 @@ var MCMAActivityContent_default = MCMAActivityContent;
 // src/components/activities/material-content/MCSAActivityMaterialContent.tsx
 import { InlineMath as InlineMath7 } from "react-katex";
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 var MCSAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5621,10 +5770,10 @@ var MCSAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswer = retrieveCorrectAnswer();
   return Object.keys(materialMap).map((materialKey, index) => {
-    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(
+    return /* @__PURE__ */ jsx35("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs24("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
+      /* @__PURE__ */ jsx35("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx35("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
+      /* @__PURE__ */ jsx35("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx35(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx35(
         "div",
         {
           className: `flex flex-row w-full ${Object.keys(materialMap[materialKey]).length <= 4 ? "justify-center" : ""} flex-wrap`,
@@ -5635,7 +5784,7 @@ var MCSAActivityMaterialContent = ({
                 materialSubKey,
                 answerMap[materialKey]
               );
-              return /* @__PURE__ */ jsxs22(
+              return /* @__PURE__ */ jsxs24(
                 "div",
                 {
                   className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && materialSubKey === correctAnswer || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
@@ -5643,7 +5792,7 @@ var MCSAActivityMaterialContent = ({
                     onChange(answer, materialKey, materialSubKey);
                   },
                   children: [
-                    /* @__PURE__ */ jsx32(
+                    /* @__PURE__ */ jsx35(
                       BaseImage_default,
                       {
                         src: answerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
@@ -5653,16 +5802,16 @@ var MCSAActivityMaterialContent = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx32("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    /* @__PURE__ */ jsx35("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx35("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialSubKey
-                    ).map((inputPart, index3) => /* @__PURE__ */ jsx32(
+                    ).map((inputPart, index3) => /* @__PURE__ */ jsx35(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx35("span", { className: "text-2xl", children: /* @__PURE__ */ jsx35(InlineMath7, { math: inputPart.value }) }) : inputPart.value
                       },
                       index3
-                    )) }) : /* @__PURE__ */ jsx32(
+                    )) }) : /* @__PURE__ */ jsx35(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -5678,13 +5827,13 @@ var MCSAActivityMaterialContent = ({
             }
           )
         }
-      ) : /* @__PURE__ */ jsx32("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+      ) : /* @__PURE__ */ jsx35("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
+      ).map((inputPart, index2) => /* @__PURE__ */ jsx35(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx35("span", { className: "text-2xl", children: /* @__PURE__ */ jsx35(InlineMath7, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) })
@@ -5694,7 +5843,7 @@ var MCSAActivityMaterialContent = ({
 var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
 // src/components/activities/MCSAActivityContent.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var MCSAActivityContent = ({
   answer,
   data,
@@ -5714,11 +5863,11 @@ var MCSAActivityContent = ({
     answerMap[key] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__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(
+  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx36(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
+    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx36(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx36(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx36(
       MCSAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5735,7 +5884,7 @@ var MCSAActivityContent = ({
 var MCSAActivityContent_default = MCSAActivityContent;
 // src/components/activities/material-content/OpenEndedActivityMaterialContent.tsx
-import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var OpenEndedActivityMaterialContent = ({
   answer,
   contentMap,
@@ -5758,7 +5907,7 @@ var OpenEndedActivityMaterialContent = ({
   };
   const RenderTextContent = (answerMap2) => {
     const answerMapAnswer = answerMap2["ANSWER"];
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx37(
       InputGroup_default,
       {
         type: "textarea",
@@ -5771,16 +5920,16 @@ var OpenEndedActivityMaterialContent = ({
     );
   };
   const answerMap = retrieveAnswerMap();
-  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, {}) }),
+  return /* @__PURE__ */ jsx37(Fragment6, { children: /* @__PURE__ */ jsxs26("div", { className: "", children: [
+    /* @__PURE__ */ jsx37("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx37("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
+    /* @__PURE__ */ jsx37("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx37(DividerLine_default, {}) }),
     contentMap.type === "TEXT" ? RenderTextContent(answerMap) : null
   ] }) });
 };
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 // src/components/activities/OpenEndedActivityContent.tsx
-import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var OpenEndedActivityContent = ({
   answer,
   data,
@@ -5798,12 +5947,12 @@ var OpenEndedActivityContent = ({
     answerMap["ANSWER"] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs27("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx38(
       "div",
       {
         className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%]" : "w-full"}`,
-        children: /* @__PURE__ */ jsx35(
+        children: /* @__PURE__ */ jsx38(
           ActivityBodyContent_default,
           {
             bodyMap: openEndedBodyMap,
@@ -5812,16 +5961,16 @@ var OpenEndedActivityContent = ({
         )
       }
     ),
-    showMaterialContent ? /* @__PURE__ */ jsxs25(Fragment7, { children: [
-      /* @__PURE__ */ jsx35(
+    showMaterialContent ? /* @__PURE__ */ jsxs27(Fragment7, { children: [
+      /* @__PURE__ */ jsx38(
         "div",
         {
           className: `${isFullScreen ? "contents" : "contents md:hidden"}`,
-          children: /* @__PURE__ */ jsx35(DividerLine_default, {})
+          children: /* @__PURE__ */ jsx38(DividerLine_default, {})
         }
       ),
-      /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx35(VerticalDividerLine_default, {}) }),
-      /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx38(VerticalDividerLine_default, {}) }),
+      /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx38(
         OpenEndedActivityMaterialContent_default,
         {
           answer,
@@ -5835,14 +5984,14 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 // src/components/activities/material-content/OrderingActivityMaterialContent.tsx
-import { useEffect as useEffect11, useState as useState20 } from "react";
+import { useEffect as useEffect12, useState as useState21 } from "react";
 import { useDrop as useDrop6 } from "react-dnd";
 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 jsx36 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var DraggableDroppableItem = ({
   key,
   item,
@@ -5880,12 +6029,12 @@ var DraggableDroppableItem = ({
   });
   const opacity = isDragging ? 0.4 : 1;
   drag(drop(ref));
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       className: `${isDragging ? "w-[0px] opacity-0" : "w-full opacity-100"} transition-all duration-500`,
       ref: dropRef,
-      children: /* @__PURE__ */ jsx36("div", { ref, className: "w-full", style: { opacity }, children: component })
+      children: /* @__PURE__ */ jsx39("div", { ref, className: "w-full", style: { opacity }, children: component })
     },
     key
   );
@@ -5893,7 +6042,7 @@ var DraggableDroppableItem = ({
 var DraggableDroppableItem_default = DraggableDroppableItem;
 // src/components/activities/material-content/OrderingActivityMaterialContent.tsx
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5904,10 +6053,10 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedTargetKey, setSelectedTargetKey] = useState20(null);
-  const [selectedKey, setSelectedKey] = useState20(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState21(null);
+  const [selectedKey, setSelectedKey] = useState21(null);
   const { screenSize } = useScreenSize_default();
-  const [view, setView] = useState20("PC");
+  const [view, setView] = useState21("PC");
   const [{ isOver, canDrop }, drop] = useDrop6({
     accept: "ORDERING",
     drop: () => {
@@ -5917,7 +6066,7 @@ var OrderingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  useEffect11(() => {
+  useEffect12(() => {
     if (!screenSize) return;
     if (screenSize.width <= 768) {
       setView("TABLET");
@@ -5925,7 +6074,7 @@ var OrderingActivityMaterialContent = ({
       setView("PC");
     }
   }, [screenSize]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!showCorrectAnswer) return;
     const answerMap2 = answer.data.find(
       (answerData) => answerData.type === "ORDERING"
@@ -5970,12 +6119,12 @@ var OrderingActivityMaterialContent = ({
     return 0;
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsx37("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+  return /* @__PURE__ */ jsx40("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
     const learnerAnswerState = checkAnswerState(
       answerMap[materialKey] + "",
       index + ""
     );
-    return /* @__PURE__ */ jsx37("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsx40("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs28(
       "div",
       {
         className: `flex flex-row items-center my-4 mx-2`,
@@ -5983,26 +6132,26 @@ var OrderingActivityMaterialContent = ({
           marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
         },
         children: [
-          /* @__PURE__ */ jsx37("div", { className: "mr-3", children: /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx40("div", { className: "mr-3", children: /* @__PURE__ */ jsx40(
             "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__ */ jsx37(
+              children: /* @__PURE__ */ jsx40(
                 "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__ */ jsx37("p", { className: "", children: parseFloat(materialKey) + 1 })
+                  children: /* @__PURE__ */ jsx40("p", { className: "", children: parseFloat(materialKey) + 1 })
                 }
               )
             }
           ) }),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx40(
             DraggableDroppableItem_default,
             {
               item: { index: materialKey },
               type: "ORDERING",
               dropRef: drop,
-              component: /* @__PURE__ */ jsx37(
+              component: /* @__PURE__ */ jsx40(
                 "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"}`,
@@ -6011,16 +6160,16 @@ var OrderingActivityMaterialContent = ({
                       setSelectedKey(materialKey);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx37("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx40("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                     materialMap[answerMap[materialKey]]
-                  ).map((inputPart, index2) => /* @__PURE__ */ jsx37(
+                  ).map((inputPart, index2) => /* @__PURE__ */ jsx40(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ jsx37("span", { className: "text-2xl", children: /* @__PURE__ */ jsx37(InlineMath8, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx40("span", { className: "text-2xl", children: /* @__PURE__ */ jsx40(InlineMath8, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
-                  )) }) : /* @__PURE__ */ jsx37(
+                  )) }) : /* @__PURE__ */ jsx40(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -6052,7 +6201,7 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 // src/components/activities/OrderingActivityContent.tsx
-import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
 var OrderingActivityContent = ({
   answer,
   data,
@@ -6075,16 +6224,16 @@ var OrderingActivityContent = ({
     answerMap[secondaryKey] = prevValue;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ jsxs27(Fragment8, { children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+    /* @__PURE__ */ jsx41(
       ActivityBodyContent_default,
       {
         bodyMap: orderingBodyMap,
         templateType: "ORDERING"
       }
     ),
-    /* @__PURE__ */ jsx38(DividerLine_default, {}),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx41(DividerLine_default, {}),
+    /* @__PURE__ */ jsx41(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6102,9 +6251,9 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 // src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
-import { useEffect as useEffect12, useState as useState21 } from "react";
+import { useEffect as useEffect13, useState as useState22 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
-import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6116,8 +6265,8 @@ var TrueFalseActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const { screenSize } = useScreenSize_default();
-  const [shuffleOptionList, setShuffleOptionList] = useState21([]);
-  useEffect12(() => {
+  const [shuffleOptionList, setShuffleOptionList] = useState22([]);
+  useEffect13(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -6127,7 +6276,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "TRUE_FALSE"
@@ -6157,14 +6306,14 @@ var TrueFalseActivityMaterialContent = ({
     return "INCORRECT";
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsxs28("div", { className: "", children: [
-    /* @__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__ */ 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") }) })
+  return /* @__PURE__ */ jsxs30("div", { className: "", children: [
+    /* @__PURE__ */ jsx42("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx42("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
+    /* @__PURE__ */ jsx42("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx42(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsxs30("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
+      /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
     ] }),
-    checkCanAnswerQuestion() ? /* @__PURE__ */ jsx39("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
+    checkCanAnswerQuestion() ? /* @__PURE__ */ jsx42("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";
@@ -6175,21 +6324,21 @@ var TrueFalseActivityMaterialContent = ({
         correctAnswer,
         learnerAnswer
       );
-      return /* @__PURE__ */ jsxs28(
+      return /* @__PURE__ */ jsxs30(
         "div",
         {
           className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 ${learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
           children: [
-            /* @__PURE__ */ jsx39("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx39("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            /* @__PURE__ */ jsx42("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx42("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               shuffleOption
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx39(
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx42(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx39("span", { className: "text-2xl", children: /* @__PURE__ */ jsx39(InlineMath9, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-2xl", children: /* @__PURE__ */ jsx42(InlineMath9, { math: inputPart.value }) }) : inputPart.value
               },
               index2
-            )) }) : /* @__PURE__ */ jsx39(
+            )) }) : /* @__PURE__ */ jsx42(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6198,8 +6347,8 @@ var TrueFalseActivityMaterialContent = ({
               },
               `${uniqueValue}-${index}`
             ) }),
-            /* @__PURE__ */ jsxs28("div", { className: "flex flex-row items-center gap-x-2", children: [
-              /* @__PURE__ */ jsx39("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx39("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsxs30("div", { className: "flex flex-row items-center gap-x-2", children: [
+              /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx42(
                 BaseImage_default,
                 {
                   src: answerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6210,7 +6359,7 @@ var TrueFalseActivityMaterialContent = ({
                   }
                 }
               ) }) }),
-              /* @__PURE__ */ jsx39("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx39("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx42(
                 BaseImage_default,
                 {
                   src: answerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6226,14 +6375,14 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ jsxs28(Fragment9, { children: [
-      answerMap.trueList.map((item) => /* @__PURE__ */ jsxs28("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__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") }) })
+    }) }) : /* @__PURE__ */ jsxs30(Fragment9, { children: [
+      answerMap.trueList.map((item) => /* @__PURE__ */ jsxs30("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx42("div", { className: "flex-1", children: /* @__PURE__ */ jsx42("p", { children: item }) }),
+        /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("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__ */ 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") }) })
+      answerMap.falseList.map((item) => /* @__PURE__ */ jsxs30("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx42("div", { className: "flex-1", children: /* @__PURE__ */ jsx42("p", { children: item }) }),
+        /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))
     ] })
   ] });
@@ -6241,7 +6390,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 // src/components/activities/TrueFalseActivityContent.tsx
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 var TrueFalseActivityContent = ({
   answer,
   data,
@@ -6291,17 +6440,17 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ jsxs29("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx40("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs31("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ jsx43(
       ActivityBodyContent_default,
       {
         bodyMap: trueFalseBodyMap,
         templateType: "GROUPING"
       }
     ) }),
-    /* @__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(
+    /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx43(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx43(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx43(
       TrueFalseActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6320,7 +6469,7 @@ var TrueFalseActivityContent_default = TrueFalseActivityContent;
 // src/components/activities/solution-content/ActivitySolutionContent.tsx
 import { InlineMath as InlineMath10 } from "react-katex";
-import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -6350,8 +6499,8 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  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") }),
+  return /* @__PURE__ */ jsx44("div", { className: "mx-2", children: /* @__PURE__ */ jsxs32("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ jsx44("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
     Object.keys(solutionMap).map((key) => {
       let currentItem;
       try {
@@ -6361,12 +6510,12 @@ var ActivitySolutionContent = ({
         return null;
       }
       const { value } = currentItem;
-      return /* @__PURE__ */ jsx41("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
-        (inputPart, partIndex) => /* @__PURE__ */ jsx41(
+      return /* @__PURE__ */ jsx44("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
+        (inputPart, partIndex) => /* @__PURE__ */ jsx44(
           "span",
           {
             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ jsx41("span", { className: "text-2xl", children: /* @__PURE__ */ jsx41(InlineMath10, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ jsx44("span", { className: "text-2xl", children: /* @__PURE__ */ jsx44(InlineMath10, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -6378,7 +6527,7 @@ var ActivitySolutionContent_default = ActivitySolutionContent;
 // src/components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent.tsx
 import { InlineMath as InlineMath11 } from "react-katex";
-import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -6407,21 +6556,21 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  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") }),
+  return /* @__PURE__ */ jsx45("div", { className: "mx-2", children: /* @__PURE__ */ jsxs33("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ jsx45("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__ */ jsx42("p", { className: "my-3", children: /* @__PURE__ */ jsx42(
+      return /* @__PURE__ */ jsx45("p", { className: "my-3", children: /* @__PURE__ */ jsx45(
         "span",
         {
           className: "text-xl whitespace-pre-wrap",
           children: constructInputWithSpecialExpressionList(value).map(
-            (inputPart, index2) => /* @__PURE__ */ jsx42(
+            (inputPart, index2) => /* @__PURE__ */ jsx45(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-2xl", children: /* @__PURE__ */ jsx42(InlineMath11, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx45("span", { className: "text-2xl", children: /* @__PURE__ */ jsx45(InlineMath11, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
@@ -6435,31 +6584,31 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 // src/components/activities/ActivityPreviewByData.tsx
-import { useEffect as useEffect13, useState as useState22 } from "react";
+import { useEffect as useEffect14, useState as useState23 } from "react";
 // src/components/boxes/SelectionBox.tsx
-import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  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(
+  return /* @__PURE__ */ jsx46("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx46(
     "div",
     {
       className: `${option.id === selectedId ? "border-catchup-blue-400" : "border-catchup-gray-100 hover:border-catchup-blue-500"} border-2 rounded-catchup-xlarge py-3 px-8 cursor-pointer duration-300 transition-all`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ jsxs32(
+      children: /* @__PURE__ */ jsxs34(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
           children: [
             option.icon,
-            /* @__PURE__ */ jsxs32("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx43("p", { children: option.text }),
-              option.subText ? /* @__PURE__ */ jsxs32("p", { className: "text-md", children: [
+            /* @__PURE__ */ jsxs34("div", { className: "flex-1 flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx46("p", { children: option.text }),
+              option.subText ? /* @__PURE__ */ jsxs34("p", { className: "text-md", children: [
                 "(",
                 option.subText,
                 ")"
@@ -6475,7 +6624,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 // src/components/activities/ActivityPreviewByData.tsx
-import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
 var ActivityPreviewByData = ({
   data,
   showType,
@@ -6487,14 +6636,14 @@ var ActivityPreviewByData = ({
   showTaxonomy,
   isFullScreen
 }) => {
-  const [key, setKey] = useState22((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = useState22(null);
-  const [optionList, setOptionList] = useState22([]);
-  useEffect13(() => {
+  const [key, setKey] = useState23((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = useState23(null);
+  const [optionList, setOptionList] = useState23([]);
+  useEffect14(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
     let foundTypeOption;
@@ -6509,7 +6658,7 @@ var ActivityPreviewByData = ({
       setSelectedType(typeOptionList[0].id);
     }
   }, [typeOptionList, lockedType]);
-  useEffect13(() => {
+  useEffect14(() => {
     const retrieveTaxonomyNameByActivityTypeFromData = (type) => {
       let taxonomyMap = {
         name: ""
@@ -6558,10 +6707,10 @@ var ActivityPreviewByData = ({
   }, [data, lockedType, typeOptionList, showTaxonomy]);
   if (!data) return;
   const answer = constructAnswerBasedOnData(data);
-  return /* @__PURE__ */ jsxs33("div", { children: [
-    showType ? /* @__PURE__ */ jsxs33("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(
+  return /* @__PURE__ */ jsxs35("div", { children: [
+    showType ? /* @__PURE__ */ jsxs35("div", { className: "mb-4", children: [
+      showDescription ? /* @__PURE__ */ jsx47("div", { className: "my-2", children: /* @__PURE__ */ jsx47("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+      /* @__PURE__ */ jsx47(
         SelectionBox_default,
         {
           optionList,
@@ -6572,7 +6721,7 @@ var ActivityPreviewByData = ({
         }
       )
     ] }) : null,
-    selectedType ? /* @__PURE__ */ jsx44("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ jsx44(
+    selectedType ? /* @__PURE__ */ jsx47("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       OrderingActivityContent_default,
       {
         answer,
@@ -6586,7 +6735,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ jsx44(
+    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       DropdownActivityContent_default,
       {
         answer,
@@ -6600,7 +6749,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ jsx44(
+    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       MCSAActivityContent_default,
       {
         answer,
@@ -6614,7 +6763,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ jsx44(
+    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       MCMAActivityContent_default,
       {
         answer,
@@ -6628,7 +6777,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ jsx44(
+    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       MatchingActivityContent_default,
       {
         answer,
@@ -6642,7 +6791,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ jsx44(
+    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       GroupingActivityContent_default,
       {
         answer,
@@ -6656,7 +6805,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ jsx44(
+    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       FillInTheBlanksActivityContent_default,
       {
         answer,
@@ -6670,7 +6819,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ jsx44(
+    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ jsx47(
       OpenEndedActivityContent_default,
       {
         answer,
@@ -6680,7 +6829,7 @@ var ActivityPreviewByData = ({
         data,
         isFullScreen
       }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ jsx44(
+    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       TrueFalseActivityContent_default,
       {
         answer,
@@ -6695,14 +6844,14 @@ var ActivityPreviewByData = ({
         isFullScreen
       }
     ) : null }, selectedType) : null,
-    selectedType && showSolution ? /* @__PURE__ */ jsx44("div", { className: "my-4", children: /* @__PURE__ */ jsx44(
+    selectedType && showSolution ? /* @__PURE__ */ jsx47("div", { className: "my-4", children: /* @__PURE__ */ jsx47(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx44("div", { className: "my-4", children: /* @__PURE__ */ jsx44(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx47("div", { className: "my-4", children: /* @__PURE__ */ jsx47(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -6714,8 +6863,8 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 // src/components/activities/ActivityPreviewByAnswerData.tsx
-import { useEffect as useEffect14, useState as useState23 } from "react";
-import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+import { useEffect as useEffect15, useState as useState24 } from "react";
+import { jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
 var ActivityPreviewByAnswerData = ({
   data,
   showType = true,
@@ -6729,11 +6878,11 @@ var ActivityPreviewByAnswerData = ({
   showCorrectAnswer = false
 }) => {
   var _a;
-  const [key, setKey] = useState23((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = useState23(null);
-  const [optionList, setOptionList] = useState23([]);
-  const [answer, setAnswer] = useState23({ data: [] });
-  useEffect14(() => {
+  const [key, setKey] = useState24((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = useState24(null);
+  const [optionList, setOptionList] = useState24([]);
+  const [answer, setAnswer] = useState24({ data: [] });
+  useEffect15(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
@@ -6770,7 +6919,7 @@ var ActivityPreviewByAnswerData = ({
     }
     return taxonomyMap.name || "";
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (!data) return;
     const constructAnswerBasedOnData2 = () => {
       const newAnswer = { data: [] };
@@ -6809,7 +6958,7 @@ var ActivityPreviewByAnswerData = ({
     };
     constructAnswerBasedOnData2();
   }, [data, lockedType]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!data || !answer.data.length) return;
     let currentTypeOptionList = typeOptionList || answer.data.map((item) => ({
       id: item.type,
@@ -6842,37 +6991,37 @@ var ActivityPreviewByAnswerData = ({
     };
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsx45(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsx48(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsx45(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsx48(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsx45(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsx48(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsx45(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsx48(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsx45(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsx48(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsx45(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsx48(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsx45(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsx48(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ jsx45(
+        return data.openEndedBodyMap ? /* @__PURE__ */ jsx48(
           OpenEndedActivityContent_default,
           __spreadProps(__spreadValues({}, commonProps), {
             showMaterialContent: true
           })
         ) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsx45(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsx48(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
       default:
         return null;
     }
   };
   if (!data) return null;
-  return /* @__PURE__ */ jsxs34("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs34("div", { className: "mb-4", children: [
-      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(
+  return /* @__PURE__ */ jsxs36("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs36("div", { className: "mb-4", children: [
+      showDescription ? /* @__PURE__ */ jsx48("div", { className: "my-2", children: /* @__PURE__ */ jsx48("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+      /* @__PURE__ */ jsx48(
         SelectionBox_default,
         {
           optionList,
@@ -6883,19 +7032,19 @@ var ActivityPreviewByAnswerData = ({
         }
       )
     ] }) : null,
-    /* @__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__ */ jsx45(ActivityEmptyContent_default, {}) : null,
-      selectedType ? /* @__PURE__ */ jsx45("div", { children: RenderSelectedActivityContent() }, selectedType) : null
+    /* @__PURE__ */ jsx48(DividerLine_default, {}),
+    /* @__PURE__ */ jsxs36("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__ */ jsx48(ActivityEmptyContent_default, {}) : null,
+      selectedType ? /* @__PURE__ */ jsx48("div", { children: RenderSelectedActivityContent() }, selectedType) : null
     ] }),
-    selectedType && showSolution ? /* @__PURE__ */ jsx45("div", { className: "my-4", children: /* @__PURE__ */ jsx45(
+    selectedType && showSolution ? /* @__PURE__ */ jsx48("div", { className: "my-4", children: /* @__PURE__ */ jsx48(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx45("div", { className: "my-4", children: /* @__PURE__ */ jsx45(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx48("div", { className: "my-4", children: /* @__PURE__ */ jsx48(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -6907,9 +7056,9 @@ var ActivityPreviewByAnswerData = ({
 var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
 // src/components/dividers/BlueVerticalDividerLine.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -6919,7 +7068,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 // src/components/groups/LeftTextRightInputGroup.tsx
-import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -6929,9 +7078,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ jsxs35("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__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(
+  return /* @__PURE__ */ jsxs37("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ jsx50("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx50("p", { children: title }) }),
+    /* @__PURE__ */ jsx50("div", { className: "flex-1", children: /* @__PURE__ */ jsx50(
       InputGroup_default,
       {
         type,
@@ -6947,14 +7096,14 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  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(
+  return /* @__PURE__ */ jsx51("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx51(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -6969,14 +7118,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ jsxs36(
+      children: /* @__PURE__ */ jsxs38(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx51(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -6986,7 +7135,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ jsx48("div", { className: "flex-1", children: /* @__PURE__ */ jsx48("p", { children: option.text }) })
+            /* @__PURE__ */ jsx51("div", { className: "flex-1", children: /* @__PURE__ */ jsx51("p", { children: option.text }) })
           ]
         }
       )
@@ -6997,7 +7146,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7007,7 +7156,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  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(
+  return /* @__PURE__ */ jsx52("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__ */ jsxs39(
     "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`,
@@ -7015,8 +7164,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ jsx49("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ jsx49("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ jsx52("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx52("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7025,20 +7174,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 // src/components/tabs/SelectionTabFill.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  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(
+  return /* @__PURE__ */ jsx53("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__ */ jsx53(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsx53(
         "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`,
@@ -7052,57 +7201,57 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 // src/components/labels/ActivityTemplateLabel.tsx
-import { jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  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 })
+  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__ */ jsxs40("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx54(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx54("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 // src/components/labels/BrandLabel.tsx
-import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, 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__ */ 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 })
+  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__ */ jsxs41("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx55(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx55("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 // src/components/labels/CoterieLabel.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var CoterieLabel = ({ title, font }) => {
-  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 }) });
+  return /* @__PURE__ */ jsx56("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__ */ jsx56("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 // src/components/labels/GradeLabel.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var GradeLabel = ({ title, font }) => {
-  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 }) });
+  return /* @__PURE__ */ jsx57("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__ */ jsx57("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 // src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs42 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  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 })
+  return /* @__PURE__ */ jsx58("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__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx58(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx58("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 // src/components/labels/PersonalLabel.tsx
-import { jsx as jsx56, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs43 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  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(
+  return /* @__PURE__ */ jsx59("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__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx59(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -7110,16 +7259,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx56("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx59("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 // src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs44 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, 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__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx60("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__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx60(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7127,79 +7276,79 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx57("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx60("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 // src/components/labels/ActivityLabel.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var ActivityLabel = ({ title, font }) => {
-  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 }) });
+  return /* @__PURE__ */ jsx61("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__ */ jsx61("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx59, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs45 } 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__ */ jsx59(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ jsx59("div", { className: "flex-1", children: /* @__PURE__ */ jsx59("p", { className: "", children: value }) })
+  return /* @__PURE__ */ jsxs45("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ jsx62(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx62("div", { className: "flex-1", children: /* @__PURE__ */ jsx62("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 // src/components/texts/InputWithSpecialExpression.tsx
 import { InlineMath as InlineMath12 } from "react-katex";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  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(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx63("div", { className: "m-2", children: /* @__PURE__ */ jsx63("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx63(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx60("span", { className: "text-lg", children: /* @__PURE__ */ jsx60(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx63("span", { className: "text-lg", children: /* @__PURE__ */ jsx63(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ jsx60("div", { className: "m-2", children: /* @__PURE__ */ jsx60("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx60(
+  )) }) }) : null : /* @__PURE__ */ jsx63("div", { className: "m-2", children: /* @__PURE__ */ jsx63("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx63(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx60("span", { className: "text-lg", children: /* @__PURE__ */ jsx60(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx63("span", { className: "text-lg", children: /* @__PURE__ */ jsx63(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 // src/components/titles/BaseTitle.tsx
-import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ jsxs44("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ jsxs46("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxs46("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ jsxs44("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
+      totalItemCount && itemName ? /* @__PURE__ */ jsxs46("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
         totalItemCount,
         " ",
         itemName
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ jsx61("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ jsx64("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 // src/components/titles/SubTitle.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ jsx62("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ jsx65("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
@@ -8682,6 +8831,50 @@ var constructWeekName = (beginDate, endDate, untilSunday) => {
     }
   }
 };
+var retrieveTimeFilterOptionList = () => {
+  return [
+    {
+      text: i18n_default.t("all_time"),
+      value: "all"
+    },
+    {
+      text: i18n_default.t("today"),
+      value: "today"
+    },
+    {
+      text: i18n_default.t("yesterday"),
+      value: "yesterday"
+    },
+    {
+      text: i18n_default.t("this_week"),
+      value: "this_week"
+    },
+    {
+      text: i18n_default.t("last_week"),
+      value: "last_week"
+    },
+    {
+      text: i18n_default.t("this_month"),
+      value: "this_month"
+    },
+    {
+      text: i18n_default.t("last_month"),
+      value: "last_month"
+    },
+    {
+      text: i18n_default.t("last_7_days"),
+      value: "last_7_days"
+    },
+    {
+      text: i18n_default.t("last_30_days"),
+      value: "last_30_days"
+    },
+    {
+      text: i18n_default.t("last_90_days"),
+      value: "last_90_days"
+    }
+  ];
+};
 // src/utilization/FunctionUtilization.ts
 var calculateLevenshteinDistance = (s, t) => {
@@ -9786,7 +9979,9 @@ export {
   OutcomeLabel_default as OutcomeLabel,
   PersonalLabel_default as PersonalLabel,
   PrimaryButton_default as PrimaryButton,
+  ProgressBar_default as ProgressBar,
   PublishingHouseLabel_default as PublishingHouseLabel,
+  ScoreBar_default as ScoreBar,
   SecondaryButton_default as SecondaryButton,
   SelectionBox_default as SelectionBox,
   SelectionCheckbox_default as SelectionCheckbox,
@@ -9794,6 +9989,7 @@ export {
   SelectionTabFill_default as SelectionTabFill,
   SubTitle_default as SubTitle,
   THREE_MONTHS,
+  TimedProgressBar_default as TimedProgressBar,
   TrueFalseActivityContent_default as TrueFalseActivityContent,
   VerticalDividerLine_default as VerticalDividerLine,
   adjustForTimezone,
@@ -9906,6 +10102,7 @@ export {
   retrieveTaxonomyName,
   retrieveTaxonomyType,
   retrieveTeachingMethodologyOptionList,
+  retrieveTimeFilterOptionList,
   retrieveTokenUsageSubTypeOptionList,
   retrieveTokenUsageTypeOptionList,
   retrieveTotalTimeSpentInMinutes,