catchup-library-web 1.20.32 → 1.20.33

package/dist/index.js

@@ -4903,21 +4903,29 @@ var FillInTheBlanksActivityMaterialContent = ({
   const [selectedOption, setSelectedOption] = (0, import_react18.useState)(null);
   const [draggedOption, setDraggedOption] = (0, import_react18.useState)(null);
   const [dropTargetIndex, setDropTargetIndex] = (0, import_react18.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react18.useState)(
+    null
+  );
+  const dragElementRef = (0, import_react18.useRef)(null);
+  const [touchPosition, setTouchPosition] = (0, import_react18.useState)({
+    x: 0,
+    y: 0
+  });
   (0, import_react18.useEffect)(() => {
     setShuffleOptionList(shuffleArray(optionList));
-  }, []);
+  }, [optionList]);
   (0, import_react18.useEffect)(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
     );
-    if (foundAnswer.answerMap.length === 0) return;
+    if (!foundAnswer || foundAnswer.answerMap.length === 0) return;
     if (Object.keys(materialMap).length === 0) return;
     foundAnswer.answerMap = Object.keys(materialMap).map(
       (materialMapKey) => JSON.parse(materialMap[materialMapKey])[0]
     );
     onChange(answer, 0, JSON.parse(materialMap[0])[0]);
-  }, [showCorrectAnswer]);
+  }, [showCorrectAnswer, answer, materialMap, onChange]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
@@ -4937,36 +4945,89 @@ var FillInTheBlanksActivityMaterialContent = ({
   const checkAnswerProvided = (answerMap2, option) => {
     return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
   };
-  const handleSelectOption = (option) => {
-    setSelectedOption(option);
+  const handleMouseDown = (e, option) => {
+    e.preventDefault();
+    setDraggedOption(option);
+    setSelectedOption(null);
   };
-  const handleDragStart = (option) => {
+  const handleMouseUp = () => {
+    if (dropTargetIndex !== null && draggedOption !== null) {
+      onChange(answer, dropTargetIndex, draggedOption);
+    }
+    setDraggedOption(null);
+    setDropTargetIndex(null);
+  };
+  const handleTouchStart = (e, option, element) => {
+    const touch = e.touches[0];
     setDraggedOption(option);
+    setDraggedElement(element);
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    setSelectedOption(null);
+  };
+  const handleTouchMove = (e) => {
+    if (!draggedOption) 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-drop-zone]");
+    if (dropZone) {
+      const dropIndex = dropZone.getAttribute("data-drop-zone");
+      setDropTargetIndex(dropIndex);
+    } else {
+      setDropTargetIndex(null);
+    }
   };
-  const handleDragEnd = () => {
+  const handleTouchEnd = () => {
     if (dropTargetIndex !== null && draggedOption !== null) {
       onChange(answer, dropTargetIndex, draggedOption);
     }
     setDraggedOption(null);
     setDropTargetIndex(null);
+    setDraggedElement(null);
   };
-  const handleDropZoneEnter = (index) => {
-    setDropTargetIndex(index);
+  const handleSelectOption = (option) => {
+    setSelectedOption(option);
+    setDraggedOption(null);
   };
-  const handleDropZoneDrop = (index) => {
+  const handleDropZoneClick = (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_runtime28.jsxs)("div", { className: "flex flex-row flex-wrap items-center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DividerLine_default, {}) }),
+    draggedOption && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        className: "fixed pointer-events-none z-50 opacity-80",
+        style: {
+          left: `${touchPosition.x}px`,
+          top: `${touchPosition.y}px`,
+          transform: "translate(-50%, -50%)"
+        },
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          InputWithSpecialExpression_default,
+          {
+            value: draggedOption,
+            showSpecialOnly: false
+          }
+        ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ShowMaterialMediaByContentType_default,
+          {
+            contentType: contentMap.type,
+            src: draggedOption,
+            canFullScreen: false
+          },
+          uniqueValue
+        ) })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
       (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         ShowMaterialMediaByContentType_default,
@@ -4979,16 +5040,17 @@ var FillInTheBlanksActivityMaterialContent = ({
       ) }, 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`,
+          ref: draggedOption === option ? dragElementRef : null,
+          className: `${draggedOption === option ? "opacity-40" : selectedOption === option ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+          onMouseDown: (e) => handleMouseDown(e, option),
+          onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
+          onTouchMove: handleTouchMove,
+          onTouchEnd: handleTouchEnd,
           children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "div",
             {
-              className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none touch-none",
+              className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-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,
                 {
@@ -5000,9 +5062,8 @@ var FillInTheBlanksActivityMaterialContent = ({
           ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "div",
             {
-              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none touch-none",
+              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
               onClick: () => handleSelectOption(option),
-              onTouchEnd: () => handleSelectOption(option),
               children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 ShowMaterialMediaByContentType_default,
                 {
@@ -5018,7 +5079,7 @@ var FillInTheBlanksActivityMaterialContent = ({
         index
       )
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap", onMouseUp: handleMouseUp, children: Object.keys(answerMap).map((materialKey, index) => {
       const learnerAnswerState = checkAnswerState(
         JSON.parse(materialMap[materialKey]),
         answerMap[materialKey]
@@ -5026,21 +5087,11 @@ var FillInTheBlanksActivityMaterialContent = ({
       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" : ""}`,
+          "data-drop-zone": materialKey,
+          onMouseEnter: () => draggedOption && setDropTargetIndex(materialKey),
+          onMouseLeave: () => setDropTargetIndex(null),
+          onClick: () => handleDropZoneClick(materialKey),
+          className: `${dropTargetIndex === materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200 rounded-lg`,
           children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "text-xl", children: [
               parseFloat(materialKey) + 1,
@@ -5050,9 +5101,10 @@ var FillInTheBlanksActivityMaterialContent = ({
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "div",
                 {
-                  className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
-                  onClick: () => {
+                  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, "");
                     }
                   },
@@ -5062,7 +5114,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                       value: answerMap[materialKey],
                       showSpecialOnly: false
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-gray-400 italic" })
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-gray-400 italic", children: i18n_default.t("please_drop_here") })
                 }
               ) }),
               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)(
@@ -5090,7 +5142,8 @@ var FillInTheBlanksActivityMaterialContent = ({
               "div",
               {
                 className: "flex-1 cursor-pointer",
-                onClick: () => {
+                onClick: (e) => {
+                  e.stopPropagation();
                   onChange(answer, materialKey, "");
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(

package/dist/index.mjs

@@ -4644,7 +4644,7 @@ var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
 import { InlineMath as InlineMath4 } from "react-katex";
-import { useState as useState17, useEffect as useEffect8 } from "react";
+import { useState as useState17, useEffect as useEffect8, useRef as useRef4 } from "react";
 
 // src/components/texts/InputWithSpecialExpression.tsx
 import { InlineMath as InlineMath3 } from "react-katex";
@@ -4687,21 +4687,29 @@ var FillInTheBlanksActivityMaterialContent = ({
   const [selectedOption, setSelectedOption] = useState17(null);
   const [draggedOption, setDraggedOption] = useState17(null);
   const [dropTargetIndex, setDropTargetIndex] = useState17(null);
+  const [draggedElement, setDraggedElement] = useState17(
+    null
+  );
+  const dragElementRef = useRef4(null);
+  const [touchPosition, setTouchPosition] = useState17({
+    x: 0,
+    y: 0
+  });
   useEffect8(() => {
     setShuffleOptionList(shuffleArray(optionList));
-  }, []);
+  }, [optionList]);
   useEffect8(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
     );
-    if (foundAnswer.answerMap.length === 0) return;
+    if (!foundAnswer || foundAnswer.answerMap.length === 0) return;
     if (Object.keys(materialMap).length === 0) return;
     foundAnswer.answerMap = Object.keys(materialMap).map(
       (materialMapKey) => JSON.parse(materialMap[materialMapKey])[0]
     );
     onChange(answer, 0, JSON.parse(materialMap[0])[0]);
-  }, [showCorrectAnswer]);
+  }, [showCorrectAnswer, answer, materialMap, onChange]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
@@ -4721,36 +4729,89 @@ var FillInTheBlanksActivityMaterialContent = ({
   const checkAnswerProvided = (answerMap2, option) => {
     return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
   };
-  const handleSelectOption = (option) => {
-    setSelectedOption(option);
+  const handleMouseDown = (e, option) => {
+    e.preventDefault();
+    setDraggedOption(option);
+    setSelectedOption(null);
+  };
+  const handleMouseUp = () => {
+    if (dropTargetIndex !== null && draggedOption !== null) {
+      onChange(answer, dropTargetIndex, draggedOption);
+    }
+    setDraggedOption(null);
+    setDropTargetIndex(null);
   };
-  const handleDragStart = (option) => {
+  const handleTouchStart = (e, option, element) => {
+    const touch = e.touches[0];
     setDraggedOption(option);
+    setDraggedElement(element);
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    setSelectedOption(null);
   };
-  const handleDragEnd = () => {
+  const handleTouchMove = (e) => {
+    if (!draggedOption) 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-drop-zone]");
+    if (dropZone) {
+      const dropIndex = dropZone.getAttribute("data-drop-zone");
+      setDropTargetIndex(dropIndex);
+    } else {
+      setDropTargetIndex(null);
+    }
+  };
+  const handleTouchEnd = () => {
     if (dropTargetIndex !== null && draggedOption !== null) {
       onChange(answer, dropTargetIndex, draggedOption);
     }
     setDraggedOption(null);
     setDropTargetIndex(null);
+    setDraggedElement(null);
   };
-  const handleDropZoneEnter = (index) => {
-    setDropTargetIndex(index);
+  const handleSelectOption = (option) => {
+    setSelectedOption(option);
+    setDraggedOption(null);
   };
-  const handleDropZoneDrop = (index) => {
+  const handleDropZoneClick = (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__ */ 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,
+          {
+            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,
@@ -4763,16 +4824,17 @@ var FillInTheBlanksActivityMaterialContent = ({
       ) }, index) : /* @__PURE__ */ jsx28(
         "div",
         {
-          draggable: true,
-          onDragStart: () => handleDragStart(option),
-          onDragEnd: handleDragEnd,
-          className: `${draggedOption === option ? "opacity-40" : "opacity-100"} transition-opacity duration-200`,
+          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: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none touch-none",
+              className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
               onClick: () => handleSelectOption(option),
-              onTouchEnd: () => handleSelectOption(option),
               children: /* @__PURE__ */ jsx28("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx28(
                 InputWithSpecialExpression_default,
                 {
@@ -4784,9 +4846,8 @@ var FillInTheBlanksActivityMaterialContent = ({
           ) : /* @__PURE__ */ jsx28(
             "div",
             {
-              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none touch-none",
+              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
               onClick: () => handleSelectOption(option),
-              onTouchEnd: () => handleSelectOption(option),
               children: /* @__PURE__ */ jsx28(
                 ShowMaterialMediaByContentType_default,
                 {
@@ -4802,7 +4863,7 @@ var FillInTheBlanksActivityMaterialContent = ({
         index
       )
     ) }),
-    /* @__PURE__ */ jsx28("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, 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]
@@ -4810,21 +4871,11 @@ var FillInTheBlanksActivityMaterialContent = ({
       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" : ""}`,
+          "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,
@@ -4834,9 +4885,10 @@ var FillInTheBlanksActivityMaterialContent = ({
               /* @__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" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
-                  onClick: () => {
+                  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, "");
                     }
                   },
@@ -4846,7 +4898,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                       value: answerMap[materialKey],
                       showSpecialOnly: false
                     }
-                  ) : /* @__PURE__ */ jsx28("p", { className: "text-gray-400 italic" })
+                  ) : /* @__PURE__ */ jsx28("p", { className: "text-gray-400 italic", children: i18n_default.t("please_drop_here") })
                 }
               ) }),
               learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx28("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx28(
@@ -4874,7 +4926,8 @@ var FillInTheBlanksActivityMaterialContent = ({
               "div",
               {
                 className: "flex-1 cursor-pointer",
-                onClick: () => {
+                onClick: (e) => {
+                  e.stopPropagation();
                   onChange(answer, materialKey, "");
                 },
                 children: /* @__PURE__ */ jsx28(
@@ -5006,7 +5059,7 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
-import { useEffect as useEffect10, useRef as useRef5, useState as useState19 } from "react";
+import { useEffect as useEffect10, useRef as useRef6, useState as useState19 } from "react";
 import { useDrop as useDrop2 } from "react-dnd";
 import { InlineMath as InlineMath5 } from "react-katex";
 
@@ -5044,7 +5097,7 @@ var DraggableItem = ({
 var DraggableItem_default = DraggableItem;
 
 // src/components/dnds/DroppableItem.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import { useDrop } from "react-dnd";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var DroppableItem = ({
@@ -5055,7 +5108,7 @@ var DroppableItem = ({
   target,
   setTarget
 }) => {
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   const [, drop] = useDrop({
     accept: type,
     hover() {
@@ -5094,7 +5147,7 @@ var GroupingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   useEffect10(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5374,7 +5427,7 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
-import { useEffect as useEffect11, useRef as useRef6, useState as useState20 } from "react";
+import { useEffect as useEffect11, useRef as useRef7, useState as useState20 } from "react";
 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";
@@ -5401,7 +5454,7 @@ var MatchingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const itemsRef = useRef6(null);
+  const itemsRef = useRef7(null);
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -6196,7 +6249,7 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/dnds/DraggableDroppableItem.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { useDrag as useDrag2, useDrop as useDrop4 } from "react-dnd";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var DraggableDroppableItem = ({
@@ -6208,7 +6261,7 @@ var DraggableDroppableItem = ({
   target,
   setTarget
 }) => {
-  const ref = useRef7(null);
+  const ref = useRef8(null);
   const [, drop] = useDrop4({
     accept: type,
     hover() {

package/package.json

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

package/src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx

@@ -1,5 +1,5 @@
 import { InlineMath } from "react-katex";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import BaseImage from "../../images/BaseImage";
 import { shuffleArray } from "../../../utilization/AppUtilization";
 import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
@@ -20,37 +20,48 @@ const FillInTheBlanksActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer,
 }: IFillInTheBlanksActivityMaterialProps) => {
-  const [shuffleOptionList, setShuffleOptionList] = useState([]);
-  const [selectedOption, setSelectedOption] = useState(null);
-  const [draggedOption, setDraggedOption] = useState(null);
-  const [dropTargetIndex, setDropTargetIndex] = useState(null);
+  const [shuffleOptionList, setShuffleOptionList] = useState<any[]>([]);
+  const [selectedOption, setSelectedOption] = useState<any>(null);
+  const [draggedOption, setDraggedOption] = useState<any>(null);
+  const [dropTargetIndex, setDropTargetIndex] = useState<string | null>(null);
+  const [draggedElement, setDraggedElement] = useState<HTMLElement | null>(
+    null
+  );
+  const dragElementRef = useRef<HTMLDivElement>(null);
+  const [touchPosition, setTouchPosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
 
   useEffect(() => {
     setShuffleOptionList(shuffleArray(optionList));
-  }, []);
+  }, [optionList]);
 
   useEffect(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData: any) => answerData.type === "FILL_IN_THE_BLANKS"
     );
-    if (foundAnswer.answerMap.length === 0) return;
+    if (!foundAnswer || foundAnswer.answerMap.length === 0) return;
     if (Object.keys(materialMap).length === 0) return;
     foundAnswer.answerMap = Object.keys(materialMap).map(
       (materialMapKey) => JSON.parse(materialMap[materialMapKey])[0]
     );
 
     onChange(answer, 0, JSON.parse(materialMap[0])[0]);
-  }, [showCorrectAnswer]);
+  }, [showCorrectAnswer, answer, materialMap, onChange]);
 
-  const retrieveAnswerMap = () => {
+  const retrieveAnswerMap = (): Record<string, any> => {
     const foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "FILL_IN_THE_BLANKS"
     );
     return answer.data[foundIndex].answerMap;
   };
 
-  const checkAnswerState = (correctAnswerList: any, learnerAnswer: string) => {
+  const checkAnswerState = (
+    correctAnswerList: any[],
+    learnerAnswer: string
+  ): string | null => {
     if (!isPreview) return null;
     const foundIndex = correctAnswerList.findIndex(
       (correctAnswer: string) => correctAnswer === learnerAnswer
@@ -61,42 +72,85 @@ const FillInTheBlanksActivityMaterialContent = ({
     return "INCORRECT";
   };
 
-  const checkAnswerProvided = (answerMap: any, option: string) => {
+  const checkAnswerProvided = (
+    answerMap: Record<string, any>,
+    option: string
+  ): boolean => {
     return (
       Object.keys(answerMap).findIndex((key) => answerMap[key] === option) !==
       -1
     );
   };
 
-  const handleSelectOption = (option: any) => {
-    setSelectedOption(option);
+  // Mouse drag handlers
+  const handleMouseDown = (e: React.MouseEvent, option: any): void => {
+    e.preventDefault();
+    setDraggedOption(option);
+    setSelectedOption(null);
+  };
+
+  const handleMouseUp = (): void => {
+    if (dropTargetIndex !== null && draggedOption !== null) {
+      onChange(answer, dropTargetIndex, draggedOption);
+    }
+    setDraggedOption(null);
+    setDropTargetIndex(null);
   };
 
-  const handleDragStart = (option: any) => {
+  // Touch drag handlers
+  const handleTouchStart = (
+    e: React.TouchEvent,
+    option: any,
+    element: HTMLElement
+  ): void => {
+    const touch = e.touches[0];
     setDraggedOption(option);
+    setDraggedElement(element);
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    setSelectedOption(null);
   };
 
-  const handleDragEnd = () => {
+  const handleTouchMove = (e: React.TouchEvent): void => {
+    if (!draggedOption) return;
+
+    const touch = e.touches[0];
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+
+    // Find the element under the touch point
+    const elementUnder = document.elementFromPoint(
+      touch.clientX,
+      touch.clientY
+    );
+    const dropZone = elementUnder?.closest("[data-drop-zone]");
+
+    if (dropZone) {
+      const dropIndex = dropZone.getAttribute("data-drop-zone");
+      setDropTargetIndex(dropIndex);
+    } else {
+      setDropTargetIndex(null);
+    }
+  };
+
+  const handleTouchEnd = (): void => {
     if (dropTargetIndex !== null && draggedOption !== null) {
       onChange(answer, dropTargetIndex, draggedOption);
     }
     setDraggedOption(null);
     setDropTargetIndex(null);
+    setDraggedElement(null);
   };
 
-  const handleDropZoneEnter = (index: any) => {
-    setDropTargetIndex(index);
+  // Click/tap to select (for easier mobile interaction)
+  const handleSelectOption = (option: any): void => {
+    setSelectedOption(option);
+    setDraggedOption(null);
   };
 
-  const handleDropZoneDrop = (index: any) => {
+  const handleDropZoneClick = (index: string): void => {
     if (selectedOption !== null) {
       onChange(answer, index, selectedOption);
       setSelectedOption(null);
-    } else if (draggedOption !== null) {
-      onChange(answer, index, draggedOption);
-      setDraggedOption(null);
     }
-    setDropTargetIndex(null);
   };
 
   const answerMap = retrieveAnswerMap();
@@ -112,6 +166,38 @@ const FillInTheBlanksActivityMaterialContent = ({
         <DividerLine />
       </div>
 
+      {/* Floating drag preview for touch */}
+      {draggedOption && touchPosition.x > 0 && (
+        <div
+          className="fixed pointer-events-none z-50 opacity-80"
+          style={{
+            left: `${touchPosition.x}px`,
+            top: `${touchPosition.y}px`,
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          {contentMap.type === "TEXT" ? (
+            <div className="border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg">
+              <p className="italic whitespace-pre-wrap">
+                <InputWithSpecialExpression
+                  value={draggedOption}
+                  showSpecialOnly={false}
+                />
+              </p>
+            </div>
+          ) : (
+            <div className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg">
+              <ShowMaterialMediaByContentType
+                key={uniqueValue}
+                contentType={contentMap.type}
+                src={draggedOption}
+                canFullScreen={false}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
       <div className="w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2">
         {shuffleOptionList.map((option, index) =>
           checkAnswerProvided(answerMap, option) ? (
@@ -126,18 +212,23 @@ const FillInTheBlanksActivityMaterialContent = ({
           ) : (
             <div
               key={index}
-              draggable
-              onDragStart={() => handleDragStart(option)}
-              onDragEnd={handleDragEnd}
+              ref={draggedOption === option ? dragElementRef : null}
               className={`${
-                draggedOption === option ? "opacity-40" : "opacity-100"
-              } transition-opacity duration-200`}
+                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}
             >
               {contentMap.type === "TEXT" ? (
                 <div
-                  className="border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none touch-none"
+                  className="border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none"
                   onClick={() => handleSelectOption(option)}
-                  onTouchEnd={() => handleSelectOption(option)}
                 >
                   <p className="italic whitespace-pre-wrap">
                     <InputWithSpecialExpression
@@ -148,9 +239,8 @@ const FillInTheBlanksActivityMaterialContent = ({
                 </div>
               ) : (
                 <div
-                  className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none touch-none"
+                  className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none"
                   onClick={() => handleSelectOption(option)}
-                  onTouchEnd={() => handleSelectOption(option)}
                 >
                   <ShowMaterialMediaByContentType
                     key={`${uniqueValue}-${index}`}
@@ -164,7 +254,7 @@ const FillInTheBlanksActivityMaterialContent = ({
           )
         )}
       </div>
-      <div className="w-full flex flex-row flex-wrap">
+      <div className="w-full flex flex-row flex-wrap" onMouseUp={handleMouseUp}>
         {Object.keys(answerMap).map((materialKey, index) => {
           const learnerAnswerState = checkAnswerState(
             JSON.parse(materialMap[materialKey]),
@@ -174,25 +264,17 @@ const FillInTheBlanksActivityMaterialContent = ({
             <div key={index} className="w-full md:w-1/2">
               <div className="mx-2">
                 <div
-                  onDragOver={(e) => {
-                    e.preventDefault();
-                    handleDropZoneEnter(materialKey);
-                  }}
-                  onDragLeave={() => setDropTargetIndex(null)}
-                  onDrop={(e) => {
-                    e.preventDefault();
-                    handleDropZoneDrop(materialKey);
-                  }}
-                  onClick={() => {
-                    if (selectedOption !== null) {
-                      handleDropZoneDrop(materialKey);
-                    }
-                  }}
+                  data-drop-zone={materialKey}
+                  onMouseEnter={() =>
+                    draggedOption && setDropTargetIndex(materialKey)
+                  }
+                  onMouseLeave={() => setDropTargetIndex(null)}
+                  onClick={() => handleDropZoneClick(materialKey)}
                   className={`${
                     dropTargetIndex === materialKey
-                      ? "ring-2 ring-blue-400"
+                      ? "ring-2 ring-blue-400 bg-blue-50"
                       : ""
-                  }`}
+                  } transition-all duration-200 rounded-lg`}
                 >
                   <div className="w-full flex flex-row my-2 gap-x-2">
                     <div className="my-auto">
@@ -206,11 +288,12 @@ const FillInTheBlanksActivityMaterialContent = ({
                               <div
                                 className={`w-full min-h-[44px] border rounded-lg ${
                                   answerMap[materialKey]
-                                    ? "border-catchup-blue-400 px-2"
+                                    ? "border-catchup-blue-400 px-2 cursor-pointer"
                                     : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"
                                 }`}
-                                onClick={() => {
+                                onClick={(e) => {
                                   if (answerMap[materialKey]) {
+                                    e.stopPropagation();
                                     onChange(answer, materialKey, "");
                                   }
                                 }}
@@ -221,7 +304,9 @@ const FillInTheBlanksActivityMaterialContent = ({
                                     showSpecialOnly={false}
                                   />
                                 ) : (
-                                  <p className="text-gray-400 italic"></p>
+                                  <p className="text-gray-400 italic">
+                                    {i18n.t("please_drop_here")}
+                                  </p>
                                 )}
                               </div>
                             </div>
@@ -263,7 +348,8 @@ const FillInTheBlanksActivityMaterialContent = ({
                         ) : (
                           <div
                             className="flex-1 cursor-pointer"
-                            onClick={() => {
+                            onClick={(e) => {
+                              e.stopPropagation();
                               onChange(answer, materialKey, "");
                             }}
                           >