catchup-library-web 1.20.36 → 1.21.0

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/GroupingActivityMaterialContent2.tsx

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