catchup-library-web 1.12.14 → 1.12.16

package/dist/index.js

@@ -109,7 +109,9 @@ __export(index_exports, {
   OutcomeLabel: () => OutcomeLabel_default,
   PersonalLabel: () => PersonalLabel_default,
   PrimaryButton: () => PrimaryButton_default,
+  ProgressBar: () => ProgressBar_default,
   PublishingHouseLabel: () => PublishingHouseLabel_default,
+  ScoreBar: () => ScoreBar_default,
   SecondaryButton: () => SecondaryButton_default,
   SelectionBox: () => SelectionBox_default,
   SelectionCheckbox: () => SelectionCheckbox_default,
@@ -117,6 +119,7 @@ __export(index_exports, {
   SelectionTabFill: () => SelectionTabFill_default,
   SubTitle: () => SubTitle_default,
   THREE_MONTHS: () => THREE_MONTHS,
+  TimedProgressBar: () => TimedProgressBar_default,
   TrueFalseActivityContent: () => TrueFalseActivityContent_default,
   VerticalDividerLine: () => VerticalDividerLine_default,
   adjustForTimezone: () => adjustForTimezone,
@@ -229,6 +232,7 @@ __export(index_exports, {
   retrieveTaxonomyName: () => retrieveTaxonomyName,
   retrieveTaxonomyType: () => retrieveTaxonomyType,
   retrieveTeachingMethodologyOptionList: () => retrieveTeachingMethodologyOptionList,
+  retrieveTimeFilterOptionList: () => retrieveTimeFilterOptionList,
   retrieveTokenUsageSubTypeOptionList: () => retrieveTokenUsageSubTypeOptionList,
   retrieveTokenUsageTypeOptionList: () => retrieveTokenUsageTypeOptionList,
   retrieveTotalTimeSpentInMinutes: () => retrieveTotalTimeSpentInMinutes,
@@ -241,15 +245,164 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/components/bars/ProgressBar.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative w-full ", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "", children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-2 left-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xl", children: title }) }) : null,
+    showRemainingTime ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-2 right-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex flex-row text-xl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "mx-1", children: [
+        currentMinutes < 0 ? `00` : currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes,
+        " "
+      ] }),
+      ":",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "mx-1", children: [
+        currentSeconds < 0 ? `00` : currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds,
+        " "
+      ] })
+    ] }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: `${borderColor ? borderColor : "border-catchup-red"} border rounded-catchup-full`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `w-full  ${height ? height : ""} `, children: /* @__PURE__ */ (0, import_jsx_runtime.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
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TimedProgressBar = ({
+  title,
+  startTimer,
+  showRemainingTime,
+  totalTimeInSeconds,
+  remainingTimeInSeconds,
+  handleOnTimerEnds
+}) => {
+  const [timerRemainingTimeInSeconds, setTimerRemainingTimeInSeconds] = (0, import_react.useState)(remainingTimeInSeconds);
+  const [timerIntervalId, setTimerIntervalId] = (0, import_react.useState)(null);
+  let timerRemainingTimeInSecondsValue = 999999999999999;
+  (0, import_react.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]);
+  (0, import_react.useEffect)(() => {
+    if (timerRemainingTimeInSeconds < 0) {
+      if (timerIntervalId) {
+        clearInterval(timerIntervalId);
+      }
+      handleOnTimerEnds(startTimer);
+    }
+  }, [timerRemainingTimeInSeconds]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ProgressBar_default,
+    {
+      title,
+      showRemainingTime,
+      remainingTimeInSeconds: timerRemainingTimeInSeconds,
+      totalTimeInSeconds
+    }
+  );
+};
+var TimedProgressBar_default = TimedProgressBar;
+
+// src/components/bars/ScoreBar.tsx
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `flex items-center gap-2 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 h-5 bg-catchup-gray-100 rounded-catchup-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: `h-full rounded-catchup-full transition-all duration-300 ${getProgressBarColor(
+          score
+        )}`,
+        style: { width: `${score}%` }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "span",
+      {
+        className: `min-w-[35px] font-semibold text-right ${getTextColor(
+          score
+        )}`,
+        children: [
+          score,
+          "%"
+        ]
+      }
+    )
+  ] });
+};
+var ScoreBar_default = ScoreBar;
+
 // src/components/buttons/PrimaryButton.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/components/images/BaseImage.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/components/loading/BaseLoading.tsx
 var import_react_loader_spinner = require("react-loader-spinner");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var BaseLoading = ({
   height,
   width,
@@ -280,12 +433,12 @@ var BaseLoading = ({
     currentHeight = height;
     currentWidth = width;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       className: "flex justify-center items-center",
       style: { marginTop: currentMargin, marginBottom: currentMargin },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_react_loader_spinner.Oval,
         {
           height: currentHeight,
@@ -306,8 +459,8 @@ var BaseLoading = ({
 var BaseLoading_default = BaseLoading;
 
 // src/components/images/BaseImage.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var BaseImage = (0, import_react.forwardRef)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var BaseImage = (0, import_react2.forwardRef)(
   (props, ref) => {
     const {
       size,
@@ -327,8 +480,8 @@ var BaseImage = (0, import_react.forwardRef)(
       dataToolTipHTML,
       borderRadius
     } = props;
-    const [key, setKey] = (0, import_react.useState)((/* @__PURE__ */ new Date()).getTime());
-    const [loading, setLoading] = (0, import_react.useState)(false);
+    const [key, setKey] = (0, import_react2.useState)((/* @__PURE__ */ new Date()).getTime());
+    const [loading, setLoading] = (0, import_react2.useState)(false);
     const handleOnClick = (e) => {
       e.preventDefault();
       if (showLoading) {
@@ -378,19 +531,19 @@ var BaseImage = (0, import_react.forwardRef)(
       currentWidthClassName = widthClassName;
       currentHeightClassName = heightClassName;
     }
-    return loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       BaseLoading_default,
       {
         size: "small",
         primaryColor: "#57C2D3",
         secondaryColor: "#57C2D3"
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "span",
       {
         className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer inline-block ${hidden ? "hidden" : ""}`,
         onClick: handleOnClick,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "img",
           {
             ref,
@@ -414,7 +567,7 @@ BaseImage.displayName = "BaseImage";
 var BaseImage_default = BaseImage;
 
 // src/components/buttons/PrimaryButton.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var PrimaryButton = ({
   title,
   size,
@@ -424,7 +577,7 @@ var PrimaryButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -451,12 +604,12 @@ var PrimaryButton = ({
     currentLoadingSize = 14;
     currentHeightClassName = "h-8";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "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__ */ (0, import_jsx_runtime3.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -464,8 +617,8 @@ var PrimaryButton = ({
           primaryColor: "#ffffff",
           secondaryColor: "#ffffff"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
-        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           BaseImage_default,
           {
             src: "/icons/primary-button-arrow-left.webp",
@@ -473,8 +626,8 @@ var PrimaryButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           BaseImage_default,
           {
             src: "/icons/primary-button-arrow-right.webp",
@@ -489,8 +642,8 @@ var PrimaryButton = ({
 var PrimaryButton_default = PrimaryButton;
 
 // src/components/buttons/SecondaryButton.tsx
-var import_react3 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var SecondaryButton = ({
   title,
   size,
@@ -500,8 +653,8 @@ var SecondaryButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = (0, import_react3.useState)(false);
-  const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -528,7 +681,7 @@ var SecondaryButton = ({
     currentLoadingSize = 14;
     currentHeightClassName = "h-8";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "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}`,
@@ -539,7 +692,7 @@ var SecondaryButton = ({
       onMouseLeave: () => {
         setIsHovered(false);
       },
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -547,8 +700,8 @@ var SecondaryButton = ({
           primaryColor: "#55777f",
           secondaryColor: "#55777f"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
-        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           BaseImage_default,
           {
             src: "/icons/secondary-button-arrow-left.webp",
@@ -556,8 +709,8 @@ var SecondaryButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           BaseImage_default,
           {
             src: "/icons/secondary-button-arrow-right.webp",
@@ -572,8 +725,8 @@ var SecondaryButton = ({
 var SecondaryButton_default = SecondaryButton;
 
 // src/components/buttons/CreateButton.tsx
-var import_react4 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CreateButton = ({
   title,
   size,
@@ -583,7 +736,7 @@ var CreateButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [loading, setLoading] = (0, import_react5.useState)(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -610,12 +763,12 @@ var CreateButton = ({
     currentLoadingSize = 14;
     currentHeightClassName = "h-8";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "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__ */ (0, import_jsx_runtime5.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -623,8 +776,8 @@ var CreateButton = ({
           primaryColor: "#ffffff",
           secondaryColor: "#ffffff"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
-        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           BaseImage_default,
           {
             src: "/icons/primary-button-create-white.webp",
@@ -632,8 +785,8 @@ var CreateButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           BaseImage_default,
           {
             src: "/icons/primary-button-create-white.webp",
@@ -648,8 +801,8 @@ var CreateButton = ({
 var CreateButton_default = CreateButton;
 
 // src/components/buttons/DeleteButton.tsx
-var import_react5 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DeleteButton = ({
   title,
   size,
@@ -659,8 +812,8 @@ var DeleteButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -684,7 +837,7 @@ var DeleteButton = ({
     currentHeightClassName = "h-12";
     currentLoadingSize = 18;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "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}`,
@@ -695,7 +848,7 @@ var DeleteButton = ({
       onMouseLeave: () => {
         setIsHovered(false);
       },
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -703,8 +856,8 @@ var DeleteButton = ({
           primaryColor: "#55777f",
           secondaryColor: "#55777f"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
-        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
+        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           BaseImage_default,
           {
             src: `${isHovered ? "/icons/remove-white.webp" : "/icons/remove-red.webp"}`,
@@ -712,8 +865,8 @@ var DeleteButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           BaseImage_default,
           {
             src: `${isHovered ? "/icons/remove-white.webp" : "/icons/remove-red.webp"}`,
@@ -728,8 +881,8 @@ var DeleteButton = ({
 var DeleteButton_default = DeleteButton;
 
 // src/components/buttons/CancelButton.tsx
-var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CancelButton = ({
   title,
   size,
@@ -739,8 +892,8 @@ var CancelButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = (0, import_react6.useState)(false);
-  const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
+  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react7.useState)(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -767,7 +920,7 @@ var CancelButton = ({
     currentLoadingSize = 14;
     currentHeightClassName = "h-8";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "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}`,
@@ -778,7 +931,7 @@ var CancelButton = ({
       onMouseLeave: () => {
         setIsHovered(false);
       },
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -786,8 +939,8 @@ var CancelButton = ({
           primaryColor: "#55777f",
           secondaryColor: "#55777f"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
-        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
+        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           BaseImage_default,
           {
             src: `${isHovered ? "/icons/cancel-button-arrow-left-white.webp" : "/icons/cancel-button-arrow-left.webp"}`,
@@ -795,8 +948,8 @@ var CancelButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           BaseImage_default,
           {
             src: `${isHovered ? "/icons/cancel-button-arrow-left-white.webp" : "/icons/cancel-button-arrow-left.webp"}`,
@@ -811,8 +964,8 @@ var CancelButton = ({
 var CancelButton_default = CancelButton;
 
 // src/components/buttons/ApproveButton.tsx
-var import_react7 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ApproveButton = ({
   title,
   size,
@@ -822,7 +975,7 @@ var ApproveButton = ({
   textOnly,
   iconOnly
 }) => {
-  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const [loading, setLoading] = (0, import_react8.useState)(false);
   const internalOnClick = () => __async(void 0, null, function* () {
     if (loading) return;
     if (disabled) return;
@@ -849,12 +1002,12 @@ var ApproveButton = ({
     currentLoadingSize = 14;
     currentHeightClassName = "h-8";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "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__ */ (0, import_jsx_runtime8.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         BaseLoading_default,
         {
           height: currentLoadingSize,
@@ -862,8 +1015,8 @@ var ApproveButton = ({
           primaryColor: "#ffffff",
           secondaryColor: "#ffffff"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
-        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           BaseImage_default,
           {
             src: "/icons/primary-button-arrow-left.webp",
@@ -871,8 +1024,8 @@ var ApproveButton = ({
             size: "xsmall"
           }
         ) : null,
-        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "", children: title }),
-        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           BaseImage_default,
           {
             src: "/icons/primary-button-arrow-right.webp",
@@ -887,7 +1040,7 @@ var ApproveButton = ({
 var ApproveButton_default = ApproveButton;
 
 // src/components/cards/FullCard.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FullCard = ({
   bgColor,
   opacity,
@@ -895,11 +1048,11 @@ var FullCard = ({
   usePadding,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "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__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
           className: `flex flex-col mx-auto ${usePadding === false ? "p-0" : "p-6"} h-full`,
@@ -912,7 +1065,7 @@ var FullCard = ({
 var FullCard_default = FullCard;
 
 // src/components/loading/BaseLoadingWithText.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/language/i18n.ts
 var import_i18next = __toESM(require("i18next"));
@@ -921,19 +1074,19 @@ import_i18next.default.use(import_react_i18next.initReactI18next);
 var i18n_default = import_i18next.default;
 
 // src/components/loading/BaseLoadingWithText.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var BaseLoadingWithText = (props) => {
   const { height, width, size, primaryColor, secondaryColor, hideText } = props;
-  const [initialTimestamp, setInitialTimestamp] = (0, import_react8.useState)(
+  const [initialTimestamp, setInitialTimestamp] = (0, import_react9.useState)(
     (/* @__PURE__ */ new Date()).getTime()
   );
-  const [currentTimestamp, setCurrentTimeStamp] = (0, import_react8.useState)(
+  const [currentTimestamp, setCurrentTimeStamp] = (0, import_react9.useState)(
     (/* @__PURE__ */ new Date()).getTime()
   );
   let timerId;
   let textClassName;
   let textWidth;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     timerId = setInterval(() => {
       setCurrentTimeStamp((/* @__PURE__ */ new Date()).getTime());
     }, 1e3);
@@ -969,8 +1122,8 @@ var BaseLoadingWithText = (props) => {
     textWidth = 250;
   }
   const loadingText = retrieveLoadingText();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       BaseLoading_default,
       {
         height,
@@ -980,12 +1133,12 @@ var BaseLoadingWithText = (props) => {
         secondaryColor
       }
     ),
-    !hideText && size !== "small" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    !hideText && size !== "small" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         className: `${textClassName} text-center`,
         style: { width: textWidth },
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "font-bold", children: loadingText })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-bold", children: loadingText })
       }
     ) : null
   ] });
@@ -994,7 +1147,7 @@ var BaseLoadingWithText_default = BaseLoadingWithText;
 
 // src/components/modals/BaseModal.tsx
 var import_react_modal = __toESM(require("react-modal"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var BaseModal = ({
   isOpen,
   size,
@@ -1003,7 +1156,7 @@ var BaseModal = ({
   customSize,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_react_modal.default,
     {
       isOpen,
@@ -1031,7 +1184,7 @@ var BaseModal = ({
         }
       },
       contentLabel: "",
-      children: customSize ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${customSize} font-quicksand`, children }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: customSize ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${customSize} font-quicksand`, children }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "div",
         {
           className: `font-quicksand ${size === "small" ? "w-[600px]" : size === "medium" ? "w-[900px]" : "w-[600px] lg:w-[900px] xl:w-[1200px] 2xl:w-[1500px]"}`,
@@ -1044,14 +1197,14 @@ var BaseModal = ({
 var BaseModal_default = BaseModal;
 
 // src/components/activities/empty-content/ActivityEmptyContent.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var ActivityEmptyContent = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-catchup-white text-xl", children: i18n_default.t("you_have_set_this_activity_as_empty") }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_modal2 = __toESM(require("react-modal"));
 
 // src/utilization/CatchtivityUtilization.ts
@@ -3120,15 +3273,15 @@ var constructActivityItemListSolutionOnly = (solutionMap) => {
 
 // src/components/activities/body-content/ShowBodyMediaByContentType.tsx
 var import_react_katex = require("react-katex");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var ShowBodyMediaByContentType = ({
   index,
   type,
   value,
   size
 }) => {
-  const [showFullScreen, setShowFullScreen] = (0, import_react9.useState)(false);
-  const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react9.useState)("");
+  const [showFullScreen, setShowFullScreen] = (0, import_react10.useState)(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react10.useState)("");
   const convertToPercentage = (size2) => {
     switch (size2) {
       case "1/3":
@@ -3142,11 +3295,11 @@ var ShowBodyMediaByContentType = ({
     }
   };
   const renderSpecialExpressions = (inputPart, partIndex, parentKey) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "span",
       {
         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
+        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
       },
       `${parentKey}-expr-${partIndex}`
     );
@@ -3166,7 +3319,7 @@ var ShowBodyMediaByContentType = ({
   };
   const renderTextContent = (text, itemKey) => {
     const balancedText = balanceSpecialChars(text);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(balancedText).map(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(balancedText).map(
       (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
     ) }, itemKey);
   };
@@ -3199,7 +3352,7 @@ var ShowBodyMediaByContentType = ({
         currentIndex++;
         const itemKey = `text-inside-${index}-${currentIndex}`;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-xl font-bold whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xl font-bold whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(textInsideTag).map(
             (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
           ) }, itemKey)
         );
@@ -3219,7 +3372,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3238,12 +3391,12 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "div",
             {
               className: "relative w-[200px]",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   BaseImage_default,
                   {
                     src: imageSource,
@@ -3252,12 +3405,12 @@ var ShowBodyMediaByContentType = ({
                     className: "rounded-catchup-xlarge"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "div",
                   {
                     className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
                     onClick: () => handleOpenFullScreen(imageSource),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       BaseImage_default,
                       {
                         src: "/icons/arrow-up.webp",
@@ -3286,7 +3439,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3305,7 +3458,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "video",
             {
               src: videoSource,
@@ -3328,7 +3481,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3347,7 +3500,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "audio",
             {
               src: audioSource,
@@ -3373,13 +3526,13 @@ var ShowBodyMediaByContentType = ({
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "div",
             {
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: imageText })
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: imageText })
               ]
             },
             `img-desc-${index}-${currentIndex}`
@@ -3393,7 +3546,7 @@ var ShowBodyMediaByContentType = ({
     return valuePartList;
   };
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       import_react_modal2.default,
       {
         isOpen: showFullScreen,
@@ -3422,8 +3575,8 @@ var ShowBodyMediaByContentType = ({
           }
         },
         contentLabel: "Image Fullscreen View",
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -3435,7 +3588,7 @@ var ShowBodyMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -3451,16 +3604,16 @@ var ShowBodyMediaByContentType = ({
   const RenderMainContent = () => {
     switch (type) {
       case "TEXT":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: retrieveValueParts(value) });
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: retrieveValueParts(value) });
       case "IMAGE":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "div",
           {
             className: `${convertToPercentage(
               size || ""
             )} rounded-catchup-xlarge relative`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 BaseImage_default,
                 {
                   src: value,
@@ -3469,12 +3622,12 @@ var ShowBodyMediaByContentType = ({
                   className: "w-full rounded-catchup-xlarge"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "div",
                 {
                   className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
                   onClick: () => handleOpenFullScreen(value),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     BaseImage_default,
                     {
                       src: "/icons/arrow-up.webp",
@@ -3489,7 +3642,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "VIDEO":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "video",
           {
             src: value,
@@ -3500,12 +3653,12 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "AUDIO":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "w-full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "w-full", children: [
     RenderShowFullScreenItem(),
     RenderMainContent()
   ] }, `body-content-${index}`);
@@ -3513,7 +3666,7 @@ var ShowBodyMediaByContentType = ({
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
 // src/components/activities/body-content/ActivityBodyContent.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ActivityBodyContent = ({
   templateType,
   bodyMap,
@@ -3594,7 +3747,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -3608,16 +3761,16 @@ var ActivityBodyContent = ({
 var ActivityBodyContent_default = ActivityBodyContent;
 
 // src/components/dividers/DividerLine.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var DividerLine = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
 };
 var DividerLine_default = DividerLine;
 
 // src/components/dividers/VerticalDividerLine.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var VerticalDividerLine = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
 };
 var VerticalDividerLine_default = VerticalDividerLine;
 
@@ -3626,8 +3779,8 @@ var import_react_katex2 = require("react-katex");
 
 // src/components/groups/InputGroup.tsx
 var import_react_select = __toESM(require("react-select"));
-var import_react10 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var InputGroup = ({
   type,
   title,
@@ -3648,12 +3801,12 @@ var InputGroup = ({
   limit,
   useMath
 }) => {
-  const textAreaRef = (0, import_react10.useRef)(null);
-  const latexTextAreaRef = (0, import_react10.useRef)(null);
-  const [showMathConstructor, setShowMathConstructor] = (0, import_react10.useState)(false);
-  const [mathValue, setMathValue] = (0, import_react10.useState)("");
-  const mathFieldRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const textAreaRef = (0, import_react11.useRef)(null);
+  const latexTextAreaRef = (0, import_react11.useRef)(null);
+  const [showMathConstructor, setShowMathConstructor] = (0, import_react11.useState)(false);
+  const [mathValue, setMathValue] = (0, import_react11.useState)("");
+  const mathFieldRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
     if (value) {
@@ -3662,7 +3815,7 @@ var InputGroup = ({
       textAreaRef.current.style.height = `44px`;
     }
   }, [textAreaRef, value]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!latexTextAreaRef) return;
     if (!latexTextAreaRef.current) return;
     if (value) {
@@ -3671,7 +3824,7 @@ var InputGroup = ({
       latexTextAreaRef.current.style.height = `44px`;
     }
   }, [latexTextAreaRef, value]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!useMath) return;
     import("mathlive").then(({ MathfieldElement }) => {
       if (!customElements.get("math-field")) {
@@ -3706,7 +3859,7 @@ var InputGroup = ({
       onChange && onChange(e);
     }
   };
-  const handleMathFieldChange = (0, import_react10.useCallback)(() => {
+  const handleMathFieldChange = (0, import_react11.useCallback)(() => {
     if (!mathFieldRef.current) return;
     const latexValue = mathFieldRef.current.value;
     const wasFocused = mathFieldRef.current === document.activeElement;
@@ -3729,7 +3882,7 @@ var InputGroup = ({
     setShowMathConstructor(true);
   };
   const MathConstructorModal = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       BaseModal_default,
       {
         isOpen: showMathConstructor,
@@ -3739,10 +3892,10 @@ var InputGroup = ({
           setShowMathConstructor(false);
         },
         size: "large",
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FullCard_default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "bg-white rounded-lg overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "p-6 space-y-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("math_editor") }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FullCard_default, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "bg-white rounded-lg overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-6 space-y-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("math_editor") }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "math-field",
               {
                 ref: mathFieldRef,
@@ -3769,10 +3922,10 @@ var InputGroup = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "textarea",
                 {
                   ref: latexTextAreaRef,
@@ -3782,7 +3935,7 @@ var InputGroup = ({
                   placeholder: i18n_default.t("latex_will_appear_here")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "button",
                 {
                   onClick: handleCopyLatex,
@@ -3798,13 +3951,13 @@ var InputGroup = ({
     );
   };
   const CheckboxInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: "flex flex-row items-center gap-x-1 cursor-pointer",
         onClick,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             BaseImage_default,
             {
               src: value ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -3814,15 +3967,15 @@ var InputGroup = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "", children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "", children: title })
         ]
       }
     );
   };
   const FileInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         {
           className: "w-full py-2 px-4 border border-catchup-gray-100 placeholder-catchup-gray-200 rounded-catchup-large text-black focus:outline-none focus:border-catchup-blue-400 focus:shadow-input",
@@ -3839,9 +3992,9 @@ var InputGroup = ({
     ] });
   };
   const DateInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         {
           className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error" : theme === "red" ? "border-catchup-red bg-catchup-red text-catchup-white focus:border-catchup-red" : "border-catchup-gray-100 placeholder-catchup-gray-200 focus:border-catchup-blue-400"} rounded-catchup-large text-black focus:outline-none focus:shadow-input`,
@@ -3856,9 +4009,9 @@ var InputGroup = ({
     ] });
   };
   const SearchableSelectInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         import_react_select.default,
         {
           options: convertOptionListToSelectComponent(
@@ -3921,16 +4074,16 @@ var InputGroup = ({
     ] });
   };
   const TextAreaInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "my-1 flex-1 flex flex-col relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: value && limit ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "my-1 flex-1 flex flex-col relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: title ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: value && limit ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
         ] }) : null })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "textarea",
         {
           ref: textAreaRef,
@@ -3943,22 +4096,22 @@ var InputGroup = ({
           onKeyDown
         }
       ),
-      useMath && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      useMath && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "button",
         {
           className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200 z-10",
           onClick: handleOpenMathConstructor,
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "svg",
               {
                 className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3975,13 +4128,13 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "my-1 relative", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "my-1 relative", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "div",
         {
           className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "input",
             {
               disabled,
@@ -3997,22 +4150,22 @@ var InputGroup = ({
           )
         }
       ),
-      useMath && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      useMath && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "button",
         {
           className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200",
           onClick: handleOpenMathConstructor,
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "svg",
               {
                 className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -4045,16 +4198,16 @@ var InputGroup = ({
       return CheckboxInputGroup();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     RenderMainContent(),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MathConstructorModal, {})
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MathConstructorModal, {})
   ] });
 };
 var InputGroup_default = InputGroup;
 
 // src/components/activities/material-content/DropdownActivityMaterialContent.tsx
-var import_react13 = require("react");
 var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/utilization/AppUtilization.ts
 var colors = [
@@ -4154,11 +4307,11 @@ var getColorByIndex = (index) => {
 };
 
 // src/components/dropdowns/MediaDropdown.tsx
-var import_react11 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var MediaDropdown = ({ id, answer, optionList }) => {
-  const [showDropdown, setShowDropdown] = (0, import_react11.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  const [showDropdown, setShowDropdown] = (0, import_react12.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       className: "w-full relative",
@@ -4169,17 +4322,17 @@ var MediaDropdown = ({ id, answer, optionList }) => {
         setShowDropdown(false);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "ul",
           {
             className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
-            children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               "li",
               {
                 className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "div",
                     {
                       className: `w-full flex flex-col my-2 ${option.divClassNames ? option.divClassNames : ""}`,
@@ -4187,7 +4340,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
                       children: option.media
                     }
                   ),
-                  index !== optionList.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
+                  index !== optionList.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
                 ]
               },
               option.id
@@ -4202,24 +4355,24 @@ var MediaDropdown = ({ id, answer, optionList }) => {
 var MediaDropdown_default = MediaDropdown;
 
 // src/components/activities/material-content/ShowMaterialMediaByContentType.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_modal3 = __toESM(require("react-modal"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var ShowMaterialMediaByContentType = ({
   key,
   contentType,
   src,
   canFullScreen
 }) => {
-  const [showFullScreen, setShowFullScreen] = (0, import_react12.useState)(false);
-  const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react12.useState)(null);
-  const [isLoaded, setIsLoaded] = (0, import_react12.useState)(false);
-  const [isFullHeight, setIsFullHeight] = (0, import_react12.useState)(false);
-  const imageRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const [showFullScreen, setShowFullScreen] = (0, import_react13.useState)(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react13.useState)(null);
+  const [isLoaded, setIsLoaded] = (0, import_react13.useState)(false);
+  const [isFullHeight, setIsFullHeight] = (0, import_react13.useState)(false);
+  const imageRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     setIsLoaded(false);
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!isLoaded) return;
     if (!imageRef) return;
     if (!imageRef.current) return;
@@ -4232,7 +4385,7 @@ var ShowMaterialMediaByContentType = ({
     }
   }, [isLoaded, key]);
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       import_react_modal3.default,
       {
         isOpen: showFullScreen,
@@ -4263,8 +4416,8 @@ var ShowMaterialMediaByContentType = ({
           }
         },
         contentLabel: "",
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -4276,7 +4429,7 @@ var ShowMaterialMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -4289,14 +4442,14 @@ var ShowMaterialMediaByContentType = ({
       }
     );
   };
-  return contentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+  return contentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
     RenderShowFullScreenItem(),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         className: `${isFullHeight ? "h-catchup-activity-box-item" : "max-w-catchup-activity-box-item"}  flex flex-col justify-center items-center relative`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             BaseImage_default,
             {
               src,
@@ -4309,7 +4462,7 @@ var ShowMaterialMediaByContentType = ({
               }
             }
           ),
-          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "div",
             {
               className: "absolute flex items-center justify-center top-2 right-2  h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
@@ -4321,7 +4474,7 @@ var ShowMaterialMediaByContentType = ({
                 setShowFullScreen(true);
                 setSelectedFullScreenItem(src);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/arrow-up.webp",
@@ -4335,7 +4488,7 @@ var ShowMaterialMediaByContentType = ({
         ]
       }
     ) }) })
-  ] }, key) : contentType === "VIDEO" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  ] }, key) : contentType === "VIDEO" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "video",
     {
       className: "h-catchup-activity-box-item rounded-catchup-xlarge",
@@ -4344,7 +4497,7 @@ var ShowMaterialMediaByContentType = ({
       onClick: () => {
       }
     }
-  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "audio",
     {
       className: "h-catchup-activity-box-item rounded-catchup-xlarge",
@@ -4358,7 +4511,7 @@ var ShowMaterialMediaByContentType = ({
 var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
 
 // src/components/activities/material-content/DropdownActivityMaterialContent.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var DropdownActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4369,8 +4522,8 @@ var DropdownActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [updated, setUpdated] = (0, import_react14.useState)(false);
-  (0, import_react13.useEffect)(() => {
+  const [updated, setUpdated] = (0, import_react15.useState)(false);
+  (0, import_react14.useEffect)(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "DROPDOWN"
@@ -4383,7 +4536,7 @@ var DropdownActivityMaterialContent = ({
     onChange(answer, 0, Object.keys(materialMap[0])[0]);
     setUpdated(true);
   }, [showCorrectAnswer]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!updated) return;
     setUpdated(false);
   }, [updated]);
@@ -4401,22 +4554,22 @@ var DropdownActivityMaterialContent = ({
     return "INCORRECT";
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row flex-wrap items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-row flex-wrap items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-xl", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "text-xl", children: [
           parseFloat(materialKey) + 1,
           "."
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "w-full relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             InputGroup_default,
             {
               type: "select",
@@ -4424,13 +4577,13 @@ var DropdownActivityMaterialContent = ({
               optionList: shuffleArray(
                 materialMap[materialKey][answerKey]
               ).map((materialOption) => ({
-                text: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                text: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialOption
-                ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                       import_react_katex2.InlineMath,
                       {
                         math: inputPart.value
@@ -4445,11 +4598,11 @@ var DropdownActivityMaterialContent = ({
                 onChange(answer, materialKey, e.target.value);
               }
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             MediaDropdown_default,
             {
               id: materialKey,
-              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4461,7 +4614,7 @@ var DropdownActivityMaterialContent = ({
               optionList: materialMap[materialKey][answerKey].map(
                 (materialOption, index2) => ({
                   id: index2,
-                  media: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  media: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -4480,24 +4633,24 @@ var DropdownActivityMaterialContent = ({
                 })
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
             answerMap[materialKey]
-          ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_katex2.InlineMath, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_katex2.InlineMath, { math: inputPart.value }) }) : inputPart.value
             },
             index2
           )) }) }),
-          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             BaseImage_default,
             {
               src: "/icons/checkbox.webp",
               alt: "chekbbox",
               size: "small"
             }
-          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -4513,8 +4666,8 @@ var DropdownActivityMaterialContent = ({
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
-var import_react15 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var DropdownActivityContent = ({
   answer,
   data,
@@ -4527,7 +4680,7 @@ var DropdownActivityContent = ({
   const contentMap = parseContentMapFromData(data);
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
-  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react15.useState)(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react16.useState)(() => {
     return retrieveCurrentAnswerMap();
   });
   function retrieveCurrentAnswerMap() {
@@ -4536,7 +4689,7 @@ var DropdownActivityContent = ({
     );
     return answer.data[foundIndex].answerMap;
   }
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
   const handleDropdownAnswerOnChange = (answerObj, key, value) => {
@@ -4556,8 +4709,8 @@ var DropdownActivityContent = ({
     setCurrentAnswerMap(newAnswerMap);
     changeAnswer(newAnswer);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
@@ -4566,9 +4719,9 @@ var DropdownActivityContent = ({
         templateType: "DROPDOWN"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       DropdownActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -4587,13 +4740,13 @@ var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
 var import_react_katex3 = require("react-katex");
-var import_react17 = require("react");
 var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_dnd3 = require("react-dnd");
 
 // src/components/dnds/DraggableItem.tsx
 var import_react_dnd = require("react-dnd");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DraggableItem = ({
   key,
   item,
@@ -4615,11 +4768,11 @@ var DraggableItem = ({
     })
   });
   const opacity = isDragging ? 0.4 : 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: `${isDragging ? "w-[0px] opacity-0" : "opacity-100"} transition-all duration-500`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref: drag, className: "", style: { opacity }, children: component })
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: drag, className: "", style: { opacity }, children: component })
     },
     key
   );
@@ -4627,9 +4780,9 @@ var DraggableItem = ({
 var DraggableItem_default = DraggableItem;
 
 // src/components/dnds/DroppableItem.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_dnd2 = require("react-dnd");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var DroppableItem = ({
   key,
   item,
@@ -4639,7 +4792,7 @@ var DroppableItem = ({
   target,
   setTarget
 }) => {
-  const ref = (0, import_react16.useRef)(null);
+  const ref = (0, import_react17.useRef)(null);
   const [, drop] = (0, import_react_dnd2.useDrop)({
     accept: type,
     hover() {
@@ -4649,7 +4802,7 @@ var DroppableItem = ({
     }
   });
   dropRef(drop(ref));
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       className: `w-full transition-all duration-500 h-full`,
@@ -4662,7 +4815,7 @@ var DroppableItem = ({
 var DroppableItem_default = DroppableItem;
 
 // src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4674,9 +4827,9 @@ var FillInTheBlanksActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react17.useState)([]);
-  const [selectedOption, setSelectedOption] = (0, import_react17.useState)(null);
-  const [pasteOptionIndex, setPasteOptionIndex] = (0, import_react17.useState)(null);
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react18.useState)([]);
+  const [selectedOption, setSelectedOption] = (0, import_react18.useState)(null);
+  const [pasteOptionIndex, setPasteOptionIndex] = (0, import_react18.useState)(null);
   const [{ isOver, canDrop }, drop] = (0, import_react_dnd3.useDrop)({
     accept: "FILL_IN_THE_BLANKS",
     drop: () => {
@@ -4686,10 +4839,10 @@ var FillInTheBlanksActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setShuffleOptionList(shuffleArray(optionList));
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
@@ -4721,12 +4874,12 @@ var FillInTheBlanksActivityMaterialContent = ({
     return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
-      (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
+      (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         ShowMaterialMediaByContentType_default,
         {
           contentType: contentMap.type,
@@ -4734,12 +4887,12 @@ var FillInTheBlanksActivityMaterialContent = ({
           canFullScreen: true
         },
         `${uniqueValue}-${index}`
-      ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         DraggableItem_default,
         {
           item: { index: option },
           type: "FILL_IN_THE_BLANKS",
-          component: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          component: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "div",
             {
               className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
@@ -4747,9 +4900,9 @@ var FillInTheBlanksActivityMaterialContent = ({
                 setSelectedOption(option);
                 setPasteOptionIndex(null);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "italic whitespace-pre-wrap", children: option })
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "italic whitespace-pre-wrap", children: option })
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "div",
             {
               className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
@@ -4757,7 +4910,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                 setSelectedOption(option);
                 setPasteOptionIndex(null);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4775,12 +4928,12 @@ var FillInTheBlanksActivityMaterialContent = ({
         index
       )
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
       const learnerAnswerState = checkAnswerState(
         JSON.parse(materialMap[materialKey]),
         answerMap[materialKey]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         DroppableItem_default,
         {
           item: { index },
@@ -4788,13 +4941,13 @@ var FillInTheBlanksActivityMaterialContent = ({
           target: pasteOptionIndex,
           setTarget: setPasteOptionIndex,
           dropRef: drop,
-          component: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "text-xl", children: [
+          component: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "text-xl", children: [
               parseFloat(materialKey) + 1,
               "."
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 InputGroup_default,
                 {
                   type: "textarea",
@@ -4809,14 +4962,14 @@ var FillInTheBlanksActivityMaterialContent = ({
                   }
                 }
               ) }),
-              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/checkbox.webp",
                   alt: "checkbox",
                   size: "small"
                 }
-              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/cross-red.webp",
@@ -4824,20 +4977,20 @@ var FillInTheBlanksActivityMaterialContent = ({
                   size: "small"
                 }
               ) }) : null
-            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "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__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "div",
               {
                 className: "flex-1 cursor-pointer",
                 onClick: () => {
                   onChange(answer, materialKey, "");
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -4847,13 +5000,13 @@ var FillInTheBlanksActivityMaterialContent = ({
                   `${uniqueValue}-${index}`
                 )
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
               answerMap[materialKey]
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }, materialKey) })
@@ -4867,8 +5020,8 @@ var FillInTheBlanksActivityMaterialContent = ({
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
-var import_react19 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var FillInTheBlanksActivityContent = ({
   answer,
   data,
@@ -4888,7 +5041,7 @@ var FillInTheBlanksActivityContent = ({
     "FILL_IN_THE_BLANKS"
   );
   const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList ? JSON.parse(data.fillInTheBlanksIncorrectList) : [];
-  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react19.useState)(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react20.useState)(() => {
     return retrieveCurrentAnswerMap();
   });
   function retrieveCurrentAnswerMap() {
@@ -4897,7 +5050,7 @@ var FillInTheBlanksActivityContent = ({
     );
     return answer.data[foundIndex].answerMap;
   }
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
   const constructAnswerOptionList = () => {
@@ -4935,8 +5088,8 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(newAnswerMap);
     changeAnswer(newAnswer);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -4945,9 +5098,9 @@ var FillInTheBlanksActivityContent = ({
         templateType: "FILL_IN_THE_BLANKS"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -4966,22 +5119,22 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_dnd4 = require("react-dnd");
 var import_react_katex4 = require("react-katex");
 
 // src/hooks/useScreenSize.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = (0, import_react20.useState)({
+  const [containerSize, setContainerSize] = (0, import_react21.useState)({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = (0, import_react20.useState)({
+  const [screenSize, setScreenSize] = (0, import_react21.useState)({
     width: window.innerWidth,
     height: window.innerHeight
   });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const handleResize = () => {
       setScreenSize({
         width: window.innerWidth,
@@ -5006,7 +5159,7 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5017,10 +5170,10 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = (0, import_react21.useState)(null);
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react21.useState)(null);
-  const [isShuffled, setIsShuffled] = (0, import_react21.useState)(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react21.useState)([]);
+  const [selectedValue, setSelectedValue] = (0, import_react22.useState)(null);
+  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react22.useState)(null);
+  const [isShuffled, setIsShuffled] = (0, import_react22.useState)(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react22.useState)([]);
   const { screenSize, containerSize } = useScreenSize_default();
   const [{ isOver, canDrop }, drop] = (0, import_react_dnd4.useDrop)({
     accept: "GROUPING",
@@ -5031,16 +5184,16 @@ var GroupingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const ref = (0, import_react21.useRef)(null);
-  const itemsRef = (0, import_react21.useRef)(null);
-  const [maxWidth, setMaxWidth] = (0, import_react21.useState)(0);
-  (0, import_react21.useEffect)(() => {
+  const ref = (0, import_react22.useRef)(null);
+  const itemsRef = (0, import_react22.useRef)(null);
+  const [maxWidth, setMaxWidth] = (0, import_react22.useState)(0);
+  (0, import_react22.useEffect)(() => {
     if (!ref) return;
     if (!ref.current) return;
     if (!screenSize) return;
     setMaxWidth(ref.current.offsetWidth - 12);
   }, [ref, screenSize]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5061,7 +5214,7 @@ var GroupingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "GROUPING"
@@ -5105,19 +5258,19 @@ var GroupingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "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__ */ (0, import_jsx_runtime26.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             DraggableItem_default,
             {
               item: { index: materialValue },
               type: "GROUPING",
-              component: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              component: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "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`,
@@ -5131,22 +5284,22 @@ var GroupingActivityMaterialContent = ({
                       setSelectedValue(null);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     "div",
                     {
                       className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                         materialValue
-                      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                         "span",
                         {
                           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
                         },
                         index2
                       )) })
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -5171,22 +5324,22 @@ var GroupingActivityMaterialContent = ({
         })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DividerLine_default, {}) : null,
-    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DividerLine_default, {}) : null,
+    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-row w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "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__ */ (0, import_jsx_runtime26.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "div",
             {
               className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
                 )
@@ -5195,12 +5348,12 @@ var GroupingActivityMaterialContent = ({
           )
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1", ref, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-full py-3", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1", ref, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-full py-3", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "div",
         {
           className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             DroppableItem_default,
             {
               item: { index: answerMapKey },
@@ -5208,7 +5361,7 @@ var GroupingActivityMaterialContent = ({
               target: selectedTargetKey,
               setTarget: setSelectedTargetKey,
               dropRef: drop,
-              component: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              component: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "div",
                 {
                   className: "h-full flex-1 flex flex-row items-center overflow-x-auto",
@@ -5221,7 +5374,7 @@ var GroupingActivityMaterialContent = ({
                         materialMap[answerMapKey],
                         answerMapValue
                       );
-                      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                         "div",
                         {
                           className: `${learnerAnswerState === "EMPTY" ? "border-catchup-lighter-gray" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"} border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`,
@@ -5237,17 +5390,17 @@ var GroupingActivityMaterialContent = ({
                               setSelectedValue(null);
                             }
                           },
-                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                             "div",
                             {
                               className: `flex flex-col items-center justify-center transition-all duration-300 min-h-[64px] min-w-[200px]`,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                                 answerMapValue
-                              ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                              ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                 "span",
                                 {
                                   className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                                  children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                                  children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                     import_react_katex4.InlineMath,
                                     {
                                       math: inputPart.value
@@ -5257,7 +5410,7 @@ var GroupingActivityMaterialContent = ({
                                 index2
                               )) }) })
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                             ShowMaterialMediaByContentType_default,
                             {
                               contentType: contentMap.type,
@@ -5283,7 +5436,7 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 
 // src/components/activities/GroupingActivityContent.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var GroupingActivityContent = ({
   answer,
   data,
@@ -5308,16 +5461,16 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: groupingBodyMap,
         templateType: "GROUPING"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       GroupingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5335,10 +5488,10 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-content/MatchingActivityMaterialContent.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_react_dnd5 = require("react-dnd");
 var import_react_katex5 = require("react-katex");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5349,10 +5502,10 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = (0, import_react22.useState)(null);
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react22.useState)(null);
-  const [isShuffled, setIsShuffled] = (0, import_react22.useState)(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react22.useState)([]);
+  const [selectedValue, setSelectedValue] = (0, import_react23.useState)(null);
+  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react23.useState)(null);
+  const [isShuffled, setIsShuffled] = (0, import_react23.useState)(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react23.useState)([]);
   const [{ isOver, canDrop }, drop] = (0, import_react_dnd5.useDrop)({
     accept: "MATCHING",
     drop: () => {
@@ -5363,8 +5516,8 @@ var MatchingActivityMaterialContent = ({
     })
   });
   const { containerSize } = useScreenSize_default();
-  const itemsRef = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  const itemsRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5383,13 +5536,13 @@ var MatchingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!itemsRef) return;
     if (!itemsRef.current) return;
     if (!containerSize) return;
@@ -5434,18 +5587,18 @@ var MatchingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "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__ */ (0, import_jsx_runtime28.jsx)(
+        children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           DraggableItem_default,
           {
             item: { index: materialValue },
             type: "MATCHING",
-            component: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            component: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "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`,
@@ -5459,22 +5612,22 @@ var MatchingActivityMaterialContent = ({
                     setSelectedValue(null);
                   }
                 },
-                children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   "div",
                   {
                     className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialValue
-                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
                     )) })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5498,27 +5651,27 @@ var MatchingActivityMaterialContent = ({
         ))
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DividerLine_default, {}) : null,
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {}) : null,
     Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-row w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "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__ */ (0, import_jsx_runtime28.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "div",
               {
                 className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                  (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+                  (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
                   )
@@ -5527,8 +5680,8 @@ var MatchingActivityMaterialContent = ({
             )
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "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"}`,
@@ -5537,7 +5690,7 @@ var MatchingActivityMaterialContent = ({
                 setSelectedValue(null);
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               DroppableItem_default,
               {
                 item: { index: answerMapKey },
@@ -5545,7 +5698,7 @@ var MatchingActivityMaterialContent = ({
                 target: selectedTargetKey,
                 setTarget: setSelectedTargetKey,
                 dropRef: drop,
-                component: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                component: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   "div",
                   {
                     className: `h-full flex-1 flex flex-row items-center justify-center `,
@@ -5558,16 +5711,16 @@ var MatchingActivityMaterialContent = ({
                         );
                       }
                     },
-                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       answerMap[answerMapKey]
-                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
-                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -5590,7 +5743,7 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 
 // src/components/activities/MatchingActivityContent.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var MatchingActivityContent = ({
   answer,
   data,
@@ -5611,16 +5764,16 @@ var MatchingActivityContent = ({
     answerMap[key] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: matchingBodyMap,
         templateType: "MATCHING"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       MatchingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5639,7 +5792,7 @@ var MatchingActivityContent_default = MatchingActivityContent;
 
 // src/components/activities/material-content/MCMAActivityMaterialContent.tsx
 var import_react_katex6 = require("react-katex");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var MCMAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5672,10 +5825,10 @@ var MCMAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswerList = retrieveCorrectAnswerList();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
           const foundAnswer = answerMap[materialKey].find(
             (learnerAnswer) => learnerAnswer === materialSubKey
@@ -5688,7 +5841,7 @@ var MCMAActivityMaterialContent = ({
           const foundIndex = correctAnswerList.findIndex(
             (correctAnswer) => correctAnswer === materialSubKey
           );
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             "div",
             {
               className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && foundIndex !== -1 || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
@@ -5696,7 +5849,7 @@ var MCMAActivityMaterialContent = ({
                 onChange(answer, materialKey, materialSubKey);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   BaseImage_default,
                   {
                     src: answerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -5706,16 +5859,16 @@ var MCMAActivityMaterialContent = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialSubKey
-                ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index3
-                )) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                )) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5729,13 +5882,13 @@ var MCMAActivityMaterialContent = ({
             index2
           );
         }
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) }, materialKey)
@@ -5745,7 +5898,7 @@ var MCMAActivityMaterialContent = ({
 var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
 
 // src/components/activities/MCMAActivityContent.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var MCMAActivityContent = ({
   answer,
   data,
@@ -5772,11 +5925,11 @@ var MCMAActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       MCMAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5794,7 +5947,7 @@ var MCMAActivityContent_default = MCMAActivityContent;
 
 // src/components/activities/material-content/MCSAActivityMaterialContent.tsx
 var import_react_katex7 = require("react-katex");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var MCSAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5824,10 +5977,10 @@ var MCSAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswer = retrieveCorrectAnswer();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "div",
         {
           className: `flex flex-row w-full ${Object.keys(materialMap[materialKey]).length <= 4 ? "justify-center" : ""} flex-wrap`,
@@ -5838,7 +5991,7 @@ var MCSAActivityMaterialContent = ({
                 materialSubKey,
                 answerMap[materialKey]
               );
-              return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                 "div",
                 {
                   className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && materialSubKey === correctAnswer || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
@@ -5846,7 +5999,7 @@ var MCSAActivityMaterialContent = ({
                     onChange(answer, materialKey, materialSubKey);
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       BaseImage_default,
                       {
                         src: answerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
@@ -5856,16 +6009,16 @@ var MCSAActivityMaterialContent = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialSubKey
-                    ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
                       },
                       index3
-                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -5881,13 +6034,13 @@ var MCSAActivityMaterialContent = ({
             }
           )
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) })
@@ -5897,7 +6050,7 @@ var MCSAActivityMaterialContent = ({
 var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
 
 // src/components/activities/MCSAActivityContent.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var MCSAActivityContent = ({
   answer,
   data,
@@ -5917,11 +6070,11 @@ var MCSAActivityContent = ({
     answerMap[key] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       MCSAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5938,7 +6091,7 @@ var MCSAActivityContent = ({
 var MCSAActivityContent_default = MCSAActivityContent;
 
 // src/components/activities/material-content/OpenEndedActivityMaterialContent.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var OpenEndedActivityMaterialContent = ({
   answer,
   contentMap,
@@ -5961,7 +6114,7 @@ var OpenEndedActivityMaterialContent = ({
   };
   const RenderTextContent = (answerMap2) => {
     const answerMapAnswer = answerMap2["ANSWER"];
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       InputGroup_default,
       {
         type: "textarea",
@@ -5974,16 +6127,16 @@ var OpenEndedActivityMaterialContent = ({
     );
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DividerLine_default, {}) }),
     contentMap.type === "TEXT" ? RenderTextContent(answerMap) : null
   ] }) });
 };
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 
 // src/components/activities/OpenEndedActivityContent.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var OpenEndedActivityContent = ({
   answer,
   data,
@@ -6001,12 +6154,12 @@ var OpenEndedActivityContent = ({
     answerMap["ANSWER"] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "div",
       {
         className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%]" : "w-full"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           ActivityBodyContent_default,
           {
             bodyMap: openEndedBodyMap,
@@ -6015,16 +6168,16 @@ var OpenEndedActivityContent = ({
         )
       }
     ),
-    showMaterialContent ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    showMaterialContent ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "div",
         {
           className: `${isFullScreen ? "contents" : "contents md:hidden"}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DividerLine_default, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DividerLine_default, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(VerticalDividerLine_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(VerticalDividerLine_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         OpenEndedActivityMaterialContent_default,
         {
           answer,
@@ -6038,14 +6191,14 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-content/OrderingActivityMaterialContent.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_dnd7 = require("react-dnd");
 var import_react_katex8 = require("react-katex");
 
 // src/components/dnds/DraggableDroppableItem.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_dnd6 = require("react-dnd");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var DraggableDroppableItem = ({
   key,
   item,
@@ -6056,7 +6209,7 @@ var DraggableDroppableItem = ({
   target,
   setTarget
 }) => {
-  const ref = (0, import_react23.useRef)(null);
+  const ref = (0, import_react24.useRef)(null);
   const [, drop] = (0, import_react_dnd6.useDrop)({
     accept: type,
     hover() {
@@ -6083,12 +6236,12 @@ var DraggableDroppableItem = ({
   });
   const opacity = isDragging ? 0.4 : 1;
   drag(drop(ref));
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       className: `${isDragging ? "w-[0px] opacity-0" : "w-full opacity-100"} transition-all duration-500`,
       ref: dropRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref, className: "w-full", style: { opacity }, children: component })
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref, className: "w-full", style: { opacity }, children: component })
     },
     key
   );
@@ -6096,7 +6249,7 @@ var DraggableDroppableItem = ({
 var DraggableDroppableItem_default = DraggableDroppableItem;
 
 // src/components/activities/material-content/OrderingActivityMaterialContent.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6107,10 +6260,10 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react24.useState)(null);
-  const [selectedKey, setSelectedKey] = (0, import_react24.useState)(null);
+  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react25.useState)(null);
+  const [selectedKey, setSelectedKey] = (0, import_react25.useState)(null);
   const { screenSize } = useScreenSize_default();
-  const [view, setView] = (0, import_react24.useState)("PC");
+  const [view, setView] = (0, import_react25.useState)("PC");
   const [{ isOver, canDrop }, drop] = (0, import_react_dnd7.useDrop)({
     accept: "ORDERING",
     drop: () => {
@@ -6120,7 +6273,7 @@ var OrderingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!screenSize) return;
     if (screenSize.width <= 768) {
       setView("TABLET");
@@ -6128,7 +6281,7 @@ var OrderingActivityMaterialContent = ({
       setView("PC");
     }
   }, [screenSize]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!showCorrectAnswer) return;
     const answerMap2 = answer.data.find(
       (answerData) => answerData.type === "ORDERING"
@@ -6173,12 +6326,12 @@ var OrderingActivityMaterialContent = ({
     return 0;
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
     const learnerAnswerState = checkAnswerState(
       answerMap[materialKey] + "",
       index + ""
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
         className: `flex flex-row items-center my-4 mx-2`,
@@ -6186,26 +6339,26 @@ var OrderingActivityMaterialContent = ({
           marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "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__ */ (0, import_jsx_runtime37.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "div",
                 {
                   className: `${selectedKey === materialKey ? "border-2 border-catchup-light-gray" : "border-2 border-catchup-blue"} flex flex-col items-center justify-center transition-all duration-300 rounded-catchup-full w-[50px] h-[50px]`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
                 }
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             DraggableDroppableItem_default,
             {
               item: { index: materialKey },
               type: "ORDERING",
               dropRef: drop,
-              component: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              component: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "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"}`,
@@ -6214,16 +6367,16 @@ var OrderingActivityMaterialContent = ({
                       setSelectedKey(materialKey);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                     materialMap[answerMap[materialKey]]
-                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_katex8.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_katex8.InlineMath, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
-                  )) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  )) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -6255,7 +6408,7 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var OrderingActivityContent = ({
   answer,
   data,
@@ -6278,16 +6431,16 @@ var OrderingActivityContent = ({
     answerMap[secondaryKey] = prevValue;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: orderingBodyMap,
         templateType: "ORDERING"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6305,9 +6458,9 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_katex9 = require("react-katex");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6319,8 +6472,8 @@ var TrueFalseActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const { screenSize } = useScreenSize_default();
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react25.useState)([]);
-  (0, import_react25.useEffect)(() => {
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react26.useState)([]);
+  (0, import_react26.useEffect)(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -6330,7 +6483,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "TRUE_FALSE"
@@ -6360,14 +6513,14 @@ var TrueFalseActivityMaterialContent = ({
     return "INCORRECT";
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
     ] }),
-    checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
+    checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
       const correctAnswer = materialMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
@@ -6378,21 +6531,21 @@ var TrueFalseActivityMaterialContent = ({
         correctAnswer,
         learnerAnswer
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
         "div",
         {
           className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 ${learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               shuffleOption
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
-            )) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            )) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6401,8 +6554,8 @@ var TrueFalseActivityMaterialContent = ({
               },
               `${uniqueValue}-${index}`
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 BaseImage_default,
                 {
                   src: answerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6413,7 +6566,7 @@ var TrueFalseActivityMaterialContent = ({
                   }
                 }
               ) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 BaseImage_default,
                 {
                   src: answerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6429,14 +6582,14 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-      answerMap.trueList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { children: item }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "underline", children: i18n_default.t("true") }) })
+    }) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+      answerMap.trueList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { children: item }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "underline", children: i18n_default.t("true") }) })
       ] })),
-      answerMap.falseList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { children: item }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "underline", children: i18n_default.t("false") }) })
+      answerMap.falseList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { children: item }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))
     ] })
   ] });
@@ -6444,7 +6597,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 
 // src/components/activities/TrueFalseActivityContent.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var TrueFalseActivityContent = ({
   answer,
   data,
@@ -6494,17 +6647,17 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: trueFalseBodyMap,
         templateType: "GROUPING"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       TrueFalseActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6523,7 +6676,7 @@ var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
 // src/components/activities/solution-content/ActivitySolutionContent.tsx
 var import_react_katex10 = require("react-katex");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -6553,8 +6706,8 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
     Object.keys(solutionMap).map((key) => {
       let currentItem;
       try {
@@ -6564,12 +6717,12 @@ var ActivitySolutionContent = ({
         return null;
       }
       const { value } = currentItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
-        (inputPart, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
+        (inputPart, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "span",
           {
             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -6581,7 +6734,7 @@ var ActivitySolutionContent_default = ActivitySolutionContent;
 
 // src/components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent.tsx
 var import_react_katex11 = require("react-katex");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -6610,21 +6763,21 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
     Object.keys(evaluationRubricMap).map((key, index) => {
       const currentItem = JSON.parse(evaluationRubricMap[key]);
       const { value } = currentItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "my-3", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "my-3", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "span",
         {
           className: "text-xl whitespace-pre-wrap",
           children: constructInputWithSpecialExpressionList(value).map(
-            (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
@@ -6638,31 +6791,31 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/boxes/SelectionBox.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     {
       className: `${option.id === selectedId ? "border-catchup-blue-400" : "border-catchup-gray-100 hover:border-catchup-blue-500"} border-2 rounded-catchup-xlarge py-3 px-8 cursor-pointer duration-300 transition-all`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
           children: [
             option.icon,
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: option.text }),
-              option.subText ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("p", { className: "text-md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { children: option.text }),
+              option.subText ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("p", { className: "text-md", children: [
                 "(",
                 option.subText,
                 ")"
@@ -6678,7 +6831,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var ActivityPreviewByData = ({
   data,
   showType,
@@ -6690,14 +6843,14 @@ var ActivityPreviewByData = ({
   showTaxonomy,
   isFullScreen
 }) => {
-  const [key, setKey] = (0, import_react26.useState)((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = (0, import_react26.useState)(null);
-  const [optionList, setOptionList] = (0, import_react26.useState)([]);
-  (0, import_react26.useEffect)(() => {
+  const [key, setKey] = (0, import_react27.useState)((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = (0, import_react27.useState)(null);
+  const [optionList, setOptionList] = (0, import_react27.useState)([]);
+  (0, import_react27.useEffect)(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
     let foundTypeOption;
@@ -6712,7 +6865,7 @@ var ActivityPreviewByData = ({
       setSelectedType(typeOptionList[0].id);
     }
   }, [typeOptionList, lockedType]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const retrieveTaxonomyNameByActivityTypeFromData = (type) => {
       let taxonomyMap = {
         name: ""
@@ -6761,10 +6914,10 @@ var ActivityPreviewByData = ({
   }, [data, lockedType, typeOptionList, showTaxonomy]);
   if (!data) return;
   const answer = constructAnswerBasedOnData(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
-    showType ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "mb-4", children: [
-      showDescription ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
+    showType ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mb-4", children: [
+      showDescription ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         SelectionBox_default,
         {
           optionList,
@@ -6775,7 +6928,7 @@ var ActivityPreviewByData = ({
         }
       )
     ] }) : null,
-    selectedType ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    selectedType ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       OrderingActivityContent_default,
       {
         answer,
@@ -6789,7 +6942,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       DropdownActivityContent_default,
       {
         answer,
@@ -6803,7 +6956,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       MCSAActivityContent_default,
       {
         answer,
@@ -6817,7 +6970,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       MCMAActivityContent_default,
       {
         answer,
@@ -6831,7 +6984,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       MatchingActivityContent_default,
       {
         answer,
@@ -6845,7 +6998,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       GroupingActivityContent_default,
       {
         answer,
@@ -6859,7 +7012,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       FillInTheBlanksActivityContent_default,
       {
         answer,
@@ -6873,7 +7026,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       OpenEndedActivityContent_default,
       {
         answer,
@@ -6883,7 +7036,7 @@ var ActivityPreviewByData = ({
         data,
         isFullScreen
       }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       TrueFalseActivityContent_default,
       {
         answer,
@@ -6898,14 +7051,14 @@ var ActivityPreviewByData = ({
         isFullScreen
       }
     ) : null }, selectedType) : null,
-    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -6917,8 +7070,8 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/activities/ActivityPreviewByAnswerData.tsx
-var import_react27 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var ActivityPreviewByAnswerData = ({
   data,
   showType = true,
@@ -6932,11 +7085,11 @@ var ActivityPreviewByAnswerData = ({
   showCorrectAnswer = false
 }) => {
   var _a;
-  const [key, setKey] = (0, import_react27.useState)((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = (0, import_react27.useState)(null);
-  const [optionList, setOptionList] = (0, import_react27.useState)([]);
-  const [answer, setAnswer] = (0, import_react27.useState)({ data: [] });
-  (0, import_react27.useEffect)(() => {
+  const [key, setKey] = (0, import_react28.useState)((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = (0, import_react28.useState)(null);
+  const [optionList, setOptionList] = (0, import_react28.useState)([]);
+  const [answer, setAnswer] = (0, import_react28.useState)({ data: [] });
+  (0, import_react28.useEffect)(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
@@ -6973,7 +7126,7 @@ var ActivityPreviewByAnswerData = ({
     }
     return taxonomyMap.name || "";
   };
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!data) return;
     const constructAnswerBasedOnData2 = () => {
       const newAnswer = { data: [] };
@@ -7012,7 +7165,7 @@ var ActivityPreviewByAnswerData = ({
     };
     constructAnswerBasedOnData2();
   }, [data, lockedType]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!data || !answer.data.length) return;
     let currentTypeOptionList = typeOptionList || answer.data.map((item) => ({
       id: item.type,
@@ -7045,37 +7198,37 @@ var ActivityPreviewByAnswerData = ({
     };
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           OpenEndedActivityContent_default,
           __spreadProps(__spreadValues({}, commonProps), {
             showMaterialContent: true
           })
         ) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
       default:
         return null;
     }
   };
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "mb-4", children: [
-      showDescription ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mb-4", children: [
+      showDescription ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         SelectionBox_default,
         {
           optionList,
@@ -7086,19 +7239,19 @@ var ActivityPreviewByAnswerData = ({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col my-2 w-full p-5", children: [
-      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ActivityEmptyContent_default, {}) : null,
-      selectedType ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: RenderSelectedActivityContent() }, selectedType) : null
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col my-2 w-full p-5", children: [
+      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}) : null,
+      selectedType ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children: RenderSelectedActivityContent() }, selectedType) : null
     ] }),
-    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7110,9 +7263,9 @@ var ActivityPreviewByAnswerData = ({
 var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7122,7 +7275,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7132,9 +7285,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       InputGroup_default,
       {
         type,
@@ -7150,14 +7303,14 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7172,14 +7325,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7189,7 +7342,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { children: option.text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -7200,7 +7353,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7210,7 +7363,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
@@ -7218,8 +7371,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7228,20 +7381,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "p",
         {
           className: `${selectedId === option.id ? "text-catchup-white bg-catchup-blue-500" : "text-catchup-gray-300"} transition-all duration-300 rounded-catchup-medium px-2 py-1`,
@@ -7255,57 +7408,57 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CoterieLabel.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -7313,16 +7466,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7330,79 +7483,79 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "", children: value }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/texts/InputWithSpecialExpression.tsx
 var import_react_katex12 = require("react-katex");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/titles/BaseTitle.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
+      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
         totalItemCount,
         " ",
         itemName
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/titles/SubTitle.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -8885,6 +9038,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) => {
@@ -9990,7 +10187,9 @@ var retrieveActivityMethodologyOptionList = () => {
   OutcomeLabel,
   PersonalLabel,
   PrimaryButton,
+  ProgressBar,
   PublishingHouseLabel,
+  ScoreBar,
   SecondaryButton,
   SelectionBox,
   SelectionCheckbox,
@@ -9998,6 +10197,7 @@ var retrieveActivityMethodologyOptionList = () => {
   SelectionTabFill,
   SubTitle,
   THREE_MONTHS,
+  TimedProgressBar,
   TrueFalseActivityContent,
   VerticalDividerLine,
   adjustForTimezone,
@@ -10110,6 +10310,7 @@ var retrieveActivityMethodologyOptionList = () => {
   retrieveTaxonomyName,
   retrieveTaxonomyType,
   retrieveTeachingMethodologyOptionList,
+  retrieveTimeFilterOptionList,
   retrieveTokenUsageSubTypeOptionList,
   retrieveTokenUsageTypeOptionList,
   retrieveTotalTimeSpentInMinutes,