catchup-library-web 1.19.0 → 1.20.0

package/dist/index.mjs

@@ -1057,14 +1057,14 @@ var BasePDF = ({ file }) => {
 };
 var BasePDF_default = BasePDF;
 
-// src/components/activities/empty-content/ActivityEmptyContent.tsx
+// src/components/activities/empty-contents/ActivityEmptyContent.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
 var ActivityEmptyContent = () => {
   return /* @__PURE__ */ jsx17("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__ */ jsx17("div", { className: "", children: /* @__PURE__ */ jsx17("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
+// src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
 import { useState as useState11 } from "react";
 import Modal2 from "react-modal";
 
@@ -3147,7 +3147,7 @@ var retrieveOpticalExamPartTypeOptionList = () => {
   ];
 };
 
-// src/components/activities/body-content/ShowBodyMediaByContentType.tsx
+// src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
 import { InlineMath } from "react-katex";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var ShowBodyMediaByContentType = ({
@@ -3175,7 +3175,7 @@ var ShowBodyMediaByContentType = ({
       "span",
       {
         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ jsx18("span", { className: "text-2xl", children: /* @__PURE__ */ jsx18(InlineMath, { math: inputPart.value }) }) : inputPart.value
+        children: inputPart.isEquation ? /* @__PURE__ */ jsx18("span", { className: "text-xl", children: /* @__PURE__ */ jsx18(InlineMath, { math: inputPart.value }) }) : inputPart.value
       },
       inputPartIndex
     );
@@ -3520,7 +3520,7 @@ var ShowBodyMediaByContentType = ({
 };
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
-// src/components/activities/body-content/ActivityBodyContent.tsx
+// src/components/activities/body-contents/ActivityBodyContent.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 var ActivityBodyContent = ({
   templateType,
@@ -3629,7 +3629,7 @@ var VerticalDividerLine = () => {
 };
 var VerticalDividerLine_default = VerticalDividerLine;
 
-// src/components/activities/material-content/DropdownActivityMaterialContent.tsx
+// src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
 import { InlineMath as InlineMath2 } from "react-katex";
 
 // src/components/groups/InputGroup.tsx
@@ -4060,7 +4060,7 @@ var InputGroup = ({
 };
 var InputGroup_default = InputGroup;
 
-// src/components/activities/material-content/DropdownActivityMaterialContent.tsx
+// src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
 import { useEffect as useEffect5 } from "react";
 import { useState as useState15 } from "react";
 
@@ -4209,7 +4209,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
 };
 var MediaDropdown_default = MediaDropdown;
 
-// src/components/activities/material-content/ShowMaterialMediaByContentType.tsx
+// src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx
 import { useEffect as useEffect4, useRef as useRef2, useState as useState14 } from "react";
 import Modal3 from "react-modal";
 import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -4302,7 +4302,7 @@ var ShowMaterialMediaByContentType = ({
     /* @__PURE__ */ jsx24("div", { className: "my-2", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsxs14(
       "div",
       {
-        className: `${isFullHeight ? "h-catchup-activity-box-item" : "max-w-catchup-activity-box-item"}  flex flex-col justify-center items-center relative`,
+        className: `${isFullHeight ? "h-catchup-activity-media-box-item" : "max-w-catchup-activity-media-box-item"}  flex flex-col justify-center items-center relative`,
         children: [
           /* @__PURE__ */ jsx24(
             BaseImage_default,
@@ -4346,7 +4346,7 @@ var ShowMaterialMediaByContentType = ({
   ] }, key) : contentType === "VIDEO" ? /* @__PURE__ */ jsx24("div", { className: "my-2", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx24(
     "video",
     {
-      className: "h-catchup-activity-box-item rounded-catchup-xlarge",
+      className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
       src,
       controls: true,
       onClick: () => {
@@ -4355,7 +4355,7 @@ var ShowMaterialMediaByContentType = ({
   ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx24("div", { className: "my-2", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx24(
     "audio",
     {
-      className: "h-catchup-activity-box-item rounded-catchup-xlarge",
+      className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
       src,
       controls: true,
       onClick: () => {
@@ -4365,7 +4365,7 @@ var ShowMaterialMediaByContentType = ({
 };
 var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
 
-// src/components/activities/material-content/DropdownActivityMaterialContent.tsx
+// src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
 import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var DropdownActivityMaterialContent = ({
   uniqueValue,
@@ -4438,7 +4438,7 @@ var DropdownActivityMaterialContent = ({
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-2xl", children: /* @__PURE__ */ jsx25(
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-xl", children: /* @__PURE__ */ jsx25(
                       InlineMath2,
                       {
                         math: inputPart.value
@@ -4457,7 +4457,7 @@ var DropdownActivityMaterialContent = ({
             MediaDropdown_default,
             {
               id: materialKey,
-              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx25("div", { className: "w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ jsx25("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx25("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx25(
+              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx25("div", { className: "w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ jsx25("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx25("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx25(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4494,7 +4494,7 @@ var DropdownActivityMaterialContent = ({
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-2xl", children: /* @__PURE__ */ jsx25(InlineMath2, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx25("span", { className: "text-xl", children: /* @__PURE__ */ jsx25(InlineMath2, { math: inputPart.value }) }) : inputPart.value
             },
             index2
           )) }) }),
@@ -4548,6 +4548,7 @@ var DropdownActivityContent = ({
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
   const handleDropdownAnswerOnChange = (answerObj, key, value) => {
+    if (isPreview) return;
     const newAnswer = __spreadProps(__spreadValues({}, answerObj), {
       data: answerObj.data.map((item) => {
         if (item.type === "DROPDOWN") {
@@ -4593,7 +4594,7 @@ var DropdownActivityContent = ({
 };
 var DropdownActivityContent_default = DropdownActivityContent;
 
-// src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
+// src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
 import { InlineMath as InlineMath3 } from "react-katex";
 import { useState as useState17 } from "react";
 import { useEffect as useEffect7 } from "react";
@@ -4658,7 +4659,7 @@ var DroppableItem = ({
 };
 var DroppableItem_default = DroppableItem;
 
-// src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
+// src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
 import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
@@ -4824,7 +4825,7 @@ var FillInTheBlanksActivityMaterialContent = ({
             ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx29(
               "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"}`,
+                className: `w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
                 children: /* @__PURE__ */ jsx29("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx29("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
               }
             ) : /* @__PURE__ */ jsx29(
@@ -4850,7 +4851,7 @@ var FillInTheBlanksActivityMaterialContent = ({
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-2xl", children: /* @__PURE__ */ jsx29(InlineMath3, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-xl", children: /* @__PURE__ */ jsx29(InlineMath3, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }, materialKey) })
@@ -4916,6 +4917,7 @@ var FillInTheBlanksActivityContent = ({
     return optionList;
   };
   const handleFillInTheBlanksAnswerOnChange = (answerObj, key, value) => {
+    if (isPreview) return;
     const newAnswer = __spreadProps(__spreadValues({}, answerObj), {
       data: answerObj.data.map((item) => {
         if (item.type === "FILL_IN_THE_BLANKS") {
@@ -4962,47 +4964,10 @@ var FillInTheBlanksActivityContent = ({
 };
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
-// src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-import { useEffect as useEffect10, useRef as useRef4, useState as useState20 } from "react";
+// src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
+import { useEffect as useEffect9, useRef as useRef4, useState as useState19 } from "react";
 import { useDrop as useDrop3 } from "react-dnd";
 import { InlineMath as InlineMath4 } from "react-katex";
-
-// src/hooks/useScreenSize.ts
-import { useState as useState19, useEffect as useEffect9 } from "react";
-var useScreenSize = () => {
-  const [containerSize, setContainerSize] = useState19({
-    width: 0,
-    height: 0
-  });
-  const [screenSize, setScreenSize] = useState19({
-    width: window.innerWidth,
-    height: window.innerHeight
-  });
-  useEffect9(() => {
-    const handleResize = () => {
-      setScreenSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-      const container = document.getElementById("container");
-      if (!container) return;
-      const boundingClientRect = container.getBoundingClientRect();
-      setContainerSize({
-        width: boundingClientRect.width,
-        height: boundingClientRect.height
-      });
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  return { screenSize, containerSize };
-};
-var useScreenSize_default = useScreenSize;
-
-// src/components/activities/material-content/GroupingActivityMaterialContent.tsx
 import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 var GroupingActivityMaterialContent = ({
   uniqueValue,
@@ -5014,11 +4979,10 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState20(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState20(null);
-  const [isShuffled, setIsShuffled] = useState20(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
-  const { screenSize, containerSize } = useScreenSize_default();
+  const [selectedValue, setSelectedValue] = useState19(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState19(null);
+  const [isShuffled, setIsShuffled] = useState19(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState19([]);
   const [{ isOver, canDrop }, drop] = useDrop3({
     accept: "GROUPING",
     drop: () => {
@@ -5029,15 +4993,7 @@ var GroupingActivityMaterialContent = ({
     })
   });
   const ref = useRef4(null);
-  const itemsRef = useRef4(null);
-  const [maxWidth, setMaxWidth] = useState20(0);
-  useEffect10(() => {
-    if (!ref) return;
-    if (!ref.current) return;
-    if (!screenSize) return;
-    setMaxWidth(ref.current.offsetWidth - 12);
-  }, [ref, screenSize]);
-  useEffect10(() => {
+  useEffect9(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5058,7 +5014,7 @@ var GroupingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "GROUPING"
@@ -5103,82 +5059,71 @@ var GroupingActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
   return /* @__PURE__ */ jsxs19(Fragment2, { children: [
-    /* @__PURE__ */ jsx31(
-      "div",
-      {
-        ref: itemsRef,
-        className: "flex-1 flex flex-row gap-x-4 gap-y-4 overflow-auto py-2",
-        children: filteredMaterialList.map((materialValue, index) => {
-          return /* @__PURE__ */ jsx31(
-            DraggableItem_default,
-            {
-              item: { index: materialValue },
-              type: "GROUPING",
-              component: /* @__PURE__ */ jsx31(
-                "div",
-                {
-                  className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} h-catchup-activity-covering-box-item flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
-                  onMouseDown: () => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedValue(materialValue);
-                    }
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs19(Fragment2, { children: [
+      /* @__PURE__ */ jsx31("div", { className: "flex-1 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
+        return /* @__PURE__ */ jsx31(
+          DraggableItem_default,
+          {
+            item: { index: materialValue },
+            type: "GROUPING",
+            component: /* @__PURE__ */ jsx31(
+              "div",
+              {
+                className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} ${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
+                onMouseDown: () => {
+                  if (checkCanAnswerQuestion()) {
+                    setSelectedValue(materialValue);
+                  }
+                },
+                onMouseUp: () => {
+                  if (checkCanAnswerQuestion()) {
+                    setSelectedValue(null);
+                  }
+                },
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  materialValue
+                ).map((inputPart, index2) => /* @__PURE__ */ jsx31(
+                  "span",
+                  {
+                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath4, { math: inputPart.value }) }) : inputPart.value
                   },
-                  onMouseUp: () => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedValue(null);
-                    }
+                  index2
+                )) }) }) : /* @__PURE__ */ jsx31(
+                  ShowMaterialMediaByContentType_default,
+                  {
+                    contentType: contentMap.type,
+                    src: materialValue,
+                    canFullScreen: true
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31(
-                    "div",
-                    {
-                      className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                      children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                        materialValue
-                      ).map((inputPart, index2) => /* @__PURE__ */ jsx31(
-                        "span",
-                        {
-                          className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                          children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath4, { math: inputPart.value }) }) : inputPart.value
-                        },
-                        index2
-                      )) })
-                    }
-                  ) : /* @__PURE__ */ jsx31(
-                    ShowMaterialMediaByContentType_default,
-                    {
-                      contentType: contentMap.type,
-                      src: materialValue,
-                      canFullScreen: true
-                    },
-                    `${uniqueValue}-${index}`
-                  )
-                }
-              ),
-              moveCardHandler: () => {
-                if (!selectedTargetKey) return;
-                if (!selectedValue) return;
-                handleGroupingActivityItemOnChange(
-                  selectedTargetKey,
-                  selectedValue
-                );
+                  `${uniqueValue}-${index}`
+                )
               }
-            },
-            index
-          );
-        })
-      }
-    ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx31(DividerLine_default, {}) : null,
-    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
+            ),
+            moveCardHandler: () => {
+              if (!selectedTargetKey) return;
+              if (!selectedValue) return;
+              handleGroupingActivityItemOnChange(
+                selectedTargetKey,
+                selectedValue
+              );
+            }
+          },
+          index
+        );
+      }) }),
+      /* @__PURE__ */ jsx31(DividerLine_default, {})
+    ] }) : null,
+    /* @__PURE__ */ jsx31("div", { className: "overflow-y-auto max-h-[600px]", children: Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
       /* @__PURE__ */ jsx31("div", { className: "w-1/3", children: /* @__PURE__ */ jsx31(
         "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`,
+          className: `border-catchup-blue ${contentMap.type === "TEXT" ? "h-catchup-activity-text-outer-box-item" : "h-catchup-activity-media-outer-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`,
           children: /* @__PURE__ */ jsx31(
             "div",
             {
               className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-              children: /* @__PURE__ */ jsx31("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+              children: /* @__PURE__ */ jsx31("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
                 (inputPart, index2) => /* @__PURE__ */ jsx31(
                   "span",
                   {
@@ -5193,7 +5138,7 @@ var GroupingActivityMaterialContent = ({
         }
       ) }),
       /* @__PURE__ */ jsx31("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-      /* @__PURE__ */ jsx31("div", { className: "flex-1", ref, children: /* @__PURE__ */ jsx31("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx31("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ jsx31("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx31(
         "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`,
@@ -5205,20 +5150,17 @@ var GroupingActivityMaterialContent = ({
               target: selectedTargetKey,
               setTarget: setSelectedTargetKey,
               dropRef: drop,
-              component: /* @__PURE__ */ jsx31(
-                "div",
-                {
-                  className: "h-full flex-1 flex flex-row items-center overflow-x-auto",
-                  style: {
-                    maxWidth
-                  },
-                  children: answerMap[answerMapKey].map(
-                    (answerMapValue, answerMapIndex) => {
-                      const learnerAnswerState = checkAnswerState(
-                        materialMap[answerMapKey],
-                        answerMapValue
-                      );
-                      return /* @__PURE__ */ jsx31("div", { className: "p-1", children: /* @__PURE__ */ jsx31("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ jsx31(
+              component: /* @__PURE__ */ jsx31("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ jsx31("div", { className: "flex flex-row items-center gap-2 w-max h-full", children: answerMap[answerMapKey].map(
+                (answerMapValue, answerMapIndex) => {
+                  const learnerAnswerState = checkAnswerState(
+                    materialMap[answerMapKey],
+                    answerMapValue
+                  );
+                  return /* @__PURE__ */ jsx31("div", { className: "p-1", children: /* @__PURE__ */ jsx31(
+                    "div",
+                    {
+                      className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"}`,
+                      children: /* @__PURE__ */ jsx31(
                         "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`,
@@ -5234,47 +5176,41 @@ var GroupingActivityMaterialContent = ({
                               setSelectedValue(null);
                             }
                           },
-                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31(
-                            "div",
+                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx31("div", { className: "m-2", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                            answerMapValue
+                          ).map((inputPart, index2) => /* @__PURE__ */ jsx31(
+                            "span",
                             {
-                              className: `flex flex-col items-center justify-center transition-all duration-300 min-h-[64px] min-w-[200px]`,
-                              children: /* @__PURE__ */ jsx31("div", { className: "m-2", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                                answerMapValue
-                              ).map((inputPart, index2) => /* @__PURE__ */ jsx31(
-                                "span",
+                              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                              children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(
+                                InlineMath4,
                                 {
-                                  className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                                  children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(
-                                    InlineMath4,
-                                    {
-                                      math: inputPart.value
-                                    }
-                                  ) }) : inputPart.value
-                                },
-                                index2
-                              )) }) })
-                            }
-                          ) : /* @__PURE__ */ jsx31(
+                                  math: inputPart.value
+                                }
+                              ) }) : inputPart.value
+                            },
+                            index2
+                          )) }) }) }) : /* @__PURE__ */ jsx31(
                             ShowMaterialMediaByContentType_default,
                             {
                               contentType: contentMap.type,
                               src: answerMapValue,
                               canFullScreen: false
                             },
-                            `${uniqueValue}-${index}`
+                            `${uniqueValue}-${answerMapIndex}`
                           )
                         }
-                      ) }) });
+                      )
                     }
-                  )
+                  ) }, answerMapIndex);
                 }
-              )
+              ) }) })
             },
             index
           )
         }
       ) }) })
-    ] }, index))
+    ] }, index)) })
   ] });
 };
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
@@ -5287,13 +5223,13 @@ var GroupingActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
-  showCorrectAnswer,
-  isFullScreen
+  showCorrectAnswer
 }) => {
   const contentMap = parseContentMapFromData(data);
   const groupingBodyMap = parseBodyMapFromData(data, "GROUPING");
   const groupingMaterialMap = parseMaterialMapFromData(data, "GROUPING");
   const handleGroupingAnswerOnChange = (answer2, key, value, index) => {
+    if (isPreview) return;
     let foundIndex = answer2.data.findIndex(
       (answerData) => answerData.type === "GROUPING"
     );
@@ -5331,8 +5267,8 @@ var GroupingActivityContent = ({
 };
 var GroupingActivityContent_default = GroupingActivityContent;
 
-// src/components/activities/material-content/MatchingActivityMaterialContent.tsx
-import { useEffect as useEffect11, useRef as useRef5, useState as useState21 } from "react";
+// src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
+import { useEffect as useEffect10, useRef as useRef5, useState as useState20 } from "react";
 import { useDrop as useDrop4 } from "react-dnd";
 import { InlineMath as InlineMath5 } from "react-katex";
 import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -5346,10 +5282,10 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState21(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState21(null);
-  const [isShuffled, setIsShuffled] = useState21(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState21([]);
+  const [selectedValue, setSelectedValue] = useState20(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState20(null);
+  const [isShuffled, setIsShuffled] = useState20(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
   const [{ isOver, canDrop }, drop] = useDrop4({
     accept: "MATCHING",
     drop: () => {
@@ -5359,9 +5295,8 @@ var MatchingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const { containerSize } = useScreenSize_default();
   const itemsRef = useRef5(null);
-  useEffect11(() => {
+  useEffect10(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5380,31 +5315,17 @@ var MatchingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  useEffect11(() => {
+  useEffect10(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer]);
-  useEffect11(() => {
-    if (!itemsRef) return;
-    if (!itemsRef.current) return;
-    if (!containerSize) return;
-    itemsRef.current.style.width = `${containerSize.width - 220}px`;
-  }, [itemsRef, containerSize]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
     );
-    const answerMap2 = answer.data[foundIndex].answerMap;
-    const sortedAnswerMapKeys = Object.keys(answerMap2).sort(
-      (a, b) => answerMap2[a] ? answerMap2[b] ? answerMap2[a].localeCompare(answerMap2[b]) : 1 : -1
-    );
-    const sortedAnswerMap = {};
-    for (const answerMapKey of sortedAnswerMapKeys) {
-      sortedAnswerMap[answerMapKey] = answerMap2[answerMapKey];
-    }
-    return sortedAnswerMap;
+    return answer.data[foundIndex].answerMap;
   };
   const retrieveFilteredMaterialList = (answerMap2) => {
     const selectedValueList = [];
@@ -5432,71 +5353,73 @@ var MatchingActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
   return /* @__PURE__ */ jsxs21(Fragment4, { children: [
-    /* @__PURE__ */ jsx33(
-      "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__ */ jsx33(
-          DraggableItem_default,
-          {
-            item: { index: materialValue },
-            type: "MATCHING",
-            component: /* @__PURE__ */ jsx33(
-              "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`,
-                onMouseDown: () => {
-                  if (checkCanAnswerQuestion()) {
-                    setSelectedValue(materialValue);
-                  }
-                },
-                onMouseUp: () => {
-                  if (checkCanAnswerQuestion()) {
-                    setSelectedValue(null);
-                  }
-                },
-                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33(
-                  "div",
-                  {
-                    className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                    children: /* @__PURE__ */ jsx33("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                      materialValue
-                    ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
-                      "span",
-                      {
-                        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-2xl", children: /* @__PURE__ */ jsx33(InlineMath5, { math: inputPart.value }) }) : inputPart.value
-                      },
-                      index2
-                    )) })
-                  }
-                ) : /* @__PURE__ */ jsx33(
-                  ShowMaterialMediaByContentType_default,
-                  {
-                    contentType: contentMap.type,
-                    src: materialValue,
-                    canFullScreen: true
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
+      /* @__PURE__ */ jsx33(
+        "div",
+        {
+          ref: itemsRef,
+          className: "flex-shrink-0 flex flex-row gap-x-4 gap-y-4 overflow-x-auto py-2",
+          children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ jsx33(
+            DraggableItem_default,
+            {
+              item: { index: materialValue },
+              type: "MATCHING",
+              component: /* @__PURE__ */ jsx33(
+                "div",
+                {
+                  className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} ${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
+                  onMouseDown: () => {
+                    if (checkCanAnswerQuestion()) {
+                      setSelectedValue(materialValue);
+                    }
                   },
-                  `${uniqueValue}-${index}`
-                )
+                  onMouseUp: () => {
+                    if (checkCanAnswerQuestion()) {
+                      setSelectedValue(null);
+                    }
+                  },
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33(
+                    "div",
+                    {
+                      className: `flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto`,
+                      children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                        materialValue
+                      ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
+                        "span",
+                        {
+                          className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                          children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                        },
+                        index2
+                      )) })
+                    }
+                  ) : /* @__PURE__ */ jsx33(
+                    ShowMaterialMediaByContentType_default,
+                    {
+                      contentType: contentMap.type,
+                      src: materialValue,
+                      canFullScreen: true
+                    },
+                    `${uniqueValue}-${index}`
+                  )
+                }
+              ),
+              moveCardHandler: () => {
+                if (!selectedTargetKey) return;
+                if (!selectedValue) return;
+                handleMatchingActivityItemOnChange(
+                  selectedTargetKey,
+                  selectedValue
+                );
               }
-            ),
-            moveCardHandler: () => {
-              if (!selectedTargetKey) return;
-              if (!selectedValue) return;
-              handleMatchingActivityItemOnChange(
-                selectedTargetKey,
-                selectedValue
-              );
-            }
-          },
-          index
-        ))
-      }
-    ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsx33(DividerLine_default, {}) : null,
-    Object.keys(answerMap).map((answerMapKey, index) => {
+            },
+            index
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx33("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx33(DividerLine_default, {}) })
+    ] }) : null,
+    /* @__PURE__ */ jsx33("div", { className: "overflow-y-auto max-h-[600px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
@@ -5505,30 +5428,24 @@ var MatchingActivityMaterialContent = ({
         /* @__PURE__ */ jsx33("div", { className: "w-1/3", children: /* @__PURE__ */ jsx33(
           "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__ */ jsx33(
-              "div",
+            className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
+            children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center transition-all duration-300 m-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+              answerMapKey
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
+              "span",
               {
-                className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-                children: /* @__PURE__ */ jsx33("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                  (inputPart, index2) => /* @__PURE__ */ jsx33(
-                    "span",
-                    {
-                      className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-2xl", children: /* @__PURE__ */ jsx33(InlineMath5, { math: inputPart.value }) }) : inputPart.value
-                    },
-                    index2
-                  )
-                ) })
-              }
-            )
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )) }) })
           }
         ) }),
         /* @__PURE__ */ jsx33("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
         /* @__PURE__ */ jsx33("div", { className: "flex-1", children: /* @__PURE__ */ jsx33(
           "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"}`,
+            className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} ${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
             onClick: () => {
               if (checkCanAnswerQuestion()) {
                 setSelectedValue(null);
@@ -5545,7 +5462,7 @@ var MatchingActivityMaterialContent = ({
                 component: /* @__PURE__ */ jsx33(
                   "div",
                   {
-                    className: `h-full flex-1 flex flex-row items-center justify-center `,
+                    className: "h-full flex-1 flex flex-row items-center justify-center",
                     onClick: (e) => {
                       e.preventDefault();
                       if (checkCanAnswerQuestion()) {
@@ -5555,13 +5472,13 @@ var MatchingActivityMaterialContent = ({
                         );
                       }
                     },
-                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       answerMap[answerMapKey]
                     ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-2xl", children: /* @__PURE__ */ jsx33(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath5, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
                     )) }) : /* @__PURE__ */ jsx33(
@@ -5581,7 +5498,7 @@ var MatchingActivityMaterialContent = ({
           }
         ) })
       ] }, index);
-    })
+    }) })
   ] });
 };
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
@@ -5594,13 +5511,13 @@ var MatchingActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
-  showCorrectAnswer,
-  isFullScreen
+  showCorrectAnswer
 }) => {
   const contentMap = parseContentMapFromData(data);
   const matchingBodyMap = parseBodyMapFromData(data, "MATCHING");
   const matchingMaterialMap = parseMaterialMapFromData(data, "MATCHING");
   const handleMatchingAnswerOnChange = (answer2, key, value) => {
+    if (isPreview) return;
     let foundIndex = answer2.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
     );
@@ -5634,7 +5551,7 @@ var MatchingActivityContent = ({
 };
 var MatchingActivityContent_default = MatchingActivityContent;
 
-// src/components/activities/material-content/MCMAActivityMaterialContent.tsx
+// src/components/activities/material-contents/MCMAActivityMaterialContent.tsx
 import { InlineMath as InlineMath6 } from "react-katex";
 import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 var MCMAActivityMaterialContent = ({
@@ -5709,7 +5626,7 @@ var MCMAActivityMaterialContent = ({
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx35("span", { className: "text-2xl", children: /* @__PURE__ */ jsx35(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx35("span", { className: "text-xl", children: /* @__PURE__ */ jsx35(InlineMath6, { math: inputPart.value }) }) : inputPart.value
                   },
                   index3
                 )) }) : /* @__PURE__ */ jsx35(
@@ -5732,7 +5649,7 @@ var MCMAActivityMaterialContent = ({
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ jsx35("span", { className: "text-2xl", children: /* @__PURE__ */ jsx35(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx35("span", { className: "text-xl", children: /* @__PURE__ */ jsx35(InlineMath6, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) }, materialKey)
@@ -5755,6 +5672,7 @@ var MCMAActivityContent = ({
   const MCMABodyMap = parseBodyMapFromData(data, "MCMA");
   const MCMAMaterialMap = parseMaterialMapFromData(data, "MCMA");
   const handleMCMAAnswerOnChange = (answer2, key, value) => {
+    if (isPreview) return;
     let foundIndex = answer2.data.findIndex(
       (answerData) => answerData.type === "MCMA"
     );
@@ -5789,7 +5707,7 @@ var MCMAActivityContent = ({
 };
 var MCMAActivityContent_default = MCMAActivityContent;
 
-// src/components/activities/material-content/MCSAActivityMaterialContent.tsx
+// src/components/activities/material-contents/MCSAActivityMaterialContent.tsx
 import { InlineMath as InlineMath7 } from "react-katex";
 import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
 var MCSAActivityMaterialContent = ({
@@ -5859,7 +5777,7 @@ var MCSAActivityMaterialContent = ({
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx37("span", { className: "text-2xl", children: /* @__PURE__ */ jsx37(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx37("span", { className: "text-xl", children: /* @__PURE__ */ jsx37(InlineMath7, { math: inputPart.value }) }) : inputPart.value
                       },
                       index3
                     )) }) : /* @__PURE__ */ jsx37(
@@ -5884,7 +5802,7 @@ var MCSAActivityMaterialContent = ({
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ jsx37("span", { className: "text-2xl", children: /* @__PURE__ */ jsx37(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx37("span", { className: "text-xl", children: /* @__PURE__ */ jsx37(InlineMath7, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) })
@@ -5907,6 +5825,7 @@ var MCSAActivityContent = ({
   const MCSABodyMap = parseBodyMapFromData(data, "MCSA");
   const MCSAMaterialMap = parseMaterialMapFromData(data, "MCSA");
   const handleMCSAAnswerOnChange = (answer2, key, value) => {
+    if (isPreview) return;
     let foundIndex = answer2.data.findIndex(
       (answerData) => answerData.type === "MCSA"
     );
@@ -5962,7 +5881,7 @@ var retrieveDocumentTypeFromExtension = (format) => {
   return "";
 };
 
-// src/components/activities/material-content/OpenEndedActivityMaterialContent.tsx
+// src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx
 import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
 var OpenEndedActivityMaterialContent = ({
   answer,
@@ -6075,11 +5994,13 @@ var OpenEndedActivityContent = ({
   changeAnswer,
   canAnswerQuestion,
   showMaterialContent,
+  isPreview,
   isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
   const openEndedBodyMap = parseBodyMapFromData(data, "OPEN_ENDED");
   const handleOpenEndedAnswerOnChange = (answer2, value) => {
+    if (isPreview) return;
     let foundIndex = answer2.data.findIndex(
       (answerData) => answerData.type === "OPEN_ENDED"
     );
@@ -6124,11 +6045,46 @@ var OpenEndedActivityContent = ({
 };
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
-// src/components/activities/material-content/OrderingActivityMaterialContent.tsx
+// src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
 import { useEffect as useEffect12, useState as useState22 } from "react";
 import { useDrop as useDrop6 } from "react-dnd";
 import { InlineMath as InlineMath8 } from "react-katex";
 
+// src/hooks/useScreenSize.ts
+import { useState as useState21, useEffect as useEffect11 } from "react";
+var useScreenSize = () => {
+  const [containerSize, setContainerSize] = useState21({
+    width: 0,
+    height: 0
+  });
+  const [screenSize, setScreenSize] = useState21({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  useEffect11(() => {
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+      const container = document.getElementById("container");
+      if (!container) return;
+      const boundingClientRect = container.getBoundingClientRect();
+      setContainerSize({
+        width: boundingClientRect.width,
+        height: boundingClientRect.height
+      });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return { screenSize, containerSize };
+};
+var useScreenSize_default = useScreenSize;
+
 // src/components/dnds/DraggableDroppableItem.tsx
 import { useRef as useRef6 } from "react";
 import { useDrag as useDrag2, useDrop as useDrop5 } from "react-dnd";
@@ -6180,7 +6136,7 @@ var DraggableDroppableItem = ({
 };
 var DraggableDroppableItem_default = DraggableDroppableItem;
 
-// src/components/activities/material-content/OrderingActivityMaterialContent.tsx
+// src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
 import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 var OrderingActivityMaterialContent = ({
   uniqueValue,
@@ -6271,19 +6227,13 @@ var OrderingActivityMaterialContent = ({
           marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
         },
         children: [
-          /* @__PURE__ */ jsx42("div", { className: "mr-3", children: /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx42("div", { className: "mr-3", children: /* @__PURE__ */ jsx42("div", { className: "h-catchup-activity-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-y-auto", children: /* @__PURE__ */ jsx42(
             "div",
             {
-              className: `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__ */ jsx42(
-                "div",
-                {
-                  className: `${selectedKey === materialKey ? "border-2 border-catchup-light-gray" : "border-2 border-catchup-blue"} flex flex-col items-center justify-center transition-all duration-300 rounded-catchup-full w-[50px] h-[50px]`,
-                  children: /* @__PURE__ */ jsx42("p", { className: "", children: parseFloat(materialKey) + 1 })
-                }
-              )
+              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__ */ jsx42("p", { className: "", children: parseFloat(materialKey) + 1 })
             }
-          ) }),
+          ) }) }),
           /* @__PURE__ */ jsx42(
             DraggableDroppableItem_default,
             {
@@ -6293,7 +6243,7 @@ var OrderingActivityMaterialContent = ({
               component: /* @__PURE__ */ jsx42(
                 "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"}`,
+                  className: `${canDrop ? selectedKey !== materialKey ? selectedTargetKey === materialKey ? "bg-catchup-light-blue rounded-catchup-xlarge" : "bg-catchup-light-blue rounded-catchup-xlarge opacity-40" : "" : ""} ${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer p-3 ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
                   onMouseDown: () => {
                     if (checkCanAnswerQuestion()) {
                       setSelectedKey(materialKey);
@@ -6305,7 +6255,7 @@ var OrderingActivityMaterialContent = ({
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-2xl", children: /* @__PURE__ */ jsx42(InlineMath8, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-xl", children: /* @__PURE__ */ jsx42(InlineMath8, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
                   )) }) : /* @__PURE__ */ jsx42(
@@ -6354,6 +6304,7 @@ var OrderingActivityContent = ({
   const orderingBodyMap = parseBodyMapFromData(data, "ORDERING");
   const orderingMaterialMap = parseMaterialMapFromData(data, "ORDERING");
   const handleOrderingAnswerOnChange = (answer2, primaryKey, secondaryKey) => {
+    if (isPreview) return;
     let foundIndex = answer2.data.findIndex(
       (answerData) => answerData.type === "ORDERING"
     );
@@ -6389,7 +6340,7 @@ var OrderingActivityContent = ({
 };
 var OrderingActivityContent_default = OrderingActivityContent;
 
-// src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
+// src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
 import { useEffect as useEffect13, useState as useState23 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
 import { Fragment as Fragment9, jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
@@ -6474,7 +6425,7 @@ var TrueFalseActivityMaterialContent = ({
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx44("span", { className: "text-2xl", children: /* @__PURE__ */ jsx44(InlineMath9, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx44("span", { className: "text-xl", children: /* @__PURE__ */ jsx44(InlineMath9, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }) : /* @__PURE__ */ jsx44(
@@ -6549,6 +6500,7 @@ var TrueFalseActivityContent = ({
     return answer.data[foundIndex].answerMap;
   };
   const handleTrueFalseAnswerOnChange = (answer2, key, value) => {
+    if (isPreview) return;
     const answerMap = retrieveCurrentAnswerMap();
     if (key === "TRUE") {
       const foundFalseIndex = answerMap.falseList.findIndex(
@@ -6606,7 +6558,7 @@ var TrueFalseActivityContent = ({
 };
 var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
-// src/components/activities/solution-content/ActivitySolutionContent.tsx
+// src/components/activities/solution-contents/ActivitySolutionContent.tsx
 import { InlineMath as InlineMath10 } from "react-katex";
 import { jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
 var ActivitySolutionContent = ({
@@ -6654,7 +6606,7 @@ var ActivitySolutionContent = ({
           "span",
           {
             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ jsx46("span", { className: "text-2xl", children: /* @__PURE__ */ jsx46(InlineMath10, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ jsx46("span", { className: "text-xl", children: /* @__PURE__ */ jsx46(InlineMath10, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -6664,7 +6616,7 @@ var ActivitySolutionContent = ({
 };
 var ActivitySolutionContent_default = ActivitySolutionContent;
 
-// src/components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent.tsx
+// src/components/activities/evaluation-rubric-contents/ActivityEvaluationRubricContent.tsx
 import { InlineMath as InlineMath11 } from "react-katex";
 import { jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
 var ActivityEvaluationRubricContent = ({
@@ -6709,7 +6661,7 @@ var ActivityEvaluationRubricContent = ({
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx47("span", { className: "text-2xl", children: /* @__PURE__ */ jsx47(InlineMath11, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx47("span", { className: "text-xl", children: /* @__PURE__ */ jsx47(InlineMath11, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
@@ -6905,8 +6857,7 @@ var ActivityPreviewByData = ({
         },
         data,
         isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
+        showCorrectAnswer: true
       }
     ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ jsx49(
       GroupingActivityContent_default,
@@ -6919,8 +6870,7 @@ var ActivityPreviewByData = ({
         },
         data,
         isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
+        showCorrectAnswer: true
       }
     ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ jsx49(
       FillInTheBlanksActivityContent_default,
@@ -6945,6 +6895,7 @@ var ActivityPreviewByData = ({
         },
         showMaterialContent: true,
         data,
+        isPreview: true,
         isFullScreen
       }
     ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ jsx49(