catchup-library-web 1.20.36 → 1.21.1

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,24 +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 [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--) {
@@ -43,7 +43,7 @@ const MatchingActivityMaterialContent = ({
       }
       return array;
     };
-    const materialList: any = [];
+    const materialList = [];
     Object.keys(materialMap).forEach((materialKey) => {
       materialList.push(materialMap[materialKey]);
     });
@@ -52,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) {
@@ -87,30 +139,42 @@ const MatchingActivityMaterialContent = ({
   };
 
   // Mouse drag handlers
-  const handleMouseDown = (
-    e: React.MouseEvent,
-    materialValue: string
-  ): void => {
+  const handleMouseDown = (e, materialValue) => {
     if (!checkCanAnswerQuestion()) return;
     e.preventDefault();
     setDraggedValue(materialValue);
     setSelectedValue(null);
+    setMousePosition({ x: e.clientX, y: e.clientY });
   };
 
-  const handleMouseUp = (): void => {
+  const handleMouseMove = (e) => {
+    if (!draggedValue) return;
+
+    setMousePosition({ x: e.clientX, y: e.clientY });
+
+    // Find the element under the mouse point
+    const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+    const dropZone = elementUnder?.closest("[data-matching-drop-zone]");
+
+    if (dropZone) {
+      const dropKey = dropZone.getAttribute("data-matching-drop-zone");
+      setDropTargetKey(dropKey);
+    } else {
+      setDropTargetKey(null);
+    }
+  };
+
+  const handleMouseUp = () => {
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
     setDraggedValue(null);
     setDropTargetKey(null);
+    setMousePosition({ x: 0, y: 0 });
   };
 
   // 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);
@@ -119,7 +183,7 @@ const MatchingActivityMaterialContent = ({
     setSelectedValue(null);
   };
 
-  const handleTouchMove = (e: React.TouchEvent): void => {
+  const handleTouchMove = (e) => {
     if (!draggedValue) return;
 
     const touch = e.touches[0];
@@ -140,23 +204,24 @@ const MatchingActivityMaterialContent = ({
     }
   };
 
-  const handleTouchEnd = (): void => {
+  const handleTouchEnd = () => {
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
     setDraggedValue(null);
     setDropTargetKey(null);
     setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
   };
 
   // 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);
@@ -167,7 +232,55 @@ const MatchingActivityMaterialContent = ({
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
 
   return (
-    <div onMouseUp={handleMouseUp}>
+    <div onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
+      {/* Floating drag preview for mouse */}
+      {draggedValue && mousePosition.x > 0 && (
+        <div
+          className="fixed pointer-events-none z-50 opacity-80"
+          style={{
+            left: `${mousePosition.x}px`,
+            top: `${mousePosition.y}px`,
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          {contentMap.type === "TEXT" ? (
+            <div className="border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg">
+              <div className="flex flex-col items-center justify-center m-2 min-w-[200px] px-4">
+                <p className="text-lg whitespace-pre-wrap">
+                  {constructInputWithSpecialExpressionList(draggedValue).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>
+              </div>
+            </div>
+          ) : (
+            <div className="border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg">
+              <ShowMaterialMediaByContentType
+                key={`${uniqueValue}-drag-mouse`}
+                contentType={contentMap.type}
+                src={draggedValue}
+                canFullScreen={false}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Floating drag preview for touch */}
       {draggedValue && touchPosition.x > 0 && (
         <div
@@ -206,7 +319,7 @@ const MatchingActivityMaterialContent = ({
           ) : (
             <div className="border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg">
               <ShowMaterialMediaByContentType
-                key={`${uniqueValue}-drag`}
+                key={`${uniqueValue}-drag-touch`}
                 contentType={contentMap.type}
                 src={draggedValue}
                 canFullScreen={false}
@@ -293,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" : ""} ${
@@ -337,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>
   );
 };

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

@@ -22,6 +22,10 @@ const OrderingActivityMaterialContent = ({
     null
   );
   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,
@@ -90,6 +94,24 @@ const OrderingActivityMaterialContent = ({
     e.preventDefault();
     setDraggedKey(materialKey);
     setSelectedKey(null);
+    setMousePosition({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent): void => {
+    if (!draggedKey) return;
+
+    setMousePosition({ x: e.clientX, y: e.clientY });
+
+    // Find the element under the mouse point
+    const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+    const dropZone = elementUnder?.closest("[data-ordering-drop-zone]");
+
+    if (dropZone) {
+      const dropKey = dropZone.getAttribute("data-ordering-drop-zone");
+      setDropTargetKey(dropKey);
+    } else {
+      setDropTargetKey(null);
+    }
   };
 
   const handleMouseUp = (): void => {
@@ -102,6 +124,7 @@ const OrderingActivityMaterialContent = ({
     }
     setDraggedKey(null);
     setDropTargetKey(null);
+    setMousePosition({ x: 0, y: 0 });
   };
 
   // Touch drag handlers
@@ -150,6 +173,7 @@ const OrderingActivityMaterialContent = ({
     setDraggedKey(null);
     setDropTargetKey(null);
     setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
   };
 
   // Click/tap to select (for easier mobile interaction)
@@ -170,7 +194,57 @@ const OrderingActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
 
   return (
-    <div className="flex flex-row flex-wrap" onMouseUp={handleMouseUp}>
+    <div
+      className="flex flex-row flex-wrap"
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+    >
+      {/* Floating drag preview for mouse */}
+      {draggedKey && mousePosition.x > 0 && (
+        <div
+          className="fixed pointer-events-none z-50 opacity-80"
+          style={{
+            left: `${mousePosition.x}px`,
+            top: `${mousePosition.y}px`,
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          {contentMap.type === "TEXT" ? (
+            <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg">
+              <p className="text-xl whitespace-pre-wrap">
+                {constructInputWithSpecialExpressionList(
+                  materialMap[answerMap[draggedKey]]
+                ).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>
+            </div>
+          ) : (
+            <div className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg">
+              <ShowMaterialMediaByContentType
+                key={`${uniqueValue}-drag-mouse`}
+                contentType={contentMap.type}
+                src={materialMap[answerMap[draggedKey]]}
+                canFullScreen={false}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Floating drag preview for touch */}
       {draggedKey && touchPosition.x > 0 && (
         <div
@@ -207,7 +281,7 @@ const OrderingActivityMaterialContent = ({
           ) : (
             <div className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg">
               <ShowMaterialMediaByContentType
-                key={`${uniqueValue}-drag`}
+                key={`${uniqueValue}-drag-touch`}
                 contentType={contentMap.type}
                 src={materialMap[answerMap[draggedKey]]}
                 canFullScreen={false}