catchup-library-web 1.19.0 → 1.20.1

package/dist/index.js

@@ -1273,14 +1273,14 @@ var BasePDF = ({ file }) => {
 };
 var BasePDF_default = BasePDF;
 
-// src/components/activities/empty-content/ActivityEmptyContent.tsx
+// src/components/activities/empty-contents/ActivityEmptyContent.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var ActivityEmptyContent = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime17.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
+// src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
 var import_react11 = require("react");
 var import_react_modal2 = __toESM(require("react-modal"));
 
@@ -3363,7 +3363,7 @@ var retrieveOpticalExamPartTypeOptionList = () => {
   ];
 };
 
-// src/components/activities/body-content/ShowBodyMediaByContentType.tsx
+// src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
 var import_react_katex = require("react-katex");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var ShowBodyMediaByContentType = ({
@@ -3391,7 +3391,7 @@ var ShowBodyMediaByContentType = ({
       "span",
       {
         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
+        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
       },
       inputPartIndex
     );
@@ -3736,7 +3736,7 @@ var ShowBodyMediaByContentType = ({
 };
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
-// src/components/activities/body-content/ActivityBodyContent.tsx
+// src/components/activities/body-contents/ActivityBodyContent.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var ActivityBodyContent = ({
   templateType,
@@ -3845,7 +3845,7 @@ var VerticalDividerLine = () => {
 };
 var VerticalDividerLine_default = VerticalDividerLine;
 
-// src/components/activities/material-content/DropdownActivityMaterialContent.tsx
+// src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
 var import_react_katex2 = require("react-katex");
 
 // src/components/groups/InputGroup.tsx
@@ -4276,7 +4276,7 @@ var InputGroup = ({
 };
 var InputGroup_default = InputGroup;
 
-// src/components/activities/material-content/DropdownActivityMaterialContent.tsx
+// src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
 var import_react15 = require("react");
 var import_react16 = require("react");
 
@@ -4425,7 +4425,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
 };
 var MediaDropdown_default = MediaDropdown;
 
-// src/components/activities/material-content/ShowMaterialMediaByContentType.tsx
+// src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx
 var import_react14 = require("react");
 var import_react_modal3 = __toESM(require("react-modal"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
@@ -4513,12 +4513,12 @@ var ShowMaterialMediaByContentType = ({
       }
     );
   };
-  return contentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+  return contentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
     RenderShowFullScreenItem(),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "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__ */ (0, import_jsx_runtime24.jsx)(
             BaseImage_default,
@@ -4559,10 +4559,10 @@ var ShowMaterialMediaByContentType = ({
         ]
       }
     ) }) })
-  ] }, key) : contentType === "VIDEO" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  ] }) : contentType === "VIDEO" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "video",
     {
-      className: "h-catchup-activity-box-item rounded-catchup-xlarge",
+      className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
       src,
       controls: true,
       onClick: () => {
@@ -4571,7 +4571,7 @@ var ShowMaterialMediaByContentType = ({
   ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "audio",
     {
-      className: "h-catchup-activity-box-item rounded-catchup-xlarge",
+      className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
       src,
       controls: true,
       onClick: () => {
@@ -4581,7 +4581,7 @@ var ShowMaterialMediaByContentType = ({
 };
 var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
 
-// src/components/activities/material-content/DropdownActivityMaterialContent.tsx
+// src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var DropdownActivityMaterialContent = ({
   uniqueValue,
@@ -4654,7 +4654,7 @@ var DropdownActivityMaterialContent = ({
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       import_react_katex2.InlineMath,
                       {
                         math: inputPart.value
@@ -4673,7 +4673,7 @@ var DropdownActivityMaterialContent = ({
             MediaDropdown_default,
             {
               id: materialKey,
-              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("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__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4710,7 +4710,7 @@ var DropdownActivityMaterialContent = ({
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_katex2.InlineMath, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_katex2.InlineMath, { math: inputPart.value }) }) : inputPart.value
             },
             index2
           )) }) }),
@@ -4764,6 +4764,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") {
@@ -4809,7 +4810,7 @@ var DropdownActivityContent = ({
 };
 var DropdownActivityContent_default = DropdownActivityContent;
 
-// src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
+// src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
 var import_react_katex3 = require("react-katex");
 var import_react19 = require("react");
 var import_react20 = require("react");
@@ -4874,7 +4875,7 @@ var DroppableItem = ({
 };
 var DroppableItem_default = DroppableItem;
 
-// src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
+// src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
@@ -5040,7 +5041,7 @@ var FillInTheBlanksActivityMaterialContent = ({
             ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime29.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"}`,
+                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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -5066,7 +5067,7 @@ var FillInTheBlanksActivityMaterialContent = ({
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }, materialKey) })
@@ -5132,6 +5133,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") {
@@ -5178,47 +5180,10 @@ var FillInTheBlanksActivityContent = ({
 };
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
-// src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-var import_react23 = require("react");
+// src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
+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_react22 = require("react");
-var useScreenSize = () => {
-  const [containerSize, setContainerSize] = (0, import_react22.useState)({
-    width: 0,
-    height: 0
-  });
-  const [screenSize, setScreenSize] = (0, import_react22.useState)({
-    width: window.innerWidth,
-    height: window.innerHeight
-  });
-  (0, import_react22.useEffect)(() => {
-    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
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var GroupingActivityMaterialContent = ({
   uniqueValue,
@@ -5230,11 +5195,10 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  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 { screenSize, containerSize } = useScreenSize_default();
+  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 [{ isOver, canDrop }, drop] = (0, import_react_dnd4.useDrop)({
     accept: "GROUPING",
     drop: () => {
@@ -5244,16 +5208,8 @@ var GroupingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const ref = (0, import_react23.useRef)(null);
-  const itemsRef = (0, import_react23.useRef)(null);
-  const [maxWidth, setMaxWidth] = (0, import_react23.useState)(0);
-  (0, import_react23.useEffect)(() => {
-    if (!ref) return;
-    if (!ref.current) return;
-    if (!screenSize) return;
-    setMaxWidth(ref.current.offsetWidth - 12);
-  }, [ref, screenSize]);
-  (0, import_react23.useEffect)(() => {
+  const ref = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5274,7 +5230,7 @@ var GroupingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "GROUPING"
@@ -5319,82 +5275,71 @@ var GroupingActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
   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) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            DraggableItem_default,
-            {
-              item: { index: materialValue },
-              type: "GROUPING",
-              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`,
-                  onMouseDown: () => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedValue(materialValue);
-                    }
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          DraggableItem_default,
+          {
+            item: { index: materialValue },
+            type: "GROUPING",
+            component: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              "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__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  materialValue
+                ).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_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
-                  onMouseUp: () => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedValue(null);
-                    }
+                  index2
+                )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  ShowMaterialMediaByContentType_default,
+                  {
+                    contentType: contentMap.type,
+                    src: materialValue,
+                    canFullScreen: true
                   },
-                  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_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                        materialValue
-                      ).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_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
-                        },
-                        index2
-                      )) })
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                    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__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {}) : null,
-    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row w-full", children: [
+            ),
+            moveCardHandler: () => {
+              if (!selectedTargetKey) return;
+              if (!selectedValue) return;
+              handleGroupingActivityItemOnChange(
+                selectedTargetKey,
+                selectedValue
+              );
+            }
+          },
+          index
+        );
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {})
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "overflow-y-auto max-h-[600px]", children: Object.keys(answerMap).map((answerMapKey, index) => /* @__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: `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__ */ (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_runtime31.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
                 (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   "span",
                   {
@@ -5409,7 +5354,7 @@ var GroupingActivityMaterialContent = ({
         }
       ) }),
       /* @__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", ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-full py-3", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-full py-3", children: /* @__PURE__ */ (0, import_jsx_runtime31.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`,
@@ -5421,20 +5366,17 @@ var GroupingActivityMaterialContent = ({
               target: selectedTargetKey,
               setTarget: setSelectedTargetKey,
               dropRef: drop,
-              component: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                "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__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              component: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    "div",
+                    {
+                      className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"}`,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime31.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`,
@@ -5450,47 +5392,41 @@ var GroupingActivityMaterialContent = ({
                               setSelectedValue(null);
                             }
                           },
-                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                            "div",
+                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                            answerMapValue
+                          ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                            "span",
                             {
-                              className: `flex flex-col items-center justify-center transition-all duration-300 min-h-[64px] min-w-[200px]`,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                                answerMapValue
-                              ).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_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                import_react_katex4.InlineMath,
                                 {
-                                  className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                                  children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                                    import_react_katex4.InlineMath,
-                                    {
-                                      math: inputPart.value
-                                    }
-                                  ) }) : inputPart.value
-                                },
-                                index2
-                              )) }) })
-                            }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                  math: inputPart.value
+                                }
+                              ) }) : inputPart.value
+                            },
+                            index2
+                          )) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                             ShowMaterialMediaByContentType_default,
                             {
                               contentType: contentMap.type,
                               src: answerMapValue,
                               canFullScreen: false
                             },
-                            `${uniqueValue}-${index}`
+                            `${uniqueValue}-${answerMapIndex}`
                           )
                         }
-                      ) }) });
+                      )
                     }
-                  )
+                  ) }, answerMapIndex);
                 }
-              )
+              ) }) })
             },
             index
           )
         }
       ) }) })
-    ] }, index))
+    ] }, index)) })
   ] });
 };
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
@@ -5503,13 +5439,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"
     );
@@ -5547,8 +5483,8 @@ var GroupingActivityContent = ({
 };
 var GroupingActivityContent_default = GroupingActivityContent;
 
-// src/components/activities/material-content/MatchingActivityMaterialContent.tsx
-var import_react24 = require("react");
+// src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
+var import_react23 = require("react");
 var import_react_dnd5 = require("react-dnd");
 var import_react_katex5 = require("react-katex");
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -5562,10 +5498,10 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = (0, import_react24.useState)(null);
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react24.useState)(null);
-  const [isShuffled, setIsShuffled] = (0, import_react24.useState)(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react24.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: () => {
@@ -5575,9 +5511,8 @@ var MatchingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const { containerSize } = useScreenSize_default();
-  const itemsRef = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(() => {
+  const itemsRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5596,31 +5531,17 @@ var MatchingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer]);
-  (0, import_react24.useEffect)(() => {
-    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 = [];
@@ -5648,71 +5569,73 @@ var MatchingActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)(
-          DraggableItem_default,
-          {
-            item: { index: materialValue },
-            type: "MATCHING",
-            component: /* @__PURE__ */ (0, import_jsx_runtime33.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`,
-                onMouseDown: () => {
-                  if (checkCanAnswerQuestion()) {
-                    setSelectedValue(materialValue);
-                  }
-                },
-                onMouseUp: () => {
-                  if (checkCanAnswerQuestion()) {
-                    setSelectedValue(null);
-                  }
-                },
-                children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                  "div",
-                  {
-                    className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                      materialValue
-                    ).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_runtime33.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
-                      },
-                      index2
-                    )) })
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                  ShowMaterialMediaByContentType_default,
-                  {
-                    contentType: contentMap.type,
-                    src: materialValue,
-                    canFullScreen: true
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "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__ */ (0, import_jsx_runtime33.jsx)(
+            DraggableItem_default,
+            {
+              item: { index: materialValue },
+              type: "MATCHING",
+              component: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                "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__ */ (0, import_jsx_runtime33.jsx)(
+                    "div",
+                    {
+                      className: `flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto`,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                        materialValue
+                      ).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_runtime33.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        },
+                        index2
+                      )) })
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    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__ */ (0, import_jsx_runtime33.jsx)(DividerLine_default, {}) : null,
-    Object.keys(answerMap).map((answerMapKey, index) => {
+            },
+            index
+          ))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DividerLine_default, {}) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "overflow-y-auto max-h-[600px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
@@ -5721,30 +5644,24 @@ var MatchingActivityMaterialContent = ({
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)(
-              "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__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 m-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+              answerMapKey
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "span",
               {
-                className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).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_runtime33.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
-                    },
-                    index2
-                  )
-                ) })
-              }
-            )
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )) }) })
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime33.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"}`,
+            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);
@@ -5761,7 +5678,7 @@ var MatchingActivityMaterialContent = ({
                 component: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "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()) {
@@ -5771,13 +5688,13 @@ var MatchingActivityMaterialContent = ({
                         );
                       }
                     },
-                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       answerMap[answerMapKey]
                     ).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_runtime33.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
                     )) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -5797,7 +5714,7 @@ var MatchingActivityMaterialContent = ({
           }
         ) })
       ] }, index);
-    })
+    }) })
   ] });
 };
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
@@ -5810,13 +5727,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"
     );
@@ -5850,7 +5767,7 @@ var MatchingActivityContent = ({
 };
 var MatchingActivityContent_default = MatchingActivityContent;
 
-// src/components/activities/material-content/MCMAActivityMaterialContent.tsx
+// src/components/activities/material-contents/MCMAActivityMaterialContent.tsx
 var import_react_katex6 = require("react-katex");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var MCMAActivityMaterialContent = ({
@@ -5925,7 +5842,7 @@ var MCMAActivityMaterialContent = ({
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index3
                 )) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -5948,7 +5865,7 @@ var MCMAActivityMaterialContent = ({
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) }, materialKey)
@@ -5971,6 +5888,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"
     );
@@ -6005,7 +5923,7 @@ var MCMAActivityContent = ({
 };
 var MCMAActivityContent_default = MCMAActivityContent;
 
-// src/components/activities/material-content/MCSAActivityMaterialContent.tsx
+// src/components/activities/material-contents/MCSAActivityMaterialContent.tsx
 var import_react_katex7 = require("react-katex");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var MCSAActivityMaterialContent = ({
@@ -6075,7 +5993,7 @@ var MCSAActivityMaterialContent = ({
                       "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_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
                       },
                       index3
                     )) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -6100,7 +6018,7 @@ var MCSAActivityMaterialContent = ({
         "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_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) })
@@ -6123,6 +6041,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"
     );
@@ -6178,7 +6097,7 @@ var retrieveDocumentTypeFromExtension = (format) => {
   return "";
 };
 
-// src/components/activities/material-content/OpenEndedActivityMaterialContent.tsx
+// src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var OpenEndedActivityMaterialContent = ({
   answer,
@@ -6291,11 +6210,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"
     );
@@ -6340,11 +6261,46 @@ var OpenEndedActivityContent = ({
 };
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
-// src/components/activities/material-content/OrderingActivityMaterialContent.tsx
+// src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
 var import_react26 = require("react");
 var import_react_dnd7 = require("react-dnd");
 var import_react_katex8 = require("react-katex");
 
+// src/hooks/useScreenSize.ts
+var import_react24 = require("react");
+var useScreenSize = () => {
+  const [containerSize, setContainerSize] = (0, import_react24.useState)({
+    width: 0,
+    height: 0
+  });
+  const [screenSize, setScreenSize] = (0, import_react24.useState)({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  (0, import_react24.useEffect)(() => {
+    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
 var import_react25 = require("react");
 var import_react_dnd6 = require("react-dnd");
@@ -6396,7 +6352,7 @@ var DraggableDroppableItem = ({
 };
 var DraggableDroppableItem_default = DraggableDroppableItem;
 
-// src/components/activities/material-content/OrderingActivityMaterialContent.tsx
+// src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var OrderingActivityMaterialContent = ({
   uniqueValue,
@@ -6465,9 +6421,9 @@ var OrderingActivityMaterialContent = ({
     if (index === 0) {
       return 0;
     } else if (index === 1) {
-      return 150;
+      return 65;
     } else if (index % 2 === 0) {
-      return -150;
+      return -65;
     } else if (index % 2 === 1) {
       return 0;
     }
@@ -6487,19 +6443,13 @@ var OrderingActivityMaterialContent = ({
           marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("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__ */ (0, import_jsx_runtime42.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_runtime42.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_runtime42.jsx)("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__ */ (0, import_jsx_runtime42.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
             }
-          ) }),
+          ) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             DraggableDroppableItem_default,
             {
@@ -6509,7 +6459,7 @@ var OrderingActivityMaterialContent = ({
               component: /* @__PURE__ */ (0, import_jsx_runtime42.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"}`,
+                  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);
@@ -6521,7 +6471,7 @@ var OrderingActivityMaterialContent = ({
                     "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_katex8.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_katex8.InlineMath, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
                   )) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -6570,6 +6520,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"
     );
@@ -6605,7 +6556,7 @@ var OrderingActivityContent = ({
 };
 var OrderingActivityContent_default = OrderingActivityContent;
 
-// src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
+// src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
 var import_react27 = require("react");
 var import_react_katex9 = require("react-katex");
 var import_jsx_runtime44 = require("react/jsx-runtime");
@@ -6690,7 +6641,7 @@ var TrueFalseActivityMaterialContent = ({
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -6765,6 +6716,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(
@@ -6822,7 +6774,7 @@ var TrueFalseActivityContent = ({
 };
 var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
-// src/components/activities/solution-content/ActivitySolutionContent.tsx
+// src/components/activities/solution-contents/ActivitySolutionContent.tsx
 var import_react_katex10 = require("react-katex");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var ActivitySolutionContent = ({
@@ -6870,7 +6822,7 @@ var ActivitySolutionContent = ({
           "span",
           {
             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -6880,7 +6832,7 @@ var ActivitySolutionContent = ({
 };
 var ActivitySolutionContent_default = ActivitySolutionContent;
 
-// src/components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent.tsx
+// src/components/activities/evaluation-rubric-contents/ActivityEvaluationRubricContent.tsx
 var import_react_katex11 = require("react-katex");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var ActivityEvaluationRubricContent = ({
@@ -6925,7 +6877,7 @@ var ActivityEvaluationRubricContent = ({
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
@@ -7121,8 +7073,7 @@ var ActivityPreviewByData = ({
         },
         data,
         isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
+        showCorrectAnswer: true
       }
     ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       GroupingActivityContent_default,
@@ -7135,8 +7086,7 @@ var ActivityPreviewByData = ({
         },
         data,
         isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
+        showCorrectAnswer: true
       }
     ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       FillInTheBlanksActivityContent_default,
@@ -7161,6 +7111,7 @@ var ActivityPreviewByData = ({
         },
         showMaterialContent: true,
         data,
+        isPreview: true,
         isFullScreen
       }
     ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(