catchup-library-web 1.20.32 → 1.20.34

package/package.json

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

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

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