catchup-library-web 1.21.0 → 1.21.1

package/dist/index.js

@@ -5080,7 +5080,7 @@ var FillInTheBlanksActivityMaterialContent = ({
           }
         ),
         /* @__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)(
+          (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             ShowMaterialMediaByContentType_default,
             {
               contentType: contentMap.type,
@@ -5088,7 +5088,7 @@ var FillInTheBlanksActivityMaterialContent = ({
               canFullScreen: true
             },
             `${uniqueValue}-${index}`
-          ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "div",
             {
               ref: draggedOption === option ? dragElementRef : null,
@@ -5747,21 +5747,16 @@ 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;
   (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5783,10 +5778,44 @@ 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);
+      }
+    };
+  }, [draggedValue, touchPosition.y]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5989,7 +6018,7 @@ var MatchingActivityMaterialContent = ({
       ),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
+    Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
@@ -5999,16 +6028,16 @@ var MatchingActivityMaterialContent = ({
           "div",
           {
             className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-              answerMapKey
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-              "span",
-              {
-                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
-              },
-              index2
-            )) }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+              (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                "span",
+                {
+                  className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                  children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                },
+                index2
+              )
+            ) }) })
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
@@ -6054,7 +6083,7 @@ var MatchingActivityMaterialContent = ({
           }
         ) })
       ] }, index);
-    }) })
+    })
   ] });
 };
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;

package/dist/index.mjs

@@ -4864,7 +4864,7 @@ var FillInTheBlanksActivityMaterialContent = ({
           }
         ),
         /* @__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(
+          (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ jsx28(
             ShowMaterialMediaByContentType_default,
             {
               contentType: contentMap.type,
@@ -4872,7 +4872,7 @@ var FillInTheBlanksActivityMaterialContent = ({
               canFullScreen: true
             },
             `${uniqueValue}-${index}`
-          ) }, index) : /* @__PURE__ */ jsx28(
+          ) : /* @__PURE__ */ jsx28(
             "div",
             {
               ref: draggedOption === option ? dragElementRef : null,
@@ -5531,21 +5531,16 @@ 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;
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5567,10 +5562,44 @@ 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);
+      }
+    };
+  }, [draggedValue, touchPosition.y]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5773,7 +5802,7 @@ var MatchingActivityMaterialContent = ({
       ),
       /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx32(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ jsx32("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
+    Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
@@ -5783,16 +5812,16 @@ var MatchingActivityMaterialContent = ({
           "div",
           {
             className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-            children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-              answerMapKey
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
-              "span",
-              {
-                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-xl", children: /* @__PURE__ */ jsx32(InlineMath6, { math: inputPart.value }) }) : inputPart.value
-              },
-              index2
-            )) }) })
+            children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+              (inputPart, index2) => /* @__PURE__ */ jsx32(
+                "span",
+                {
+                  className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                  children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-xl", children: /* @__PURE__ */ jsx32(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                },
+                index2
+              )
+            ) }) })
           }
         ) }),
         /* @__PURE__ */ jsx32("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
@@ -5838,7 +5867,7 @@ var MatchingActivityMaterialContent = ({
           }
         ) })
       ] }, index);
-    }) })
+    })
   ] });
 };
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;

package/package.json

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

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

@@ -261,14 +261,12 @@ const FillInTheBlanksActivityMaterialContent = ({
       <div className="w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2">
         {shuffleOptionList.map((option, index) =>
           checkAnswerProvided(answerMap, option) ? (
-            <div className="opacity-30" key={index}>
-              <ShowMaterialMediaByContentType
-                key={`${uniqueValue}-${index}`}
-                contentType={contentMap.type}
-                src={option}
-                canFullScreen={true}
-              />
-            </div>
+            <ShowMaterialMediaByContentType
+              key={`${uniqueValue}-${index}`}
+              contentType={contentMap.type}
+              src={option}
+              canFullScreen={true}
+            />
           ) : (
             <div
               key={index}

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

@@ -2,7 +2,6 @@ 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 = ({
@@ -14,28 +13,25 @@ const MatchingActivityMaterialContent = ({
   onChange,
   isPreview,
   showCorrectAnswer,
-}: 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 [selectedValue, setSelectedValue] = useState(null);
+  const [draggedValue, setDraggedValue] = useState(null);
+  const [dropTargetKey, setDropTargetKey] = useState(null);
+  const [draggedElement, setDraggedElement] = useState(null);
   const [isShuffled, setIsShuffled] = useState(false);
-  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 [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
 
   useEffect(() => {
-    const shuffleArray = (array: any) => {
+    const shuffleArray = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
         for (let i = copyArray.length - 1; i > 0; i--) {
@@ -47,7 +43,7 @@ const MatchingActivityMaterialContent = ({
       }
       return array;
     };
-    const materialList: any = [];
+    const materialList = [];
     Object.keys(materialMap).forEach((materialKey) => {
       materialList.push(materialMap[materialKey]);
     });
@@ -56,32 +52,84 @@ const MatchingActivityMaterialContent = ({
 
   useEffect(() => {
     if (!showCorrectAnswer) return;
-    answer.data.find(
-      (answerData: any) => answerData.type === "MATCHING"
-    ).answerMap = materialMap;
+    answer.data.find((answerData) => 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
+  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);
+      }
+    };
+
+    scrollIntervalRef.current = setInterval(handleAutoScroll, 16); // ~60fps
+
+    return () => {
+      if (scrollIntervalRef.current) {
+        clearInterval(scrollIntervalRef.current);
+      }
+    };
+  }, [draggedValue, touchPosition.y]);
+
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
-      (answerData: any) => answerData.type === "MATCHING"
+      (answerData) => answerData.type === "MATCHING"
     );
     return answer.data[foundIndex].answerMap;
   };
 
-  const retrieveFilteredMaterialList = (answerMap: any) => {
-    const selectedValueList: any = [];
+  const retrieveFilteredMaterialList = (answerMap) => {
+    const selectedValueList = [];
     Object.keys(answerMap).forEach((key) => {
       selectedValueList.push(answerMap[key]);
     });
 
     return shuffledMaterialList.filter(
       (material) =>
-        selectedValueList.findIndex((value: string) => material === value) ===
-        -1
+        selectedValueList.findIndex((value) => material === value) === -1
     );
   };
 
-  const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
+  const checkAnswerState = (correctAnswer, learnerAnswer) => {
     if (!isPreview) return null;
     if (!learnerAnswer) return "EMPTY";
     if (correctAnswer === learnerAnswer) {
@@ -91,10 +139,7 @@ const MatchingActivityMaterialContent = ({
   };
 
   // Mouse drag handlers
-  const handleMouseDown = (
-    e: React.MouseEvent,
-    materialValue: string
-  ): void => {
+  const handleMouseDown = (e, materialValue) => {
     if (!checkCanAnswerQuestion()) return;
     e.preventDefault();
     setDraggedValue(materialValue);
@@ -102,7 +147,7 @@ const MatchingActivityMaterialContent = ({
     setMousePosition({ x: e.clientX, y: e.clientY });
   };
 
-  const handleMouseMove = (e: React.MouseEvent): void => {
+  const handleMouseMove = (e) => {
     if (!draggedValue) return;
 
     setMousePosition({ x: e.clientX, y: e.clientY });
@@ -119,7 +164,7 @@ const MatchingActivityMaterialContent = ({
     }
   };
 
-  const handleMouseUp = (): void => {
+  const handleMouseUp = () => {
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -129,11 +174,7 @@ const MatchingActivityMaterialContent = ({
   };
 
   // Touch drag handlers
-  const handleTouchStart = (
-    e: React.TouchEvent,
-    materialValue: string,
-    element: HTMLElement
-  ): void => {
+  const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
     const touch = e.touches[0];
     setDraggedValue(materialValue);
@@ -142,7 +183,7 @@ const MatchingActivityMaterialContent = ({
     setSelectedValue(null);
   };
 
-  const handleTouchMove = (e: React.TouchEvent): void => {
+  const handleTouchMove = (e) => {
     if (!draggedValue) return;
 
     const touch = e.touches[0];
@@ -163,7 +204,7 @@ const MatchingActivityMaterialContent = ({
     }
   };
 
-  const handleTouchEnd = (): void => {
+  const handleTouchEnd = () => {
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -174,13 +215,13 @@ const MatchingActivityMaterialContent = ({
   };
 
   // Click/tap to select (for easier mobile interaction)
-  const handleSelectItem = (materialValue: string): void => {
+  const handleSelectItem = (materialValue) => {
     if (!checkCanAnswerQuestion()) return;
     setSelectedValue(materialValue);
     setDraggedValue(null);
   };
 
-  const handleDropZoneClick = (answerMapKey: string): void => {
+  const handleDropZoneClick = (answerMapKey) => {
     if (selectedValue !== null) {
       onChange(answer, answerMapKey, selectedValue);
       setSelectedValue(null);
@@ -365,36 +406,34 @@ const MatchingActivityMaterialContent = ({
         </>
       ) : null}
 
-      <div className="overflow-y-auto max-h-[500px]">
-        {Object.keys(answerMap).map((answerMapKey, index) => {
-          const learnerAnswerState = checkAnswerState(
-            materialMap[answerMapKey],
-            answerMap[answerMapKey]
-          );
+      {Object.keys(answerMap).map((answerMapKey, index) => {
+        const learnerAnswerState = checkAnswerState(
+          materialMap[answerMapKey],
+          answerMap[answerMapKey]
+        );
 
-          return (
-            <div key={index} className="flex flex-row w-full">
-              <div className="w-1/3">
-                <div
-                  className={`${
-                    contentMap.type === "TEXT"
-                      ? "h-catchup-activity-text-box-item"
-                      : "h-catchup-activity-media-box-item"
-                  } flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${
-                    learnerAnswerState === "EMPTY"
-                      ? "border-catchup-blue"
-                      : learnerAnswerState === "CORRECT"
-                      ? "border-catchup-green"
-                      : learnerAnswerState === "INCORRECT"
-                      ? "border-catchup-red"
-                      : "border-catchup-blue"
-                  }`}
-                >
-                  <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) => (
+        return (
+          <div key={index} className="flex flex-row w-full">
+            <div className="w-1/3">
+              <div
+                className={`${
+                  contentMap.type === "TEXT"
+                    ? "h-catchup-activity-text-box-item"
+                    : "h-catchup-activity-media-box-item"
+                } flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${
+                  learnerAnswerState === "EMPTY"
+                    ? "border-catchup-blue"
+                    : learnerAnswerState === "CORRECT"
+                    ? "border-catchup-green"
+                    : learnerAnswerState === "INCORRECT"
+                    ? "border-catchup-red"
+                    : "border-catchup-blue"
+                }`}
+              >
+                <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" : ""} ${
@@ -409,86 +448,86 @@ const MatchingActivityMaterialContent = ({
                             inputPart.value
                           )}
                         </span>
-                      ))}
-                    </p>
-                  </div>
+                      )
+                    )}
+                  </p>
                 </div>
               </div>
-              <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
-              <div className="flex-1">
+            </div>
+            <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
+            <div className="flex-1">
+              <div
+                data-matching-drop-zone={answerMapKey}
+                onMouseEnter={() =>
+                  draggedValue && setDropTargetKey(answerMapKey)
+                }
+                onMouseLeave={() => setDropTargetKey(null)}
+                onClick={() => handleDropZoneClick(answerMapKey)}
+                className={`${
+                  dropTargetKey === answerMapKey
+                    ? "bg-catchup-light-blue ring-2 ring-blue-400"
+                    : ""
+                } ${
+                  contentMap.type === "TEXT"
+                    ? "h-catchup-activity-text-box-item"
+                    : "h-catchup-activity-media-box-item"
+                } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300 my-3 ${
+                  learnerAnswerState === "EMPTY"
+                    ? "border-catchup-blue"
+                    : learnerAnswerState === "CORRECT"
+                    ? "border-catchup-green"
+                    : learnerAnswerState === "INCORRECT"
+                    ? "border-catchup-red"
+                    : "border-catchup-blue"
+                }`}
+              >
                 <div
-                  data-matching-drop-zone={answerMapKey}
-                  onMouseEnter={() =>
-                    draggedValue && setDropTargetKey(answerMapKey)
-                  }
-                  onMouseLeave={() => setDropTargetKey(null)}
-                  onClick={() => handleDropZoneClick(answerMapKey)}
-                  className={`${
-                    dropTargetKey === answerMapKey
-                      ? "bg-catchup-light-blue ring-2 ring-blue-400"
-                      : ""
-                  } ${
-                    contentMap.type === "TEXT"
-                      ? "h-catchup-activity-text-box-item"
-                      : "h-catchup-activity-media-box-item"
-                  } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300 my-3 ${
-                    learnerAnswerState === "EMPTY"
-                      ? "border-catchup-blue"
-                      : learnerAnswerState === "CORRECT"
-                      ? "border-catchup-green"
-                      : learnerAnswerState === "INCORRECT"
-                      ? "border-catchup-red"
-                      : "border-catchup-blue"
-                  }`}
+                  className="h-full flex-1 flex flex-row items-center justify-center px-4"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (checkCanAnswerQuestion() && answerMap[answerMapKey]) {
+                      onChange(answer, answerMapKey, null);
+                      setSelectedValue(null);
+                    }
+                  }}
                 >
-                  <div
-                    className="h-full flex-1 flex flex-row items-center justify-center px-4"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      if (checkCanAnswerQuestion() && answerMap[answerMapKey]) {
-                        onChange(answer, answerMapKey, null);
-                        setSelectedValue(null);
-                      }
-                    }}
-                  >
-                    {answerMap[answerMapKey] ? (
-                      contentMap.type === "TEXT" ? (
-                        <p className="text-lg whitespace-pre-wrap">
-                          {constructInputWithSpecialExpressionList(
-                            answerMap[answerMapKey]
-                          ).map((inputPart, index) => (
-                            <span
-                              key={index}
-                              className={`${
-                                inputPart.isBold ? "font-bold" : ""
-                              } ${inputPart.isUnderline ? "underline" : ""}`}
-                            >
-                              {inputPart.isEquation ? (
-                                <span className="text-xl">
-                                  <InlineMath math={inputPart.value} />
-                                </span>
-                              ) : (
-                                inputPart.value
-                              )}
-                            </span>
-                          ))}
-                        </p>
-                      ) : (
-                        <ShowMaterialMediaByContentType
-                          key={`${uniqueValue}-${index}`}
-                          contentType={contentMap.type}
-                          src={answerMap[answerMapKey]}
-                          canFullScreen={false}
-                        />
-                      )
-                    ) : null}
-                  </div>
+                  {answerMap[answerMapKey] ? (
+                    contentMap.type === "TEXT" ? (
+                      <p className="text-lg whitespace-pre-wrap">
+                        {constructInputWithSpecialExpressionList(
+                          answerMap[answerMapKey]
+                        ).map((inputPart, index) => (
+                          <span
+                            key={index}
+                            className={`${
+                              inputPart.isBold ? "font-bold" : ""
+                            } ${inputPart.isUnderline ? "underline" : ""}`}
+                          >
+                            {inputPart.isEquation ? (
+                              <span className="text-xl">
+                                <InlineMath math={inputPart.value} />
+                              </span>
+                            ) : (
+                              inputPart.value
+                            )}
+                          </span>
+                        ))}
+                      </p>
+                    ) : (
+                      <ShowMaterialMediaByContentType
+                        key={`${uniqueValue}-${index}`}
+                        contentType={contentMap.type}
+                        src={answerMap[answerMapKey]}
+                        canFullScreen={false}
+                      />
+                    )
+                  ) : null}
                 </div>
               </div>
             </div>
-          );
-        })}
-      </div>
+          </div>
+        );
+      })}
     </div>
   );
 };