catchup-library-web 1.0.0 → 1.0.2

package/src/components/activities/material-content/GroupingActivityMaterialContent.tsx

@@ -0,0 +1,359 @@
+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";
+import useScreenSize from "../../../hooks/useScreenSize";
+
+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 { screenSize, containerSize } = useScreenSize();
+  const [{ isOver, canDrop }, drop] = useDrop({
+    accept: "GROUPING",
+    drop: () => {},
+    collect: (monitor: any) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    }),
+  });
+  const ref = useRef<HTMLDivElement>(null);
+  const itemsRef = useRef<HTMLDivElement>(null);
+  const [maxWidth, setMaxWidth] = useState<number>(0);
+
+  useEffect(() => {
+    if (!ref) return;
+    if (!ref.current) return;
+    if (!screenSize) return;
+    setMaxWidth(ref.current.offsetWidth - 12);
+  }, [ref, screenSize]);
+
+  useEffect(() => {
+    if (!itemsRef) return;
+    if (!itemsRef.current) return;
+    if (!containerSize) return;
+    itemsRef.current.style.width = `${containerSize.width - 200}px`;
+  }, [itemsRef, containerSize]);
+
+  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 "HIDDEN";
+    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 (
+    <>
+      <div
+        ref={itemsRef}
+        className="flex-1 flex flex-row gap-x-4 gap-y-4 overflow-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"
+                  } h-catchup-activity-covering-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);
+                    }
+                  }}
+                  onMouseUp={() => {
+                    if (checkCanAnswerQuestion()) {
+                      setSelectedValue(null);
+                    }
+                  }}
+                >
+                  {contentMap.type === "TEXT" ? (
+                    <div
+                      className={`flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`}
+                    >
+                      <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>
+      {filteredMaterialList.length > 0 ? <DividerLine /> : null}
+      {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 h-catchup-activity-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 m-4`}
+              >
+                <p className="text-xl p-5 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" 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 flex-1 flex flex-row items-center overflow-x-auto"
+                      style={{
+                        maxWidth: maxWidth,
+                      }}
+                    >
+                      {answerMap[answerMapKey].map(
+                        (answerMapValue: string, answerMapIndex: number) => {
+                          const learnerAnswerState = checkAnswerState(
+                            materialMap[answerMapKey],
+                            answerMapValue
+                          );
+                          return (
+                            <div className="p-1">
+                              <div className="h-catchup-activity-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-h-[64px] min-w-[200px]`}
+                                    >
+                                      <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}-${index}`}
+                                      contentType={contentMap.type}
+                                      src={answerMapValue}
+                                      canFullScreen={false}
+                                    />
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        }
+                      )}
+                    </div>
+                  }
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default GroupingActivityMaterialContent;

package/src/components/activities/material-content/MCMAActivityMaterialContent.tsx

@@ -0,0 +1,166 @@
+import { InlineMath } from "react-katex";
+import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
+import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
+import i18n from "../../../language/i18n";
+import BaseImage from "../../images/BaseImage";
+import { IMCMAActivityMaterialProps } from "../../../properties/ActivityProperties";
+import DividerLine from "../../dividers/DividerLine";
+
+const MCMAActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+}: IMCMAActivityMaterialProps) => {
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "MCMA"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+
+  const retrieveCorrectAnswerList = () => {
+    return JSON.parse(Object.keys(materialMap)[0]);
+  };
+
+  const checkAnswerState = (
+    correctAnswerList: any,
+    currentAnswer: string,
+    learnerAnswer: string
+  ) => {
+    if (!isPreview) return "HIDDEN";
+    if (currentAnswer !== learnerAnswer) return "EMPTY";
+    const foundIndex = correctAnswerList.findIndex(
+      (correctAnswer: string) => correctAnswer === learnerAnswer
+    );
+    if (foundIndex !== -1) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+
+  const answerMap = retrieveAnswerMap();
+  const correctAnswerList = retrieveCorrectAnswerList();
+
+  return Object.keys(materialMap).map((materialKey, index) => {
+    return (
+      <div key={index} className="flex flex-row items-center my-1">
+        <div className="flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5">
+          <div className="hidden md:block">
+            <span className="font-semibold text-xl opacity-60">
+              {i18n.t("please_select_mcma_text")}
+            </span>
+          </div>
+          <div className="hidden md:contents">
+            <DividerLine />
+          </div>
+          {checkCanAnswerQuestion() ? (
+            <div className="flex flex-row w-full flex-wrap ">
+              {materialMap[materialKey].map(
+                (materialSubKey: string, index: number) => {
+                  const foundAnswer = answerMap[materialKey].find(
+                    (learnerAnswer: string) => learnerAnswer === materialSubKey
+                  );
+                  const learnerAnswerState = checkAnswerState(
+                    correctAnswerList,
+                    materialSubKey,
+                    foundAnswer
+                  );
+                  const foundIndex = correctAnswerList.findIndex(
+                    (correctAnswer: string) => correctAnswer === materialSubKey
+                  );
+                  return (
+                    <div
+                      key={index}
+                      className={`w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${
+                        (learnerAnswerState === "EMPTY" && foundIndex !== -1) ||
+                        learnerAnswerState === "CORRECT"
+                          ? "border-2 border-catchup-green rounded-catchup-xlarge"
+                          : learnerAnswerState === "INCORRECT"
+                          ? "border-2 border-catchup-red rounded-catchup-xlarge"
+                          : ""
+                      }`}
+                      onClick={() => {
+                        onChange(answer, materialKey, materialSubKey);
+                      }}
+                    >
+                      <div className="">
+                        <BaseImage
+                          src={
+                            answerMap[materialKey].includes(materialSubKey)
+                              ? "/icons/checkbox.png"
+                              : "/icons/empty-checkbox.png"
+                          }
+                          alt="checkbox-empty-checkbox"
+                          size="small"
+                          onClick={() => {}}
+                        />
+                      </div>
+                      <div className="flex-1">
+                        {contentMap.type === "TEXT" ? (
+                          <p className="text-xl whitespace-pre-wrap">
+                            {constructInputWithSpecialExpressionList(
+                              materialSubKey
+                            ).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>
+                        ) : (
+                          <ShowMaterialMediaByContentType
+                            key={`${uniqueValue}-${index}`}
+                            contentType={contentMap.type}
+                            src={materialSubKey}
+                            canFullScreen={true}
+                          />
+                        )}
+                      </div>
+                    </div>
+                  );
+                }
+              )}
+            </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-2xl">
+                      <InlineMath math={inputPart.value} />
+                    </span>
+                  ) : (
+                    inputPart.value
+                  )}
+                </span>
+              ))}
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  });
+};
+
+export default MCMAActivityMaterialContent;

package/src/components/activities/material-content/MCSAActivityMaterialContent.tsx

@@ -0,0 +1,165 @@
+import { InlineMath } from "react-katex";
+import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
+import i18n from "../../../language/i18n";
+import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
+import BaseImage from "../../images/BaseImage";
+import { IMCSAActivityMaterialProps } from "../../../properties/ActivityProperties";
+import DividerLine from "../../dividers/DividerLine";
+
+const MCSAActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+}: IMCSAActivityMaterialProps) => {
+  const retrieveAnswerMap = () => {
+    const foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "MCSA"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+
+  const retrieveCorrectAnswer = () => {
+    return Object.keys(materialMap)[0];
+  };
+
+  const checkAnswerState = (
+    correctAnswer: string,
+    currentAnswer: string,
+    learnerAnswer: string
+  ) => {
+    if (!isPreview) return "HIDDEN";
+    if (currentAnswer !== learnerAnswer) return "EMPTY";
+    if (correctAnswer === learnerAnswer) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+
+  const answerMap = retrieveAnswerMap();
+  const correctAnswer = retrieveCorrectAnswer();
+
+  return Object.keys(materialMap).map((materialKey, index) => {
+    return (
+      <div className="flex flex-row items-center my-1" key={index}>
+        <div className="flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5">
+          <div className="hidden md:block">
+            <span className="font-semibold text-xl opacity-60">
+              {i18n.t("please_select_mcsa_text")}
+            </span>
+          </div>
+          <div className="hidden md:contents">
+            <DividerLine />
+          </div>
+          {checkCanAnswerQuestion() ? (
+            <div
+              className={`flex flex-row w-full ${
+                Object.keys(materialMap[materialKey]).length <= 4
+                  ? "justify-center"
+                  : ""
+              } flex-wrap`}
+            >
+              {materialMap[materialKey].map(
+                (materialSubKey: string, index: number) => {
+                  const learnerAnswerState = checkAnswerState(
+                    correctAnswer,
+                    materialSubKey,
+                    answerMap[materialKey]
+                  );
+
+                  return (
+                    <div
+                      key={index}
+                      className={`w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${
+                        (learnerAnswerState === "EMPTY" &&
+                          materialSubKey === correctAnswer) ||
+                        learnerAnswerState === "CORRECT"
+                          ? "border-2 border-catchup-green rounded-catchup-xlarge"
+                          : learnerAnswerState === "INCORRECT"
+                          ? "border-2 border-catchup-red rounded-catchup-xlarge"
+                          : ""
+                      }`}
+                      onClick={() => {
+                        onChange(answer, materialKey, materialSubKey);
+                      }}
+                    >
+                      <div className="">
+                        <BaseImage
+                          src={
+                            answerMap[materialKey] === materialSubKey
+                              ? "/icons/item-element.png"
+                              : "/icons/not-selected-item-element.png"
+                          }
+                          alt="circle"
+                          size="small"
+                          onClick={() => {}}
+                        />
+                      </div>
+                      <div className="flex-1">
+                        {contentMap.type === "TEXT" ? (
+                          <p className="text-xl whitespace-pre-wrap">
+                            {constructInputWithSpecialExpressionList(
+                              materialSubKey
+                            ).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>
+                        ) : (
+                          <ShowMaterialMediaByContentType
+                            key={`${uniqueValue}-${index}`}
+                            contentType={contentMap.type}
+                            src={materialSubKey}
+                            canFullScreen={true}
+                          />
+                        )}
+                      </div>
+                    </div>
+                  );
+                }
+              )}
+            </div>
+          ) : (
+            <p className="text-xl whitespace-pre-wrap">
+              {constructInputWithSpecialExpressionList(
+                answerMap[materialKey]
+              ).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>
+    );
+  });
+};
+
+export default MCSAActivityMaterialContent;