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

catchup-library-web 1.12.14 → 1.12.15

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

Files changed (10) hide show

package/dist/index.d.mts +29 -1
package/dist/index.d.ts +29 -1
package/dist/index.js +772 -617
package/dist/index.mjs +758 -606
package/package.json +1 -1
package/src/components/bars/ProgressBar.tsx +85 -0
package/src/components/bars/ScoreBar.tsx +37 -0
package/src/components/bars/TimedProgressBar.tsx +58 -0
package/src/index.ts +4 -0
package/src/properties/BarProperties.ts +23 -0

package/dist/index.js CHANGED Viewed

@@ -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,
@@ -241,15 +244,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 +432,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 +458,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 +479,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 +530,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 +566,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 +576,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 +603,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 +616,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 +625,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 +641,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 +652,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 +680,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 +691,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 +699,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 +708,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 +724,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 +735,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 +762,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 +775,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 +784,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 +800,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 +811,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 +836,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 +847,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 +855,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 +864,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 +880,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 +891,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 +919,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 +930,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 +938,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 +947,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 +963,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 +974,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 +1001,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 +1014,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 +1023,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 +1039,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 +1047,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 +1064,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 +1073,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 +1121,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 +1132,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 +1146,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 +1155,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 +1183,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 +1196,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 +3272,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 +3294,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 +3318,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 +3351,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 +3371,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 +3390,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 +3404,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 +3438,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 +3457,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "video",
             {
               src: videoSource,
@@ -3328,7 +3480,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 +3499,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "audio",
             {
               src: audioSource,
@@ -3373,13 +3525,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 +3545,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 +3574,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 +3587,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 +3603,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 +3621,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 +3641,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 +3652,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 +3665,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 +3746,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 +3760,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 +3778,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 +3800,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 +3814,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 +3823,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 +3858,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 +3881,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 +3891,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 +3921,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 +3934,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 +3950,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 +3966,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 +3991,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 +4008,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 +4073,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 +4095,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 +4127,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 +4149,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 +4197,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 +4306,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 +4321,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 +4339,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 +4354,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 +4384,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 +4415,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 +4428,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 +4441,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 +4461,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 +4473,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 +4487,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 +4496,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 +4510,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 +4521,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 +4535,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 +4553,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 +4576,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 +4597,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 +4613,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 +4632,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 +4665,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 +4679,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 +4688,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 +4708,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 +4718,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 +4739,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 +4767,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 +4779,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 +4791,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 +4801,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 +4814,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 +4826,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 +4838,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 +4873,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 +4886,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 +4899,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 +4909,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 +4927,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 +4940,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 +4961,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 +4976,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 +4999,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 +5019,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 +5040,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 +5049,7 @@ var FillInTheBlanksActivityContent = ({
     );
     return answer.data[foundIndex].answerMap;
   }
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
   const constructAnswerOptionList = () => {
@@ -4935,8 +5087,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 +5097,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 +5118,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 +5158,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 +5169,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 +5183,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 +5213,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 +5257,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 +5283,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 +5323,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 +5347,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 +5360,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 +5373,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 +5389,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 +5409,7 @@ var GroupingActivityMaterialContent = ({
                                 index2
                               )) }) })
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                             ShowMaterialMediaByContentType_default,
                             {
                               contentType: contentMap.type,
@@ -5283,7 +5435,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 +5460,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 +5487,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 +5501,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 +5515,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 +5535,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 +5586,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 +5611,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 +5650,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 +5679,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 +5689,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 +5697,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 +5710,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 +5742,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 +5763,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 +5791,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 +5824,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 +5840,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 +5848,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 +5858,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 +5881,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 +5897,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 +5924,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 +5946,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 +5976,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 +5990,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 +5998,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 +6008,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 +6033,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 +6049,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 +6069,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 +6090,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 +6113,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 +6126,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 +6153,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 +6167,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 +6190,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 +6208,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 +6235,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 +6248,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 +6259,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 +6272,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 +6280,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 +6325,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 +6338,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 +6366,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 +6407,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 +6430,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 +6457,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 +6471,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 +6482,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 +6512,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 +6530,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 +6553,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 +6565,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 +6581,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 +6596,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 +6646,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 +6675,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 +6705,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 +6716,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 +6733,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 +6762,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 +6790,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 +6830,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 +6842,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 +6864,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 +6913,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 +6927,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 +6941,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 +6955,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 +6969,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 +6983,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 +6997,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 +7011,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 +7025,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 +7035,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 +7050,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 +7069,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 +7084,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 +7125,7 @@ var ActivityPreviewByAnswerData = ({
     }
     return taxonomyMap.name || "";
   };
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!data) return;
     const constructAnswerBasedOnData2 = () => {
       const newAnswer = { data: [] };
@@ -7012,7 +7164,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 +7197,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 +7238,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 +7262,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 +7274,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 +7284,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 +7302,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 +7324,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 +7341,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 +7352,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 +7362,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 +7370,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 +7380,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 +7407,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 +7465,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 +7482,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;
@@ -9990,7 +10142,9 @@ var retrieveActivityMethodologyOptionList = () => {
   OutcomeLabel,
   PersonalLabel,
   PrimaryButton,
+  ProgressBar,
   PublishingHouseLabel,
+  ScoreBar,
   SecondaryButton,
   SelectionBox,
   SelectionCheckbox,
@@ -9998,6 +10152,7 @@ var retrieveActivityMethodologyOptionList = () => {
   SelectionTabFill,
   SubTitle,
   THREE_MONTHS,
+  TimedProgressBar,
   TrueFalseActivityContent,
   VerticalDividerLine,
   adjustForTimezone,