catchup-library-web 1.20.36 → 1.21.1

package/dist/index.js

@@ -4907,6 +4907,10 @@ var FillInTheBlanksActivityMaterialContent = ({
     null
   );
   const dragElementRef = (0, import_react18.useRef)(null);
+  const [mousePosition, setMousePosition] = (0, import_react18.useState)({
+    x: 0,
+    y: 0
+  });
   const [touchPosition, setTouchPosition] = (0, import_react18.useState)({
     x: 0,
     y: 0
@@ -4949,6 +4953,19 @@ var FillInTheBlanksActivityMaterialContent = ({
     e.preventDefault();
     setDraggedOption(option);
     setSelectedOption(null);
+    setMousePosition({ x: e.clientX, y: e.clientY });
+  };
+  const handleMouseMove = (e) => {
+    if (!draggedOption) return;
+    setMousePosition({ x: e.clientX, y: e.clientY });
+    const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+    const dropZone = elementUnder == null ? void 0 : elementUnder.closest("[data-drop-zone]");
+    if (dropZone) {
+      const dropIndex = dropZone.getAttribute("data-drop-zone");
+      setDropTargetIndex(dropIndex);
+    } else {
+      setDropTargetIndex(null);
+    }
   };
   const handleMouseUp = () => {
     if (dropTargetIndex !== null && draggedOption !== null) {
@@ -4956,6 +4973,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     }
     setDraggedOption(null);
     setDropTargetIndex(null);
+    setMousePosition({ x: 0, y: 0 });
   };
   const handleTouchStart = (e, option, element) => {
     const touch = e.touches[0];
@@ -4987,6 +5005,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     setDraggedOption(null);
     setDropTargetIndex(null);
     setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
   };
   const handleSelectOption = (option) => {
     setSelectedOption(option);
@@ -4999,178 +5018,212 @@ var FillInTheBlanksActivityMaterialContent = ({
     }
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-row flex-wrap items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DividerLine_default, {}) }),
-    draggedOption && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      "div",
-      {
-        className: "fixed pointer-events-none z-50 opacity-80",
-        style: {
-          left: `${touchPosition.x}px`,
-          top: `${touchPosition.y}px`,
-          transform: "translate(-50%, -50%)"
-        },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          InputWithSpecialExpression_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "div",
+    {
+      className: "flex flex-row flex-wrap items-center",
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DividerLine_default, {}) }),
+        draggedOption && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "div",
           {
-            value: draggedOption,
-            showSpecialOnly: false
+            className: "fixed pointer-events-none z-50 opacity-80",
+            style: {
+              left: `${mousePosition.x}px`,
+              top: `${mousePosition.y}px`,
+              transform: "translate(-50%, -50%)"
+            },
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              InputWithSpecialExpression_default,
+              {
+                value: draggedOption,
+                showSpecialOnly: false
+              }
+            ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              ShowMaterialMediaByContentType_default,
+              {
+                contentType: contentMap.type,
+                src: draggedOption,
+                canFullScreen: false
+              },
+              uniqueValue
+            ) })
           }
-        ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          ShowMaterialMediaByContentType_default,
+        ),
+        draggedOption && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "div",
           {
-            contentType: contentMap.type,
-            src: draggedOption,
-            canFullScreen: false
-          },
-          uniqueValue
-        ) })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
-      (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        ShowMaterialMediaByContentType_default,
-        {
-          contentType: contentMap.type,
-          src: option,
-          canFullScreen: true
-        },
-        `${uniqueValue}-${index}`
-      ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        "div",
-        {
-          ref: draggedOption === option ? dragElementRef : null,
-          className: `${draggedOption === option ? "opacity-40" : selectedOption === option ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
-          onMouseDown: (e) => handleMouseDown(e, option),
-          onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
-          onTouchMove: handleTouchMove,
-          onTouchEnd: handleTouchEnd,
-          children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            "div",
+            className: "fixed pointer-events-none z-50 opacity-80",
+            style: {
+              left: `${touchPosition.x}px`,
+              top: `${touchPosition.y}px`,
+              transform: "translate(-50%, -50%)"
+            },
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              InputWithSpecialExpression_default,
+              {
+                value: draggedOption,
+                showSpecialOnly: false
+              }
+            ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              ShowMaterialMediaByContentType_default,
+              {
+                contentType: contentMap.type,
+                src: draggedOption,
+                canFullScreen: false
+              },
+              uniqueValue
+            ) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
+          (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            ShowMaterialMediaByContentType_default,
             {
-              className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
-              onClick: () => handleSelectOption(option),
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                InputWithSpecialExpression_default,
-                {
-                  value: option,
-                  showSpecialOnly: false
-                }
-              ) })
-            }
+              contentType: contentMap.type,
+              src: option,
+              canFullScreen: true
+            },
+            `${uniqueValue}-${index}`
           ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "div",
             {
-              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
-              onClick: () => handleSelectOption(option),
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                ShowMaterialMediaByContentType_default,
-                {
-                  contentType: contentMap.type,
-                  src: option,
-                  canFullScreen: true
-                },
-                `${uniqueValue}-${index}`
-              )
-            }
-          )
-        },
-        index
-      )
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap", onMouseUp: handleMouseUp, children: Object.keys(answerMap).map((materialKey, index) => {
-      const learnerAnswerState = checkAnswerState(
-        JSON.parse(materialMap[materialKey]),
-        answerMap[materialKey]
-      );
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        "div",
-        {
-          "data-drop-zone": materialKey,
-          onMouseEnter: () => draggedOption && setDropTargetIndex(materialKey),
-          onMouseLeave: () => setDropTargetIndex(null),
-          onClick: () => handleDropZoneClick(materialKey),
-          className: `${dropTargetIndex === materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200 rounded-lg`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "text-xl", children: [
-              parseFloat(materialKey) + 1,
-              "."
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              ref: draggedOption === option ? dragElementRef : null,
+              className: `${draggedOption === option ? "opacity-40" : selectedOption === option ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+              onMouseDown: (e) => handleMouseDown(e, option),
+              onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
+              onTouchMove: handleTouchMove,
+              onTouchEnd: handleTouchEnd,
+              children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "div",
                 {
-                  className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2 cursor-pointer" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
-                  onClick: (e) => {
-                    if (answerMap[materialKey]) {
-                      e.stopPropagation();
-                      onChange(answer, materialKey, "");
-                    }
-                  },
-                  children: answerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
+                  onClick: () => handleSelectOption(option),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     InputWithSpecialExpression_default,
                     {
-                      value: answerMap[materialKey],
+                      value: option,
                       showSpecialOnly: false
                     }
-                  ) : null
-                }
-              ) }),
-              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                BaseImage_default,
-                {
-                  src: "/icons/checkbox.webp",
-                  alt: "checkbox",
-                  size: "small"
+                  ) })
                 }
-              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                BaseImage_default,
+              ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                "div",
                 {
-                  src: "/icons/cross-red.webp",
-                  alt: "cross-red",
-                  size: "small"
+                  className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
+                  onClick: () => handleSelectOption(option),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    ShowMaterialMediaByContentType_default,
+                    {
+                      contentType: contentMap.type,
+                      src: option,
+                      canFullScreen: true
+                    },
+                    `${uniqueValue}-${index}`
+                  )
                 }
-              ) }) : null
-            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-              "div",
-              {
-                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_runtime28.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-              "div",
-              {
-                className: "flex-1 cursor-pointer",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onChange(answer, materialKey, "");
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  ShowMaterialMediaByContentType_default,
+              )
+            },
+            index
+          )
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+          const learnerAnswerState = checkAnswerState(
+            JSON.parse(materialMap[materialKey]),
+            answerMap[materialKey]
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "div",
+            {
+              "data-drop-zone": materialKey,
+              onMouseEnter: () => draggedOption && setDropTargetIndex(materialKey),
+              onMouseLeave: () => setDropTargetIndex(null),
+              onClick: () => handleDropZoneClick(materialKey),
+              className: `${dropTargetIndex === materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200 rounded-lg`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "text-xl", children: [
+                  parseFloat(materialKey) + 1,
+                  "."
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    "div",
+                    {
+                      className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2 cursor-pointer" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
+                      onClick: (e) => {
+                        if (answerMap[materialKey]) {
+                          e.stopPropagation();
+                          onChange(answer, materialKey, "");
+                        }
+                      },
+                      children: answerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                        InputWithSpecialExpression_default,
+                        {
+                          value: answerMap[materialKey],
+                          showSpecialOnly: false
+                        }
+                      ) : null
+                    }
+                  ) }),
+                  learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    BaseImage_default,
+                    {
+                      src: "/icons/checkbox.webp",
+                      alt: "checkbox",
+                      size: "small"
+                    }
+                  ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    BaseImage_default,
+                    {
+                      src: "/icons/cross-red.webp",
+                      alt: "cross-red",
+                      size: "small"
+                    }
+                  ) }) : null
+                ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  "div",
                   {
-                    contentType: contentMap.type,
-                    src: answerMap[materialKey],
-                    canFullScreen: true
+                    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_runtime28.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  "div",
+                  {
+                    className: "flex-1 cursor-pointer",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onChange(answer, materialKey, "");
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      ShowMaterialMediaByContentType_default,
+                      {
+                        contentType: contentMap.type,
+                        src: answerMap[materialKey],
+                        canFullScreen: true
+                      },
+                      `${uniqueValue}-${index}`
+                    )
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+                  answerMap[materialKey]
+                ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  "span",
+                  {
+                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
-                  `${uniqueValue}-${index}`
-                )
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-              answerMap[materialKey]
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-              "span",
-              {
-                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
-              },
-              index2
-            )) }, materialKey) })
-          ] })
-        }
-      ) }) }, index);
-    }) })
-  ] });
+                  index2
+                )) }, materialKey) })
+              ] })
+            }
+          ) }) }, index);
+        }) })
+      ]
+    }
+  );
 };
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
@@ -5297,6 +5350,10 @@ var GroupingActivityMaterialContent = ({
   const [isShuffled, setIsShuffled] = (0, import_react20.useState)(false);
   const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react20.useState)([]);
   const dragElementRef = (0, import_react20.useRef)(null);
+  const [mousePosition, setMousePosition] = (0, import_react20.useState)({
+    x: 0,
+    y: 0
+  });
   const [touchPosition, setTouchPosition] = (0, import_react20.useState)({
     x: 0,
     y: 0
@@ -5364,6 +5421,19 @@ var GroupingActivityMaterialContent = ({
     e.preventDefault();
     setDraggedValue(materialValue);
     setSelectedValue(null);
+    setMousePosition({ x: e.clientX, y: e.clientY });
+  };
+  const handleMouseMove = (e) => {
+    if (!draggedValue) return;
+    setMousePosition({ x: e.clientX, y: e.clientY });
+    const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+    const dropZone = elementUnder == null ? void 0 : elementUnder.closest("[data-grouping-drop-zone]");
+    if (dropZone) {
+      const dropKey = dropZone.getAttribute("data-grouping-drop-zone");
+      setDropTargetKey(dropKey);
+    } else {
+      setDropTargetKey(null);
+    }
   };
   const handleMouseUp = () => {
     if (dropTargetKey !== null && draggedValue !== null) {
@@ -5371,6 +5441,7 @@ var GroupingActivityMaterialContent = ({
     }
     setDraggedValue(null);
     setDropTargetKey(null);
+    setMousePosition({ x: 0, y: 0 });
   };
   const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
@@ -5403,6 +5474,7 @@ var GroupingActivityMaterialContent = ({
     setDraggedValue(null);
     setDropTargetKey(null);
     setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
   };
   const handleSelectItem = (materialValue) => {
     if (!checkCanAnswerQuestion()) return;
@@ -5417,7 +5489,36 @@ var GroupingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      "div",
+      {
+        className: "fixed pointer-events-none z-50 opacity-80",
+        style: {
+          left: `${mousePosition.x}px`,
+          top: `${mousePosition.y}px`,
+          transform: "translate(-50%, -50%)"
+        },
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            "span",
+            {
+              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+            },
+            index
+          )
+        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          ShowMaterialMediaByContentType_default,
+          {
+            contentType: contentMap.type,
+            src: draggedValue,
+            canFullScreen: false
+          },
+          `${uniqueValue}-drag-mouse`
+        ) })
+      }
+    ),
     draggedValue && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "div",
       {
@@ -5443,7 +5544,7 @@ var GroupingActivityMaterialContent = ({
             src: draggedValue,
             canFullScreen: false
           },
-          `${uniqueValue}-drag`
+          `${uniqueValue}-drag-touch`
         ) })
       }
     ),
@@ -5646,17 +5747,16 @@ var MatchingActivityMaterialContent = ({
   const [selectedValue, setSelectedValue] = (0, import_react21.useState)(null);
   const [draggedValue, setDraggedValue] = (0, import_react21.useState)(null);
   const [dropTargetKey, setDropTargetKey] = (0, import_react21.useState)(null);
-  const [draggedElement, setDraggedElement] = (0, import_react21.useState)(
-    null
-  );
+  const [draggedElement, setDraggedElement] = (0, import_react21.useState)(null);
   const [isShuffled, setIsShuffled] = (0, import_react21.useState)(false);
   const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react21.useState)([]);
   const dragElementRef = (0, import_react21.useRef)(null);
-  const [touchPosition, setTouchPosition] = (0, import_react21.useState)({
-    x: 0,
-    y: 0
-  });
+  const [mousePosition, setMousePosition] = (0, import_react21.useState)({ x: 0, y: 0 });
+  const [touchPosition, setTouchPosition] = (0, import_react21.useState)({ x: 0, y: 0 });
   const itemsRef = (0, import_react21.useRef)(null);
+  const scrollIntervalRef = (0, import_react21.useRef)(null);
+  const SCROLL_THRESHOLD = 100;
+  const SCROLL_SPEED = 10;
   (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5678,10 +5778,44 @@ var MatchingActivityMaterialContent = ({
   }, [materialMap, isShuffled]);
   (0, import_react21.useEffect)(() => {
     if (!showCorrectAnswer) return;
-    answer.data.find(
-      (answerData) => answerData.type === "MATCHING"
-    ).answerMap = materialMap;
+    answer.data.find((answerData) => answerData.type === "MATCHING").answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
+  (0, import_react21.useEffect)(() => {
+    if (!draggedValue || mousePosition.y === 0) return;
+    const handleAutoScroll = () => {
+      const viewportHeight = window.innerHeight;
+      const scrollY = window.scrollY;
+      if (mousePosition.y < SCROLL_THRESHOLD + scrollY) {
+        window.scrollBy(0, -SCROLL_SPEED);
+      } else if (mousePosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
+        window.scrollBy(0, SCROLL_SPEED);
+      }
+    };
+    scrollIntervalRef.current = setInterval(handleAutoScroll, 16);
+    return () => {
+      if (scrollIntervalRef.current) {
+        clearInterval(scrollIntervalRef.current);
+      }
+    };
+  }, [draggedValue, mousePosition.y]);
+  (0, import_react21.useEffect)(() => {
+    if (!draggedValue || touchPosition.y === 0) return;
+    const handleAutoScroll = () => {
+      const viewportHeight = window.innerHeight;
+      const scrollY = window.scrollY;
+      if (touchPosition.y < SCROLL_THRESHOLD + scrollY) {
+        window.scrollBy(0, -SCROLL_SPEED);
+      } else if (touchPosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
+        window.scrollBy(0, SCROLL_SPEED);
+      }
+    };
+    scrollIntervalRef.current = setInterval(handleAutoScroll, 16);
+    return () => {
+      if (scrollIntervalRef.current) {
+        clearInterval(scrollIntervalRef.current);
+      }
+    };
+  }, [draggedValue, touchPosition.y]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5710,6 +5844,19 @@ var MatchingActivityMaterialContent = ({
     e.preventDefault();
     setDraggedValue(materialValue);
     setSelectedValue(null);
+    setMousePosition({ x: e.clientX, y: e.clientY });
+  };
+  const handleMouseMove = (e) => {
+    if (!draggedValue) return;
+    setMousePosition({ x: e.clientX, y: e.clientY });
+    const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+    const dropZone = elementUnder == null ? void 0 : elementUnder.closest("[data-matching-drop-zone]");
+    if (dropZone) {
+      const dropKey = dropZone.getAttribute("data-matching-drop-zone");
+      setDropTargetKey(dropKey);
+    } else {
+      setDropTargetKey(null);
+    }
   };
   const handleMouseUp = () => {
     if (dropTargetKey !== null && draggedValue !== null) {
@@ -5717,6 +5864,7 @@ var MatchingActivityMaterialContent = ({
     }
     setDraggedValue(null);
     setDropTargetKey(null);
+    setMousePosition({ x: 0, y: 0 });
   };
   const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
@@ -5749,6 +5897,7 @@ var MatchingActivityMaterialContent = ({
     setDraggedValue(null);
     setDropTargetKey(null);
     setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
   };
   const handleSelectItem = (materialValue) => {
     if (!checkCanAnswerQuestion()) return;
@@ -5763,7 +5912,36 @@ var MatchingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "div",
+      {
+        className: "fixed pointer-events-none z-50 opacity-80",
+        style: {
+          left: `${mousePosition.x}px`,
+          top: `${mousePosition.y}px`,
+          transform: "translate(-50%, -50%)"
+        },
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "span",
+            {
+              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+            },
+            index
+          )
+        ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          ShowMaterialMediaByContentType_default,
+          {
+            contentType: contentMap.type,
+            src: draggedValue,
+            canFullScreen: false
+          },
+          `${uniqueValue}-drag-mouse`
+        ) })
+      }
+    ),
     draggedValue && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
@@ -5789,7 +5967,7 @@ var MatchingActivityMaterialContent = ({
             src: draggedValue,
             canFullScreen: false
           },
-          `${uniqueValue}-drag`
+          `${uniqueValue}-drag-touch`
         ) })
       }
     ),
@@ -5840,7 +6018,7 @@ var MatchingActivityMaterialContent = ({
       ),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
+    Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
@@ -5850,16 +6028,16 @@ var MatchingActivityMaterialContent = ({
           "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_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-              answerMapKey
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-              "span",
-              {
-                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
-              },
-              index2
-            )) }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+              (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                "span",
+                {
+                  className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                  children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                },
+                index2
+              )
+            ) }) })
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
@@ -5905,7 +6083,7 @@ var MatchingActivityMaterialContent = ({
           }
         ) })
       ] }, index);
-    }) })
+    })
   ] });
 };
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
@@ -6510,6 +6688,10 @@ var OrderingActivityMaterialContent = ({
     null
   );
   const dragElementRef = (0, import_react23.useRef)(null);
+  const [mousePosition, setMousePosition] = (0, import_react23.useState)({
+    x: 0,
+    y: 0
+  });
   const [touchPosition, setTouchPosition] = (0, import_react23.useState)({
     x: 0,
     y: 0
@@ -6571,6 +6753,19 @@ var OrderingActivityMaterialContent = ({
     e.preventDefault();
     setDraggedKey(materialKey);
     setSelectedKey(null);
+    setMousePosition({ x: e.clientX, y: e.clientY });
+  };
+  const handleMouseMove = (e) => {
+    if (!draggedKey) return;
+    setMousePosition({ x: e.clientX, y: e.clientY });
+    const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+    const dropZone = elementUnder == null ? void 0 : elementUnder.closest("[data-ordering-drop-zone]");
+    if (dropZone) {
+      const dropKey = dropZone.getAttribute("data-ordering-drop-zone");
+      setDropTargetKey(dropKey);
+    } else {
+      setDropTargetKey(null);
+    }
   };
   const handleMouseUp = () => {
     if (dropTargetKey !== null && draggedKey !== null && dropTargetKey !== draggedKey) {
@@ -6578,6 +6773,7 @@ var OrderingActivityMaterialContent = ({
     }
     setDraggedKey(null);
     setDropTargetKey(null);
+    setMousePosition({ x: 0, y: 0 });
   };
   const handleTouchStart = (e, materialKey, element) => {
     if (!checkCanAnswerQuestion()) return;
@@ -6610,6 +6806,7 @@ var OrderingActivityMaterialContent = ({
     setDraggedKey(null);
     setDropTargetKey(null);
     setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
   };
   const handleSelectItem = (materialKey) => {
     if (!checkCanAnswerQuestion()) return;
@@ -6624,100 +6821,137 @@ var OrderingActivityMaterialContent = ({
     setDraggedKey(null);
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-row flex-wrap", onMouseUp: handleMouseUp, children: [
-    draggedKey && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      "div",
-      {
-        className: "fixed pointer-events-none z-50 opacity-80",
-        style: {
-          left: `${touchPosition.x}px`,
-          top: `${touchPosition.y}px`,
-          transform: "translate(-50%, -50%)"
-        },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-          materialMap[answerMap[draggedKey]]
-        ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          "span",
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    "div",
+    {
+      className: "flex flex-row flex-wrap",
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      children: [
+        draggedKey && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "div",
           {
-            className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
-          },
-          index
-        )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          ShowMaterialMediaByContentType_default,
+            className: "fixed pointer-events-none z-50 opacity-80",
+            style: {
+              left: `${mousePosition.x}px`,
+              top: `${mousePosition.y}px`,
+              transform: "translate(-50%, -50%)"
+            },
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+              materialMap[answerMap[draggedKey]]
+            ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+              },
+              index
+            )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              ShowMaterialMediaByContentType_default,
+              {
+                contentType: contentMap.type,
+                src: materialMap[answerMap[draggedKey]],
+                canFullScreen: false
+              },
+              `${uniqueValue}-drag-mouse`
+            ) })
+          }
+        ),
+        draggedKey && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "div",
           {
-            contentType: contentMap.type,
-            src: materialMap[answerMap[draggedKey]],
-            canFullScreen: false
-          },
-          `${uniqueValue}-drag`
-        ) })
-      }
-    ),
-    Object.keys(answerMap).map((materialKey, index) => {
-      const learnerAnswerState = checkAnswerState(
-        answerMap[materialKey] + "",
-        index + ""
-      );
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-        "div",
-        {
-          className: `flex flex-row items-center my-4 mx-2`,
-          style: {
-            marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(
-              "div",
+            className: "fixed pointer-events-none z-50 opacity-80",
+            style: {
+              left: `${touchPosition.x}px`,
+              top: `${touchPosition.y}px`,
+              transform: "translate(-50%, -50%)"
+            },
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+              materialMap[answerMap[draggedKey]]
+            ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              "span",
               {
-                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_runtime40.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
-              }
-            ) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              "div",
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+              },
+              index
+            )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              ShowMaterialMediaByContentType_default,
               {
-                ref: draggedKey === materialKey ? dragElementRef : null,
-                "data-ordering-drop-zone": materialKey,
-                className: `flex-1 ${draggedKey === materialKey ? "opacity-40" : selectedKey === materialKey ? "ring-2 ring-blue-500" : "opacity-100"} ${dropTargetKey === materialKey && draggedKey !== materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200`,
-                onMouseDown: (e) => handleMouseDown(e, materialKey),
-                onMouseEnter: () => draggedKey && draggedKey !== materialKey && setDropTargetKey(materialKey),
-                onMouseLeave: () => setDropTargetKey(null),
-                onTouchStart: (e) => handleTouchStart(e, materialKey, e.currentTarget),
-                onTouchMove: handleTouchMove,
-                onTouchEnd: handleTouchEnd,
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                contentType: contentMap.type,
+                src: materialMap[answerMap[draggedKey]],
+                canFullScreen: false
+              },
+              `${uniqueValue}-drag-touch`
+            ) })
+          }
+        ),
+        Object.keys(answerMap).map((materialKey, index) => {
+          const learnerAnswerState = checkAnswerState(
+            answerMap[materialKey] + "",
+            index + ""
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+            "div",
+            {
+              className: `flex flex-row items-center my-4 mx-2`,
+              style: {
+                marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.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 cursor-pointer p-3 ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-                    onClick: () => handleSelectItem(materialKey),
-                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                      materialMap[answerMap[materialKey]]
-                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                      "span",
-                      {
-                        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
-                      },
-                      index2
-                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                      ShowMaterialMediaByContentType_default,
+                    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_runtime40.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
+                  }
+                ) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  "div",
+                  {
+                    ref: draggedKey === materialKey ? dragElementRef : null,
+                    "data-ordering-drop-zone": materialKey,
+                    className: `flex-1 ${draggedKey === materialKey ? "opacity-40" : selectedKey === materialKey ? "ring-2 ring-blue-500" : "opacity-100"} ${dropTargetKey === materialKey && draggedKey !== materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200`,
+                    onMouseDown: (e) => handleMouseDown(e, materialKey),
+                    onMouseEnter: () => draggedKey && draggedKey !== materialKey && setDropTargetKey(materialKey),
+                    onMouseLeave: () => setDropTargetKey(null),
+                    onTouchStart: (e) => handleTouchStart(e, materialKey, e.currentTarget),
+                    onTouchMove: handleTouchMove,
+                    onTouchEnd: handleTouchEnd,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                      "div",
                       {
-                        contentType: contentMap.type,
-                        src: materialMap[answerMap[materialKey]],
-                        canFullScreen: true
-                      },
-                      `${uniqueValue}-${index}`
+                        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 cursor-pointer p-3 ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
+                        onClick: () => handleSelectItem(materialKey),
+                        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                          materialMap[answerMap[materialKey]]
+                        ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                          "span",
+                          {
+                            className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                          },
+                          index2
+                        )) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                          ShowMaterialMediaByContentType_default,
+                          {
+                            contentType: contentMap.type,
+                            src: materialMap[answerMap[materialKey]],
+                            canFullScreen: true
+                          },
+                          `${uniqueValue}-${index}`
+                        )
+                      }
                     )
                   }
                 )
-              }
-            )
-          ]
-        }
-      ) }, index);
-    })
-  ] });
+              ]
+            }
+          ) }, index);
+        })
+      ]
+    }
+  );
 };
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;