catchup-library-web 1.0.0 → 1.0.2

package/src/components/activities/TrueFalseActivityContent.tsx

@@ -0,0 +1,98 @@
+import {
+  parseBodyMapFromData,
+  parseContentMapFromData,
+  parseMaterialMapFromData,
+} from "../../utilization/CatchtivityUtilization";
+import ActivityBodyContent from "./body-content/ActivityBodyContent";
+import TrueFalseActivityMaterialContent from "./material-content/TrueFalseActivityMaterialContent";
+import { ITrueFalseActivityProps } from "../../properties/ActivityProperties";
+import DividerLine from "../dividers/DividerLine";
+import VerticalDividerLine from "../dividers/VerticalDividerLine";
+
+const TrueFalseActivityContent = ({
+  answer,
+  data,
+  canAnswerQuestion,
+  changeAnswer,
+  isPreview,
+  showCorrectAnswer,
+}: ITrueFalseActivityProps) => {
+  const contentMap = parseContentMapFromData(data);
+  const trueFalseBodyMap = parseBodyMapFromData(data, "TRUE_FALSE");
+  const trueFalseMaterialMap = parseMaterialMapFromData(data, "TRUE_FALSE");
+
+  const retrieveCurrentAnswerMap = () => {
+    let foundIndex = answer.data.findIndex(
+      (answerData: any) => answerData.type === "TRUE_FALSE"
+    );
+    return answer.data[foundIndex].answerMap;
+  };
+
+  const handleTrueFalseAnswerOnChange = (
+    answer: any,
+    key: any,
+    value: string
+  ) => {
+    const answerMap = retrieveCurrentAnswerMap();
+    if (key === "TRUE") {
+      const foundFalseIndex = answerMap.falseList.findIndex(
+        (item: string) => item === value
+      );
+      if (foundFalseIndex !== -1) {
+        answerMap.falseList.splice(foundFalseIndex, 1);
+      }
+      const foundTrueIndex = answerMap.falseList.findIndex(
+        (item: string) => item === value
+      );
+      if (foundTrueIndex === -1) {
+        answerMap.trueList.push(value);
+      }
+    } else if (key === "FALSE") {
+      const foundTrueIndex = answerMap.trueList.findIndex(
+        (item: string) => item === value
+      );
+      if (foundTrueIndex !== -1) {
+        answerMap.trueList.splice(foundTrueIndex, 1);
+      }
+      const foundFalseIndex = answerMap.falseList.findIndex(
+        (item: string) => item === value
+      );
+      if (foundFalseIndex === -1) {
+        answerMap.falseList.push(value);
+      }
+    }
+    changeAnswer(answer);
+  };
+
+  return (
+    <div className="flex flex-row flex-wrap">
+      <div className="w-full md:w-[40%]">
+        <ActivityBodyContent
+          bodyMap={trueFalseBodyMap}
+          templateType={"GROUPING"}
+        />
+      </div>
+
+      <div className="contents md:hidden">
+        <DividerLine />
+      </div>
+      <div className="hidden md:block">
+        <VerticalDividerLine />
+      </div>
+      <div className="w-full md:flex-1">
+        <TrueFalseActivityMaterialContent
+          uniqueValue={JSON.stringify(data.contentMap)}
+          answer={answer}
+          materialMap={trueFalseMaterialMap}
+          contentMap={contentMap}
+          checkCanAnswerQuestion={canAnswerQuestion}
+          onChange={handleTrueFalseAnswerOnChange}
+          isPreview={isPreview}
+          showCorrectAnswer={showCorrectAnswer}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TrueFalseActivityContent;

package/src/components/activities/body-content/ActivityBodyContent.tsx

@@ -0,0 +1,108 @@
+import { IActivityBodyContentProps } from "../../../properties/ActivityProperties";
+import ShowBodyMediaByContentType from "./ShowBodyMediaByContentType";
+
+const ActivityBodyContent = ({
+  templateType,
+  bodyMap,
+  contentMap,
+  answerMap,
+}: IActivityBodyContentProps) => {
+  let currentQQIndex = 0;
+
+  return (
+    <div className="flex flex-col justify-center items-center">
+      {Object.keys(bodyMap).map((key, index) => {
+        const body = JSON.parse(bodyMap[key]);
+        if (templateType === "DROPDOWN") {
+          while (body.value.includes("@@")) {
+            if (
+              answerMap[currentQQIndex].trim() === "" ||
+              answerMap[currentQQIndex].trim() === "DEFAULT_OPTION"
+            ) {
+              body.value = body.value.replace(
+                "@@",
+                `----(${currentQQIndex + 1})----`
+              );
+            } else {
+              if (contentMap["type"] === "TEXT") {
+                body.value = body.value.replace(
+                  "@@",
+                  `--TEXT--${answerMap[currentQQIndex]}--TEXT--`
+                );
+              } else if (contentMap["type"] === "IMAGE") {
+                body.value = body.value.replace(
+                  "@@",
+                  `--IMAGE--${answerMap[currentQQIndex]}--IMAGE--`
+                );
+              } else if (contentMap["type"] === "VIDEO") {
+                body.value = body.value.replace(
+                  "@@",
+                  `--VIDEO--${answerMap[currentQQIndex]}--VIDEO--`
+                );
+              } else if (contentMap["type"] === "AUDIO") {
+                body.value = body.value.replace(
+                  "@@",
+                  `--AUDIO--${answerMap[currentQQIndex]}--AUDIO--`
+                );
+              } else {
+                body.value = body.value.replace(
+                  "@@",
+                  answerMap[currentQQIndex]
+                );
+              }
+            }
+            currentQQIndex++;
+          }
+        } else if (templateType === "FILL_IN_THE_BLANKS") {
+          while (body.value.includes("@@")) {
+            if (answerMap[currentQQIndex].trim() === "") {
+              body.value = body.value.replace(
+                "@@",
+                `----(${currentQQIndex + 1})----`
+              );
+            } else {
+              if (contentMap["type"] === "TEXT") {
+                body.value = body.value.replace(
+                  "@@",
+                  `--TEXT--${answerMap[currentQQIndex]}--TEXT--`
+                );
+              } else if (contentMap["type"] === "IMAGE") {
+                body.value = body.value.replace(
+                  "@@",
+                  `--IMAGE--${answerMap[currentQQIndex]}--IMAGE--`
+                );
+              } else if (contentMap["type"] === "VIDEO") {
+                body.value = body.value.replace(
+                  "@@",
+                  `--VIDEO--${answerMap[currentQQIndex]}--VIDEO--`
+                );
+              } else if (contentMap["type"] === "AUDIO") {
+                body.value = body.value.replace(
+                  "@@",
+                  `--AUDIO--${answerMap[currentQQIndex]}--AUDIO--`
+                );
+              } else {
+                body.value = body.value.replace(
+                  "@@",
+                  answerMap[currentQQIndex]
+                );
+              }
+            }
+            currentQQIndex++;
+          }
+        }
+
+        return (
+          <ShowBodyMediaByContentType
+            index={index}
+            type={body.type}
+            value={body.value}
+            size={body.size}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default ActivityBodyContent;

package/src/components/activities/body-content/ShowBodyMediaByContentType.tsx

@@ -0,0 +1,404 @@
+import { useState } from "react";
+import Modal from "react-modal";
+import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
+import { InlineMath } from "react-katex";
+import BaseImage from "../../images/BaseImage";
+import i18n from "../../../language/i18n";
+import {
+  IInputPart,
+  IShowBodyMediaByContentTypeProps,
+} from "../../../properties/ActivityProperties";
+
+const ShowBodyMediaByContentType = ({
+  index,
+  type,
+  value,
+  size,
+}: IShowBodyMediaByContentTypeProps) => {
+  const [showFullScreen, setShowFullScreen] = useState<boolean>(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] =
+    useState<string>("");
+
+  const convertToPercentage = (size: string) => {
+    if (size === "1/3") {
+      return "w-small-media";
+    } else if (size === "1/2") {
+      return "w-medium-media";
+    } else if (size === "1") {
+      return "w-large-media";
+    }
+  };
+
+  const retrieveValueParts = (value: string) => {
+    let currentIndex = 0;
+    const valuePartList = [];
+    let copyValue = JSON.parse(JSON.stringify(value));
+    currentIndex = 0;
+    let checkText = "--TEXT--";
+    while (copyValue.includes(checkText)) {
+      const firstIndex = copyValue.indexOf(checkText);
+      let textValue = copyValue.substring(0, firstIndex);
+      let addition = 0;
+      if (textValue.trim() !== "") {
+        if ((textValue.split("__").length - 1) % 2 === 1) {
+          textValue = textValue + "__";
+          addition += 2;
+        }
+        if ((textValue.split("**").length - 1) % 2 === 1) {
+          textValue = textValue + "**";
+          addition += 2;
+        }
+        if ((textValue.split("`").length - 1) % 2 === 1) {
+          textValue = textValue + "`";
+          addition += 1;
+        }
+        valuePartList.push(
+          <span
+            key={`${index}-${currentIndex}`}
+            className="text-xl whitespace-pre-wrap"
+          >
+            {constructInputWithSpecialExpressionList(textValue).map(
+              (inputPart: IInputPart, index: number) => (
+                <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>
+        );
+      }
+      const subValue = copyValue.substring(firstIndex + checkText.length);
+      const secondIndex =
+        subValue.indexOf(checkText) +
+        checkText.length +
+        textValue.length -
+        addition;
+      currentIndex++;
+      valuePartList.push(
+        <span
+          key={`${index}-${currentIndex}`}
+          className={`text-xl font-bold whitespace-pre-wrap`}
+        >
+          {constructInputWithSpecialExpressionList(
+            copyValue.substring(firstIndex + checkText.length, secondIndex)
+          ).map((inputPart: IInputPart, index: number) => (
+            <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>
+      );
+      copyValue = copyValue.substring(secondIndex + checkText.length);
+      if ((copyValue.split("`").length - 1) % 2 === 1) {
+        copyValue = "`" + copyValue;
+      }
+    }
+    checkText = "--IMAGE--";
+    while (copyValue.includes(checkText)) {
+      const firstIndex = copyValue.indexOf(checkText);
+      const textValue = copyValue.substring(0, firstIndex);
+      if (textValue.trim() !== "") {
+        currentIndex++;
+        valuePartList.push(
+          <p key={`${index}_${currentIndex}`} className="text-xl">
+            {textValue}
+          </p>
+        );
+      }
+      const subValue = copyValue.substring(firstIndex + checkText.length);
+      const secondIndex =
+        subValue.indexOf(checkText) + checkText.length + textValue.length;
+      const imageSource = copyValue.substring(
+        firstIndex + checkText.length,
+        secondIndex
+      );
+      currentIndex++;
+      valuePartList.push(
+        <div key={`${index}-${currentIndex}`} className="relative w-[200px]">
+          <BaseImage
+            src={imageSource}
+            alt="media"
+            size="custom"
+            className="rounded-catchup-xlarge"
+          />
+          <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"
+            onClick={(event) => {
+              setShowFullScreen(true);
+              setSelectedFullScreenItem(imageSource);
+            }}
+          >
+            <BaseImage
+              src="/icons/arrow-up.png"
+              alt="arrow-up"
+              size="custom"
+              className="w-full"
+            />
+          </div>
+        </div>
+      );
+      copyValue = copyValue.substring(secondIndex + checkText.length);
+    }
+    checkText = "--VIDEO--";
+    while (copyValue.includes(checkText)) {
+      const firstIndex = copyValue.indexOf(checkText);
+      const textValue = copyValue.substring(0, firstIndex);
+      if (textValue.trim() !== "") {
+        currentIndex++;
+        valuePartList.push(
+          <p key={`${index}-${currentIndex}`} className="text-xl">
+            {textValue}
+          </p>
+        );
+      }
+      const subValue = copyValue.substring(firstIndex + checkText.length);
+      const secondIndex =
+        subValue.indexOf(checkText) + checkText.length + textValue.length;
+      const videoSource = copyValue.substring(
+        firstIndex + checkText.length,
+        secondIndex
+      );
+      currentIndex++;
+      valuePartList.push(
+        <video
+          key={`${index}-${currentIndex}`}
+          src={videoSource}
+          className={`w-[200px] rounded-catchup-xlarge`}
+        />
+      );
+      copyValue = copyValue.substring(secondIndex + checkText.length);
+    }
+    checkText = "--AUDIO--";
+    while (copyValue.includes(checkText)) {
+      const firstIndex = copyValue.indexOf(checkText);
+      const textValue = copyValue.substring(0, firstIndex);
+      if (textValue.trim() !== "") {
+        currentIndex++;
+        valuePartList.push(
+          <p key={`${index}-${currentIndex}`} className="text-xl">
+            {textValue}
+          </p>
+        );
+      }
+      const subValue = copyValue.substring(firstIndex + checkText.length);
+      const secondIndex =
+        subValue.indexOf(checkText) + checkText.length + textValue.length;
+      const audioSource = copyValue.substring(
+        firstIndex + checkText.length,
+        secondIndex
+      );
+      currentIndex++;
+      valuePartList.push(
+        <audio
+          key={`${index}-${currentIndex}`}
+          src={audioSource}
+          className={`w-[200px] rounded-catchup-xlarge`}
+        />
+      );
+      copyValue = copyValue.substring(secondIndex + checkText.length);
+    }
+    if (copyValue.trim() !== "") {
+      currentIndex++;
+      if ((copyValue.split("__").length - 1) % 2 === 1) {
+        copyValue = "__" + copyValue;
+      }
+      if ((copyValue.split("**").length - 1) % 2 === 1) {
+        copyValue = "**" + copyValue;
+      }
+      if ((copyValue.split("`").length - 1) % 2 === 1) {
+        copyValue = "`" + copyValue;
+      }
+      const regexMatchImageText = copyValue.match(/<image>([\s\S]*?)<\/image>/);
+      if (regexMatchImageText) {
+        const imageText = regexMatchImageText[1];
+        valuePartList.push(
+          <div className="bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2">
+            <div className="absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2">
+              <p className="font-bold">{i18n.t("image_description")}</p>
+            </div>
+            <span
+              key={`${index}-${currentIndex}`}
+              className="text-xl whitespace-pre-wrap "
+            >
+              {imageText}
+            </span>
+          </div>
+        );
+      } else {
+        valuePartList.push(
+          <span
+            key={`${index}-${currentIndex}`}
+            className="text-xl whitespace-pre-wrap"
+          >
+            {constructInputWithSpecialExpressionList(copyValue).map(
+              (inputPart: IInputPart, index: number) => (
+                <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>
+        );
+      }
+    }
+    return valuePartList;
+  };
+
+  const RenderShowFullScreenItem = () => {
+    return (
+      <Modal
+        isOpen={showFullScreen}
+        onAfterOpen={() => {}}
+        onRequestClose={() => {
+          setShowFullScreen(false);
+          setSelectedFullScreenItem("");
+        }}
+        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("");
+              }}
+            />
+          </div>
+          <div className="flex items-center justify-center h-[500]">
+            <BaseImage
+              src={selectedFullScreenItem}
+              alt="selected-fullscreen-item"
+              size="custom"
+              className="w-full"
+            />
+          </div>
+        </div>
+      </Modal>
+    );
+  };
+
+  const RenderMainContent = () => {
+    if (type === "TEXT") {
+      return (
+        <div className="mb-3 flex flex-row flex-wrap items-center mx-auto w-full">
+          <span>{retrieveValueParts(value)}</span>
+        </div>
+      );
+    } else if (type === "IMAGE") {
+      return (
+        <div className="mb-3 flex flex-col items-center relative">
+          <div
+            className={`${
+              size ? `${convertToPercentage(size)}` : ""
+            } rounded-catchup-xlarge relative`}
+          >
+            <BaseImage
+              src={value}
+              alt="body-image"
+              size="custom"
+              className="w-full rounded-catchup-xlarge"
+            />
+            <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"
+              onClick={() => {
+                setShowFullScreen(true);
+                setSelectedFullScreenItem(value);
+              }}
+            >
+              <BaseImage
+                src="/icons/arrow-up.png"
+                alt="arrow-up"
+                size="custom"
+                className="w-full"
+              />
+            </div>
+          </div>
+        </div>
+      );
+    } else if (type === "VIDEO") {
+      return (
+        <div className="mb-3 flex flex-col items-center">
+          <video
+            src={value}
+            className={`${
+              size ? `${convertToPercentage(size)}` : ""
+            } rounded-catchup-xlarge`}
+            controls
+          />
+        </div>
+      );
+    } else if (type === "AUDIO") {
+      return (
+        <div className="mb-3 flex flex-col items-center">
+          <audio src={value} controls className={`rounded-catchup-xlarge`} />
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div key={index} className="w-full">
+      {RenderShowFullScreenItem()}
+      {RenderMainContent()}
+    </div>
+  );
+};
+
+export default ShowBodyMediaByContentType;

package/src/components/activities/empty-content/ActivityEmptyContent.tsx

@@ -0,0 +1,15 @@
+import i18n from "../../../language/i18n";
+
+const ActivityEmptyContent = () => {
+  return (
+    <div className="flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 my-5 bg-catchup-orange">
+      <div className="">
+        <p className="text-catchup-white text-xl">
+          {i18n.t("you_have_set_this_activity_as_empty")}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityEmptyContent;