catchup-library-web 1.20.36 → 1.21.1

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

@@ -1,350 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { useDrop } from "react-dnd";
-import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
-import { InlineMath } from "react-katex";
-import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
-import { IMatchingActivityMaterialProps } from "../../../properties/ActivityProperties";
-import DraggableItem from "../../dnds/DraggableItem";
-import DroppableItem from "../../dnds/DroppableItem";
-import DividerLine from "../../dividers/DividerLine";
-
-const MatchingActivityMaterialContent = ({
-  uniqueValue,
-  answer,
-  materialMap,
-  contentMap,
-  checkCanAnswerQuestion,
-  onChange,
-  isPreview,
-  showCorrectAnswer,
-}: IMatchingActivityMaterialProps) => {
-  const [selectedValue, setSelectedValue] = useState(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState(null);
-  const [isShuffled, setIsShuffled] = useState(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState([]);
-  const [{ isOver, canDrop }, drop] = useDrop({
-    accept: "MATCHING",
-    drop: () => {},
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop(),
-    }),
-  });
-  const itemsRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const shuffleArray = (array: any) => {
-      if (!isShuffled) {
-        const copyArray = JSON.parse(JSON.stringify(array));
-        for (let i = copyArray.length - 1; i > 0; i--) {
-          const j = Math.floor(Math.random() * (i + 1));
-          [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
-        }
-        setIsShuffled(true);
-        return copyArray;
-      }
-      return array;
-    };
-    const materialList: any = [];
-    Object.keys(materialMap).forEach((materialKey) => {
-      materialList.push(materialMap[materialKey]);
-    });
-    setShuffledMaterialList(shuffleArray(materialList));
-  }, []);
-
-  useEffect(() => {
-    if (!showCorrectAnswer) return;
-    answer.data.find(
-      (answerData: any) => answerData.type === "MATCHING"
-    ).answerMap = materialMap;
-  }, [showCorrectAnswer]);
-
-  const retrieveAnswerMap = () => {
-    const foundIndex = answer.data.findIndex(
-      (answerData: any) => answerData.type === "MATCHING"
-    );
-    return answer.data[foundIndex].answerMap;
-    // const sortedAnswerMapKeys = Object.keys(answerMap).sort((a, b) =>
-    //   answerMap[a]
-    //     ? answerMap[b]
-    //       ? answerMap[a].localeCompare(answerMap[b])
-    //       : 1
-    //     : -1
-    // );
-    // const sortedAnswerMap: any = {};
-    // for (const answerMapKey of sortedAnswerMapKeys) {
-    //   sortedAnswerMap[answerMapKey] = answerMap[answerMapKey];
-    // }
-    // return sortedAnswerMap;
-  };
-
-  const retrieveFilteredMaterialList = (answerMap: any) => {
-    const selectedValueList: any = [];
-    Object.keys(answerMap).forEach((key) => {
-      selectedValueList.push(answerMap[key]);
-    });
-
-    return shuffledMaterialList.filter(
-      (material) =>
-        selectedValueList.findIndex((value: string) => material === value) ===
-        -1
-    );
-  };
-
-  const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
-    if (!isPreview) return null;
-    if (!learnerAnswer) return "EMPTY";
-    if (correctAnswer === learnerAnswer) {
-      return "CORRECT";
-    }
-    return "INCORRECT";
-  };
-
-  const handleMatchingActivityItemOnChange = (
-    selectedTargetKey: string,
-    selectedValue: string | null
-  ) => {
-    if (checkCanAnswerQuestion()) {
-      onChange(answer, selectedTargetKey, selectedValue);
-      setSelectedValue(null);
-    }
-  };
-
-  const answerMap = retrieveAnswerMap();
-  const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-
-  return (
-    <>
-      {filteredMaterialList.length > 0 ? (
-        <>
-          <div
-            ref={itemsRef}
-            className="flex-shrink-0 flex flex-row gap-x-4 gap-y-4 overflow-x-auto py-2"
-          >
-            {filteredMaterialList.map((materialValue, index) => (
-              <DraggableItem
-                key={index}
-                item={{ index: materialValue }}
-                type={"MATCHING"}
-                component={
-                  <div
-                    className={`${
-                      selectedValue === materialValue
-                        ? "border-catchup-blue"
-                        : "border-catchup-lighter-gray"
-                    } ${
-                      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`}
-                    onMouseDown={() => {
-                      if (checkCanAnswerQuestion()) {
-                        setSelectedValue(materialValue);
-                      }
-                    }}
-                    onTouchEnd={() => {
-                      if (checkCanAnswerQuestion()) {
-                        setSelectedValue(materialValue);
-                      }
-                    }}
-                    onMouseUp={() => {
-                      if (checkCanAnswerQuestion()) {
-                        setSelectedValue(null);
-                      }
-                    }}
-                    onTouchStart={() => {
-                      if (checkCanAnswerQuestion()) {
-                        setSelectedValue(null);
-                      }
-                    }}
-                  >
-                    {contentMap.type === "TEXT" ? (
-                      <div className="flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4">
-                        <p className="text-lg whitespace-pre-wrap">
-                          {constructInputWithSpecialExpressionList(
-                            materialValue
-                          ).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>
-                    ) : (
-                      <ShowMaterialMediaByContentType
-                        key={`${uniqueValue}-${index}`}
-                        contentType={contentMap.type}
-                        src={materialValue}
-                        canFullScreen={true}
-                      />
-                    )}
-                  </div>
-                }
-                moveCardHandler={() => {
-                  if (!selectedTargetKey) return;
-                  if (!selectedValue) return;
-                  handleMatchingActivityItemOnChange(
-                    selectedTargetKey,
-                    selectedValue
-                  );
-                }}
-              />
-            ))}
-          </div>
-          <div className="flex-shrink-0">
-            <DividerLine />
-          </div>
-        </>
-      ) : null}
-
-      <div className="overflow-y-auto max-h-[500px]">
-        {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) => (
-                        <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 className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
-              <div className="flex-1">
-                <div
-                  className={`${
-                    canDrop
-                      ? selectedTargetKey === answerMapKey
-                        ? "bg-catchup-light-blue"
-                        : "bg-catchup-light-blue 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 transition-all duration-300 my-3 ${
-                    learnerAnswerState === "EMPTY"
-                      ? "border-catchup-blue"
-                      : learnerAnswerState === "CORRECT"
-                      ? "border-catchup-green"
-                      : learnerAnswerState === "INCORRECT"
-                      ? "border-catchup-red"
-                      : "border-catchup-blue"
-                  }`}
-                  onClick={() => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedValue(null);
-                    }
-                  }}
-                >
-                  <DroppableItem
-                    key={index}
-                    item={{ index: answerMapKey }}
-                    type={"MATCHING"}
-                    target={selectedTargetKey}
-                    setTarget={setSelectedTargetKey}
-                    dropRef={drop}
-                    component={
-                      <div
-                        className="h-full flex-1 flex flex-row items-center justify-center px-4"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          if (checkCanAnswerQuestion()) {
-                            handleMatchingActivityItemOnChange(
-                              answerMapKey,
-                              null
-                            );
-                          }
-                        }}
-                      >
-                        {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}
-                          />
-                        )}
-                      </div>
-                    }
-                  />
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </>
-  );
-};
-
-export default MatchingActivityMaterialContent;

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;

package/src/components/dnds/DraggableDroppableItem.tsx

@@ -1,60 +0,0 @@
-import { useRef } from "react";
-import { useDrag, useDrop } from "react-dnd";
-import { IDraggableDroppableItemProps } from "../../properties/DnDProperties";
-
-const DraggableDroppableItem = ({
-  item,
-  type,
-  component,
-  moveCardHandler,
-  dropRef,
-  target,
-  setTarget,
-}: IDraggableDroppableItemProps) => {
-  const ref = useRef(null);
-
-  const [, drop] = useDrop({
-    accept: type,
-    hover() {
-      if (!ref.current) {
-        return;
-      }
-      if (item.index && target !== item.index) {
-        setTarget(item.index);
-      }
-    },
-  });
-
-  const [{ isDragging }, drag] = useDrag({
-    type,
-    item,
-    end: (item, monitor) => {
-      const dropResult = monitor.getDropResult();
-      if (dropResult) {
-        moveCardHandler();
-      }
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-
-  const opacity = isDragging ? 0.4 : 1;
-
-  drag(drop(ref));
-
-  return (
-    <div
-      className={`${
-        isDragging ? "w-[0px] opacity-0" : "w-full opacity-100"
-      } transition-all duration-500`}
-      ref={dropRef}
-    >
-      <div ref={ref} className="w-full" style={{ opacity }}>
-        {component}
-      </div>
-    </div>
-  );
-};
-
-export default DraggableDroppableItem;

package/src/components/dnds/DraggableItem.tsx

@@ -1,39 +0,0 @@
-import { useDrag } from "react-dnd";
-import { IDraggableItemProps } from "../../properties/DnDProperties";
-
-const DraggableItem = ({
-  item,
-  type,
-  component,
-  moveCardHandler,
-}: IDraggableItemProps) => {
-  const [{ isDragging }, drag] = useDrag({
-    type,
-    item,
-    end: (item, monitor) => {
-      const dropResult = monitor.getDropResult();
-      if (dropResult) {
-        moveCardHandler();
-      }
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-
-  const opacity = isDragging ? 0.4 : 1;
-
-  return (
-    <div
-      className={`${
-        isDragging ? "w-[0px] opacity-0" : "opacity-100"
-      } transition-all duration-500`}
-    >
-      <div ref={drag} className="" style={{ opacity }}>
-        {component}
-      </div>
-    </div>
-  );
-};
-
-export default DraggableItem;