catchup-library-web 2.5.8 → 2.5.10

package/dist/index.js

@@ -3688,41 +3688,33 @@ var ShowBodyMediaByContentType = ({
       case "TEXT":
         return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          "div",
-          {
-            className: `${convertToPercentage(
-              size
-            )} rounded-catchup-xlarge relative`,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            BaseImage_default,
+            {
+              src: value,
+              alt: "body-image",
+              size: "custom",
+              className: "max-h-[50vh] max-w-full object-contain rounded-catchup-xlarge"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "div",
+            {
+              className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
+              onClick: () => handleOpenFullScreen(value),
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 BaseImage_default,
                 {
-                  src: value,
-                  alt: "body-image",
+                  src: "/icons/arrow-up.webp",
+                  alt: "expand",
                   size: "custom",
-                  className: "w-full rounded-catchup-xlarge"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                "div",
-                {
-                  className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
-                  onClick: () => handleOpenFullScreen(value),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    BaseImage_default,
-                    {
-                      src: "/icons/arrow-up.webp",
-                      alt: "expand",
-                      size: "custom",
-                      className: "w-full"
-                    }
-                  )
+                  className: "w-full"
                 }
               )
-            ]
-          }
-        ) });
+            }
+          )
+        ] }) });
       case "VIDEO":
         return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "video",
@@ -3827,7 +3819,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col justify-center items-center max-h-[40vh] overflow-y-auto", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -3977,7 +3969,7 @@ var InputGroup = ({
         onRequestClose: () => {
           setShowMathConstructor(false);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-white rounded-lg overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "p-6 space-y-6", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-catchup-white rounded-lg overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "p-6 space-y-6", children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "math-field",
             {
@@ -4224,7 +4216,7 @@ var InputGroup = ({
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "div",
         {
-          className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
+          className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-catchup-white"}`,
           children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
             {
@@ -4589,7 +4581,7 @@ var ShowMaterialMediaByContentType = ({
       src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "div",
         {
-          className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1 bg-white bg-opacity-80",
+          className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1 bg-catchup-white bg-opacity-80",
           onMouseEnter: (e) => {
             e.preventDefault();
           },
@@ -5010,13 +5002,13 @@ var FillInTheBlanksActivityMaterialContent = ({
               top: `${mousePosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               InputWithSpecialExpression_default,
               {
                 value: draggedOption,
                 showSpecialOnly: false
               }
-            ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -5036,13 +5028,13 @@ var FillInTheBlanksActivityMaterialContent = ({
               top: `${touchPosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               InputWithSpecialExpression_default,
               {
                 value: draggedOption,
                 showSpecialOnly: false
               }
-            ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -5490,7 +5482,7 @@ var GroupingActivityMaterialContent = ({
           top: `${mousePosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
           (inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "span",
             {
@@ -5499,7 +5491,7 @@ var GroupingActivityMaterialContent = ({
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5519,7 +5511,7 @@ var GroupingActivityMaterialContent = ({
           top: `${touchPosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
           (inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "span",
             {
@@ -5528,7 +5520,7 @@ var GroupingActivityMaterialContent = ({
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5919,7 +5911,7 @@ var MatchingActivityMaterialContent = ({
           top: `${mousePosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
           (inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "span",
             {
@@ -5928,7 +5920,7 @@ var MatchingActivityMaterialContent = ({
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5948,7 +5940,7 @@ var MatchingActivityMaterialContent = ({
           top: `${touchPosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
           (inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "span",
             {
@@ -5957,7 +5949,7 @@ var MatchingActivityMaterialContent = ({
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -6094,7 +6086,8 @@ var MatchingActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
-  showCorrectAnswer
+  showCorrectAnswer,
+  isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
   const matchingBodyMap = parseBodyMapFromData(data, "MATCHING");
@@ -6104,16 +6097,17 @@ var MatchingActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: matchingBodyMap,
         templateType: "MATCHING"
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       MatchingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6125,7 +6119,7 @@ var MatchingActivityContent = ({
         isPreview,
         showCorrectAnswer
       }
-    )
+    ) })
   ] });
 };
 var MatchingActivityContent_default = MatchingActivityContent;
@@ -6673,45 +6667,8 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-var import_react25 = require("react");
-var import_react_katex9 = 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/activities/material-contents/OrderingActivityMaterialContent.tsx
+var import_react_katex9 = require("react-katex");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var OrderingActivityMaterialContent = ({
   uniqueValue,
@@ -6723,33 +6680,23 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedKey, setSelectedKey] = (0, import_react25.useState)(null);
-  const [draggedKey, setDraggedKey] = (0, import_react25.useState)(null);
-  const [dropTargetKey, setDropTargetKey] = (0, import_react25.useState)(null);
-  const [draggedElement, setDraggedElement] = (0, import_react25.useState)(
+  const [selectedKey, setSelectedKey] = (0, import_react24.useState)(null);
+  const [draggedKey, setDraggedKey] = (0, import_react24.useState)(null);
+  const [dropTargetKey, setDropTargetKey] = (0, import_react24.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react24.useState)(
     null
   );
-  const dragElementRef = (0, import_react25.useRef)(null);
-  const [mousePosition, setMousePosition] = (0, import_react25.useState)({
+  const dragElementRef = (0, import_react24.useRef)(null);
+  const [mousePosition, setMousePosition] = (0, import_react24.useState)({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = (0, import_react25.useState)({
+  const [touchPosition, setTouchPosition] = (0, import_react24.useState)({
     x: 0,
     y: 0
   });
-  const { screenSize } = useScreenSize_default();
-  const [view, setView] = (0, import_react25.useState)("PC");
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react25.useState)(answerMap);
-  (0, import_react25.useEffect)(() => {
-    if (!screenSize) return;
-    if (screenSize.width <= 1024) {
-      setView("TABLET");
-    } else {
-      setView("PC");
-    }
-  }, [screenSize]);
-  (0, import_react25.useEffect)(() => {
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react24.useState)(answerMap);
+  (0, import_react24.useEffect)(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
       Object.keys(answerMap).forEach((answerKey, index) => {
@@ -6767,26 +6714,6 @@ var OrderingActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  const calculateMarginTop = (index) => {
-    if (index === 0) {
-      return 0;
-    } else if (index === 1) {
-      if (contentMap.type === "TEXT") {
-        return 65;
-      } else {
-        return 130;
-      }
-    } else if (index % 2 === 0) {
-      if (contentMap.type === "TEXT") {
-        return -65;
-      } else {
-        return -130;
-      }
-    } else if (index % 2 === 1) {
-      return 0;
-    }
-    return 0;
-  };
   const handleMouseDown = (e, materialKey) => {
     if (!checkCanAnswerQuestion()) return;
     e.preventDefault();
@@ -6875,7 +6802,7 @@ var OrderingActivityMaterialContent = ({
               top: `${mousePosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               materialMap[displayAnswerMap[draggedKey]]
             ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               "span",
@@ -6884,7 +6811,7 @@ var OrderingActivityMaterialContent = ({
                 children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index
-            )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6904,7 +6831,7 @@ var OrderingActivityMaterialContent = ({
               top: `${touchPosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               materialMap[displayAnswerMap[draggedKey]]
             ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               "span",
@@ -6913,7 +6840,7 @@ var OrderingActivityMaterialContent = ({
                 children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index
-            )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6929,13 +6856,10 @@ var OrderingActivityMaterialContent = ({
             displayAnswerMap[materialKey] + "",
             index + ""
           );
-          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             "div",
             {
               className: `flex flex-row items-center my-4 mx-2`,
-              style: {
-                marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
-              },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)(
                   "div",
@@ -7001,7 +6925,8 @@ var OrderingActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
-  showCorrectAnswer
+  showCorrectAnswer,
+  isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
   const orderingBodyMap = parseBodyMapFromData(data, "ORDERING");
@@ -7013,16 +6938,17 @@ var OrderingActivityContent = ({
     answerMap2[secondaryKey] = prevValue;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: orderingBodyMap,
         templateType: "ORDERING"
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -7034,13 +6960,13 @@ var OrderingActivityContent = ({
         isPreview,
         showCorrectAnswer
       }
-    )
+    ) })
   ] });
 };
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_react_katex10 = require("react-katex");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var TrueFalseActivityMaterialContent = ({
@@ -7053,9 +6979,9 @@ var TrueFalseActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react26.useState)([]);
-  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react26.useState)(answerMap);
-  (0, import_react26.useEffect)(() => {
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react25.useState)([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react25.useState)(answerMap);
+  (0, import_react25.useEffect)(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -7065,7 +6991,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (showCorrectAnswer) {
       setDisplayAnswerMap(materialMap);
     } else {
@@ -7361,7 +7287,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 
 // src/components/boxes/SelectionBox.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
@@ -7432,11 +7358,11 @@ var ActivityPreviewByData = ({
   showMaterialContent = true,
   isPreview = true
 }) => {
-  const [selectedType, setSelectedType] = (0, import_react27.useState)(null);
-  const [optionList, setOptionList] = (0, import_react27.useState)([]);
-  const [answerMapMap, setAnswerMapMap] = (0, import_react27.useState)({});
-  const [activityTemplateTypeList, setActivityTemplateTypeList] = (0, import_react27.useState)([]);
-  (0, import_react27.useEffect)(() => {
+  const [selectedType, setSelectedType] = (0, import_react26.useState)(null);
+  const [optionList, setOptionList] = (0, import_react26.useState)([]);
+  const [answerMapMap, setAnswerMapMap] = (0, import_react26.useState)({});
+  const [activityTemplateTypeList, setActivityTemplateTypeList] = (0, import_react26.useState)([]);
+  (0, import_react26.useEffect)(() => {
     if (!data) return;
     let currentActivityTemplateMapList = JSON.parse(
       JSON.stringify(ACTIVITY_TEMPLATE_LIST)
@@ -7454,7 +7380,7 @@ var ActivityPreviewByData = ({
     }
     setActivityTemplateTypeList(currentActivityTemplateMapList);
   }, [data, answerType, typeList]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentOptionList = [];
     for (const activityTemplateType of activityTemplateTypeList) {
@@ -7474,11 +7400,11 @@ var ActivityPreviewByData = ({
     }
     setOptionList(currentOptionList);
   }, [activityTemplateTypeList, showDifficulty]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentAnswerMapMap = {};
     for (const activityTemplateMap of activityTemplateTypeList) {
@@ -7663,7 +7589,7 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-var import_react28 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var PageTravelGroup = ({
   isImageProcessing,
@@ -7673,90 +7599,104 @@ var PageTravelGroup = ({
   setPageNumber,
   setImageReady
 }) => {
-  const [totalPageNumber, setTotalPageNumber] = (0, import_react28.useState)(0);
-  const [newPageNumber, setNewPageNumber] = (0, import_react28.useState)(0);
-  (0, import_react28.useEffect)(() => {
+  const [totalPageNumber, setTotalPageNumber] = (0, import_react27.useState)(0);
+  const [newPageNumber, setNewPageNumber] = (0, import_react27.useState)(0);
+  (0, import_react27.useEffect)(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
   }, [initialTotalPageNumber]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      BaseImage_default,
-      {
-        size: "small",
-        alt: "arrow-left",
-        src: "/icons/arrow-left.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber - 1 >= 0) {
-              setPageNumber(pageNumber - 1);
-            }
-            setImageReady(false);
-          }
-        }
-      }
-    ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      "p",
+  const handlePageChange = (newPage) => {
+    if (isImageProcessing) {
+      handleImageProcessing();
+    } else {
+      setPageNumber(newPage);
+      setImageReady(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "button",
       {
-        className: `${pageNumber === index ? "text-xl" : "text-md"} cursor-pointer`,
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            setPageNumber(index);
-            setImageReady(false);
-          }
-        },
-        children: index + 1
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber <= 0,
+        onClick: () => handlePageChange(pageNumber - 1),
+        children: "\u2190"
       }
-    ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      BaseImage_default,
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: "text-md", children: [
+      pageNumber + 1,
+      " / ",
+      totalPageNumber
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "button",
       {
-        size: "small",
-        alt: "arrow-right",
-        src: "/icons/arrow-right.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber + 1 <= totalPageNumber) {
-              setPageNumber(pageNumber + 1);
-            }
-            setImageReady(false);
-          }
-        }
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber >= totalPageNumber - 1,
+        onClick: () => handlePageChange(pageNumber + 1),
+        children: "\u2192"
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "input",
       {
-        className: `w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input`,
+        className: "w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input",
         type: "number",
         value: newPageNumber,
         onChange: (e) => {
-          const inputPageNumber = parseInt(e.target.value);
-          setNewPageNumber(inputPageNumber);
+          setNewPageNumber(parseInt(e.target.value));
         },
         onKeyDown: (e) => {
           if (isNaN(newPageNumber) || newPageNumber <= 0 || newPageNumber > totalPageNumber)
             return;
           if (e.key === "Enter") {
-            setPageNumber(newPageNumber - 1);
+            handlePageChange(newPageNumber - 1);
           }
         }
       }
-    ) })
+    )
   ] });
 };
 var PageTravelGroup_default = PageTravelGroup;
 
+// src/hooks/useScreenSize.ts
+var import_react28 = require("react");
+var useScreenSize = () => {
+  const [containerSize, setContainerSize] = (0, import_react28.useState)({
+    width: 0,
+    height: 0
+  });
+  const [screenSize, setScreenSize] = (0, import_react28.useState)({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  (0, import_react28.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/boxes/SelectionCheckbox.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var SelectionCheckbox = ({