catchup-library-web 1.20.35 → 1.21.0

package/dist/index.mjs

@@ -4691,6 +4691,10 @@ var FillInTheBlanksActivityMaterialContent = ({
     null
   );
   const dragElementRef = useRef4(null);
+  const [mousePosition, setMousePosition] = useState17({
+    x: 0,
+    y: 0
+  });
   const [touchPosition, setTouchPosition] = useState17({
     x: 0,
     y: 0
@@ -4733,6 +4737,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) {
@@ -4740,6 +4757,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     }
     setDraggedOption(null);
     setDropTargetIndex(null);
+    setMousePosition({ x: 0, y: 0 });
   };
   const handleTouchStart = (e, option, element) => {
     const touch = e.touches[0];
@@ -4771,6 +4789,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     setDraggedOption(null);
     setDropTargetIndex(null);
     setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
   };
   const handleSelectOption = (option) => {
     setSelectedOption(option);
@@ -4783,178 +4802,212 @@ var FillInTheBlanksActivityMaterialContent = ({
     }
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-row flex-wrap items-center", children: [
-    /* @__PURE__ */ jsx28("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx28("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
-    /* @__PURE__ */ jsx28("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx28(DividerLine_default, {}) }),
-    draggedOption && touchPosition.x > 0 && /* @__PURE__ */ jsx28(
-      "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__ */ jsx28("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx28("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx28(
-          InputWithSpecialExpression_default,
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: "flex flex-row flex-wrap items-center",
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      children: [
+        /* @__PURE__ */ jsx28("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx28("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+        /* @__PURE__ */ jsx28("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx28(DividerLine_default, {}) }),
+        draggedOption && mousePosition.x > 0 && /* @__PURE__ */ jsx28(
+          "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__ */ jsx28("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx28("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx28(
+              InputWithSpecialExpression_default,
+              {
+                value: draggedOption,
+                showSpecialOnly: false
+              }
+            ) }) }) : /* @__PURE__ */ jsx28("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx28(
+              ShowMaterialMediaByContentType_default,
+              {
+                contentType: contentMap.type,
+                src: draggedOption,
+                canFullScreen: false
+              },
+              uniqueValue
+            ) })
           }
-        ) }) }) : /* @__PURE__ */ jsx28("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx28(
-          ShowMaterialMediaByContentType_default,
+        ),
+        draggedOption && touchPosition.x > 0 && /* @__PURE__ */ jsx28(
+          "div",
           {
-            contentType: contentMap.type,
-            src: draggedOption,
-            canFullScreen: false
-          },
-          uniqueValue
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsx28("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__ */ jsx28("div", { className: "opacity-30", children: /* @__PURE__ */ jsx28(
-        ShowMaterialMediaByContentType_default,
-        {
-          contentType: contentMap.type,
-          src: option,
-          canFullScreen: true
-        },
-        `${uniqueValue}-${index}`
-      ) }, index) : /* @__PURE__ */ jsx28(
-        "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__ */ jsx28(
-            "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__ */ jsx28("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx28("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx28(
+              InputWithSpecialExpression_default,
+              {
+                value: draggedOption,
+                showSpecialOnly: false
+              }
+            ) }) }) : /* @__PURE__ */ jsx28("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx28(
+              ShowMaterialMediaByContentType_default,
+              {
+                contentType: contentMap.type,
+                src: draggedOption,
+                canFullScreen: false
+              },
+              uniqueValue
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx28("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__ */ jsx28("div", { className: "opacity-30", children: /* @__PURE__ */ jsx28(
+            ShowMaterialMediaByContentType_default,
             {
-              className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
-              onClick: () => handleSelectOption(option),
-              children: /* @__PURE__ */ jsx28("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx28(
-                InputWithSpecialExpression_default,
-                {
-                  value: option,
-                  showSpecialOnly: false
-                }
-              ) })
-            }
-          ) : /* @__PURE__ */ jsx28(
+              contentType: contentMap.type,
+              src: option,
+              canFullScreen: true
+            },
+            `${uniqueValue}-${index}`
+          ) }, index) : /* @__PURE__ */ jsx28(
             "div",
             {
-              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
-              onClick: () => handleSelectOption(option),
-              children: /* @__PURE__ */ jsx28(
-                ShowMaterialMediaByContentType_default,
-                {
-                  contentType: contentMap.type,
-                  src: option,
-                  canFullScreen: true
-                },
-                `${uniqueValue}-${index}`
-              )
-            }
-          )
-        },
-        index
-      )
-    ) }),
-    /* @__PURE__ */ jsx28("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__ */ jsx28("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx28("div", { className: "mx-2", children: /* @__PURE__ */ jsx28(
-        "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__ */ jsxs17("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-            /* @__PURE__ */ jsx28("div", { className: "my-auto", children: /* @__PURE__ */ jsxs17("p", { className: "text-xl", children: [
-              parseFloat(materialKey) + 1,
-              "."
-            ] }) }),
-            /* @__PURE__ */ jsx28("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx28("div", { className: "flex-1", children: /* @__PURE__ */ jsx28(
+              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__ */ jsx28(
                 "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__ */ jsx28(
+                  className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
+                  onClick: () => handleSelectOption(option),
+                  children: /* @__PURE__ */ jsx28("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx28(
                     InputWithSpecialExpression_default,
                     {
-                      value: answerMap[materialKey],
+                      value: option,
                       showSpecialOnly: false
                     }
-                  ) : null
+                  ) })
                 }
-              ) }),
-              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx28("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx28(
-                BaseImage_default,
-                {
-                  src: "/icons/checkbox.webp",
-                  alt: "checkbox",
-                  size: "small"
-                }
-              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx28("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx28(
-                BaseImage_default,
+              ) : /* @__PURE__ */ jsx28(
+                "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__ */ jsx28(
+                    ShowMaterialMediaByContentType_default,
+                    {
+                      contentType: contentMap.type,
+                      src: option,
+                      canFullScreen: true
+                    },
+                    `${uniqueValue}-${index}`
+                  )
                 }
-              ) }) : null
-            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx28(
-              "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__ */ jsx28("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx28("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
-              }
-            ) : /* @__PURE__ */ jsx28(
-              "div",
-              {
-                className: "flex-1 cursor-pointer",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onChange(answer, materialKey, "");
-                },
-                children: /* @__PURE__ */ jsx28(
-                  ShowMaterialMediaByContentType_default,
+              )
+            },
+            index
+          )
+        ) }),
+        /* @__PURE__ */ jsx28("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__ */ jsx28("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx28("div", { className: "mx-2", children: /* @__PURE__ */ jsx28(
+            "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__ */ jsxs17("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+                /* @__PURE__ */ jsx28("div", { className: "my-auto", children: /* @__PURE__ */ jsxs17("p", { className: "text-xl", children: [
+                  parseFloat(materialKey) + 1,
+                  "."
+                ] }) }),
+                /* @__PURE__ */ jsx28("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx28("div", { className: "flex-1", children: /* @__PURE__ */ jsx28(
+                    "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__ */ jsx28(
+                        InputWithSpecialExpression_default,
+                        {
+                          value: answerMap[materialKey],
+                          showSpecialOnly: false
+                        }
+                      ) : null
+                    }
+                  ) }),
+                  learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx28("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx28(
+                    BaseImage_default,
+                    {
+                      src: "/icons/checkbox.webp",
+                      alt: "checkbox",
+                      size: "small"
+                    }
+                  ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx28("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx28(
+                    BaseImage_default,
+                    {
+                      src: "/icons/cross-red.webp",
+                      alt: "cross-red",
+                      size: "small"
+                    }
+                  ) }) : null
+                ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx28(
+                  "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__ */ jsx28("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx28("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
+                  }
+                ) : /* @__PURE__ */ jsx28(
+                  "div",
+                  {
+                    className: "flex-1 cursor-pointer",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onChange(answer, materialKey, "");
+                    },
+                    children: /* @__PURE__ */ jsx28(
+                      ShowMaterialMediaByContentType_default,
+                      {
+                        contentType: contentMap.type,
+                        src: answerMap[materialKey],
+                        canFullScreen: true
+                      },
+                      `${uniqueValue}-${index}`
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx28("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+                  answerMap[materialKey]
+                ).map((inputPart, index2) => /* @__PURE__ */ jsx28(
+                  "span",
+                  {
+                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-xl", children: /* @__PURE__ */ jsx28(InlineMath4, { math: inputPart.value }) }) : inputPart.value
                   },
-                  `${uniqueValue}-${index}`
-                )
-              }
-            ) : /* @__PURE__ */ jsx28("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-              answerMap[materialKey]
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx28(
-              "span",
-              {
-                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-xl", children: /* @__PURE__ */ jsx28(InlineMath4, { math: inputPart.value }) }) : inputPart.value
-              },
-              index2
-            )) }, materialKey) })
-          ] })
-        }
-      ) }) }, index);
-    }) })
-  ] });
+                  index2
+                )) }, materialKey) })
+              ] })
+            }
+          ) }) }, index);
+        }) })
+      ]
+    }
+  );
 };
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
@@ -5059,71 +5112,9 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
-import { useEffect as useEffect10, useRef as useRef6, useState as useState19 } from "react";
-import { useDrop as useDrop2 } from "react-dnd";
+import { useEffect as useEffect10, useRef as useRef5, useState as useState19 } from "react";
 import { InlineMath as InlineMath5 } from "react-katex";
-
-// src/components/dnds/DraggableItem.tsx
-import { useDrag } from "react-dnd";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var DraggableItem = ({
-  item,
-  type,
-  component,
-  moveCardHandler
-}) => {
-  const [{ isDragging }, drag] = useDrag({
-    type,
-    item,
-    end: (item2, monitor) => {
-      const dropResult = monitor.getDropResult();
-      if (dropResult) {
-        moveCardHandler();
-      }
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging()
-    })
-  });
-  const opacity = isDragging ? 0.4 : 1;
-  return /* @__PURE__ */ jsx30(
-    "div",
-    {
-      className: `${isDragging ? "w-[0px] opacity-0" : "opacity-100"} transition-all duration-500`,
-      children: /* @__PURE__ */ jsx30("div", { ref: drag, className: "", style: { opacity }, children: component })
-    }
-  );
-};
-var DraggableItem_default = DraggableItem;
-
-// src/components/dnds/DroppableItem.tsx
-import { useRef as useRef5 } from "react";
-import { useDrop } from "react-dnd";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var DroppableItem = ({
-  item,
-  type,
-  component,
-  dropRef,
-  target,
-  setTarget
-}) => {
-  const ref = useRef5(null);
-  const [, drop] = useDrop({
-    accept: type,
-    hover() {
-      if (item.index !== null && target !== item.index) {
-        setTarget(item.index);
-      }
-    }
-  });
-  dropRef(drop(ref));
-  return /* @__PURE__ */ jsx31("div", { className: `w-full transition-all duration-500 h-full`, ref, children: component });
-};
-var DroppableItem_default = DroppableItem;
-
-// src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
-import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5135,19 +5126,23 @@ var GroupingActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const [selectedValue, setSelectedValue] = useState19(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState19(null);
+  const [draggedValue, setDraggedValue] = useState19(null);
+  const [dropTargetKey, setDropTargetKey] = useState19(null);
+  const [draggedElement, setDraggedElement] = useState19(
+    null
+  );
   const [isShuffled, setIsShuffled] = useState19(false);
   const [shuffledMaterialList, setShuffledMaterialList] = useState19([]);
-  const [{ isOver, canDrop }, drop] = useDrop2({
-    accept: "GROUPING",
-    drop: () => {
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
-    })
+  const dragElementRef = useRef5(null);
+  const [mousePosition, setMousePosition] = useState19({
+    x: 0,
+    y: 0
   });
-  const ref = useRef6(null);
+  const [touchPosition, setTouchPosition] = useState19({
+    x: 0,
+    y: 0
+  });
+  const ref = useRef5(null);
   useEffect10(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5168,13 +5163,13 @@ var GroupingActivityMaterialContent = ({
       }
     });
     setShuffledMaterialList(shuffleArray2(materialList));
-  }, []);
+  }, [materialMap, isShuffled]);
   useEffect10(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "GROUPING"
     ).answerMap = materialMap;
-  }, [showCorrectAnswer]);
+  }, [showCorrectAnswer, answer, materialMap]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "GROUPING"
@@ -5205,56 +5200,164 @@ var GroupingActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  const handleGroupingActivityItemOnChange = (selectedTargetKey2, selectedValue2) => {
-    if (checkCanAnswerQuestion()) {
-      onChange(answer, selectedTargetKey2, selectedValue2, null);
+  const handleMouseDown = (e, materialValue) => {
+    if (!checkCanAnswerQuestion()) return;
+    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) {
+      onChange(answer, dropTargetKey, draggedValue, null);
+    }
+    setDraggedValue(null);
+    setDropTargetKey(null);
+    setMousePosition({ x: 0, y: 0 });
+  };
+  const handleTouchStart = (e, materialValue, element) => {
+    if (!checkCanAnswerQuestion()) return;
+    const touch = e.touches[0];
+    setDraggedValue(materialValue);
+    setDraggedElement(element);
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    setSelectedValue(null);
+  };
+  const handleTouchMove = (e) => {
+    if (!draggedValue) return;
+    const touch = e.touches[0];
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    const elementUnder = document.elementFromPoint(
+      touch.clientX,
+      touch.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 handleTouchEnd = () => {
+    if (dropTargetKey !== null && draggedValue !== null) {
+      onChange(answer, dropTargetKey, draggedValue, null);
+    }
+    setDraggedValue(null);
+    setDropTargetKey(null);
+    setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
+  };
+  const handleSelectItem = (materialValue) => {
+    if (!checkCanAnswerQuestion()) return;
+    setSelectedValue(materialValue);
+    setDraggedValue(null);
+  };
+  const handleDropZoneClick = (answerMapKey) => {
+    if (selectedValue !== null) {
+      onChange(answer, answerMapKey, selectedValue, null);
       setSelectedValue(null);
     }
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ jsxs19(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs19("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx30(
+      "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__ */ jsx30("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx30("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ jsx30("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__PURE__ */ jsx30(
+            "span",
+            {
+              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-2xl", children: /* @__PURE__ */ jsx30(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+            },
+            index
+          )
+        ) }) }) }) : /* @__PURE__ */ jsx30("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx30(
+          ShowMaterialMediaByContentType_default,
+          {
+            contentType: contentMap.type,
+            src: draggedValue,
+            canFullScreen: false
+          },
+          `${uniqueValue}-drag-mouse`
+        ) })
+      }
+    ),
+    draggedValue && touchPosition.x > 0 && /* @__PURE__ */ jsx30(
+      "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__ */ jsx30("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx30("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ jsx30("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__PURE__ */ jsx30(
+            "span",
+            {
+              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-2xl", children: /* @__PURE__ */ jsx30(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+            },
+            index
+          )
+        ) }) }) }) : /* @__PURE__ */ jsx30("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx30(
+          ShowMaterialMediaByContentType_default,
+          {
+            contentType: contentMap.type,
+            src: draggedValue,
+            canFullScreen: false
+          },
+          `${uniqueValue}-drag-touch`
+        ) })
+      }
+    ),
     filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs19(Fragment3, { children: [
-      /* @__PURE__ */ jsx32("div", { className: "flex-1 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
-        return /* @__PURE__ */ jsx32(
-          DraggableItem_default,
+      /* @__PURE__ */ jsx30("div", { className: "flex-1 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
+        return /* @__PURE__ */ jsx30(
+          "div",
           {
-            item: { index: materialValue },
-            type: "GROUPING",
-            component: /* @__PURE__ */ jsx32(
+            ref: draggedValue === materialValue ? dragElementRef : null,
+            className: `${draggedValue === materialValue ? "opacity-40" : selectedValue === materialValue ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+            onMouseDown: (e) => handleMouseDown(e, materialValue),
+            onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            children: /* @__PURE__ */ jsx30(
               "div",
               {
                 className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} ${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
-                onMouseDown: () => {
-                  if (checkCanAnswerQuestion()) {
-                    setSelectedValue(materialValue);
-                  }
-                },
-                onTouchEnd: () => {
-                  if (checkCanAnswerQuestion()) {
-                    setSelectedValue(materialValue);
-                  }
-                },
-                onMouseUp: () => {
-                  if (checkCanAnswerQuestion()) {
-                    setSelectedValue(null);
-                  }
-                },
-                onTouchStart: () => {
-                  if (checkCanAnswerQuestion()) {
-                    setSelectedValue(null);
-                  }
-                },
-                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx32("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                onClick: () => handleSelectItem(materialValue),
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx30("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialValue
-                ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
+                ).map((inputPart, index2) => /* @__PURE__ */ jsx30(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-2xl", children: /* @__PURE__ */ jsx30(InlineMath5, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
-                )) }) }) : /* @__PURE__ */ jsx32(
+                )) }) }) : /* @__PURE__ */ jsx30(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5264,109 +5367,94 @@ var GroupingActivityMaterialContent = ({
                   `${uniqueValue}-${index}`
                 )
               }
-            ),
-            moveCardHandler: () => {
-              if (!selectedTargetKey) return;
-              if (!selectedValue) return;
-              handleGroupingActivityItemOnChange(
-                selectedTargetKey,
-                selectedValue
-              );
-            }
+            )
           },
           index
         );
       }) }),
-      /* @__PURE__ */ jsx32(DividerLine_default, {})
+      /* @__PURE__ */ jsx30(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ jsx32("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
-      /* @__PURE__ */ jsx32("div", { className: "w-1/3", children: /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx30("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
+      /* @__PURE__ */ jsx30("div", { className: "w-1/3", children: /* @__PURE__ */ jsx30(
         "div",
         {
           className: `border-catchup-blue ${contentMap.type === "TEXT" ? "h-catchup-activity-text-outer-box-item" : "h-catchup-activity-media-outer-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`,
-          children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-            (inputPart, index2) => /* @__PURE__ */ jsx32(
+          children: /* @__PURE__ */ jsx30("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx30("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+            (inputPart, index2) => /* @__PURE__ */ jsx30(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-2xl", children: /* @__PURE__ */ jsx30(InlineMath5, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
           ) }) })
         }
       ) }),
-      /* @__PURE__ */ jsx32("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-      /* @__PURE__ */ jsx32("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ jsx32("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx30("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+      /* @__PURE__ */ jsx30("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ jsx30("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx30(
         "div",
         {
-          className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1`,
-          children: /* @__PURE__ */ jsx32(
-            DroppableItem_default,
-            {
-              item: { index: answerMapKey },
-              type: "GROUPING",
-              target: selectedTargetKey,
-              setTarget: setSelectedTargetKey,
-              dropRef: drop,
-              component: /* @__PURE__ */ jsx32("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ jsx32("div", { className: "flex flex-row items-center gap-2 w-max h-full", children: answerMap[answerMapKey].map(
-                (answerMapValue, answerMapIndex) => {
-                  const learnerAnswerState = checkAnswerState(
-                    materialMap[answerMapKey],
-                    answerMapValue
-                  );
-                  return /* @__PURE__ */ jsx32("div", { className: "p-1", children: /* @__PURE__ */ jsx32(
+          "data-grouping-drop-zone": answerMapKey,
+          onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
+          onMouseLeave: () => setDropTargetKey(null),
+          onClick: () => handleDropZoneClick(answerMapKey),
+          className: `${dropTargetKey === answerMapKey ? "bg-catchup-light-blue ring-2 ring-blue-400" : ""} flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1 transition-all duration-200`,
+          children: /* @__PURE__ */ jsx30("div", { className: "h-full w-full overflow-x-auto", children: /* @__PURE__ */ jsx30("div", { className: "flex flex-row items-center gap-2 w-max h-full", children: answerMap[answerMapKey].map(
+            (answerMapValue, answerMapIndex) => {
+              const learnerAnswerState = checkAnswerState(
+                materialMap[answerMapKey],
+                answerMapValue
+              );
+              return /* @__PURE__ */ jsx30("div", { className: "p-1", children: /* @__PURE__ */ jsx30(
+                "div",
+                {
+                  className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"}`,
+                  children: /* @__PURE__ */ jsx30(
                     "div",
                     {
-                      className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"}`,
-                      children: /* @__PURE__ */ jsx32(
-                        "div",
+                      className: `${learnerAnswerState === "EMPTY" ? "border-catchup-lighter-gray" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"} border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        if (checkCanAnswerQuestion()) {
+                          onChange(
+                            answer,
+                            answerMapKey,
+                            null,
+                            answerMapIndex
+                          );
+                          setSelectedValue(null);
+                        }
+                      },
+                      children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30("div", { className: "flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx30("div", { className: "m-2", children: /* @__PURE__ */ jsx30("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                        answerMapValue
+                      ).map((inputPart, index2) => /* @__PURE__ */ jsx30(
+                        "span",
                         {
-                          className: `${learnerAnswerState === "EMPTY" ? "border-catchup-lighter-gray" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"} border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`,
-                          onClick: (e) => {
-                            e.preventDefault();
-                            if (checkCanAnswerQuestion()) {
-                              onChange(
-                                answer,
-                                answerMapKey,
-                                null,
-                                answerMapIndex
-                              );
-                              setSelectedValue(null);
-                            }
-                          },
-                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx32("div", { className: "m-2", children: /* @__PURE__ */ jsx32("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                            answerMapValue
-                          ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
-                            "span",
-                            {
-                              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                              children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-2xl", children: /* @__PURE__ */ jsx32(
-                                InlineMath5,
-                                {
-                                  math: inputPart.value
-                                }
-                              ) }) : inputPart.value
-                            },
-                            index2
-                          )) }) }) }) : /* @__PURE__ */ jsx32(
-                            ShowMaterialMediaByContentType_default,
+                          className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                          children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-2xl", children: /* @__PURE__ */ jsx30(
+                            InlineMath5,
                             {
-                              contentType: contentMap.type,
-                              src: answerMapValue,
-                              canFullScreen: false
-                            },
-                            `${uniqueValue}-${answerMapIndex}`
-                          )
-                        }
+                              math: inputPart.value
+                            }
+                          ) }) : inputPart.value
+                        },
+                        index2
+                      )) }) }) }) : /* @__PURE__ */ jsx30(
+                        ShowMaterialMediaByContentType_default,
+                        {
+                          contentType: contentMap.type,
+                          src: answerMapValue,
+                          canFullScreen: false
+                        },
+                        `${uniqueValue}-${answerMapIndex}`
                       )
                     }
-                  ) }, answerMapIndex);
+                  )
                 }
-              ) }) })
-            },
-            index
-          )
+              ) }, answerMapIndex);
+            }
+          ) }) })
         }
       ) }) })
     ] }, index)) })
@@ -5375,7 +5463,7 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 
 // src/components/activities/GroupingActivityContent.tsx
-import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 var GroupingActivityContent = ({
   answer,
   data,
@@ -5401,15 +5489,15 @@ var GroupingActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs20(Fragment4, { children: [
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx31(
       ActivityBodyContent_default,
       {
         bodyMap: groupingBodyMap,
         templateType: "GROUPING"
       }
     ),
-    /* @__PURE__ */ jsx33(DividerLine_default, {}),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx31(DividerLine_default, {}),
+    /* @__PURE__ */ jsx31(
       GroupingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5427,10 +5515,9 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
-import { useEffect as useEffect11, useRef as useRef7, useState as useState20 } from "react";
-import { useDrop as useDrop3 } from "react-dnd";
+import { useEffect as useEffect11, useRef as useRef6, useState as useState20 } from "react";
 import { InlineMath as InlineMath6 } from "react-katex";
-import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5442,19 +5529,23 @@ var MatchingActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const [selectedValue, setSelectedValue] = useState20(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState20(null);
+  const [draggedValue, setDraggedValue] = useState20(null);
+  const [dropTargetKey, setDropTargetKey] = useState20(null);
+  const [draggedElement, setDraggedElement] = useState20(
+    null
+  );
   const [isShuffled, setIsShuffled] = useState20(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
-  const [{ isOver, canDrop }, drop] = useDrop3({
-    accept: "MATCHING",
-    drop: () => {
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
-    })
+  const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
+  const dragElementRef = useRef6(null);
+  const [mousePosition, setMousePosition] = useState20({
+    x: 0,
+    y: 0
+  });
+  const [touchPosition, setTouchPosition] = useState20({
+    x: 0,
+    y: 0
   });
-  const itemsRef = useRef7(null);
+  const itemsRef = useRef6(null);
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5473,13 +5564,13 @@ var MatchingActivityMaterialContent = ({
       materialList.push(materialMap[materialKey]);
     });
     setShuffledMaterialList(shuffleArray2(materialList));
-  }, []);
+  }, [materialMap, isShuffled]);
   useEffect11(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
-  }, [showCorrectAnswer]);
+  }, [showCorrectAnswer, answer, materialMap]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5503,60 +5594,168 @@ var MatchingActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  const handleMatchingActivityItemOnChange = (selectedTargetKey2, selectedValue2) => {
-    if (checkCanAnswerQuestion()) {
-      onChange(answer, selectedTargetKey2, selectedValue2);
+  const handleMouseDown = (e, materialValue) => {
+    if (!checkCanAnswerQuestion()) return;
+    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) {
+      onChange(answer, dropTargetKey, draggedValue);
+    }
+    setDraggedValue(null);
+    setDropTargetKey(null);
+    setMousePosition({ x: 0, y: 0 });
+  };
+  const handleTouchStart = (e, materialValue, element) => {
+    if (!checkCanAnswerQuestion()) return;
+    const touch = e.touches[0];
+    setDraggedValue(materialValue);
+    setDraggedElement(element);
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    setSelectedValue(null);
+  };
+  const handleTouchMove = (e) => {
+    if (!draggedValue) return;
+    const touch = e.touches[0];
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    const elementUnder = document.elementFromPoint(
+      touch.clientX,
+      touch.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 handleTouchEnd = () => {
+    if (dropTargetKey !== null && draggedValue !== null) {
+      onChange(answer, dropTargetKey, draggedValue);
+    }
+    setDraggedValue(null);
+    setDropTargetKey(null);
+    setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
+  };
+  const handleSelectItem = (materialValue) => {
+    if (!checkCanAnswerQuestion()) return;
+    setSelectedValue(materialValue);
+    setDraggedValue(null);
+  };
+  const handleDropZoneClick = (answerMapKey) => {
+    if (selectedValue !== null) {
+      onChange(answer, answerMapKey, selectedValue);
       setSelectedValue(null);
     }
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs21("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+    draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx32(
+      "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__ */ jsx32("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__PURE__ */ jsx32(
+            "span",
+            {
+              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-xl", children: /* @__PURE__ */ jsx32(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+            },
+            index
+          )
+        ) }) }) }) : /* @__PURE__ */ jsx32("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx32(
+          ShowMaterialMediaByContentType_default,
+          {
+            contentType: contentMap.type,
+            src: draggedValue,
+            canFullScreen: false
+          },
+          `${uniqueValue}-drag-mouse`
+        ) })
+      }
+    ),
+    draggedValue && touchPosition.x > 0 && /* @__PURE__ */ jsx32(
+      "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__ */ jsx32("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+          (inputPart, index) => /* @__PURE__ */ jsx32(
+            "span",
+            {
+              className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+              children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-xl", children: /* @__PURE__ */ jsx32(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+            },
+            index
+          )
+        ) }) }) }) : /* @__PURE__ */ jsx32("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx32(
+          ShowMaterialMediaByContentType_default,
+          {
+            contentType: contentMap.type,
+            src: draggedValue,
+            canFullScreen: false
+          },
+          `${uniqueValue}-drag-touch`
+        ) })
+      }
+    ),
     filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs21(Fragment5, { children: [
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx32(
         "div",
         {
           ref: itemsRef,
           className: "flex-shrink-0 flex flex-row gap-x-4 gap-y-4 overflow-x-auto py-2",
-          children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ jsx34(
-            DraggableItem_default,
+          children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ jsx32(
+            "div",
             {
-              item: { index: materialValue },
-              type: "MATCHING",
-              component: /* @__PURE__ */ jsx34(
+              ref: draggedValue === materialValue ? dragElementRef : null,
+              className: `${draggedValue === materialValue ? "opacity-40" : selectedValue === materialValue ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+              onMouseDown: (e) => handleMouseDown(e, materialValue),
+              onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
+              onTouchMove: handleTouchMove,
+              onTouchEnd: handleTouchEnd,
+              children: /* @__PURE__ */ jsx32(
                 "div",
                 {
                   className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} ${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
-                  onMouseDown: () => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedValue(materialValue);
-                    }
-                  },
-                  onTouchEnd: () => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedValue(materialValue);
-                    }
-                  },
-                  onMouseUp: () => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedValue(null);
-                    }
-                  },
-                  onTouchStart: () => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedValue(null);
-                    }
-                  },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx34("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4", children: /* @__PURE__ */ jsx34("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  onClick: () => handleSelectItem(materialValue),
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4", children: /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                     materialValue
-                  ).map((inputPart, index2) => /* @__PURE__ */ jsx34(
+                  ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ jsx34("span", { className: "text-xl", children: /* @__PURE__ */ jsx34(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-xl", children: /* @__PURE__ */ jsx32(InlineMath6, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
-                  )) }) }) : /* @__PURE__ */ jsx34(
+                  )) }) }) : /* @__PURE__ */ jsx32(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -5566,97 +5765,75 @@ var MatchingActivityMaterialContent = ({
                     `${uniqueValue}-${index}`
                   )
                 }
-              ),
-              moveCardHandler: () => {
-                if (!selectedTargetKey) return;
-                if (!selectedValue) return;
-                handleMatchingActivityItemOnChange(
-                  selectedTargetKey,
-                  selectedValue
-                );
-              }
+              )
             },
             index
           ))
         }
       ),
-      /* @__PURE__ */ jsx34("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx34(DividerLine_default, {}) })
+      /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx32(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ jsx34("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
+    /* @__PURE__ */ jsx32("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
       );
       return /* @__PURE__ */ jsxs21("div", { className: "flex flex-row w-full", children: [
-        /* @__PURE__ */ jsx34("div", { className: "w-1/3", children: /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx32("div", { className: "w-1/3", children: /* @__PURE__ */ jsx32(
           "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__ */ jsx34("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx34("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               answerMapKey
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx34(
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx34("span", { className: "text-xl", children: /* @__PURE__ */ jsx34(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-xl", children: /* @__PURE__ */ jsx32(InlineMath6, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }) })
           }
         ) }),
-        /* @__PURE__ */ jsx34("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-        /* @__PURE__ */ jsx34("div", { className: "flex-1", children: /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx32("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+        /* @__PURE__ */ jsx32("div", { className: "flex-1", children: /* @__PURE__ */ jsx32(
           "div",
           {
-            className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} ${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-            onClick: () => {
-              if (checkCanAnswerQuestion()) {
-                setSelectedValue(null);
-              }
-            },
-            children: /* @__PURE__ */ jsx34(
-              DroppableItem_default,
+            "data-matching-drop-zone": answerMapKey,
+            onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
+            onMouseLeave: () => setDropTargetKey(null),
+            onClick: () => handleDropZoneClick(answerMapKey),
+            className: `${dropTargetKey === answerMapKey ? "bg-catchup-light-blue ring-2 ring-blue-400" : ""} ${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
+            children: /* @__PURE__ */ jsx32(
+              "div",
               {
-                item: { index: answerMapKey },
-                type: "MATCHING",
-                target: selectedTargetKey,
-                setTarget: setSelectedTargetKey,
-                dropRef: drop,
-                component: /* @__PURE__ */ jsx34(
-                  "div",
-                  {
-                    className: "h-full flex-1 flex flex-row items-center justify-center px-4",
-                    onClick: (e) => {
-                      e.preventDefault();
-                      if (checkCanAnswerQuestion()) {
-                        handleMatchingActivityItemOnChange(
-                          answerMapKey,
-                          null
-                        );
-                      }
-                    },
-                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx34("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                      answerMap[answerMapKey]
-                    ).map((inputPart, index2) => /* @__PURE__ */ jsx34(
-                      "span",
-                      {
-                        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx34("span", { className: "text-xl", children: /* @__PURE__ */ jsx34(InlineMath6, { math: inputPart.value }) }) : inputPart.value
-                      },
-                      index2
-                    )) }) : /* @__PURE__ */ jsx34(
-                      ShowMaterialMediaByContentType_default,
-                      {
-                        contentType: contentMap.type,
-                        src: answerMap[answerMapKey],
-                        canFullScreen: false
-                      },
-                      `${uniqueValue}-${index}`
-                    )
+                className: "h-full flex-1 flex flex-row items-center justify-center px-4",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (checkCanAnswerQuestion() && answerMap[answerMapKey]) {
+                    onChange(answer, answerMapKey, null);
+                    setSelectedValue(null);
                   }
-                )
-              },
-              index
+                },
+                children: answerMap[answerMapKey] ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  answerMap[answerMapKey]
+                ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
+                  "span",
+                  {
+                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-xl", children: /* @__PURE__ */ jsx32(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                  },
+                  index2
+                )) }) : /* @__PURE__ */ jsx32(
+                  ShowMaterialMediaByContentType_default,
+                  {
+                    contentType: contentMap.type,
+                    src: answerMap[answerMapKey],
+                    canFullScreen: false
+                  },
+                  `${uniqueValue}-${index}`
+                ) : null
+              }
             )
           }
         ) })
@@ -5667,7 +5844,7 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 
 // src/components/activities/MatchingActivityContent.tsx
-import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 var MatchingActivityContent = ({
   answer,
   data,
@@ -5689,15 +5866,15 @@ var MatchingActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs22(Fragment6, { children: [
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx33(
       ActivityBodyContent_default,
       {
         bodyMap: matchingBodyMap,
         templateType: "MATCHING"
       }
     ),
-    /* @__PURE__ */ jsx35(DividerLine_default, {}),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx33(DividerLine_default, {}),
+    /* @__PURE__ */ jsx33(
       MatchingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5716,7 +5893,7 @@ var MatchingActivityContent_default = MatchingActivityContent;
 
 // src/components/activities/material-contents/MCMAActivityMaterialContent.tsx
 import { InlineMath as InlineMath7 } from "react-katex";
-import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var MCMAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5749,10 +5926,10 @@ var MCMAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswerList = retrieveCorrectAnswerList();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ jsx36("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs23("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
-      /* @__PURE__ */ jsx36("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx36("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
-      /* @__PURE__ */ jsx36("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx36(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx36("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
+    return /* @__PURE__ */ jsx34("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs23("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
+      /* @__PURE__ */ jsx34("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx34("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
+      /* @__PURE__ */ jsx34("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx34(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx34("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
           const foundAnswer = answerMap[materialKey].find(
             (learnerAnswer) => learnerAnswer === materialSubKey
@@ -5773,7 +5950,7 @@ var MCMAActivityMaterialContent = ({
                 onChange(answer, materialKey, materialSubKey);
               },
               children: [
-                /* @__PURE__ */ jsx36(
+                /* @__PURE__ */ jsx34(
                   BaseImage_default,
                   {
                     src: answerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -5783,16 +5960,16 @@ var MCMAActivityMaterialContent = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx36("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx36("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                /* @__PURE__ */ jsx34("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx34("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialSubKey
-                ).map((inputPart, index3) => /* @__PURE__ */ jsx36(
+                ).map((inputPart, index3) => /* @__PURE__ */ jsx34(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx36("span", { className: "text-xl", children: /* @__PURE__ */ jsx36(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx34("span", { className: "text-xl", children: /* @__PURE__ */ jsx34(InlineMath7, { math: inputPart.value }) }) : inputPart.value
                   },
                   index3
-                )) }) : /* @__PURE__ */ jsx36(
+                )) }) : /* @__PURE__ */ jsx34(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5806,13 +5983,13 @@ var MCMAActivityMaterialContent = ({
             index2
           );
         }
-      ) }) : /* @__PURE__ */ jsx36("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+      ) }) : /* @__PURE__ */ jsx34("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ jsx36(
+      ).map((inputPart, index2) => /* @__PURE__ */ jsx34(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ jsx36("span", { className: "text-xl", children: /* @__PURE__ */ jsx36(InlineMath7, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx34("span", { className: "text-xl", children: /* @__PURE__ */ jsx34(InlineMath7, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) }, materialKey)
@@ -5822,7 +5999,7 @@ var MCMAActivityMaterialContent = ({
 var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
 
 // src/components/activities/MCMAActivityContent.tsx
-import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 var MCMAActivityContent = ({
   answer,
   data,
@@ -5851,10 +6028,10 @@ var MCMAActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs24("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx37(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
-    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx37(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx37(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx35(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
+    /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx35(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx35(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx35(
       MCMAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5872,7 +6049,7 @@ var MCMAActivityContent_default = MCMAActivityContent;
 
 // src/components/activities/material-contents/MCSAActivityMaterialContent.tsx
 import { InlineMath as InlineMath8 } from "react-katex";
-import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var MCSAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5902,10 +6079,10 @@ var MCSAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswer = retrieveCorrectAnswer();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ jsx38("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs25("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
-      /* @__PURE__ */ jsx38("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx38("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
-      /* @__PURE__ */ jsx38("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx38(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx38(
+    return /* @__PURE__ */ jsx36("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs25("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
+      /* @__PURE__ */ jsx36("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx36("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
+      /* @__PURE__ */ jsx36("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx36(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ jsx36(
         "div",
         {
           className: `flex flex-row w-full ${Object.keys(materialMap[materialKey]).length <= 4 ? "justify-center" : ""} flex-wrap`,
@@ -5924,7 +6101,7 @@ var MCSAActivityMaterialContent = ({
                     onChange(answer, materialKey, materialSubKey);
                   },
                   children: [
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx36(
                       BaseImage_default,
                       {
                         src: answerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
@@ -5934,16 +6111,16 @@ var MCSAActivityMaterialContent = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx38("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx38("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    /* @__PURE__ */ jsx36("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx36("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialSubKey
-                    ).map((inputPart, index3) => /* @__PURE__ */ jsx38(
+                    ).map((inputPart, index3) => /* @__PURE__ */ jsx36(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx38("span", { className: "text-xl", children: /* @__PURE__ */ jsx38(InlineMath8, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ jsx36("span", { className: "text-xl", children: /* @__PURE__ */ jsx36(InlineMath8, { math: inputPart.value }) }) : inputPart.value
                       },
                       index3
-                    )) }) : /* @__PURE__ */ jsx38(
+                    )) }) : /* @__PURE__ */ jsx36(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -5959,13 +6136,13 @@ var MCSAActivityMaterialContent = ({
             }
           )
         }
-      ) : /* @__PURE__ */ jsx38("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+      ) : /* @__PURE__ */ jsx36("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ jsx38(
+      ).map((inputPart, index2) => /* @__PURE__ */ jsx36(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ jsx38("span", { className: "text-xl", children: /* @__PURE__ */ jsx38(InlineMath8, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ jsx36("span", { className: "text-xl", children: /* @__PURE__ */ jsx36(InlineMath8, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) })
@@ -5975,7 +6152,7 @@ var MCSAActivityMaterialContent = ({
 var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
 
 // src/components/activities/MCSAActivityContent.tsx
-import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var MCSAActivityContent = ({
   answer,
   data,
@@ -5997,10 +6174,10 @@ var MCSAActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs26("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx39(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
-    /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx39(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx39(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx37(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
+    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx37(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx37(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx37(
       MCSAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6045,7 +6222,7 @@ var retrieveDocumentTypeFromExtension = (format) => {
 };
 
 // src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx
-import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var OpenEndedActivityMaterialContent = ({
   answer,
   contentMap,
@@ -6075,7 +6252,7 @@ var OpenEndedActivityMaterialContent = ({
       documentType = retrieveDocumentTypeFromExtension(extension);
     }
     if (documentType === "IMAGE") {
-      return /* @__PURE__ */ jsx40("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx40(
+      return /* @__PURE__ */ jsx38("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx38(
         BaseImage_default,
         {
           src: answerMapAnswer,
@@ -6085,9 +6262,9 @@ var OpenEndedActivityMaterialContent = ({
         }
       ) });
     } else if (documentType === "PDF") {
-      return /* @__PURE__ */ jsx40(BasePDF_default, { file: answerMapAnswer });
+      return /* @__PURE__ */ jsx38(BasePDF_default, { file: answerMapAnswer });
     } else if (documentType === "AUDIO") {
-      return /* @__PURE__ */ jsx40("div", { className: "h-[56px]", children: /* @__PURE__ */ jsx40(
+      return /* @__PURE__ */ jsx38("div", { className: "h-[56px]", children: /* @__PURE__ */ jsx38(
         "audio",
         {
           className: "h-full w-full rounded-catchup-xlarge",
@@ -6098,7 +6275,7 @@ var OpenEndedActivityMaterialContent = ({
         }
       ) });
     } else if (documentType === "TEXT") {
-      return /* @__PURE__ */ jsx40(
+      return /* @__PURE__ */ jsx38(
         InputGroup_default,
         {
           type: "textarea",
@@ -6117,7 +6294,7 @@ var OpenEndedActivityMaterialContent = ({
     const answerMapAnswer = answerMap2["ANSWER"];
     const extension = answerMapAnswer.split(".").pop();
     const documentType = retrieveDocumentTypeFromExtension(extension);
-    return /* @__PURE__ */ jsx40(Fragment7, { children: documentType === "IMAGE" ? /* @__PURE__ */ jsx40("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx38(Fragment7, { children: documentType === "IMAGE" ? /* @__PURE__ */ jsx38("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx38(
       BaseImage_default,
       {
         src: answerMapAnswer,
@@ -6125,11 +6302,11 @@ var OpenEndedActivityMaterialContent = ({
         size: "custom",
         className: "w-[80%] rounded-catchup-xlarge"
       }
-    ) }) : documentType === "PDF" ? /* @__PURE__ */ jsx40("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx40(BasePDF_default, { file: answerMapAnswer }) }) : null });
+    ) }) : documentType === "PDF" ? /* @__PURE__ */ jsx38("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx38(BasePDF_default, { file: answerMapAnswer }) }) : null });
   };
   const RenderAudioContent = (answerMap2) => {
     const answerMapAnswer = answerMap2["ANSWER"];
-    return /* @__PURE__ */ jsx40("div", { className: "h-[56px]", children: /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx38("div", { className: "h-[56px]", children: /* @__PURE__ */ jsx38(
       "audio",
       {
         className: "h-full w-full rounded-catchup-xlarge",
@@ -6141,16 +6318,16 @@ var OpenEndedActivityMaterialContent = ({
     ) });
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsx40(Fragment7, { children: /* @__PURE__ */ jsxs27("div", { className: "", children: [
-    /* @__PURE__ */ jsx40("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx40("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
-    /* @__PURE__ */ jsx40("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx40(DividerLine_default, {}) }),
+  return /* @__PURE__ */ jsx38(Fragment7, { children: /* @__PURE__ */ jsxs27("div", { className: "", children: [
+    /* @__PURE__ */ jsx38("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx38("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
+    /* @__PURE__ */ jsx38("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx38(DividerLine_default, {}) }),
     contentMap.type === "TEXT" ? RenderTextContent(answerMap) : contentMap.type === "IMAGE" ? RenderImageContent(answerMap) : contentMap.type === "AUDIO" ? RenderAudioContent(answerMap) : null
   ] }) });
 };
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 
 // src/components/activities/OpenEndedActivityContent.tsx
-import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 var OpenEndedActivityContent = ({
   answer,
   data,
@@ -6172,11 +6349,11 @@ var OpenEndedActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs28("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx39(
       "div",
       {
         className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%]" : "w-full"}`,
-        children: /* @__PURE__ */ jsx41(
+        children: /* @__PURE__ */ jsx39(
           ActivityBodyContent_default,
           {
             bodyMap: openEndedBodyMap,
@@ -6186,15 +6363,15 @@ var OpenEndedActivityContent = ({
       }
     ),
     showMaterialContent ? /* @__PURE__ */ jsxs28(Fragment8, { children: [
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx39(
         "div",
         {
           className: `${isFullScreen ? "contents" : "contents md:hidden"}`,
-          children: /* @__PURE__ */ jsx41(DividerLine_default, {})
+          children: /* @__PURE__ */ jsx39(DividerLine_default, {})
         }
       ),
-      /* @__PURE__ */ jsx41("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx41(VerticalDividerLine_default, {}) }),
-      /* @__PURE__ */ jsx41("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx39(VerticalDividerLine_default, {}) }),
+      /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx39(
         OpenEndedActivityMaterialContent_default,
         {
           answer,
@@ -6209,7 +6386,7 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-import { useEffect as useEffect13, useState as useState22, useRef as useRef8 } from "react";
+import { useEffect as useEffect13, useState as useState22, useRef as useRef7 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
 
 // src/hooks/useScreenSize.ts
@@ -6248,7 +6425,7 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6265,7 +6442,11 @@ var OrderingActivityMaterialContent = ({
   const [draggedElement, setDraggedElement] = useState22(
     null
   );
-  const dragElementRef = useRef8(null);
+  const dragElementRef = useRef7(null);
+  const [mousePosition, setMousePosition] = useState22({
+    x: 0,
+    y: 0
+  });
   const [touchPosition, setTouchPosition] = useState22({
     x: 0,
     y: 0
@@ -6327,6 +6508,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) {
@@ -6334,6 +6528,7 @@ var OrderingActivityMaterialContent = ({
     }
     setDraggedKey(null);
     setDropTargetKey(null);
+    setMousePosition({ x: 0, y: 0 });
   };
   const handleTouchStart = (e, materialKey, element) => {
     if (!checkCanAnswerQuestion()) return;
@@ -6366,6 +6561,7 @@ var OrderingActivityMaterialContent = ({
     setDraggedKey(null);
     setDropTargetKey(null);
     setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
   };
   const handleSelectItem = (materialKey) => {
     if (!checkCanAnswerQuestion()) return;
@@ -6380,105 +6576,142 @@ var OrderingActivityMaterialContent = ({
     setDraggedKey(null);
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsxs29("div", { className: "flex flex-row flex-wrap", onMouseUp: handleMouseUp, children: [
-    draggedKey && touchPosition.x > 0 && /* @__PURE__ */ jsx42(
-      "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__ */ jsx42("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx42("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-          materialMap[answerMap[draggedKey]]
-        ).map((inputPart, index) => /* @__PURE__ */ jsx42(
-          "span",
+  return /* @__PURE__ */ jsxs29(
+    "div",
+    {
+      className: "flex flex-row flex-wrap",
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      children: [
+        draggedKey && mousePosition.x > 0 && /* @__PURE__ */ jsx40(
+          "div",
           {
-            className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-xl", children: /* @__PURE__ */ jsx42(InlineMath9, { math: inputPart.value }) }) : inputPart.value
-          },
-          index
-        )) }) }) : /* @__PURE__ */ jsx42("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx42(
-          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__ */ jsx40("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx40("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+              materialMap[answerMap[draggedKey]]
+            ).map((inputPart, index) => /* @__PURE__ */ jsx40(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx40("span", { className: "text-xl", children: /* @__PURE__ */ jsx40(InlineMath9, { math: inputPart.value }) }) : inputPart.value
+              },
+              index
+            )) }) }) : /* @__PURE__ */ jsx40("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx40(
+              ShowMaterialMediaByContentType_default,
+              {
+                contentType: contentMap.type,
+                src: materialMap[answerMap[draggedKey]],
+                canFullScreen: false
+              },
+              `${uniqueValue}-drag-mouse`
+            ) })
+          }
+        ),
+        draggedKey && touchPosition.x > 0 && /* @__PURE__ */ jsx40(
+          "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__ */ jsx42("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs29(
-        "div",
-        {
-          className: `flex flex-row items-center my-4 mx-2`,
-          style: {
-            marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
-          },
-          children: [
-            /* @__PURE__ */ jsx42("div", { className: "mr-3", children: /* @__PURE__ */ jsx42("div", { className: "h-catchup-activity-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-y-auto", children: /* @__PURE__ */ jsx42(
-              "div",
+            className: "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__ */ jsx40("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx40("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+              materialMap[answerMap[draggedKey]]
+            ).map((inputPart, index) => /* @__PURE__ */ jsx40(
+              "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__ */ jsx42("p", { className: "", children: parseFloat(materialKey) + 1 })
-              }
-            ) }) }),
-            /* @__PURE__ */ jsx42(
-              "div",
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx40("span", { className: "text-xl", children: /* @__PURE__ */ jsx40(InlineMath9, { math: inputPart.value }) }) : inputPart.value
+              },
+              index
+            )) }) }) : /* @__PURE__ */ jsx40("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx40(
+              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__ */ jsx42(
+                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__ */ jsx40("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs29(
+            "div",
+            {
+              className: `flex flex-row items-center my-4 mx-2`,
+              style: {
+                marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
+              },
+              children: [
+                /* @__PURE__ */ jsx40("div", { className: "mr-3", children: /* @__PURE__ */ jsx40("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__ */ jsx40(
                   "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__ */ jsx42("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                      materialMap[answerMap[materialKey]]
-                    ).map((inputPart, index2) => /* @__PURE__ */ jsx42(
-                      "span",
-                      {
-                        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-xl", children: /* @__PURE__ */ jsx42(InlineMath9, { math: inputPart.value }) }) : inputPart.value
-                      },
-                      index2
-                    )) }) : /* @__PURE__ */ jsx42(
-                      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__ */ jsx40("p", { className: "", children: parseFloat(materialKey) + 1 })
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx40(
+                  "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__ */ jsx40(
+                      "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__ */ jsx40("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                          materialMap[answerMap[materialKey]]
+                        ).map((inputPart, index2) => /* @__PURE__ */ jsx40(
+                          "span",
+                          {
+                            className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                            children: inputPart.isEquation ? /* @__PURE__ */ jsx40("span", { className: "text-xl", children: /* @__PURE__ */ jsx40(InlineMath9, { math: inputPart.value }) }) : inputPart.value
+                          },
+                          index2
+                        )) }) : /* @__PURE__ */ jsx40(
+                          ShowMaterialMediaByContentType_default,
+                          {
+                            contentType: contentMap.type,
+                            src: materialMap[answerMap[materialKey]],
+                            canFullScreen: true
+                          },
+                          `${uniqueValue}-${index}`
+                        )
+                      }
                     )
                   }
                 )
-              }
-            )
-          ]
-        }
-      ) }, index);
-    })
-  ] });
+              ]
+            }
+          ) }, index);
+        })
+      ]
+    }
+  );
 };
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-import { Fragment as Fragment9, jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 var OrderingActivityContent = ({
   answer,
   data,
@@ -6503,15 +6736,15 @@ var OrderingActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs30(Fragment9, { children: [
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx41(
       ActivityBodyContent_default,
       {
         bodyMap: orderingBodyMap,
         templateType: "ORDERING"
       }
     ),
-    /* @__PURE__ */ jsx43(DividerLine_default, {}),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx41(DividerLine_default, {}),
+    /* @__PURE__ */ jsx41(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6531,7 +6764,7 @@ var OrderingActivityContent_default = OrderingActivityContent;
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
 import { useEffect as useEffect14, useState as useState23 } from "react";
 import { InlineMath as InlineMath10 } from "react-katex";
-import { Fragment as Fragment10, jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6585,13 +6818,13 @@ var TrueFalseActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   return /* @__PURE__ */ jsxs31("div", { className: "", children: [
-    /* @__PURE__ */ jsx44("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx44("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
-    /* @__PURE__ */ jsx44("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx44(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx42("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx42("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
+    /* @__PURE__ */ jsx42("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx42(DividerLine_default, {}) }),
     /* @__PURE__ */ jsxs31("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
-      /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
-      /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
+      /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
+      /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
     ] }),
-    checkCanAnswerQuestion() ? /* @__PURE__ */ jsx44("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
+    checkCanAnswerQuestion() ? /* @__PURE__ */ jsx42("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
       const correctAnswer = materialMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
@@ -6607,16 +6840,16 @@ var TrueFalseActivityMaterialContent = ({
         {
           className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 ${learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
           children: [
-            /* @__PURE__ */ jsx44("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx44("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            /* @__PURE__ */ jsx42("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx42("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               shuffleOption
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx44(
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx42(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx44("span", { className: "text-xl", children: /* @__PURE__ */ jsx44(InlineMath10, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx42("span", { className: "text-xl", children: /* @__PURE__ */ jsx42(InlineMath10, { math: inputPart.value }) }) : inputPart.value
               },
               index2
-            )) }) : /* @__PURE__ */ jsx44(
+            )) }) : /* @__PURE__ */ jsx42(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6626,7 +6859,7 @@ var TrueFalseActivityMaterialContent = ({
               `${uniqueValue}-${index}`
             ) }),
             /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-x-2", children: [
-              /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx42(
                 BaseImage_default,
                 {
                   src: answerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6637,7 +6870,7 @@ var TrueFalseActivityMaterialContent = ({
                   }
                 }
               ) }) }),
-              /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx42(
                 BaseImage_default,
                 {
                   src: answerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6655,12 +6888,12 @@ var TrueFalseActivityMaterialContent = ({
       );
     }) }) : /* @__PURE__ */ jsxs31(Fragment10, { children: [
       answerMap.trueList.map((item) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ jsx44("div", { className: "flex-1", children: /* @__PURE__ */ jsx44("p", { children: item }) }),
-        /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "underline", children: i18n_default.t("true") }) })
+        /* @__PURE__ */ jsx42("div", { className: "flex-1", children: /* @__PURE__ */ jsx42("p", { children: item }) }),
+        /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "underline", children: i18n_default.t("true") }) })
       ] })),
       answerMap.falseList.map((item) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ jsx44("div", { className: "flex-1", children: /* @__PURE__ */ jsx44("p", { children: item }) }),
-        /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "underline", children: i18n_default.t("false") }) })
+        /* @__PURE__ */ jsx42("div", { className: "flex-1", children: /* @__PURE__ */ jsx42("p", { children: item }) }),
+        /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))
     ] })
   ] });
@@ -6668,7 +6901,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 
 // src/components/activities/TrueFalseActivityContent.tsx
-import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
 var TrueFalseActivityContent = ({
   answer,
   data,
@@ -6720,16 +6953,16 @@ var TrueFalseActivityContent = ({
     changeAnswer(answer2);
   };
   return /* @__PURE__ */ jsxs32("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx45("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ jsx43(
       ActivityBodyContent_default,
       {
         bodyMap: trueFalseBodyMap,
         templateType: "GROUPING"
       }
     ) }),
-    /* @__PURE__ */ jsx45("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx45(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx45("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx45(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx45("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx43(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx43(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx43(
       TrueFalseActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6748,7 +6981,7 @@ var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
 // src/components/activities/solution-contents/ActivitySolutionContent.tsx
 import { InlineMath as InlineMath11 } from "react-katex";
-import { jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -6778,8 +7011,8 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  return /* @__PURE__ */ jsx46("div", { className: "mx-2", children: /* @__PURE__ */ jsxs33("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ jsx46("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
+  return /* @__PURE__ */ jsx44("div", { className: "mx-2", children: /* @__PURE__ */ jsxs33("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ jsx44("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
     Object.keys(solutionMap).map((key) => {
       let currentItem;
       try {
@@ -6789,12 +7022,12 @@ var ActivitySolutionContent = ({
         return null;
       }
       const { value } = currentItem;
-      return /* @__PURE__ */ jsx46("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
-        (inputPart, partIndex) => /* @__PURE__ */ jsx46(
+      return /* @__PURE__ */ jsx44("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
+        (inputPart, partIndex) => /* @__PURE__ */ jsx44(
           "span",
           {
             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ jsx46("span", { className: "text-xl", children: /* @__PURE__ */ jsx46(InlineMath11, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ jsx44("span", { className: "text-xl", children: /* @__PURE__ */ jsx44(InlineMath11, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -6806,7 +7039,7 @@ var ActivitySolutionContent_default = ActivitySolutionContent;
 
 // src/components/activities/evaluation-rubric-contents/ActivityEvaluationRubricContent.tsx
 import { InlineMath as InlineMath12 } from "react-katex";
-import { jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -6836,21 +7069,21 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  return /* @__PURE__ */ jsx47("div", { className: "mx-2", children: /* @__PURE__ */ jsxs34("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ jsx47("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
+  return /* @__PURE__ */ jsx45("div", { className: "mx-2", children: /* @__PURE__ */ jsxs34("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ jsx45("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
     Object.keys(evaluationRubricMap).map((key, index) => {
       const currentItem = JSON.parse(evaluationRubricMap[key]);
       const { value } = currentItem;
-      return /* @__PURE__ */ jsx47(
+      return /* @__PURE__ */ jsx45(
         "p",
         {
           className: "my-1 text-xl whitespace-pre-wrap",
           children: constructInputWithSpecialExpressionList(value).map(
-            (inputPart, index2) => /* @__PURE__ */ jsx47(
+            (inputPart, index2) => /* @__PURE__ */ jsx45(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx47("span", { className: "text-xl", children: /* @__PURE__ */ jsx47(InlineMath12, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx45("span", { className: "text-xl", children: /* @__PURE__ */ jsx45(InlineMath12, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
@@ -6867,13 +7100,13 @@ var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 import { useEffect as useEffect15, useState as useState24 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
-import { jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ jsx48("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx46("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx46(
     "div",
     {
       className: `${option.id === selectedId ? "border-catchup-blue-400" : "border-catchup-gray-100 hover:border-catchup-blue-500"} border-2 rounded-catchup-xlarge py-3 px-8 cursor-pointer duration-300 transition-all`,
@@ -6887,7 +7120,7 @@ var SelectionBox = ({
           children: [
             option.icon,
             /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx48("p", { children: option.text }),
+              /* @__PURE__ */ jsx46("p", { children: option.text }),
               option.subText ? /* @__PURE__ */ jsxs35("p", { className: "text-md", children: [
                 "(",
                 option.subText,
@@ -6904,7 +7137,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { Fragment as Fragment11, jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 var ActivityPreviewByData = ({
   data,
   showType,
@@ -6965,8 +7198,8 @@ var ActivityPreviewByData = ({
   return /* @__PURE__ */ jsxs36("div", { children: [
     showType ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
       /* @__PURE__ */ jsxs36("div", { className: "mb-4", children: [
-        showDescription ? /* @__PURE__ */ jsx49("div", { className: "my-2", children: /* @__PURE__ */ jsx49("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ jsx49(
+        showDescription ? /* @__PURE__ */ jsx47("div", { className: "my-2", children: /* @__PURE__ */ jsx47("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+        /* @__PURE__ */ jsx47(
           SelectionBox_default,
           {
             optionList,
@@ -6977,9 +7210,9 @@ var ActivityPreviewByData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx49(DividerLine_default, {})
+      /* @__PURE__ */ jsx47(DividerLine_default, {})
     ] }) : null,
-    selectedType ? /* @__PURE__ */ jsx49("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ jsx49(
+    selectedType ? /* @__PURE__ */ jsx47("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       OrderingActivityContent_default,
       {
         answer,
@@ -6993,7 +7226,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ jsx49(
+    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       DropdownActivityContent_default,
       {
         answer,
@@ -7007,7 +7240,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ jsx49(
+    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       MCSAActivityContent_default,
       {
         answer,
@@ -7021,7 +7254,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ jsx49(
+    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       MCMAActivityContent_default,
       {
         answer,
@@ -7035,7 +7268,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ jsx49(
+    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       MatchingActivityContent_default,
       {
         answer,
@@ -7048,7 +7281,7 @@ var ActivityPreviewByData = ({
         isPreview: true,
         showCorrectAnswer: true
       }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ jsx49(
+    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       GroupingActivityContent_default,
       {
         answer,
@@ -7061,7 +7294,7 @@ var ActivityPreviewByData = ({
         isPreview: true,
         showCorrectAnswer: true
       }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ jsx49(
+    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       FillInTheBlanksActivityContent_default,
       {
         answer,
@@ -7075,7 +7308,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ jsx49(
+    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ jsx47(
       OpenEndedActivityContent_default,
       {
         answer,
@@ -7087,7 +7320,7 @@ var ActivityPreviewByData = ({
         isPreview: true,
         isFullScreen
       }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ jsx49(
+    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       TrueFalseActivityContent_default,
       {
         answer,
@@ -7102,14 +7335,14 @@ var ActivityPreviewByData = ({
         isFullScreen
       }
     ) : null }, selectedType) : null,
-    selectedType && showSolution ? /* @__PURE__ */ jsx49("div", { className: "my-4", children: /* @__PURE__ */ jsx49(
+    selectedType && showSolution ? /* @__PURE__ */ jsx47("div", { className: "my-4", children: /* @__PURE__ */ jsx47(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx49("div", { className: "my-4", children: /* @__PURE__ */ jsx49(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx47("div", { className: "my-4", children: /* @__PURE__ */ jsx47(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7122,7 +7355,7 @@ var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/activities/ActivityPreviewByAnswerData.tsx
 import { useEffect as useEffect16, useState as useState25 } from "react";
-import { Fragment as Fragment12, jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
 var ActivityPreviewByAnswerData = ({
   data,
   showType = true,
@@ -7230,28 +7463,28 @@ var ActivityPreviewByAnswerData = ({
     };
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsx50(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsx48(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsx50(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsx48(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsx50(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsx48(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsx50(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsx48(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsx50(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsx48(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsx50(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsx48(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsx50(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsx48(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ jsx50(
+        return data.openEndedBodyMap ? /* @__PURE__ */ jsx48(
           OpenEndedActivityContent_default,
           __spreadProps(__spreadValues({}, commonProps), {
             showMaterialContent: true
           })
         ) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsx50(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsx48(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
       default:
         return null;
     }
@@ -7260,8 +7493,8 @@ var ActivityPreviewByAnswerData = ({
   return /* @__PURE__ */ jsxs37("div", { children: [
     showType && optionList.length > 0 ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
       /* @__PURE__ */ jsxs37("div", { className: "mb-4", children: [
-        showDescription ? /* @__PURE__ */ jsx50("div", { className: "my-2", children: /* @__PURE__ */ jsx50("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ jsx50(
+        showDescription ? /* @__PURE__ */ jsx48("div", { className: "my-2", children: /* @__PURE__ */ jsx48("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+        /* @__PURE__ */ jsx48(
           SelectionBox_default,
           {
             optionList,
@@ -7272,20 +7505,20 @@ var ActivityPreviewByAnswerData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx50(DividerLine_default, {})
+      /* @__PURE__ */ jsx48(DividerLine_default, {})
     ] }) : null,
     /* @__PURE__ */ jsxs37("div", { className: "flex flex-col my-2 w-full p-5", children: [
-      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ jsx50(ActivityEmptyContent_default, {}) : null,
-      selectedType ? /* @__PURE__ */ jsx50("div", { children: RenderSelectedActivityContent() }, selectedType) : null
+      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}) : null,
+      selectedType ? /* @__PURE__ */ jsx48("div", { children: RenderSelectedActivityContent() }, selectedType) : null
     ] }),
-    selectedType && showSolution ? /* @__PURE__ */ jsx50("div", { className: "my-4", children: /* @__PURE__ */ jsx50(
+    selectedType && showSolution ? /* @__PURE__ */ jsx48("div", { className: "my-4", children: /* @__PURE__ */ jsx48(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx50("div", { className: "my-4", children: /* @__PURE__ */ jsx50(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx48("div", { className: "my-4", children: /* @__PURE__ */ jsx48(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7297,16 +7530,16 @@ var ActivityPreviewByAnswerData = ({
 var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
 
 // src/components/errors/StatusError.tsx
-import { jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 var StatusError = ({
   statusCode,
   statusText,
   textSize
 }) => {
   return /* @__PURE__ */ jsxs38("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ jsx51("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
+    /* @__PURE__ */ jsx49("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
     /* @__PURE__ */ jsxs38("div", { className: "text-center my-5", children: [
-      /* @__PURE__ */ jsx51("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
+      /* @__PURE__ */ jsx49("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
       /* @__PURE__ */ jsxs38("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
         "(",
         statusCode ? `${statusCode} - ` : null,
@@ -7319,9 +7552,9 @@ var StatusError = ({
 var StatusError_default = StatusError;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7331,7 +7564,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-import { jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7342,8 +7575,8 @@ var LeftTextRightInputGroup = ({
   errorText
 }) => {
   return /* @__PURE__ */ jsxs39("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ jsx53("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx53("p", { children: title }) }),
-    /* @__PURE__ */ jsx53("div", { className: "flex-1", children: /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx51("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx51("p", { children: title }) }),
+    /* @__PURE__ */ jsx51("div", { className: "flex-1", children: /* @__PURE__ */ jsx51(
       InputGroup_default,
       {
         type,
@@ -7360,7 +7593,7 @@ var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
 import { useEffect as useEffect17, useState as useState26 } from "react";
-import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7379,7 +7612,7 @@ var PageTravelGroup = ({
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
   return /* @__PURE__ */ jsxs40("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ jsx54("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx54(
+    pageNumber === 0 ? null : /* @__PURE__ */ jsx52("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx52(
       BaseImage_default,
       {
         size: "small",
@@ -7397,7 +7630,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx54("div", { className: "px-2", children: /* @__PURE__ */ jsx54(
+    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx52("div", { className: "px-2", children: /* @__PURE__ */ jsx52(
       "p",
       {
         className: `${pageNumber === index ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -7412,7 +7645,7 @@ var PageTravelGroup = ({
         children: index + 1
       }
     ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ jsx54("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx54(
+    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ jsx52("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx52(
       BaseImage_default,
       {
         size: "small",
@@ -7430,7 +7663,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx54("div", { children: /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsx52(
       "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`,
@@ -7454,14 +7687,14 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ jsx55("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx53("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx53(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7483,7 +7716,7 @@ var SelectionCheckbox = ({
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx55(
+            /* @__PURE__ */ jsx53(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7493,7 +7726,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ jsx55("div", { className: "flex-1", children: /* @__PURE__ */ jsx55("p", { children: option.text }) })
+            /* @__PURE__ */ jsx53("div", { className: "flex-1", children: /* @__PURE__ */ jsx53("p", { children: option.text }) })
           ]
         }
       )
@@ -7504,7 +7737,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7514,7 +7747,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx56("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsx54("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs42(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
@@ -7522,8 +7755,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ jsx56("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ jsx56("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ jsx54("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx54("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7532,20 +7765,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ jsx57("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx55("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx55(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ jsx57(
+      children: /* @__PURE__ */ jsx55(
         "p",
         {
           className: `${selectedId === option.id ? "text-catchup-white bg-catchup-blue-500" : "text-catchup-gray-300"} transition-all duration-300 rounded-catchup-medium px-2 py-1`,
@@ -7559,34 +7792,34 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-import { jsx as jsx58, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
 var ActivityTemplateLabel = ({
   title,
   icon,
   font
 }) => {
-  return /* @__PURE__ */ jsx58("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx58(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx58("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx56("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx56(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx56("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-import { jsx as jsx59, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx59("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx59(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx59("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx57("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx57(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx57("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CategoryLabel.tsx
-import { jsx as jsx60, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
 var CategoryLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx60("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx58("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx58(
       BaseImage_default,
       {
         src: "/icons/category-label.webp",
@@ -7594,40 +7827,40 @@ var CategoryLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx60("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx58("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var CategoryLabel_default = CategoryLabel;
 
 // src/components/labels/CoterieLabel.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx61("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx61("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx59("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx59("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx62("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx62("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx60("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx60("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx63, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs46 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx63("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx63(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx63("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx61("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx61(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx61("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-import { jsx as jsx64, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx64("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx62("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx62(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -7635,16 +7868,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx64("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx62("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx65, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs48 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx65("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx63("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx63(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7652,31 +7885,31 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx65("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx63("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx66("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx66("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx64("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx64("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs49 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
   return /* @__PURE__ */ jsxs49("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ jsx67(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ jsx67("div", { className: "flex-1", children: /* @__PURE__ */ jsx67("p", { className: "", children: value }) })
+    /* @__PURE__ */ jsx65(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx65("div", { className: "flex-1", children: /* @__PURE__ */ jsx65("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/BaseTitle.tsx
-import { jsx as jsx68, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs50 } from "react/jsx-runtime";
 var BaseTitle = ({
   title,
   totalItemCount,
@@ -7692,15 +7925,15 @@ var BaseTitle = ({
         itemName
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ jsx68("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ jsx66("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/titles/SubTitle.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ jsx69("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ jsx67("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;