catchup-library-web 1.0.0 → 1.0.2

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

@@ -0,0 +1,216 @@
+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 <= 768) {
+      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 "HIDDEN";
+    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) {
+      return 0;
+    } else if (index === 1) {
+      return 150;
+    } else if (index % 2 === 0) {
+      return -150;
+    } else if (index % 2 === 1) {
+      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={`${
+                    learnerAnswerState === "CORRECT"
+                      ? "border-catchup-green"
+                      : learnerAnswerState === "INCORRECT"
+                      ? "border-catchup-red"
+                      : selectedKey === materialKey
+                      ? "border-catchup-blue"
+                      : "border-catchup-lighter-gray"
+                  } min-h-catchup-activity-outer-box-item w-catchup-activity-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`}
+                >
+                  <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"
+                          : ""
+                        : ""
+                    } flex-1 min-h-catchup-activity-outer-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);
+                      }
+                    }}
+                  >
+                    {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-2xl">
+                                <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/activities/material-content/ShowMaterialMediaByContentType.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useRef, useState } from "react";
+import Modal from "react-modal";
+import BaseImage from "../../images/BaseImage";
+import { IShowMaterialMediaByContentTypeProps } from "../../../properties/ActivityProperties";
+
+const ShowMaterialMediaByContentType = ({
+  key,
+  contentType,
+  src,
+  canFullScreen,
+}: IShowMaterialMediaByContentTypeProps) => {
+  const [showFullScreen, setShowFullScreen] = useState<boolean>(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState<
+    any | null
+  >(null);
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
+  const [isFullHeight, setIsFullHeight] = useState<boolean>(false);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    setIsLoaded(false);
+  }, []);
+
+  useEffect(() => {
+    if (!isLoaded) return;
+    if (!imageRef) return;
+    if (!imageRef.current) return;
+    const w = imageRef.current.naturalWidth;
+    const h = imageRef.current.naturalHeight;
+    if (w >= h) {
+      setIsFullHeight(false);
+    } else {
+      setIsFullHeight(true);
+    }
+  }, [isLoaded, key]);
+
+  const RenderShowFullScreenItem = () => {
+    return (
+      <Modal
+        isOpen={showFullScreen}
+        onAfterOpen={() => {}}
+        onRequestClose={() => {
+          setShowFullScreen(false);
+          setSelectedFullScreenItem(null);
+        }}
+        style={{
+          content: {
+            top: "50%",
+            left: "50%",
+            right: "auto",
+            bottom: "auto",
+            marginRight: "-50%",
+            transform: "translate(-50%, -50%)",
+            padding: 0,
+            borderRadius: 20,
+            background: "",
+            border: "",
+            width: "900px",
+            maxHeight: "70%",
+            overflow: "auto",
+          },
+          overlay: {
+            background: "rgba(0, 0, 0, 0.6)",
+          },
+        }}
+        contentLabel=""
+      >
+        <div className="flex-1 flex flex-col">
+          {/* <div className="m-4"> */}
+          <div className="ml-auto px-5 py-3">
+            <BaseImage
+              src="/icons/cross-red.png"
+              alt="cross-red"
+              size="medium"
+              onClick={() => {
+                setShowFullScreen(false);
+                setSelectedFullScreenItem(null);
+              }}
+            />
+          </div>
+          <div className="flex items-center justify-center h-[500px]">
+            <BaseImage
+              src={selectedFullScreenItem}
+              alt="selected-fullscreen-item"
+              size="custom"
+              className="w-full"
+            />
+          </div>
+        </div>
+      </Modal>
+    );
+  };
+
+  return contentType === "IMAGE" ? (
+    <div key={key}>
+      {RenderShowFullScreenItem()}
+      <div className="my-2">
+        <div className="h-full flex flex-row flex-wrap items-center">
+          <div
+            className={`${
+              isFullHeight
+                ? "h-catchup-activity-box-item"
+                : "max-w-catchup-activity-box-item"
+            }  flex flex-col justify-center items-center relative`}
+          >
+            <BaseImage
+              src={src}
+              alt="image"
+              ref={imageRef}
+              size="custom"
+              className="h-full rounded-catchup-xlarge"
+              onLoad={() => {
+                setIsLoaded(true);
+              }}
+            />
+            {src !== null &&
+            src !== "" &&
+            src !== "DEFAULT_OPTION" &&
+            canFullScreen ? (
+              <div
+                className="absolute flex items-center justify-center top-2 right-2  h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1"
+                onMouseEnter={(e) => {
+                  e.preventDefault();
+                }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setShowFullScreen(true);
+                  setSelectedFullScreenItem(src);
+                }}
+              >
+                <BaseImage
+                  src="/icons/arrow-up.png"
+                  alt="arrow-up"
+                  size="custom"
+                  className="w-full"
+                />
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : contentType === "VIDEO" ? (
+    <div className="my-2">
+      <div className="h-full flex flex-row flex-wrap items-center">
+        <div className="h-full flex flex-col justify-center items-center">
+          <video
+            className="h-catchup-activity-box-item rounded-catchup-xlarge"
+            src={src}
+            controls
+            onClick={() => {}}
+          />
+        </div>
+      </div>
+    </div>
+  ) : contentType === "AUDIO" ? (
+    <div className="my-2">
+      <div className="h-full flex flex-row flex-wrap items-center">
+        <div className="h-full flex flex-col justify-center items-center">
+          <audio
+            className="h-catchup-activity-box-item rounded-catchup-xlarge"
+            src={src}
+            controls
+            onClick={() => {}}
+          />
+        </div>
+      </div>
+    </div>
+  ) : null;
+};
+
+export default ShowMaterialMediaByContentType;

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

@@ -0,0 +1,217 @@
+import { useEffect, useState } from "react";
+import useScreenSize from "../../../hooks/useScreenSize";
+import i18n from "../../../language/i18n";
+import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
+import { InlineMath } from "react-katex";
+import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
+import BaseImage from "../../images/BaseImage";
+import { ITrueFalseActivityMaterialProps } from "../../../properties/ActivityProperties";
+import DividerLine from "../../dividers/DividerLine";
+import { shuffleArray } from "../../../utilization/AppUtilization";
+
+const TrueFalseActivityMaterialContent = ({
+  uniqueValue,
+  answer,
+  materialMap,
+  contentMap,
+  checkCanAnswerQuestion,
+  onChange,
+  isPreview,
+  showCorrectAnswer,
+}: ITrueFalseActivityMaterialProps) => {
+  const { screenSize } = useScreenSize();
+  const [shuffleOptionList, setShuffleOptionList] = useState<any[]>([]);
+
+  useEffect(() => {
+    const optionList = [];
+    optionList.push(...materialMap.trueList);
+    optionList.push(...materialMap.falseList);
+    if (isPreview) {
+      setShuffleOptionList(optionList);
+    } else {
+      setShuffleOptionList(shuffleArray(optionList));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!showCorrectAnswer) return;
+    answer.data.find(
+      (answerData: any) => answerData.type === "TRUE_FALSE"
+    ).answerMap = materialMap;
+  }, [showCorrectAnswer]);
+
+  const retrieveAnswer = () => {
+    if (!answer)
+      return {
+        answerMap: {
+          trueList: [],
+          falseList: [],
+        },
+      };
+    return answer.data.find(
+      (answerData: any) => answerData.type === "TRUE_FALSE"
+    );
+  };
+
+  const retrieveAnswerMap = () => {
+    const { answerMap } = retrieveAnswer();
+    return answerMap;
+  };
+
+  const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
+    if (!isPreview) return "HIDDEN";
+    if (correctAnswer === learnerAnswer) {
+      return "CORRECT";
+    }
+    return "INCORRECT";
+  };
+
+  const answerMap = retrieveAnswerMap();
+  return (
+    <div className="">
+      <div className="hidden md:block">
+        <span className="font-semibold text-xl opacity-60">
+          {i18n.t("please_select_true_false_text")}
+        </span>
+      </div>
+      <div className="hidden md:contents">
+        <DividerLine />
+      </div>
+      <div className="flex flex-row justify-end items-center gap-x-2">
+        <div className="w-[50px]">
+          <p className="font-bold text-lg">{i18n.t("true")}</p>
+        </div>
+        <div className="w-[50px]">
+          <p className="font-bold text-lg">{i18n.t("false")}</p>
+        </div>
+      </div>
+      {checkCanAnswerQuestion() ? (
+        <div className={`flex flex-row w-full justify-center flex-wrap`}>
+          {shuffleOptionList.map((shuffleOption, index) => {
+            const correctAnswer =
+              materialMap.trueList.find(
+                (trueItem: string) => trueItem === shuffleOption
+              ) !== undefined
+                ? "TRUE"
+                : "FALSE";
+            const learnerAnswer =
+              answerMap.trueList.find(
+                (trueItem: string) => trueItem === shuffleOption
+              ) !== undefined
+                ? "TRUE"
+                : "FALSE";
+
+            const learnerAnswerState = checkAnswerState(
+              correctAnswer,
+              learnerAnswer
+            );
+
+            return (
+              <div
+                key={index}
+                className={`w-full flex flex-row items-center justify-center cursor-pointer my-2 ${
+                  learnerAnswerState === "CORRECT"
+                    ? "border-2 border-catchup-green rounded-catchup-xlarge"
+                    : learnerAnswerState === "INCORRECT"
+                    ? "border-2 border-catchup-red rounded-catchup-xlarge"
+                    : ""
+                }`}
+              >
+                <div className="flex-1">
+                  {contentMap.type === "TEXT" ? (
+                    <p className="text-xl p-2 whitespace-pre-wrap">
+                      {constructInputWithSpecialExpressionList(
+                        shuffleOption
+                      ).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={shuffleOption}
+                      canFullScreen={true}
+                    />
+                  )}
+                </div>
+                <div className="flex flex-row items-center gap-x-2">
+                  <div className="w-[50px]">
+                    <div className="flex flex-col items-center justify-center">
+                      <BaseImage
+                        src={
+                          answerMap.trueList.includes(shuffleOption)
+                            ? "/icons/checkbox.png"
+                            : "/icons/empty-checkbox.png"
+                        }
+                        alt="checkbox-empty-checkbox"
+                        size="small"
+                        onClick={() => {
+                          onChange(answer, "TRUE", shuffleOption);
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className="w-[50px]">
+                    <div className="flex flex-col items-center justify-center">
+                      <BaseImage
+                        src={
+                          answerMap.falseList.includes(shuffleOption)
+                            ? "/icons/checkbox.png"
+                            : "/icons/empty-checkbox.png"
+                        }
+                        alt="checkbox-empty-checkbox"
+                        size="small"
+                        onClick={() => {
+                          onChange(answer, "FALSE", shuffleOption);
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <>
+          {answerMap.trueList.map((item: string) => (
+            <div className="flex flex-row items-center gap-x-2">
+              <div className="flex-1">
+                <p>{item}</p>
+              </div>
+              <div className="w-[50px]">
+                <p className="underline">{i18n.t("true")}</p>
+              </div>
+            </div>
+          ))}
+          {answerMap.falseList.map((item: string) => (
+            <div className="flex flex-row items-center gap-x-2">
+              <div className="flex-1">
+                <p>{item}</p>
+              </div>
+              <div className="w-[50px]">
+                <p className="underline">{i18n.t("false")}</p>
+              </div>
+            </div>
+          ))}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default TrueFalseActivityMaterialContent;

package/src/components/activities/solution-content/ActivitySolutionContent.tsx

@@ -0,0 +1,86 @@
+import { InlineMath } from "react-katex";
+import i18n from "../../../language/i18n";
+import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
+import { IActivitySolutionProps } from "../../../properties/ActivityProperties";
+
+const ActivitySolutionContent = ({
+  activityTemplateType,
+  data,
+}: IActivitySolutionProps) => {
+  if (!activityTemplateType) return;
+
+  let solutionMapString;
+  if (activityTemplateType === "ORDERING") {
+    if (data["orderingSolutionMap"])
+      solutionMapString = data["orderingSolutionMap"];
+  } else if (activityTemplateType === "DROPDOWN") {
+    if (data["dropdownSolutionMap"])
+      solutionMapString = data["dropdownSolutionMap"];
+  } else if (activityTemplateType === "MCSA") {
+    if (data["MCSASolutionMap"]) solutionMapString = data["MCSASolutionMap"];
+  } else if (activityTemplateType === "MCMA") {
+    if (data["MCMASolutionMap"]) solutionMapString = data["MCMASolutionMap"];
+  } else if (activityTemplateType === "MATCHING") {
+    if (data["matchingSolutionMap"])
+      solutionMapString = data["matchingSolutionMap"];
+  } else if (activityTemplateType === "GROUPING") {
+    if (data["groupingSolutionMap"])
+      solutionMapString = data["groupingSolutionMap"];
+  } else if (activityTemplateType === "FILL_IN_THE_BLANKS") {
+    if (data["fillInTheBlanksSolutionMap"])
+      solutionMapString = data["fillInTheBlanksSolutionMap"];
+  } else if (activityTemplateType === "OPEN_ENDED") {
+    if (data["openEndedSolutionMap"])
+      solutionMapString = data["openEndedSolutionMap"];
+  } else if (activityTemplateType === "TRUE_FALSE") {
+    if (data["trueFalseSolutionMap"])
+      solutionMapString = data["trueFalseSolutionMap"];
+  }
+  if (!solutionMapString.includes("[ONAYLI CEVAP]")) return;
+  const solutionMap = JSON.parse(solutionMapString);
+  if (!solutionMap) return;
+
+  if (Object.keys(solutionMap).length === 0) return;
+  return (
+    <div className="mx-2">
+      <div className="p-4 border-catchup-blue border-2 rounded-catchup-xlarge">
+        <p className="text-xl font-bold text-center mb-3">
+          {i18n.t("solution")}
+        </p>
+        {Object.keys(solutionMap).map((key, index) => {
+          const currentItem = JSON.parse(solutionMap[key]);
+          const { value } = currentItem;
+          return (
+            <p className="my-3">
+              <span
+                key={`${key}_${index}`}
+                className="text-xl whitespace-pre-wrap"
+              >
+                {constructInputWithSpecialExpressionList(value).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>
+                  )
+                )}
+              </span>
+            </p>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ActivitySolutionContent;