catchup-library-web 1.20.34 → 1.20.36

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

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