catchup-library-web 1.20.35 → 1.20.36

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

@@ -0,0 +1,362 @@
+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 DividerLine from "../../dividers/DividerLine";
+import { IGroupingActivityMaterialProps } from "../../../properties/ActivityProperties";
+import DraggableItem from "../../dnds/DraggableItem";
+import DroppableItem from "../../dnds/DroppableItem";
+
+const GroupingActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+  showCorrectAnswer,
+}: IGroupingActivityMaterialProps) => {
+  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: "GROUPING",
+    drop: () => {},
+    collect: (monitor: any) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    }),
+  });
+  const ref = 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) => {
+      for (const materialValue of materialMap[materialKey]) {
+        materialList.push(materialValue);
+      }
+    });
+    setShuffledMaterialList(shuffleArray(materialList));
+  }, []);
+
+  useEffect(() => {
+    if (!showCorrectAnswer) return;
+    answer.data.find(
+      (answerData: any) => answerData.type === "GROUPING"
+    ).answerMap = materialMap;
+  }, [showCorrectAnswer]);
+
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "GROUPING"
+    );
+    const answerMap = answer.data[foundIndex].answerMap;
+    return answerMap;
+  };
+
+  const retrieveFilteredMaterialList = (answerMap: any) => {
+    const selectedValueList: any = [];
+    Object.keys(answerMap).forEach((key) => {
+      answerMap[key].forEach((value: string) => {
+        selectedValueList.push(value);
+      });
+    });
+    return shuffledMaterialList.filter(
+      (material) =>
+        selectedValueList.findIndex((value: string) => material === value) ===
+        -1
+    );
+  };
+
+  const checkAnswerState = (correctAnswerList: any, learnerAnswer: string) => {
+    if (!isPreview) return null;
+    if (!learnerAnswer) return "EMPTY";
+    if (!correctAnswerList) return "EMPTY";
+    const foundIndex = correctAnswerList.findIndex(
+      (correctAnswer: string) => correctAnswer === learnerAnswer
+    );
+    if (foundIndex !== -1) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+
+  const handleGroupingActivityItemOnChange = (
+    selectedTargetKey: string,
+    selectedValue: string
+  ) => {
+    if (checkCanAnswerQuestion()) {
+      onChange(answer, selectedTargetKey, selectedValue, null);
+      setSelectedValue(null);
+    }
+  };
+
+  const answerMap = retrieveAnswerMap();
+  const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
+
+  return (
+    <>
+      {filteredMaterialList.length > 0 ? (
+        <>
+          <div className="flex-1 flex flex-row gap-x-4 overflow-x-auto py-2">
+            {filteredMaterialList.map((materialValue, index) => {
+              return (
+                <DraggableItem
+                  key={index}
+                  item={{ index: materialValue }}
+                  type={"GROUPING"}
+                  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">
+                          <p className="text-xl text-center whitespace-pre-wrap">
+                            {constructInputWithSpecialExpressionList(
+                              materialValue
+                            ).map((inputPart, index) => (
+                              <span
+                                key={index}
+                                className={`${
+                                  inputPart.isBold ? "font-bold" : ""
+                                } ${inputPart.isUnderline ? "underline" : ""}`}
+                              >
+                                {inputPart.isEquation ? (
+                                  <span className="text-2xl">
+                                    <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;
+                    handleGroupingActivityItemOnChange(
+                      selectedTargetKey,
+                      selectedValue
+                    );
+                  }}
+                />
+              );
+            })}
+          </div>
+          <DividerLine />
+        </>
+      ) : null}
+      <div className="overflow-y-auto max-h-[500px]">
+        {Object.keys(answerMap).map((answerMapKey, index) => (
+          <div key={index} className="flex flex-row w-full">
+            <div className="w-1/3">
+              <div
+                className={`border-catchup-blue ${
+                  contentMap.type === "TEXT"
+                    ? "h-catchup-activity-text-outer-box-item"
+                    : "h-catchup-activity-media-outer-box-item"
+                } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`}
+              >
+                <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-2xl">
+                              <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 min-w-0" ref={ref}>
+              <div className="h-full py-3">
+                <div
+                  className={`${
+                    canDrop
+                      ? selectedTargetKey === answerMapKey
+                        ? "bg-catchup-light-blue"
+                        : "bg-catchup-light-blue opacity-40"
+                      : ""
+                  } flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1`}
+                >
+                  <DroppableItem
+                    key={index}
+                    item={{ index: answerMapKey }}
+                    type={"GROUPING"}
+                    target={selectedTargetKey}
+                    setTarget={setSelectedTargetKey}
+                    dropRef={drop}
+                    component={
+                      <div className="h-full w-full overflow-x-auto">
+                        <div className="flex flex-row items-center gap-2 w-max h-full">
+                          {answerMap[answerMapKey].map(
+                            (
+                              answerMapValue: string,
+                              answerMapIndex: number
+                            ) => {
+                              const learnerAnswerState = checkAnswerState(
+                                materialMap[answerMapKey],
+                                answerMapValue
+                              );
+                              return (
+                                <div key={answerMapIndex} className="p-1">
+                                  <div
+                                    className={`${
+                                      contentMap.type === "TEXT"
+                                        ? "h-catchup-activity-text-box-item"
+                                        : "h-catchup-activity-media-box-item"
+                                    }`}
+                                  >
+                                    <div
+                                      className={`${
+                                        learnerAnswerState === "EMPTY"
+                                          ? "border-catchup-lighter-gray"
+                                          : learnerAnswerState === "CORRECT"
+                                          ? "border-catchup-green"
+                                          : learnerAnswerState === "INCORRECT"
+                                          ? "border-catchup-red"
+                                          : "border-catchup-blue"
+                                      } border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`}
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        if (checkCanAnswerQuestion()) {
+                                          onChange(
+                                            answer,
+                                            answerMapKey,
+                                            null,
+                                            answerMapIndex
+                                          );
+                                          setSelectedValue(null);
+                                        }
+                                      }}
+                                    >
+                                      {contentMap.type === "TEXT" ? (
+                                        <div className="flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto">
+                                          <div className="m-2">
+                                            <p className="text-xl text-center whitespace-pre-wrap">
+                                              {constructInputWithSpecialExpressionList(
+                                                answerMapValue
+                                              ).map((inputPart, index) => (
+                                                <span
+                                                  key={index}
+                                                  className={`${
+                                                    inputPart.isBold
+                                                      ? "font-bold"
+                                                      : ""
+                                                  } ${
+                                                    inputPart.isUnderline
+                                                      ? "underline"
+                                                      : ""
+                                                  }`}
+                                                >
+                                                  {inputPart.isEquation ? (
+                                                    <span className="text-2xl">
+                                                      <InlineMath
+                                                        math={inputPart.value}
+                                                      />
+                                                    </span>
+                                                  ) : (
+                                                    inputPart.value
+                                                  )}
+                                                </span>
+                                              ))}
+                                            </p>
+                                          </div>
+                                        </div>
+                                      ) : (
+                                        <ShowMaterialMediaByContentType
+                                          key={`${uniqueValue}-${answerMapIndex}`}
+                                          contentType={contentMap.type}
+                                          src={answerMapValue}
+                                          canFullScreen={false}
+                                        />
+                                      )}
+                                    </div>
+                                  </div>
+                                </div>
+                              );
+                            }
+                          )}
+                        </div>
+                      </div>
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default GroupingActivityMaterialContent;