catchup-library-web 1.21.1 → 1.21.3

package/dist/index.js

@@ -5359,6 +5359,7 @@ var GroupingActivityMaterialContent = ({
     y: 0
   });
   const ref = (0, import_react20.useRef)(null);
+  const dropZoneRefs = (0, import_react20.useRef)({});
   (0, import_react20.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5386,6 +5387,17 @@ var GroupingActivityMaterialContent = ({
       (answerData) => answerData.type === "GROUPING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
+  (0, import_react20.useEffect)(() => {
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+    }
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "GROUPING"
@@ -5590,7 +5602,7 @@ var GroupingActivityMaterialContent = ({
       }) }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row w-full", children: [
+    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
@@ -5611,6 +5623,7 @@ var GroupingActivityMaterialContent = ({
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-full py-3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
+          ref: (el) => dropZoneRefs.current[answerMapKey] = el,
           "data-grouping-drop-zone": answerMapKey,
           onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
           onMouseLeave: () => setDropTargetKey(null),
@@ -5673,7 +5686,7 @@ var GroupingActivityMaterialContent = ({
           ) }) })
         }
       ) }) })
-    ] }, index)) })
+    ] }, index))
   ] });
 };
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
@@ -5747,16 +5760,22 @@ var MatchingActivityMaterialContent = ({
   const [selectedValue, setSelectedValue] = (0, import_react21.useState)(null);
   const [draggedValue, setDraggedValue] = (0, import_react21.useState)(null);
   const [dropTargetKey, setDropTargetKey] = (0, import_react21.useState)(null);
-  const [draggedElement, setDraggedElement] = (0, import_react21.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react21.useState)(
+    null
+  );
   const [isShuffled, setIsShuffled] = (0, import_react21.useState)(false);
   const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react21.useState)([]);
   const dragElementRef = (0, import_react21.useRef)(null);
-  const [mousePosition, setMousePosition] = (0, import_react21.useState)({ x: 0, y: 0 });
-  const [touchPosition, setTouchPosition] = (0, import_react21.useState)({ x: 0, y: 0 });
+  const [mousePosition, setMousePosition] = (0, import_react21.useState)({
+    x: 0,
+    y: 0
+  });
+  const [touchPosition, setTouchPosition] = (0, import_react21.useState)({
+    x: 0,
+    y: 0
+  });
   const itemsRef = (0, import_react21.useRef)(null);
-  const scrollIntervalRef = (0, import_react21.useRef)(null);
-  const SCROLL_THRESHOLD = 100;
-  const SCROLL_SPEED = 10;
+  const dropZoneRefs = (0, import_react21.useRef)({});
   (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5778,44 +5797,21 @@ var MatchingActivityMaterialContent = ({
   }, [materialMap, isShuffled]);
   (0, import_react21.useEffect)(() => {
     if (!showCorrectAnswer) return;
-    answer.data.find((answerData) => answerData.type === "MATCHING").answerMap = materialMap;
+    answer.data.find(
+      (answerData) => answerData.type === "MATCHING"
+    ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
   (0, import_react21.useEffect)(() => {
-    if (!draggedValue || mousePosition.y === 0) return;
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-      if (mousePosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      } else if (mousePosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
-      }
-    };
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16);
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
-      }
-    };
-  }, [draggedValue, mousePosition.y]);
-  (0, import_react21.useEffect)(() => {
-    if (!draggedValue || touchPosition.y === 0) return;
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-      if (touchPosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      } else if (touchPosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
-      }
-    };
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16);
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
       }
-    };
-  }, [draggedValue, touchPosition.y]);
+    }
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -6044,6 +6040,7 @@ var MatchingActivityMaterialContent = ({
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "div",
           {
+            ref: (el) => dropZoneRefs.current[answerMapKey] = el,
             "data-matching-drop-zone": answerMapKey,
             onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
             onMouseLeave: () => setDropTargetKey(null),

package/dist/index.mjs

@@ -5143,6 +5143,7 @@ var GroupingActivityMaterialContent = ({
     y: 0
   });
   const ref = useRef5(null);
+  const dropZoneRefs = useRef5({});
   useEffect10(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5170,6 +5171,17 @@ var GroupingActivityMaterialContent = ({
       (answerData) => answerData.type === "GROUPING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
+  useEffect10(() => {
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+    }
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "GROUPING"
@@ -5374,7 +5386,7 @@ var GroupingActivityMaterialContent = ({
       }) }),
       /* @__PURE__ */ jsx30(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ jsx30("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
+    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
       /* @__PURE__ */ jsx30("div", { className: "w-1/3", children: /* @__PURE__ */ jsx30(
         "div",
         {
@@ -5395,6 +5407,7 @@ var GroupingActivityMaterialContent = ({
       /* @__PURE__ */ jsx30("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ jsx30("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx30(
         "div",
         {
+          ref: (el) => dropZoneRefs.current[answerMapKey] = el,
           "data-grouping-drop-zone": answerMapKey,
           onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
           onMouseLeave: () => setDropTargetKey(null),
@@ -5457,7 +5470,7 @@ var GroupingActivityMaterialContent = ({
           ) }) })
         }
       ) }) })
-    ] }, index)) })
+    ] }, index))
   ] });
 };
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
@@ -5531,16 +5544,22 @@ var MatchingActivityMaterialContent = ({
   const [selectedValue, setSelectedValue] = useState20(null);
   const [draggedValue, setDraggedValue] = useState20(null);
   const [dropTargetKey, setDropTargetKey] = useState20(null);
-  const [draggedElement, setDraggedElement] = useState20(null);
+  const [draggedElement, setDraggedElement] = useState20(
+    null
+  );
   const [isShuffled, setIsShuffled] = useState20(false);
   const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
   const dragElementRef = useRef6(null);
-  const [mousePosition, setMousePosition] = useState20({ x: 0, y: 0 });
-  const [touchPosition, setTouchPosition] = useState20({ x: 0, y: 0 });
+  const [mousePosition, setMousePosition] = useState20({
+    x: 0,
+    y: 0
+  });
+  const [touchPosition, setTouchPosition] = useState20({
+    x: 0,
+    y: 0
+  });
   const itemsRef = useRef6(null);
-  const scrollIntervalRef = useRef6(null);
-  const SCROLL_THRESHOLD = 100;
-  const SCROLL_SPEED = 10;
+  const dropZoneRefs = useRef6({});
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5562,44 +5581,21 @@ var MatchingActivityMaterialContent = ({
   }, [materialMap, isShuffled]);
   useEffect11(() => {
     if (!showCorrectAnswer) return;
-    answer.data.find((answerData) => answerData.type === "MATCHING").answerMap = materialMap;
+    answer.data.find(
+      (answerData) => answerData.type === "MATCHING"
+    ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
   useEffect11(() => {
-    if (!draggedValue || mousePosition.y === 0) return;
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-      if (mousePosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      } else if (mousePosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
-      }
-    };
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16);
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
-      }
-    };
-  }, [draggedValue, mousePosition.y]);
-  useEffect11(() => {
-    if (!draggedValue || touchPosition.y === 0) return;
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-      if (touchPosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      } else if (touchPosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
-      }
-    };
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16);
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
       }
-    };
-  }, [draggedValue, touchPosition.y]);
+    }
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5828,6 +5824,7 @@ var MatchingActivityMaterialContent = ({
         /* @__PURE__ */ jsx32("div", { className: "flex-1", children: /* @__PURE__ */ jsx32(
           "div",
           {
+            ref: (el) => dropZoneRefs.current[answerMapKey] = el,
             "data-matching-drop-zone": answerMapKey,
             onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
             onMouseLeave: () => setDropTargetKey(null),

package/package.json

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

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

@@ -33,6 +33,7 @@ const GroupingActivityMaterialContent = ({
     y: 0,
   });
   const ref = useRef<HTMLDivElement>(null);
+  const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
 
   useEffect(() => {
     const shuffleArray = (array: any) => {
@@ -63,6 +64,19 @@ const GroupingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
 
+  // Auto-scroll to center the drop zone when hovering
+  useEffect(() => {
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      }
+    }
+  }, [dropTargetKey]);
+
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "GROUPING"
@@ -369,152 +383,151 @@ const GroupingActivityMaterialContent = ({
           <DividerLine />
         </>
       ) : null}
-      <div className="overflow-y-auto max-h-[500px]">
-        {Object.keys(answerMap).map((answerMapKey, index) => (
-          <div key={index} className="flex flex-row w-full">
-            <div className="w-1/3">
-              <div
-                className={`border-catchup-blue ${
-                  contentMap.type === "TEXT"
-                    ? "h-catchup-activity-text-outer-box-item"
-                    : "h-catchup-activity-media-outer-box-item"
-                } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`}
-              >
-                <div className="flex flex-col items-center justify-center transition-all duration-300 px-4 text-center">
-                  <p className="text-lg whitespace-pre-wrap">
-                    {constructInputWithSpecialExpressionList(answerMapKey).map(
-                      (inputPart, index) => (
-                        <span
-                          key={index}
-                          className={`${inputPart.isBold ? "font-bold" : ""} ${
-                            inputPart.isUnderline ? "underline" : ""
-                          }`}
-                        >
-                          {inputPart.isEquation ? (
-                            <span className="text-2xl">
-                              <InlineMath math={inputPart.value} />
-                            </span>
-                          ) : (
-                            inputPart.value
-                          )}
-                        </span>
-                      )
-                    )}
-                  </p>
-                </div>
+      {Object.keys(answerMap).map((answerMapKey, index) => (
+        <div key={index} className="flex flex-row w-full">
+          <div className="w-1/3">
+            <div
+              className={`border-catchup-blue ${
+                contentMap.type === "TEXT"
+                  ? "h-catchup-activity-text-outer-box-item"
+                  : "h-catchup-activity-media-outer-box-item"
+              } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`}
+            >
+              <div className="flex flex-col items-center justify-center transition-all duration-300 px-4 text-center">
+                <p className="text-lg whitespace-pre-wrap">
+                  {constructInputWithSpecialExpressionList(answerMapKey).map(
+                    (inputPart, index) => (
+                      <span
+                        key={index}
+                        className={`${inputPart.isBold ? "font-bold" : ""} ${
+                          inputPart.isUnderline ? "underline" : ""
+                        }`}
+                      >
+                        {inputPart.isEquation ? (
+                          <span className="text-2xl">
+                            <InlineMath math={inputPart.value} />
+                          </span>
+                        ) : (
+                          inputPart.value
+                        )}
+                      </span>
+                    )
+                  )}
+                </p>
               </div>
             </div>
-            <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
-            <div className="flex-1 min-w-0" ref={ref}>
-              <div className="h-full py-3">
-                <div
-                  data-grouping-drop-zone={answerMapKey}
-                  onMouseEnter={() =>
-                    draggedValue && setDropTargetKey(answerMapKey)
-                  }
-                  onMouseLeave={() => setDropTargetKey(null)}
-                  onClick={() => handleDropZoneClick(answerMapKey)}
-                  className={`${
-                    dropTargetKey === answerMapKey
-                      ? "bg-catchup-light-blue ring-2 ring-blue-400"
-                      : ""
-                  } flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1 transition-all duration-200`}
-                >
-                  <div className="h-full w-full overflow-x-auto">
-                    <div className="flex flex-row items-center gap-2 w-max h-full">
-                      {answerMap[answerMapKey].map(
-                        (answerMapValue: string, answerMapIndex: number) => {
-                          const learnerAnswerState = checkAnswerState(
-                            materialMap[answerMapKey],
-                            answerMapValue
-                          );
-                          return (
-                            <div key={answerMapIndex} className="p-1">
+          </div>
+          <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
+          <div className="flex-1 min-w-0" ref={ref}>
+            <div className="h-full py-3">
+              <div
+                ref={(el) => (dropZoneRefs.current[answerMapKey] = el)}
+                data-grouping-drop-zone={answerMapKey}
+                onMouseEnter={() =>
+                  draggedValue && setDropTargetKey(answerMapKey)
+                }
+                onMouseLeave={() => setDropTargetKey(null)}
+                onClick={() => handleDropZoneClick(answerMapKey)}
+                className={`${
+                  dropTargetKey === answerMapKey
+                    ? "bg-catchup-light-blue ring-2 ring-blue-400"
+                    : ""
+                } flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1 transition-all duration-200`}
+              >
+                <div className="h-full w-full overflow-x-auto">
+                  <div className="flex flex-row items-center gap-2 w-max h-full">
+                    {answerMap[answerMapKey].map(
+                      (answerMapValue: string, answerMapIndex: number) => {
+                        const learnerAnswerState = checkAnswerState(
+                          materialMap[answerMapKey],
+                          answerMapValue
+                        );
+                        return (
+                          <div key={answerMapIndex} className="p-1">
+                            <div
+                              className={`${
+                                contentMap.type === "TEXT"
+                                  ? "h-catchup-activity-text-box-item"
+                                  : "h-catchup-activity-media-box-item"
+                              }`}
+                            >
                               <div
                                 className={`${
-                                  contentMap.type === "TEXT"
-                                    ? "h-catchup-activity-text-box-item"
-                                    : "h-catchup-activity-media-box-item"
-                                }`}
+                                  learnerAnswerState === "EMPTY"
+                                    ? "border-catchup-lighter-gray"
+                                    : learnerAnswerState === "CORRECT"
+                                    ? "border-catchup-green"
+                                    : learnerAnswerState === "INCORRECT"
+                                    ? "border-catchup-red"
+                                    : "border-catchup-blue"
+                                } border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  if (checkCanAnswerQuestion()) {
+                                    onChange(
+                                      answer,
+                                      answerMapKey,
+                                      null,
+                                      answerMapIndex
+                                    );
+                                    setSelectedValue(null);
+                                  }
+                                }}
                               >
-                                <div
-                                  className={`${
-                                    learnerAnswerState === "EMPTY"
-                                      ? "border-catchup-lighter-gray"
-                                      : learnerAnswerState === "CORRECT"
-                                      ? "border-catchup-green"
-                                      : learnerAnswerState === "INCORRECT"
-                                      ? "border-catchup-red"
-                                      : "border-catchup-blue"
-                                  } border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`}
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    if (checkCanAnswerQuestion()) {
-                                      onChange(
-                                        answer,
-                                        answerMapKey,
-                                        null,
-                                        answerMapIndex
-                                      );
-                                      setSelectedValue(null);
-                                    }
-                                  }}
-                                >
-                                  {contentMap.type === "TEXT" ? (
-                                    <div className="flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto">
-                                      <div className="m-2">
-                                        <p className="text-xl text-center whitespace-pre-wrap">
-                                          {constructInputWithSpecialExpressionList(
-                                            answerMapValue
-                                          ).map((inputPart, index) => (
-                                            <span
-                                              key={index}
-                                              className={`${
-                                                inputPart.isBold
-                                                  ? "font-bold"
-                                                  : ""
-                                              } ${
-                                                inputPart.isUnderline
-                                                  ? "underline"
-                                                  : ""
-                                              }`}
-                                            >
-                                              {inputPart.isEquation ? (
-                                                <span className="text-2xl">
-                                                  <InlineMath
-                                                    math={inputPart.value}
-                                                  />
-                                                </span>
-                                              ) : (
-                                                inputPart.value
-                                              )}
-                                            </span>
-                                          ))}
-                                        </p>
-                                      </div>
+                                {contentMap.type === "TEXT" ? (
+                                  <div className="flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto">
+                                    <div className="m-2">
+                                      <p className="text-xl text-center whitespace-pre-wrap">
+                                        {constructInputWithSpecialExpressionList(
+                                          answerMapValue
+                                        ).map((inputPart, index) => (
+                                          <span
+                                            key={index}
+                                            className={`${
+                                              inputPart.isBold
+                                                ? "font-bold"
+                                                : ""
+                                            } ${
+                                              inputPart.isUnderline
+                                                ? "underline"
+                                                : ""
+                                            }`}
+                                          >
+                                            {inputPart.isEquation ? (
+                                              <span className="text-2xl">
+                                                <InlineMath
+                                                  math={inputPart.value}
+                                                />
+                                              </span>
+                                            ) : (
+                                              inputPart.value
+                                            )}
+                                          </span>
+                                        ))}
+                                      </p>
                                     </div>
-                                  ) : (
-                                    <ShowMaterialMediaByContentType
-                                      key={`${uniqueValue}-${answerMapIndex}`}
-                                      contentType={contentMap.type}
-                                      src={answerMapValue}
-                                      canFullScreen={false}
-                                    />
-                                  )}
-                                </div>
+                                  </div>
+                                ) : (
+                                  <ShowMaterialMediaByContentType
+                                    key={`${uniqueValue}-${answerMapIndex}`}
+                                    contentType={contentMap.type}
+                                    src={answerMapValue}
+                                    canFullScreen={false}
+                                  />
+                                )}
                               </div>
                             </div>
-                          );
-                        }
-                      )}
-                    </div>
+                          </div>
+                        );
+                      }
+                    )}
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        ))}
-      </div>
+        </div>
+      ))}
     </div>
   );
 };

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

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
 import { InlineMath } from "react-katex";
 import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
+import { IMatchingActivityMaterialProps } from "../../../properties/ActivityProperties";
 import DividerLine from "../../dividers/DividerLine";
 
 const MatchingActivityMaterialContent = ({
@@ -13,25 +14,29 @@ const MatchingActivityMaterialContent = ({
   onChange,
   isPreview,
   showCorrectAnswer,
-}) => {
-  const [selectedValue, setSelectedValue] = useState(null);
-  const [draggedValue, setDraggedValue] = useState(null);
-  const [dropTargetKey, setDropTargetKey] = useState(null);
-  const [draggedElement, setDraggedElement] = useState(null);
+}: IMatchingActivityMaterialProps) => {
+  const [selectedValue, setSelectedValue] = useState<string | null>(null);
+  const [draggedValue, setDraggedValue] = useState<string | null>(null);
+  const [dropTargetKey, setDropTargetKey] = useState<string | null>(null);
+  const [draggedElement, setDraggedElement] = useState<HTMLElement | null>(
+    null
+  );
   const [isShuffled, setIsShuffled] = useState(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState([]);
-  const dragElementRef = useRef(null);
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });
-  const itemsRef = useRef(null);
-  const scrollIntervalRef = useRef(null);
-
-  // Auto-scroll configuration
-  const SCROLL_THRESHOLD = 100; // Distance from edge to trigger scroll
-  const SCROLL_SPEED = 10; // Pixels to scroll per interval
+  const [shuffledMaterialList, setShuffledMaterialList] = useState<any[]>([]);
+  const dragElementRef = useRef<HTMLDivElement>(null);
+  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+  const [touchPosition, setTouchPosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+  const itemsRef = useRef<HTMLDivElement>(null);
+  const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
 
   useEffect(() => {
-    const shuffleArray = (array) => {
+    const shuffleArray = (array: any) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
         for (let i = copyArray.length - 1; i > 0; i--) {
@@ -43,7 +48,7 @@ const MatchingActivityMaterialContent = ({
       }
       return array;
     };
-    const materialList = [];
+    const materialList: any = [];
     Object.keys(materialMap).forEach((materialKey) => {
       materialList.push(materialMap[materialKey]);
     });
@@ -52,84 +57,45 @@ const MatchingActivityMaterialContent = ({
 
   useEffect(() => {
     if (!showCorrectAnswer) return;
-    answer.data.find((answerData) => answerData.type === "MATCHING").answerMap =
-      materialMap;
+    answer.data.find(
+      (answerData: any) => answerData.type === "MATCHING"
+    ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
 
-  // Auto-scroll effect for mouse drag
-  useEffect(() => {
-    if (!draggedValue || mousePosition.y === 0) return;
-
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-
-      // Check if near top edge
-      if (mousePosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      }
-      // Check if near bottom edge
-      else if (mousePosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
-      }
-    };
-
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16); // ~60fps
-
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
-      }
-    };
-  }, [draggedValue, mousePosition.y]);
-
-  // Auto-scroll effect for touch drag
+  // Auto-scroll to center the drop zone when hovering
   useEffect(() => {
-    if (!draggedValue || touchPosition.y === 0) return;
-
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-
-      // Check if near top edge
-      if (touchPosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      }
-      // Check if near bottom edge
-      else if (touchPosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
       }
-    };
-
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16); // ~60fps
-
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
-      }
-    };
-  }, [draggedValue, touchPosition.y]);
+    }
+  }, [dropTargetKey]);
 
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
-      (answerData) => answerData.type === "MATCHING"
+      (answerData: any) => answerData.type === "MATCHING"
     );
     return answer.data[foundIndex].answerMap;
   };
 
-  const retrieveFilteredMaterialList = (answerMap) => {
-    const selectedValueList = [];
+  const retrieveFilteredMaterialList = (answerMap: any) => {
+    const selectedValueList: any = [];
     Object.keys(answerMap).forEach((key) => {
       selectedValueList.push(answerMap[key]);
     });
 
     return shuffledMaterialList.filter(
       (material) =>
-        selectedValueList.findIndex((value) => material === value) === -1
+        selectedValueList.findIndex((value: string) => material === value) ===
+        -1
     );
   };
 
-  const checkAnswerState = (correctAnswer, learnerAnswer) => {
+  const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
     if (!isPreview) return null;
     if (!learnerAnswer) return "EMPTY";
     if (correctAnswer === learnerAnswer) {
@@ -139,7 +105,10 @@ const MatchingActivityMaterialContent = ({
   };
 
   // Mouse drag handlers
-  const handleMouseDown = (e, materialValue) => {
+  const handleMouseDown = (
+    e: React.MouseEvent,
+    materialValue: string
+  ): void => {
     if (!checkCanAnswerQuestion()) return;
     e.preventDefault();
     setDraggedValue(materialValue);
@@ -147,7 +116,7 @@ const MatchingActivityMaterialContent = ({
     setMousePosition({ x: e.clientX, y: e.clientY });
   };
 
-  const handleMouseMove = (e) => {
+  const handleMouseMove = (e: React.MouseEvent): void => {
     if (!draggedValue) return;
 
     setMousePosition({ x: e.clientX, y: e.clientY });
@@ -164,7 +133,7 @@ const MatchingActivityMaterialContent = ({
     }
   };
 
-  const handleMouseUp = () => {
+  const handleMouseUp = (): void => {
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -174,7 +143,11 @@ const MatchingActivityMaterialContent = ({
   };
 
   // Touch drag handlers
-  const handleTouchStart = (e, materialValue, element) => {
+  const handleTouchStart = (
+    e: React.TouchEvent,
+    materialValue: string,
+    element: HTMLElement
+  ): void => {
     if (!checkCanAnswerQuestion()) return;
     const touch = e.touches[0];
     setDraggedValue(materialValue);
@@ -183,7 +156,7 @@ const MatchingActivityMaterialContent = ({
     setSelectedValue(null);
   };
 
-  const handleTouchMove = (e) => {
+  const handleTouchMove = (e: React.TouchEvent): void => {
     if (!draggedValue) return;
 
     const touch = e.touches[0];
@@ -204,7 +177,7 @@ const MatchingActivityMaterialContent = ({
     }
   };
 
-  const handleTouchEnd = () => {
+  const handleTouchEnd = (): void => {
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -215,13 +188,13 @@ const MatchingActivityMaterialContent = ({
   };
 
   // Click/tap to select (for easier mobile interaction)
-  const handleSelectItem = (materialValue) => {
+  const handleSelectItem = (materialValue: string): void => {
     if (!checkCanAnswerQuestion()) return;
     setSelectedValue(materialValue);
     setDraggedValue(null);
   };
 
-  const handleDropZoneClick = (answerMapKey) => {
+  const handleDropZoneClick = (answerMapKey: string): void => {
     if (selectedValue !== null) {
       onChange(answer, answerMapKey, selectedValue);
       setSelectedValue(null);
@@ -457,6 +430,7 @@ const MatchingActivityMaterialContent = ({
             <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
             <div className="flex-1">
               <div
+                ref={(el) => (dropZoneRefs.current[answerMapKey] = el)}
                 data-matching-drop-zone={answerMapKey}
                 onMouseEnter={() =>
                   draggedValue && setDropTargetKey(answerMapKey)