catchup-library-web 1.20.30 → 1.20.31

package/dist/index.mjs

@@ -4644,95 +4644,34 @@ var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
 import { InlineMath as InlineMath4 } from "react-katex";
-import { useState as useState17 } from "react";
-import { useEffect as useEffect8 } from "react";
-import { useDrop as useDrop2 } from "react-dnd";
-
-// src/components/dnds/DraggableItem.tsx
-import { useDrag } from "react-dnd";
-import { jsx as jsx27 } 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__ */ jsx27(
-    "div",
-    {
-      className: `${isDragging ? "w-[0px] opacity-0" : "opacity-100"} transition-all duration-500`,
-      children: /* @__PURE__ */ jsx27("div", { ref: drag, className: "", style: { opacity }, children: component })
-    }
-  );
-};
-var DraggableItem_default = DraggableItem;
-
-// src/components/dnds/DroppableItem.tsx
-import { useRef as useRef4 } from "react";
-import { useDrop } from "react-dnd";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var DroppableItem = ({
-  item,
-  type,
-  component,
-  dropRef,
-  target,
-  setTarget
-}) => {
-  const ref = useRef4(null);
-  const [, drop] = useDrop({
-    accept: type,
-    hover() {
-      if (item.index !== null && target !== item.index) {
-        setTarget(item.index);
-      }
-    }
-  });
-  dropRef(drop(ref));
-  return /* @__PURE__ */ jsx28("div", { className: `w-full transition-all duration-500 h-full`, ref, children: component });
-};
-var DroppableItem_default = DroppableItem;
+import { useState as useState17, useEffect as useEffect8 } from "react";
 
 // src/components/texts/InputWithSpecialExpression.tsx
 import { InlineMath as InlineMath3 } from "react-katex";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx29("div", { className: "m-2", children: /* @__PURE__ */ jsx29("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx29(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx27("div", { className: "m-2", children: /* @__PURE__ */ jsx27("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx27(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-lg", children: /* @__PURE__ */ jsx29(InlineMath3, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx27("span", { className: "text-lg", children: /* @__PURE__ */ jsx27(InlineMath3, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ jsx29("div", { className: "m-2", children: /* @__PURE__ */ jsx29("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx29(
+  )) }) }) : null : /* @__PURE__ */ jsx27("div", { className: "m-2", children: /* @__PURE__ */ jsx27("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx27(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-lg", children: /* @__PURE__ */ jsx29(InlineMath3, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx27("span", { className: "text-lg", children: /* @__PURE__ */ jsx27(InlineMath3, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4746,16 +4685,8 @@ var FillInTheBlanksActivityMaterialContent = ({
 }) => {
   const [shuffleOptionList, setShuffleOptionList] = useState17([]);
   const [selectedOption, setSelectedOption] = useState17(null);
-  const [pasteOptionIndex, setPasteOptionIndex] = useState17(null);
-  const [{ isOver, canDrop }, drop] = useDrop2({
-    accept: "FILL_IN_THE_BLANKS",
-    drop: () => {
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
-    })
-  });
+  const [draggedOption, setDraggedOption] = useState17(null);
+  const [dropTargetIndex, setDropTargetIndex] = useState17(null);
   useEffect8(() => {
     setShuffleOptionList(shuffleArray(optionList));
   }, []);
@@ -4792,165 +4723,191 @@ var FillInTheBlanksActivityMaterialContent = ({
   };
   const handleSelectOption = (option) => {
     setSelectedOption(option);
-    setPasteOptionIndex(null);
+  };
+  const handleDragStart = (option) => {
+    setDraggedOption(option);
+  };
+  const handleDragEnd = () => {
+    if (dropTargetIndex !== null && draggedOption !== null) {
+      onChange(answer, dropTargetIndex, draggedOption);
+    }
+    setDraggedOption(null);
+    setDropTargetIndex(null);
+  };
+  const handleDropZoneEnter = (index) => {
+    setDropTargetIndex(index);
+  };
+  const handleDropZoneDrop = (index) => {
+    if (selectedOption !== null) {
+      onChange(answer, index, selectedOption);
+      setSelectedOption(null);
+    } else if (draggedOption !== null) {
+      onChange(answer, index, draggedOption);
+      setDraggedOption(null);
+    }
+    setDropTargetIndex(null);
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsxs17(
-    "div",
-    {
-      className: "flex flex-row flex-wrap items-center",
-      children: [
-        /* @__PURE__ */ jsx30("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx30("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
-        /* @__PURE__ */ jsx30("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx30(DividerLine_default, {}) }),
-        /* @__PURE__ */ jsx30("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__ */ jsx30("div", { className: "opacity-30", children: /* @__PURE__ */ jsx30(
-            ShowMaterialMediaByContentType_default,
+  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, {}) }),
+    /* @__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",
+        {
+          draggable: true,
+          onDragStart: () => handleDragStart(option),
+          onDragEnd: handleDragEnd,
+          className: `${draggedOption === option ? "opacity-40" : "opacity-100"} transition-opacity duration-200`,
+          children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx28(
+            "div",
             {
-              contentType: contentMap.type,
-              src: option,
-              canFullScreen: true
-            },
-            `${uniqueValue}-${index}`
-          ) }, index) : /* @__PURE__ */ jsx30(
-            DraggableItem_default,
+              className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none touch-none",
+              onClick: () => handleSelectOption(option),
+              onTouchEnd: () => handleSelectOption(option),
+              children: /* @__PURE__ */ jsx28("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx28(
+                InputWithSpecialExpression_default,
+                {
+                  value: option,
+                  showSpecialOnly: false
+                }
+              ) })
+            }
+          ) : /* @__PURE__ */ jsx28(
+            "div",
             {
-              item: { index: option },
-              type: "FILL_IN_THE_BLANKS",
-              component: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30(
+              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none touch-none",
+              onClick: () => handleSelectOption(option),
+              onTouchEnd: () => 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", 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",
+        {
+          onDragOver: (e) => {
+            e.preventDefault();
+            handleDropZoneEnter(materialKey);
+          },
+          onDragLeave: () => setDropTargetIndex(null),
+          onDrop: (e) => {
+            e.preventDefault();
+            handleDropZoneDrop(materialKey);
+          },
+          onClick: () => {
+            if (selectedOption !== null) {
+              handleDropZoneDrop(materialKey);
+            }
+          },
+          className: `${dropTargetIndex === materialKey ? "ring-2 ring-blue-400" : ""}`,
+          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: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
-                  onClick: () => handleSelectOption(option),
-                  children: /* @__PURE__ */ jsx30("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx30(
+                  className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
+                  onClick: () => {
+                    if (answerMap[materialKey]) {
+                      onChange(answer, materialKey, "");
+                    }
+                  },
+                  children: answerMap[materialKey] ? /* @__PURE__ */ jsx28(
                     InputWithSpecialExpression_default,
                     {
-                      value: option,
+                      value: answerMap[materialKey],
                       showSpecialOnly: false
                     }
-                  ) })
+                  ) : /* @__PURE__ */ jsx28("p", { className: "text-gray-400 italic" })
                 }
-              ) : /* @__PURE__ */ jsx30(
-                "div",
+              ) }),
+              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx28("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx28(
+                BaseImage_default,
                 {
-                  className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
-                  onClick: () => handleSelectOption(option),
-                  children: /* @__PURE__ */ jsx30(
-                    ShowMaterialMediaByContentType_default,
-                    {
-                      contentType: contentMap.type,
-                      src: option,
-                      canFullScreen: true
-                    },
-                    `${uniqueValue}-${index}`
-                  )
+                  src: "/icons/checkbox.webp",
+                  alt: "checkbox",
+                  size: "small"
                 }
-              ),
-              moveCardHandler: () => {
-                onChange(answer, pasteOptionIndex, selectedOption);
+              ) }) : 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",
+              {
+                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") }) })
               }
-            },
-            index
-          )
-        ) }),
-        /* @__PURE__ */ jsx30("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__ */ jsx30("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx30("div", { className: "mx-2", children: /* @__PURE__ */ jsx30(
-            DroppableItem_default,
-            {
-              item: { index },
-              type: "FILL_IN_THE_BLANKS",
-              target: pasteOptionIndex,
-              setTarget: setPasteOptionIndex,
-              dropRef: drop,
-              component: /* @__PURE__ */ jsxs17("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-                /* @__PURE__ */ jsx30("div", { className: "my-auto", children: /* @__PURE__ */ jsxs17("p", { className: "text-xl", children: [
-                  parseFloat(materialKey) + 1,
-                  "."
-                ] }) }),
-                /* @__PURE__ */ jsx30("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsx30("div", { className: "flex-1", children: /* @__PURE__ */ jsx30(
-                    "div",
-                    {
-                      className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
-                      onClick: () => {
-                        if (answerMap[materialKey]) {
-                          onChange(answer, materialKey, "");
-                        }
-                      },
-                      children: answerMap[materialKey] ? /* @__PURE__ */ jsx30(
-                        InputWithSpecialExpression_default,
-                        {
-                          value: answerMap[materialKey],
-                          showSpecialOnly: false
-                        }
-                      ) : /* @__PURE__ */ jsx30("p", { className: "text-gray-400 italic" })
-                    }
-                  ) }),
-                  learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
-                    BaseImage_default,
-                    {
-                      src: "/icons/checkbox.webp",
-                      alt: "checkbox",
-                      size: "small"
-                    }
-                  ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
-                    BaseImage_default,
-                    {
-                      src: "/icons/cross-red.webp",
-                      alt: "cross-red",
-                      size: "small"
-                    }
-                  ) }) : null
-                ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx30(
-                  "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__ */ jsx30("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx30("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
-                  }
-                ) : /* @__PURE__ */ jsx30(
-                  "div",
-                  {
-                    className: "flex-1 cursor-pointer",
-                    onClick: () => {
-                      onChange(answer, materialKey, "");
-                    },
-                    children: /* @__PURE__ */ jsx30(
-                      ShowMaterialMediaByContentType_default,
-                      {
-                        contentType: contentMap.type,
-                        src: answerMap[materialKey],
-                        canFullScreen: true
-                      },
-                      `${uniqueValue}-${index}`
-                    )
-                  }
-                ) : /* @__PURE__ */ jsx30("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-                  answerMap[materialKey]
-                ).map((inputPart, index2) => /* @__PURE__ */ jsx30(
-                  "span",
+            ) : /* @__PURE__ */ jsx28(
+              "div",
+              {
+                className: "flex-1 cursor-pointer",
+                onClick: () => {
+                  onChange(answer, materialKey, "");
+                },
+                children: /* @__PURE__ */ jsx28(
+                  ShowMaterialMediaByContentType_default,
                   {
-                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-xl", children: /* @__PURE__ */ jsx30(InlineMath4, { math: inputPart.value }) }) : inputPart.value
+                    contentType: contentMap.type,
+                    src: answerMap[materialKey],
+                    canFullScreen: true
                   },
-                  index2
-                )) }, materialKey) })
-              ] })
-            },
-            index
-          ) }) }, index);
-        }) })
-      ]
-    }
-  );
+                  `${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);
+    }) })
+  ] });
 };
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
 import { useState as useState18, useEffect as useEffect9 } from "react";
-import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var FillInTheBlanksActivityContent = ({
   answer,
   data,
@@ -5019,7 +4976,7 @@ var FillInTheBlanksActivityContent = ({
     changeAnswer(newAnswer);
   };
   return /* @__PURE__ */ jsxs18("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx31("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx29("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx29(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -5028,9 +4985,9 @@ var FillInTheBlanksActivityContent = ({
         templateType: "FILL_IN_THE_BLANKS"
       }
     ) }),
-    /* @__PURE__ */ jsx31("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx31(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsx31("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx31(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx31("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx29("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx29(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx29("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx29(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx29("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx29(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5050,8 +5007,69 @@ var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
 import { useEffect as useEffect10, useRef as useRef5, useState as useState19 } from "react";
-import { useDrop as useDrop3 } from "react-dnd";
+import { useDrop as useDrop2 } from "react-dnd";
 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 useRef4 } 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 = useRef4(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";
 var GroupingActivityMaterialContent = ({
   uniqueValue,
@@ -5067,7 +5085,7 @@ var GroupingActivityMaterialContent = ({
   const [selectedTargetKey, setSelectedTargetKey] = useState19(null);
   const [isShuffled, setIsShuffled] = useState19(false);
   const [shuffledMaterialList, setShuffledMaterialList] = useState19([]);
-  const [{ isOver, canDrop }, drop] = useDrop3({
+  const [{ isOver, canDrop }, drop] = useDrop2({
     accept: "GROUPING",
     drop: () => {
     },
@@ -5357,7 +5375,7 @@ var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
 import { useEffect as useEffect11, useRef as useRef6, useState as useState20 } from "react";
-import { useDrop as useDrop4 } from "react-dnd";
+import { useDrop as useDrop3 } from "react-dnd";
 import { InlineMath as InlineMath6 } from "react-katex";
 import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 var MatchingActivityMaterialContent = ({
@@ -5374,7 +5392,7 @@ var MatchingActivityMaterialContent = ({
   const [selectedTargetKey, setSelectedTargetKey] = useState20(null);
   const [isShuffled, setIsShuffled] = useState20(false);
   const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
-  const [{ isOver, canDrop }, drop] = useDrop4({
+  const [{ isOver, canDrop }, drop] = useDrop3({
     accept: "MATCHING",
     drop: () => {
     },
@@ -6139,7 +6157,7 @@ var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
 import { useEffect as useEffect13, useState as useState22 } from "react";
-import { useDrop as useDrop6 } from "react-dnd";
+import { useDrop as useDrop5 } from "react-dnd";
 import { InlineMath as InlineMath9 } from "react-katex";
 
 // src/hooks/useScreenSize.ts
@@ -6179,7 +6197,7 @@ var useScreenSize_default = useScreenSize;
 
 // src/components/dnds/DraggableDroppableItem.tsx
 import { useRef as useRef7 } from "react";
-import { useDrag as useDrag2, useDrop as useDrop5 } from "react-dnd";
+import { useDrag as useDrag2, useDrop as useDrop4 } from "react-dnd";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var DraggableDroppableItem = ({
   item,
@@ -6191,7 +6209,7 @@ var DraggableDroppableItem = ({
   setTarget
 }) => {
   const ref = useRef7(null);
-  const [, drop] = useDrop5({
+  const [, drop] = useDrop4({
     accept: type,
     hover() {
       if (!ref.current) {
@@ -6244,7 +6262,7 @@ var OrderingActivityMaterialContent = ({
   const [selectedKey, setSelectedKey] = useState22(null);
   const { screenSize } = useScreenSize_default();
   const [view, setView] = useState22("PC");
-  const [{ isOver, canDrop }, drop] = useDrop6({
+  const [{ isOver, canDrop }, drop] = useDrop5({
     accept: "ORDERING",
     drop: () => {
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.20.30",
+  "version": "1.20.31",
   "description": "",
   "main": "dist/index.js",
   "scripts": {