catchup-library-web 1.20.33 → 1.20.35

package/package.json

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

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

@@ -303,11 +303,7 @@ const FillInTheBlanksActivityMaterialContent = ({
                                     value={answerMap[materialKey]}
                                     showSpecialOnly={false}
                                   />
-                                ) : (
-                                  <p className="text-gray-400 italic">
-                                    {i18n.t("please_drop_here")}
-                                  </p>
-                                )}
+                                ) : null}
                               </div>
                             </div>
 

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

@@ -1,11 +1,9 @@
-import { useEffect, useState } from "react";
-import { useDrop } from "react-dnd";
+import { useEffect, useState, useRef } from "react";
 import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
 import { InlineMath } from "react-katex";
 import useScreenSize from "../../../hooks/useScreenSize";
 import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
 import { IOrderingActivityMaterialProps } from "../../../properties/ActivityProperties";
-import DraggableDroppableItem from "../../dnds/DraggableDroppableItem";
 
 const OrderingActivityMaterialContent = ({
   uniqueValue,
@@ -17,18 +15,19 @@ const OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer,
 }: IOrderingActivityMaterialProps) => {
-  const [selectedTargetKey, setSelectedTargetKey] = useState(null);
   const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const [draggedKey, setDraggedKey] = useState<string | null>(null);
+  const [dropTargetKey, setDropTargetKey] = 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,
+  });
   const { screenSize } = useScreenSize();
   const [view, setView] = useState("PC");
-  const [{ isOver, canDrop }, drop] = useDrop({
-    accept: "ORDERING",
-    drop: () => {},
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop(),
-    }),
-  });
 
   useEffect(() => {
     if (!screenSize) return;
@@ -64,27 +63,9 @@ const OrderingActivityMaterialContent = ({
     return "INCORRECT";
   };
 
-  const handleOrderingActivityItemChange = (
-    selectedKey: string,
-    materialKey: string
-  ) => {
-    if (checkCanAnswerQuestion()) {
-      if (selectedKey) {
-        onChange(answer, selectedKey, materialKey);
-        setSelectedKey(null);
-      } else {
-        setSelectedKey(materialKey);
-      }
-    }
-  };
-
   const calculateMarginTop = (index: number) => {
     if (index === 0) {
-      if (contentMap.type === "TEXT") {
-        return 0;
-      } else {
-        return 0;
-      }
+      return 0;
     } else if (index === 1) {
       if (contentMap.type === "TEXT") {
         return 65;
@@ -98,19 +79,144 @@ const OrderingActivityMaterialContent = ({
         return -130;
       }
     } else if (index % 2 === 1) {
-      if (contentMap.type === "TEXT") {
-        return 0;
-      } else {
-        return 0;
-      }
+      return 0;
     }
     return 0;
   };
 
+  // Mouse drag handlers
+  const handleMouseDown = (e: React.MouseEvent, materialKey: string): void => {
+    if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
+    setDraggedKey(materialKey);
+    setSelectedKey(null);
+  };
+
+  const handleMouseUp = (): void => {
+    if (
+      dropTargetKey !== null &&
+      draggedKey !== null &&
+      dropTargetKey !== draggedKey
+    ) {
+      onChange(answer, draggedKey, dropTargetKey);
+    }
+    setDraggedKey(null);
+    setDropTargetKey(null);
+  };
+
+  // Touch drag handlers
+  const handleTouchStart = (
+    e: React.TouchEvent,
+    materialKey: string,
+    element: HTMLElement
+  ): void => {
+    if (!checkCanAnswerQuestion()) return;
+    const touch = e.touches[0];
+    setDraggedKey(materialKey);
+    setDraggedElement(element);
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    setSelectedKey(null);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent): void => {
+    if (!draggedKey) 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-ordering-drop-zone]");
+
+    if (dropZone) {
+      const dropKey = dropZone.getAttribute("data-ordering-drop-zone");
+      setDropTargetKey(dropKey);
+    } else {
+      setDropTargetKey(null);
+    }
+  };
+
+  const handleTouchEnd = (): void => {
+    if (
+      dropTargetKey !== null &&
+      draggedKey !== null &&
+      dropTargetKey !== draggedKey
+    ) {
+      onChange(answer, draggedKey, dropTargetKey);
+    }
+    setDraggedKey(null);
+    setDropTargetKey(null);
+    setDraggedElement(null);
+  };
+
+  // Click/tap to select (for easier mobile interaction)
+  const handleSelectItem = (materialKey: string): void => {
+    if (!checkCanAnswerQuestion()) return;
+
+    if (selectedKey === null) {
+      setSelectedKey(materialKey);
+    } else if (selectedKey === materialKey) {
+      setSelectedKey(null);
+    } else {
+      onChange(answer, selectedKey, materialKey);
+      setSelectedKey(null);
+    }
+    setDraggedKey(null);
+  };
+
   const answerMap = retrieveAnswerMap();
 
   return (
-    <div className="flex flex-row flex-wrap">
+    <div className="flex flex-row flex-wrap" onMouseUp={handleMouseUp}>
+      {/* Floating drag preview for touch */}
+      {draggedKey && 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-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`}
+                contentType={contentMap.type}
+                src={materialMap[answerMap[draggedKey]]}
+                canFullScreen={false}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
       {Object.keys(answerMap).map((materialKey, index) => {
         const learnerAnswerState = checkAnswerState(
           answerMap[materialKey] + "",
@@ -141,85 +247,78 @@ const OrderingActivityMaterialContent = ({
                 </div>
               </div>
 
-              <DraggableDroppableItem
-                key={index}
-                item={{ index: materialKey }}
-                type={"ORDERING"}
-                dropRef={drop}
-                component={
-                  <div
-                    className={`${
-                      canDrop
-                        ? selectedKey !== materialKey
-                          ? selectedTargetKey === materialKey
-                            ? "bg-catchup-light-blue rounded-catchup-xlarge"
-                            : "bg-catchup-light-blue rounded-catchup-xlarge opacity-40"
-                          : ""
-                        : ""
-                    } ${
-                      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 p-3 ${
-                      learnerAnswerState === "CORRECT"
-                        ? "border-catchup-green"
-                        : learnerAnswerState === "INCORRECT"
-                        ? "border-catchup-red"
-                        : "border-catchup-blue"
-                    }`}
-                    onMouseDown={() => {
-                      if (checkCanAnswerQuestion()) {
-                        setSelectedKey(materialKey);
-                      }
-                    }}
-                    onTouchEnd={() => {
-                      if (checkCanAnswerQuestion()) {
-                        setSelectedKey(materialKey);
-                      }
-                    }}
-                  >
-                    {contentMap.type === "TEXT" ? (
-                      <p className="text-xl whitespace-pre-wrap">
-                        {constructInputWithSpecialExpressionList(
-                          materialMap[answerMap[materialKey]]
-                        ).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={materialMap[answerMap[materialKey]]}
-                        canFullScreen={true}
-                      />
-                    )}
-                  </div>
+              <div
+                ref={draggedKey === materialKey ? dragElementRef : null}
+                data-ordering-drop-zone={materialKey}
+                className={`flex-1 ${
+                  draggedKey === materialKey
+                    ? "opacity-40"
+                    : selectedKey === materialKey
+                    ? "ring-2 ring-blue-500"
+                    : "opacity-100"
+                } ${
+                  dropTargetKey === materialKey && draggedKey !== materialKey
+                    ? "ring-2 ring-blue-400 bg-blue-50"
+                    : ""
+                } transition-all duration-200`}
+                onMouseDown={(e) => handleMouseDown(e, materialKey)}
+                onMouseEnter={() =>
+                  draggedKey &&
+                  draggedKey !== materialKey &&
+                  setDropTargetKey(materialKey)
                 }
-                target={selectedTargetKey}
-                setTarget={setSelectedTargetKey}
-                moveCardHandler={() => {
-                  if (!selectedKey) return;
-                  if (!selectedTargetKey) return;
-                  handleOrderingActivityItemChange(
-                    selectedKey,
-                    selectedTargetKey
-                  );
-                }}
-              />
+                onMouseLeave={() => setDropTargetKey(null)}
+                onTouchStart={(e) =>
+                  handleTouchStart(e, materialKey, e.currentTarget)
+                }
+                onTouchMove={handleTouchMove}
+                onTouchEnd={handleTouchEnd}
+              >
+                <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 cursor-pointer p-3 ${
+                    learnerAnswerState === "CORRECT"
+                      ? "border-catchup-green"
+                      : learnerAnswerState === "INCORRECT"
+                      ? "border-catchup-red"
+                      : "border-catchup-blue"
+                  }`}
+                  onClick={() => handleSelectItem(materialKey)}
+                >
+                  {contentMap.type === "TEXT" ? (
+                    <p className="text-xl whitespace-pre-wrap">
+                      {constructInputWithSpecialExpressionList(
+                        materialMap[answerMap[materialKey]]
+                      ).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={materialMap[answerMap[materialKey]]}
+                      canFullScreen={true}
+                    />
+                  )}
+                </div>
+              </div>
             </div>
           </div>
         );

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

@@ -0,0 +1,231 @@
+import { useEffect, useState } from "react";
+import { useDrop } from "react-dnd";
+import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
+import { InlineMath } from "react-katex";
+import useScreenSize from "../../../hooks/useScreenSize";
+import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
+import { IOrderingActivityMaterialProps } from "../../../properties/ActivityProperties";
+import DraggableDroppableItem from "../../dnds/DraggableDroppableItem";
+
+const OrderingActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+  showCorrectAnswer,
+}: IOrderingActivityMaterialProps) => {
+  const [selectedTargetKey, setSelectedTargetKey] = useState(null);
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const { screenSize } = useScreenSize();
+  const [view, setView] = useState("PC");
+  const [{ isOver, canDrop }, drop] = useDrop({
+    accept: "ORDERING",
+    drop: () => {},
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    }),
+  });
+
+  useEffect(() => {
+    if (!screenSize) return;
+    if (screenSize.width <= 1024) {
+      setView("TABLET");
+    } else {
+      setView("PC");
+    }
+  }, [screenSize]);
+
+  useEffect(() => {
+    if (!showCorrectAnswer) return;
+    const answerMap = answer.data.find(
+      (answerData: any) => answerData.type === "ORDERING"
+    ).answerMap;
+    Object.keys(answerMap).forEach((answerKey, index) => {
+      answerMap[answerKey] = index;
+    });
+  }, [showCorrectAnswer]);
+
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "ORDERING"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+
+  const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
+    if (!isPreview) return null;
+    if (correctAnswer === learnerAnswer) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+
+  const handleOrderingActivityItemChange = (
+    selectedKey: string,
+    materialKey: string
+  ) => {
+    if (checkCanAnswerQuestion()) {
+      if (selectedKey) {
+        onChange(answer, selectedKey, materialKey);
+        setSelectedKey(null);
+      } else {
+        setSelectedKey(materialKey);
+      }
+    }
+  };
+
+  const calculateMarginTop = (index: number) => {
+    if (index === 0) {
+      if (contentMap.type === "TEXT") {
+        return 0;
+      } else {
+        return 0;
+      }
+    } else if (index === 1) {
+      if (contentMap.type === "TEXT") {
+        return 65;
+      } else {
+        return 130;
+      }
+    } else if (index % 2 === 0) {
+      if (contentMap.type === "TEXT") {
+        return -65;
+      } else {
+        return -130;
+      }
+    } else if (index % 2 === 1) {
+      if (contentMap.type === "TEXT") {
+        return 0;
+      } else {
+        return 0;
+      }
+    }
+    return 0;
+  };
+
+  const answerMap = retrieveAnswerMap();
+
+  return (
+    <div className="flex flex-row flex-wrap">
+      {Object.keys(answerMap).map((materialKey, index) => {
+        const learnerAnswerState = checkAnswerState(
+          answerMap[materialKey] + "",
+          index + ""
+        );
+        return (
+          <div className="w-full lg:w-1/2" key={index}>
+            <div
+              className={`flex flex-row items-center my-4 mx-2`}
+              style={{
+                marginTop:
+                  view === "PC"
+                    ? calculateMarginTop(parseFloat(materialKey))
+                    : 0,
+              }}
+            >
+              <div className="mr-3">
+                <div className="h-catchup-activity-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-y-auto">
+                  <div
+                    className={`${
+                      selectedKey === materialKey
+                        ? "border-2 border-catchup-light-gray"
+                        : "border-2 border-catchup-blue"
+                    } flex flex-col items-center justify-center transition-all duration-300 rounded-catchup-full w-[50px] h-[50px]`}
+                  >
+                    <p className="">{parseFloat(materialKey) + 1}</p>
+                  </div>
+                </div>
+              </div>
+
+              <DraggableDroppableItem
+                key={index}
+                item={{ index: materialKey }}
+                type={"ORDERING"}
+                dropRef={drop}
+                component={
+                  <div
+                    className={`${
+                      canDrop
+                        ? selectedKey !== materialKey
+                          ? selectedTargetKey === materialKey
+                            ? "bg-catchup-light-blue rounded-catchup-xlarge"
+                            : "bg-catchup-light-blue rounded-catchup-xlarge opacity-40"
+                          : ""
+                        : ""
+                    } ${
+                      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 p-3 ${
+                      learnerAnswerState === "CORRECT"
+                        ? "border-catchup-green"
+                        : learnerAnswerState === "INCORRECT"
+                        ? "border-catchup-red"
+                        : "border-catchup-blue"
+                    }`}
+                    onMouseDown={() => {
+                      if (checkCanAnswerQuestion()) {
+                        setSelectedKey(materialKey);
+                      }
+                    }}
+                    onTouchEnd={() => {
+                      if (checkCanAnswerQuestion()) {
+                        setSelectedKey(materialKey);
+                      }
+                    }}
+                  >
+                    {contentMap.type === "TEXT" ? (
+                      <p className="text-xl whitespace-pre-wrap">
+                        {constructInputWithSpecialExpressionList(
+                          materialMap[answerMap[materialKey]]
+                        ).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={materialMap[answerMap[materialKey]]}
+                        canFullScreen={true}
+                      />
+                    )}
+                  </div>
+                }
+                target={selectedTargetKey}
+                setTarget={setSelectedTargetKey}
+                moveCardHandler={() => {
+                  if (!selectedKey) return;
+                  if (!selectedTargetKey) return;
+                  handleOrderingActivityItemChange(
+                    selectedKey,
+                    selectedTargetKey
+                  );
+                }}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default OrderingActivityMaterialContent;