catchup-library-web 1.20.29 → 1.20.31

package/dist/index.js

@@ -4860,95 +4860,34 @@ var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
 var import_react_katex4 = require("react-katex");
-var import_react19 = require("react");
-var import_react20 = require("react");
-var import_react_dnd3 = require("react-dnd");
-
-// src/components/dnds/DraggableItem.tsx
-var import_react_dnd = require("react-dnd");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var DraggableItem = ({
-  item,
-  type,
-  component,
-  moveCardHandler
-}) => {
-  const [{ isDragging }, drag] = (0, import_react_dnd.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__ */ (0, import_jsx_runtime27.jsx)(
-    "div",
-    {
-      className: `${isDragging ? "w-[0px] opacity-0" : "opacity-100"} transition-all duration-500`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: drag, className: "", style: { opacity }, children: component })
-    }
-  );
-};
-var DraggableItem_default = DraggableItem;
-
-// src/components/dnds/DroppableItem.tsx
 var import_react18 = require("react");
-var import_react_dnd2 = require("react-dnd");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var DroppableItem = ({
-  item,
-  type,
-  component,
-  dropRef,
-  target,
-  setTarget
-}) => {
-  const ref = (0, import_react18.useRef)(null);
-  const [, drop] = (0, import_react_dnd2.useDrop)({
-    accept: type,
-    hover() {
-      if (item.index !== null && target !== item.index) {
-        setTarget(item.index);
-      }
-    }
-  });
-  dropRef(drop(ref));
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `w-full transition-all duration-500 h-full`, ref, children: component });
-};
-var DroppableItem_default = DroppableItem;
 
 // src/components/texts/InputWithSpecialExpression.tsx
 var import_react_katex3 = require("react-katex");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4960,22 +4899,14 @@ var FillInTheBlanksActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react19.useState)([]);
-  const [selectedOption, setSelectedOption] = (0, import_react19.useState)(null);
-  const [pasteOptionIndex, setPasteOptionIndex] = (0, import_react19.useState)(null);
-  const [{ isOver, canDrop }, drop] = (0, import_react_dnd3.useDrop)({
-    accept: "FILL_IN_THE_BLANKS",
-    drop: () => {
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
-    })
-  });
-  (0, import_react20.useEffect)(() => {
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react18.useState)([]);
+  const [selectedOption, setSelectedOption] = (0, import_react18.useState)(null);
+  const [draggedOption, setDraggedOption] = (0, import_react18.useState)(null);
+  const [dropTargetIndex, setDropTargetIndex] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
     setShuffleOptionList(shuffleArray(optionList));
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
@@ -5006,181 +4937,193 @@ var FillInTheBlanksActivityMaterialContent = ({
   const checkAnswerProvided = (answerMap2, option) => {
     return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
   };
+  const handleSelectOption = (option) => {
+    setSelectedOption(option);
+  };
+  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__ */ (0, import_jsx_runtime30.jsxs)(
-    "div",
-    {
-      className: "flex flex-row flex-wrap items-center",
-      onMouseUp: () => {
-      },
-      onTouchStart: () => {
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
-          (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            ShowMaterialMediaByContentType_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-row flex-wrap items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
+      (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        ShowMaterialMediaByContentType_default,
+        {
+          contentType: contentMap.type,
+          src: option,
+          canFullScreen: true
+        },
+        `${uniqueValue}-${index}`
+      ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          draggable: true,
+          onDragStart: () => handleDragStart(option),
+          onDragEnd: handleDragEnd,
+          className: `${draggedOption === option ? "opacity-40" : "opacity-100"} transition-opacity duration-200`,
+          children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "div",
             {
-              contentType: contentMap.type,
-              src: option,
-              canFullScreen: true
-            },
-            `${uniqueValue}-${index}`
-          ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            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__ */ (0, import_jsx_runtime28.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                InputWithSpecialExpression_default,
+                {
+                  value: option,
+                  showSpecialOnly: false
+                }
+              ) })
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "div",
             {
-              item: { index: option },
-              type: "FILL_IN_THE_BLANKS",
-              component: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              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__ */ (0, import_jsx_runtime28.jsx)(
+                ShowMaterialMediaByContentType_default,
+                {
+                  contentType: contentMap.type,
+                  src: option,
+                  canFullScreen: true
+                },
+                `${uniqueValue}-${index}`
+              )
+            }
+          )
+        },
+        index
+      )
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+      const learnerAnswerState = checkAnswerState(
+        JSON.parse(materialMap[materialKey]),
+        answerMap[materialKey]
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          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__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "text-xl", children: [
+              parseFloat(materialKey) + 1,
+              "."
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "div",
                 {
-                  className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer",
-                  onMouseDown: () => {
-                    setSelectedOption(option);
-                    setPasteOptionIndex(null);
-                  },
-                  onTouchEnd: () => {
-                    setSelectedOption(option);
-                    setPasteOptionIndex(null);
+                  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: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  children: answerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     InputWithSpecialExpression_default,
                     {
-                      value: option,
+                      value: answerMap[materialKey],
                       showSpecialOnly: false
                     }
-                  ) })
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-gray-400 italic" })
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                "div",
+              ) }),
+              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                BaseImage_default,
                 {
-                  className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
-                  onMouseDown: () => {
-                    setSelectedOption(option);
-                    setPasteOptionIndex(null);
-                  },
-                  onTouchEnd: () => {
-                    setSelectedOption(option);
-                    setPasteOptionIndex(null);
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                    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__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                BaseImage_default,
+                {
+                  src: "/icons/cross-red.webp",
+                  alt: "cross-red",
+                  size: "small"
+                }
+              ) }) : null
+            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              "div",
+              {
+                className: `w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
               }
-            },
-            index
-          )
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
-          const learnerAnswerState = checkAnswerState(
-            JSON.parse(materialMap[materialKey]),
-            answerMap[materialKey]
-          );
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            DroppableItem_default,
-            {
-              item: { index },
-              type: "FILL_IN_THE_BLANKS",
-              target: pasteOptionIndex,
-              setTarget: setPasteOptionIndex,
-              dropRef: drop,
-              component: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { className: "text-xl", children: [
-                  parseFloat(materialKey) + 1,
-                  "."
-                ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                    "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__ */ (0, import_jsx_runtime30.jsx)(
-                        InputWithSpecialExpression_default,
-                        {
-                          value: answerMap[materialKey],
-                          showSpecialOnly: false
-                        }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-gray-400 italic" })
-                    }
-                  ) }),
-                  learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                    BaseImage_default,
-                    {
-                      src: "/icons/checkbox.webp",
-                      alt: "checkbox",
-                      size: "small"
-                    }
-                  ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                    BaseImage_default,
-                    {
-                      src: "/icons/cross-red.webp",
-                      alt: "cross-red",
-                      size: "small"
-                    }
-                  ) }) : null
-                ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                  "div",
-                  {
-                    className: `w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                  "div",
-                  {
-                    className: "flex-1 cursor-pointer",
-                    onClick: () => {
-                      onChange(answer, materialKey, "");
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                      ShowMaterialMediaByContentType_default,
-                      {
-                        contentType: contentMap.type,
-                        src: answerMap[materialKey],
-                        canFullScreen: true
-                      },
-                      `${uniqueValue}-${index}`
-                    )
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-                  answerMap[materialKey]
-                ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                  "span",
+            ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              "div",
+              {
+                className: "flex-1 cursor-pointer",
+                onClick: () => {
+                  onChange(answer, materialKey, "");
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  ShowMaterialMediaByContentType_default,
                   {
-                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    contentType: contentMap.type,
+                    src: answerMap[materialKey],
+                    canFullScreen: true
                   },
-                  index2
-                )) }, materialKey) })
-              ] })
-            },
-            index
-          ) }) }, index);
-        }) })
-      ]
-    }
-  );
+                  `${uniqueValue}-${index}`
+                )
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+              answerMap[materialKey]
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )) }, materialKey) })
+          ] })
+        }
+      ) }) }, index);
+    }) })
+  ] });
 };
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
-var import_react21 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var FillInTheBlanksActivityContent = ({
   answer,
   data,
@@ -5200,7 +5143,7 @@ var FillInTheBlanksActivityContent = ({
     "FILL_IN_THE_BLANKS"
   );
   const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList ? JSON.parse(data.fillInTheBlanksIncorrectList) : [];
-  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react21.useState)(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = (0, import_react19.useState)(() => {
     return retrieveCurrentAnswerMap();
   });
   function retrieveCurrentAnswerMap() {
@@ -5209,7 +5152,7 @@ var FillInTheBlanksActivityContent = ({
     );
     return answer.data[foundIndex].answerMap;
   }
-  (0, import_react21.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
   const constructAnswerOptionList = () => {
@@ -5248,8 +5191,8 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(newAnswerMap);
     changeAnswer(newAnswer);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -5258,9 +5201,9 @@ var FillInTheBlanksActivityContent = ({
         templateType: "FILL_IN_THE_BLANKS"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5279,9 +5222,70 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
-var import_react22 = require("react");
-var import_react_dnd4 = require("react-dnd");
+var import_react21 = require("react");
+var import_react_dnd3 = require("react-dnd");
 var import_react_katex5 = require("react-katex");
+
+// src/components/dnds/DraggableItem.tsx
+var import_react_dnd = require("react-dnd");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var DraggableItem = ({
+  item,
+  type,
+  component,
+  moveCardHandler
+}) => {
+  const [{ isDragging }, drag] = (0, import_react_dnd.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__ */ (0, import_jsx_runtime30.jsx)(
+    "div",
+    {
+      className: `${isDragging ? "w-[0px] opacity-0" : "opacity-100"} transition-all duration-500`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref: drag, className: "", style: { opacity }, children: component })
+    }
+  );
+};
+var DraggableItem_default = DraggableItem;
+
+// src/components/dnds/DroppableItem.tsx
+var import_react20 = require("react");
+var import_react_dnd2 = require("react-dnd");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var DroppableItem = ({
+  item,
+  type,
+  component,
+  dropRef,
+  target,
+  setTarget
+}) => {
+  const ref = (0, import_react20.useRef)(null);
+  const [, drop] = (0, import_react_dnd2.useDrop)({
+    accept: type,
+    hover() {
+      if (item.index !== null && target !== item.index) {
+        setTarget(item.index);
+      }
+    }
+  });
+  dropRef(drop(ref));
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `w-full transition-all duration-500 h-full`, ref, children: component });
+};
+var DroppableItem_default = DroppableItem;
+
+// src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var GroupingActivityMaterialContent = ({
   uniqueValue,
@@ -5293,11 +5297,11 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = (0, import_react22.useState)(null);
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react22.useState)(null);
-  const [isShuffled, setIsShuffled] = (0, import_react22.useState)(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react22.useState)([]);
-  const [{ isOver, canDrop }, drop] = (0, import_react_dnd4.useDrop)({
+  const [selectedValue, setSelectedValue] = (0, import_react21.useState)(null);
+  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react21.useState)(null);
+  const [isShuffled, setIsShuffled] = (0, import_react21.useState)(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react21.useState)([]);
+  const [{ isOver, canDrop }, drop] = (0, import_react_dnd3.useDrop)({
     accept: "GROUPING",
     drop: () => {
     },
@@ -5306,8 +5310,8 @@ var GroupingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const ref = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  const ref = (0, import_react21.useRef)(null);
+  (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5328,7 +5332,7 @@ var GroupingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "GROUPING"
@@ -5586,8 +5590,8 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
-var import_react23 = require("react");
-var import_react_dnd5 = require("react-dnd");
+var import_react22 = require("react");
+var import_react_dnd4 = require("react-dnd");
 var import_react_katex6 = require("react-katex");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var MatchingActivityMaterialContent = ({
@@ -5600,11 +5604,11 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = (0, import_react23.useState)(null);
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react23.useState)(null);
-  const [isShuffled, setIsShuffled] = (0, import_react23.useState)(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react23.useState)([]);
-  const [{ isOver, canDrop }, drop] = (0, import_react_dnd5.useDrop)({
+  const [selectedValue, setSelectedValue] = (0, import_react22.useState)(null);
+  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react22.useState)(null);
+  const [isShuffled, setIsShuffled] = (0, import_react22.useState)(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react22.useState)([]);
+  const [{ isOver, canDrop }, drop] = (0, import_react_dnd4.useDrop)({
     accept: "MATCHING",
     drop: () => {
     },
@@ -5613,8 +5617,8 @@ var MatchingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const itemsRef = (0, import_react23.useRef)(null);
-  (0, import_react23.useEffect)(() => {
+  const itemsRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5633,7 +5637,7 @@ var MatchingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "MATCHING"
@@ -6368,22 +6372,22 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-var import_react26 = require("react");
-var import_react_dnd7 = require("react-dnd");
+var import_react25 = require("react");
+var import_react_dnd6 = require("react-dnd");
 var import_react_katex9 = require("react-katex");
 
 // src/hooks/useScreenSize.ts
-var import_react24 = require("react");
+var import_react23 = require("react");
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = (0, import_react24.useState)({
+  const [containerSize, setContainerSize] = (0, import_react23.useState)({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = (0, import_react24.useState)({
+  const [screenSize, setScreenSize] = (0, import_react23.useState)({
     width: window.innerWidth,
     height: window.innerHeight
   });
-  (0, import_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const handleResize = () => {
       setScreenSize({
         width: window.innerWidth,
@@ -6408,8 +6412,8 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/dnds/DraggableDroppableItem.tsx
-var import_react25 = require("react");
-var import_react_dnd6 = require("react-dnd");
+var import_react24 = require("react");
+var import_react_dnd5 = require("react-dnd");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var DraggableDroppableItem = ({
   item,
@@ -6420,8 +6424,8 @@ var DraggableDroppableItem = ({
   target,
   setTarget
 }) => {
-  const ref = (0, import_react25.useRef)(null);
-  const [, drop] = (0, import_react_dnd6.useDrop)({
+  const ref = (0, import_react24.useRef)(null);
+  const [, drop] = (0, import_react_dnd5.useDrop)({
     accept: type,
     hover() {
       if (!ref.current) {
@@ -6432,7 +6436,7 @@ var DraggableDroppableItem = ({
       }
     }
   });
-  const [{ isDragging }, drag] = (0, import_react_dnd6.useDrag)({
+  const [{ isDragging }, drag] = (0, import_react_dnd5.useDrag)({
     type,
     item,
     end: (item2, monitor) => {
@@ -6470,11 +6474,11 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react26.useState)(null);
-  const [selectedKey, setSelectedKey] = (0, import_react26.useState)(null);
+  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react25.useState)(null);
+  const [selectedKey, setSelectedKey] = (0, import_react25.useState)(null);
   const { screenSize } = useScreenSize_default();
-  const [view, setView] = (0, import_react26.useState)("PC");
-  const [{ isOver, canDrop }, drop] = (0, import_react_dnd7.useDrop)({
+  const [view, setView] = (0, import_react25.useState)("PC");
+  const [{ isOver, canDrop }, drop] = (0, import_react_dnd6.useDrop)({
     accept: "ORDERING",
     drop: () => {
     },
@@ -6483,7 +6487,7 @@ var OrderingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  (0, import_react26.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!screenSize) return;
     if (screenSize.width <= 1024) {
       setView("TABLET");
@@ -6491,7 +6495,7 @@ var OrderingActivityMaterialContent = ({
       setView("PC");
     }
   }, [screenSize]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!showCorrectAnswer) return;
     const answerMap2 = answer.data.find(
       (answerData) => answerData.type === "ORDERING"
@@ -6684,7 +6688,7 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 var import_react_katex10 = require("react-katex");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var TrueFalseActivityMaterialContent = ({
@@ -6698,8 +6702,8 @@ var TrueFalseActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const { screenSize } = useScreenSize_default();
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react27.useState)([]);
-  (0, import_react27.useEffect)(() => {
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react26.useState)([]);
+  (0, import_react26.useEffect)(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -6709,7 +6713,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "TRUE_FALSE"
@@ -7019,7 +7023,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_react28 = require("react");
+var import_react27 = require("react");
 
 // src/components/boxes/SelectionBox.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -7071,14 +7075,14 @@ var ActivityPreviewByData = ({
   showDifficulty,
   isFullScreen
 }) => {
-  const [key, setKey] = (0, import_react28.useState)((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = (0, import_react28.useState)(null);
-  const [optionList, setOptionList] = (0, import_react28.useState)([]);
-  (0, import_react28.useEffect)(() => {
+  const [key, setKey] = (0, import_react27.useState)((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = (0, import_react27.useState)(null);
+  const [optionList, setOptionList] = (0, import_react27.useState)([]);
+  (0, import_react27.useEffect)(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
     let foundTypeOption;
@@ -7093,7 +7097,7 @@ var ActivityPreviewByData = ({
       setSelectedType(typeOptionList[0].id);
     }
   }, [typeOptionList, lockedType]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!data) return;
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
@@ -7276,7 +7280,7 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/activities/ActivityPreviewByAnswerData.tsx
-var import_react29 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var ActivityPreviewByAnswerData = ({
   data,
@@ -7291,11 +7295,11 @@ var ActivityPreviewByAnswerData = ({
   showCorrectAnswer = false
 }) => {
   var _a;
-  const [key, setKey] = (0, import_react29.useState)((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = (0, import_react29.useState)(null);
-  const [optionList, setOptionList] = (0, import_react29.useState)([]);
-  const [answer, setAnswer] = (0, import_react29.useState)({ data: [] });
-  (0, import_react29.useEffect)(() => {
+  const [key, setKey] = (0, import_react28.useState)((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = (0, import_react28.useState)(null);
+  const [optionList, setOptionList] = (0, import_react28.useState)([]);
+  const [answer, setAnswer] = (0, import_react28.useState)({ data: [] });
+  (0, import_react28.useEffect)(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
@@ -7308,7 +7312,7 @@ var ActivityPreviewByAnswerData = ({
     }
     return null;
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!data) return;
     const constructAnswerBasedOnData2 = () => {
       const newAnswer = { data: [] };
@@ -7347,7 +7351,7 @@ var ActivityPreviewByAnswerData = ({
     };
     constructAnswerBasedOnData2();
   }, [data, lockedType]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!data || !answer.data.length) return;
     let currentTypeOptionList = typeOptionList || answer.data.map((item) => ({
       id: item.type,
@@ -7514,7 +7518,7 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-var import_react30 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var PageTravelGroup = ({
   isImageProcessing,
@@ -7524,13 +7528,13 @@ var PageTravelGroup = ({
   setPageNumber,
   setImageReady
 }) => {
-  const [totalPageNumber, setTotalPageNumber] = (0, import_react30.useState)(0);
-  const [newPageNumber, setNewPageNumber] = (0, import_react30.useState)(0);
-  (0, import_react30.useEffect)(() => {
+  const [totalPageNumber, setTotalPageNumber] = (0, import_react29.useState)(0);
+  const [newPageNumber, setNewPageNumber] = (0, import_react29.useState)(0);
+  (0, import_react29.useEffect)(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
   }, [initialTotalPageNumber]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [