catchup-library-web 1.20.35 → 1.21.0

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}

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

@@ -1,306 +0,0 @@
-import { InlineMath } from "react-katex";
-import InputGroup from "../../groups/InputGroup";
-import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
-import i18n from "../../../language/i18n";
-import { useState } from "react";
-import { useEffect } from "react";
-import { useDrop } from "react-dnd";
-import BaseImage from "../../images/BaseImage";
-import { shuffleArray } from "../../../utilization/AppUtilization";
-import DraggableItem from "../../dnds/DraggableItem";
-import DroppableItem from "../../dnds/DroppableItem";
-import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
-import DividerLine from "../../dividers/DividerLine";
-import { IFillInTheBlanksActivityMaterialProps } from "../../../properties/ActivityProperties";
-import InputWithSpecialExpression from "../../texts/InputWithSpecialExpression";
-
-const FillInTheBlanksActivityMaterialContent = ({
-  uniqueValue,
-  answer,
-  optionList,
-  materialMap,
-  contentMap,
-  checkCanAnswerQuestion,
-  onChange,
-  isPreview,
-  showCorrectAnswer,
-}: IFillInTheBlanksActivityMaterialProps) => {
-  const [shuffleOptionList, setShuffleOptionList] = useState([]);
-  const [selectedOption, setSelectedOption] = useState(null);
-  const [pasteOptionIndex, setPasteOptionIndex] = useState(null);
-  const [{ isOver, canDrop }, drop] = useDrop({
-    accept: "FILL_IN_THE_BLANKS",
-    drop: () => {},
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop(),
-    }),
-  });
-
-  useEffect(() => {
-    setShuffleOptionList(shuffleArray(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 (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]);
-
-  const retrieveAnswerMap = () => {
-    const foundIndex = answer.data.findIndex(
-      (answerData: any) => answerData.type === "FILL_IN_THE_BLANKS"
-    );
-    return answer.data[foundIndex].answerMap;
-  };
-
-  const checkAnswerState = (correctAnswerList: any, learnerAnswer: string) => {
-    if (!isPreview) return null;
-    const foundIndex = correctAnswerList.findIndex(
-      (correctAnswer: string) => correctAnswer === learnerAnswer
-    );
-    if (foundIndex !== -1) {
-      return "CORRECT";
-    }
-    return "INCORRECT";
-  };
-
-  const checkAnswerProvided = (answerMap: any, option: string) => {
-    return (
-      Object.keys(answerMap).findIndex((key) => answerMap[key] === option) !==
-      -1
-    );
-  };
-
-  const handleSelectOption = (option: any) => {
-    setSelectedOption(option);
-    setPasteOptionIndex(null);
-  };
-
-  const answerMap = retrieveAnswerMap();
-
-  return (
-    <div
-      className="flex flex-row flex-wrap items-center"
-      // onMouseUp={() => {}}
-      // onTouchStart={() => {}}
-    >
-      <div className="hidden md:block">
-        <span className="font-semibold text-xl opacity-60">
-          {i18n.t("please_select_fill_in_the_blanks_text")}
-        </span>
-      </div>
-      <div className="hidden md:contents">
-        <DividerLine />
-      </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) ? (
-            <div className="opacity-30" key={index}>
-              <ShowMaterialMediaByContentType
-                key={`${uniqueValue}-${index}`}
-                contentType={contentMap.type}
-                src={option}
-                canFullScreen={true}
-              />
-            </div>
-          ) : (
-            <DraggableItem
-              key={index}
-              item={{ index: option }}
-              type={"FILL_IN_THE_BLANKS"}
-              component={
-                contentMap.type === "TEXT" ? (
-                  <div
-                    className="border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none"
-                    onClick={() => handleSelectOption(option)}
-                    onMouseDown={() => {
-                      setSelectedOption(option);
-                      setPasteOptionIndex(null);
-                    }}
-                    onTouchEnd={() => {
-                      setSelectedOption(option);
-                      setPasteOptionIndex(null);
-                    }}
-                  >
-                    <p className="italic whitespace-pre-wrap">
-                      <InputWithSpecialExpression
-                        value={option}
-                        showSpecialOnly={false}
-                      />
-                    </p>
-                  </div>
-                ) : (
-                  <div
-                    className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none"
-                    onClick={() => handleSelectOption(option)}
-                    onMouseDown={() => {
-                      setSelectedOption(option);
-                      setPasteOptionIndex(null);
-                    }}
-                    onTouchEnd={() => {
-                      setSelectedOption(option);
-                      setPasteOptionIndex(null);
-                    }}
-                  >
-                    <ShowMaterialMediaByContentType
-                      key={`${uniqueValue}-${index}`}
-                      contentType={contentMap.type}
-                      src={option}
-                      canFullScreen={true}
-                    />
-                  </div>
-                )
-              }
-              moveCardHandler={() => {
-                onChange(answer, pasteOptionIndex, selectedOption);
-              }}
-            />
-          )
-        )}
-      </div>
-      <div className="w-full flex flex-row flex-wrap">
-        {Object.keys(answerMap).map((materialKey, index) => {
-          const learnerAnswerState = checkAnswerState(
-            JSON.parse(materialMap[materialKey]),
-            answerMap[materialKey]
-          );
-          return (
-            <div key={index} className="w-full md:w-1/2">
-              <div className="mx-2">
-                <DroppableItem
-                  key={index}
-                  item={{ index }}
-                  type={"FILL_IN_THE_BLANKS"}
-                  target={pasteOptionIndex}
-                  setTarget={setPasteOptionIndex}
-                  dropRef={drop}
-                  component={
-                    <div className="w-full flex flex-row my-2 gap-x-2">
-                      <div className="my-auto">
-                        <p className="text-xl">
-                          {parseFloat(materialKey) + 1}.
-                        </p>
-                      </div>
-                      <div className="flex-1">
-                        {checkCanAnswerQuestion() ? (
-                          contentMap.type === "TEXT" ? (
-                            <div className="relative">
-                              <div className="flex-1">
-                                <div
-                                  className={`w-full min-h-[44px] border rounded-lg ${
-                                    answerMap[materialKey]
-                                      ? "border-catchup-blue-400 px-2"
-                                      : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"
-                                  }`}
-                                  onClick={() => {
-                                    if (answerMap[materialKey]) {
-                                      onChange(answer, materialKey, "");
-                                    }
-                                  }}
-                                >
-                                  {answerMap[materialKey] ? (
-                                    <InputWithSpecialExpression
-                                      value={answerMap[materialKey]}
-                                      showSpecialOnly={false}
-                                    />
-                                  ) : (
-                                    <p className="text-gray-400 italic"></p>
-                                  )}
-                                </div>
-                              </div>
-
-                              {learnerAnswerState === "CORRECT" ? (
-                                <div className="absolute -top-[10px] right-4 bg-catchup-white">
-                                  <BaseImage
-                                    src="/icons/checkbox.webp"
-                                    alt="checkbox"
-                                    size="small"
-                                  />
-                                </div>
-                              ) : learnerAnswerState === "INCORRECT" ? (
-                                <div className="absolute -top-[10px] right-4 bg-catchup-white">
-                                  <BaseImage
-                                    src="/icons/cross-red.webp"
-                                    alt="cross-red"
-                                    size="small"
-                                  />
-                                </div>
-                              ) : null}
-                            </div>
-                          ) : answerMap[materialKey] === "" ? (
-                            <div
-                              className={`w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${
-                                learnerAnswerState === "CORRECT"
-                                  ? "border-catchup-green"
-                                  : learnerAnswerState === "INCORRECT"
-                                  ? "border-catchup-red"
-                                  : "border-catchup-blue"
-                              }`}
-                            >
-                              <div className="h-full flex flex-col items-center justify-center px-4 py-2">
-                                <span className="italic">
-                                  {i18n.t("please_drop_here")}
-                                </span>
-                              </div>
-                            </div>
-                          ) : (
-                            <div
-                              className="flex-1 cursor-pointer"
-                              onClick={() => {
-                                onChange(answer, materialKey, "");
-                              }}
-                            >
-                              <ShowMaterialMediaByContentType
-                                key={`${uniqueValue}-${index}`}
-                                contentType={contentMap.type}
-                                src={answerMap[materialKey]}
-                                canFullScreen={true}
-                              />
-                            </div>
-                          )
-                        ) : (
-                          <p key={materialKey} className="text-xl">
-                            {constructInputWithSpecialExpressionList(
-                              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>
-                        )}
-                      </div>
-                    </div>
-                  }
-                />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default FillInTheBlanksActivityMaterialContent;

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

@@ -1,231 +0,0 @@
-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;