catchup-library-web 2.5.8 → 2.5.10

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

@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
 import { InlineMath } from "react-katex";
-import useScreenSize from "../../../hooks/useScreenSize";
 import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
 import { IOrderingActivityMaterialProps } from "../../../properties/ActivityProperties";
 
@@ -19,7 +18,7 @@ const OrderingActivityMaterialContent = ({
   const [draggedKey, setDraggedKey] = useState<string | null>(null);
   const [dropTargetKey, setDropTargetKey] = useState<string | null>(null);
   const [draggedElement, setDraggedElement] = useState<HTMLElement | null>(
-    null
+    null,
   );
   const dragElementRef = useRef<HTMLDivElement>(null);
   const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({
@@ -30,19 +29,8 @@ const OrderingActivityMaterialContent = ({
     x: 0,
     y: 0,
   });
-  const { screenSize } = useScreenSize();
-  const [view, setView] = useState("PC");
   const [displayAnswerMap, setDisplayAnswerMap] = useState<any>(answerMap);
 
-  useEffect(() => {
-    if (!screenSize) return;
-    if (screenSize.width <= 1024) {
-      setView("TABLET");
-    } else {
-      setView("PC");
-    }
-  }, [screenSize]);
-
   useEffect(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap: any = {};
@@ -63,27 +51,6 @@ const OrderingActivityMaterialContent = ({
     return "INCORRECT";
   };
 
-  const calculateMarginTop = (index: number) => {
-    if (index === 0) {
-      return 0;
-    } else if (index === 1) {
-      if (contentMap.type === "TEXT") {
-        return 65;
-      } else {
-        return 130;
-      }
-    } else if (index % 2 === 0) {
-      if (contentMap.type === "TEXT") {
-        return -65;
-      } else {
-        return -130;
-      }
-    } else if (index % 2 === 1) {
-      return 0;
-    }
-    return 0;
-  };
-
   const handleMouseDown = (e: React.MouseEvent, materialKey: string): void => {
     if (!checkCanAnswerQuestion()) return;
     e.preventDefault();
@@ -125,7 +92,7 @@ const OrderingActivityMaterialContent = ({
   const handleTouchStart = (
     e: React.TouchEvent,
     materialKey: string,
-    element: HTMLElement
+    element: HTMLElement,
   ): void => {
     if (!checkCanAnswerQuestion()) return;
     const touch = e.touches[0];
@@ -144,7 +111,7 @@ const OrderingActivityMaterialContent = ({
     // Find the element under the touch point
     const elementUnder = document.elementFromPoint(
       touch.clientX,
-      touch.clientY
+      touch.clientY,
     );
     const dropZone = elementUnder?.closest("[data-ordering-drop-zone]");
 
@@ -200,10 +167,10 @@ const OrderingActivityMaterialContent = ({
           }}
         >
           {contentMap.type === "TEXT" ? (
-            <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg">
+            <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg">
               <p className="text-xl whitespace-pre-wrap">
                 {constructInputWithSpecialExpressionList(
-                  materialMap[displayAnswerMap[draggedKey]]
+                  materialMap[displayAnswerMap[draggedKey]],
                 ).map((inputPart, index) => (
                   <span
                     key={index}
@@ -223,7 +190,7 @@ const OrderingActivityMaterialContent = ({
               </p>
             </div>
           ) : (
-            <div className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg">
+            <div className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg">
               <ShowMaterialMediaByContentType
                 key={`${uniqueValue}-drag-mouse`}
                 contentType={contentMap.type}
@@ -245,10 +212,10 @@ const OrderingActivityMaterialContent = ({
           }}
         >
           {contentMap.type === "TEXT" ? (
-            <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg">
+            <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg">
               <p className="text-xl whitespace-pre-wrap">
                 {constructInputWithSpecialExpressionList(
-                  materialMap[displayAnswerMap[draggedKey]]
+                  materialMap[displayAnswerMap[draggedKey]],
                 ).map((inputPart, index) => (
                   <span
                     key={index}
@@ -268,7 +235,7 @@ const OrderingActivityMaterialContent = ({
               </p>
             </div>
           ) : (
-            <div className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg">
+            <div className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg">
               <ShowMaterialMediaByContentType
                 key={`${uniqueValue}-drag-touch`}
                 contentType={contentMap.type}
@@ -283,18 +250,12 @@ const OrderingActivityMaterialContent = ({
       {Object.keys(displayAnswerMap).map((materialKey, index) => {
         const learnerAnswerState = checkAnswerState(
           displayAnswerMap[materialKey] + "",
-          index + ""
+          index + "",
         );
         return (
-          <div className="w-full lg:w-1/2" key={index}>
+          <div className="w-full" 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="h-catchup-activity-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-y-auto">
@@ -317,8 +278,8 @@ const OrderingActivityMaterialContent = ({
                   draggedKey === materialKey
                     ? "opacity-40"
                     : selectedKey === materialKey
-                    ? "ring-2 ring-blue-500"
-                    : "opacity-100"
+                      ? "ring-2 ring-blue-500"
+                      : "opacity-100"
                 } ${
                   dropTargetKey === materialKey && draggedKey !== materialKey
                     ? "ring-2 ring-blue-400 bg-blue-50"
@@ -346,15 +307,15 @@ const OrderingActivityMaterialContent = ({
                     learnerAnswerState === "CORRECT"
                       ? "border-catchup-green"
                       : learnerAnswerState === "INCORRECT"
-                      ? "border-catchup-red"
-                      : "border-catchup-blue"
+                        ? "border-catchup-red"
+                        : "border-catchup-blue"
                   }`}
                   onClick={() => handleSelectItem(materialKey)}
                 >
                   {contentMap.type === "TEXT" ? (
                     <p className="text-xl whitespace-pre-wrap">
                       {constructInputWithSpecialExpressionList(
-                        materialMap[displayAnswerMap[materialKey]]
+                        materialMap[displayAnswerMap[materialKey]],
                       ).map((inputPart, index) => (
                         <span
                           key={index}

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

@@ -100,7 +100,7 @@ const ShowMaterialMediaByContentType = ({
             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 bg-white bg-opacity-80"
+                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 bg-catchup-white bg-opacity-80"
                 onMouseEnter={(e) => {
                   e.preventDefault();
                 }}

package/src/components/groups/InputGroup.tsx

@@ -178,7 +178,7 @@ const InputGroup = ({
           setShowMathConstructor(false);
         }}
       >
-        <div className="bg-white rounded-lg overflow-hidden">
+        <div className="bg-catchup-white rounded-lg overflow-hidden">
           <div className="p-6 space-y-6">
             <div>
               <div className="border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input">
@@ -482,7 +482,7 @@ const InputGroup = ({
               ? "border-catchup-red shadow-error"
               : "border-catchup-gray-100"
           } rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${
-            disabled ? "bg-catchup-lighter-gray" : "bg-white"
+            disabled ? "bg-catchup-lighter-gray" : "bg-catchup-white"
           }`}
         >
           <input

package/src/components/groups/PageTravelGroup.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { IPageTravelGroupProps } from "../../properties/GroupProperties";
-import BaseImage from "../images/BaseImage";
 
 const PageTravelGroup = ({
   isImageProcessing,
@@ -22,92 +21,53 @@ const PageTravelGroup = ({
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
 
-  return (
-    <div className="flex-1 flex flex-row justify-center items-center flex-wrap">
-      {pageNumber === 0 ? null : (
-        <div className="px-2 flex flex-col items-center">
-          <BaseImage
-            size="small"
-            alt="arrow-left"
-            src="/icons/arrow-left.webp"
-            onClick={() => {
-              if (isImageProcessing) {
-                handleImageProcessing();
-              } else {
-                if (pageNumber - 1 >= 0) {
-                  setPageNumber(pageNumber - 1);
-                }
-                setImageReady(false);
-              }
-            }}
-          />
-        </div>
-      )}
-      {Array.from(Array(totalPageNumber).keys())
-        .filter((index) => index < pageNumber + 5)
-        .filter((index) => index > pageNumber - 5)
-        .map((index) => (
-          <div key={index} className="px-2">
-            <p
-              className={`${
-                pageNumber === index ? "text-xl" : "text-md"
-              } cursor-pointer`}
-              onClick={() => {
-                if (isImageProcessing) {
-                  handleImageProcessing();
-                } else {
-                  setPageNumber(index);
-                  setImageReady(false);
-                }
-              }}
-            >
-              {index + 1}
-            </p>
-          </div>
-        ))}
-
-      {totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : (
-        <div className="px-2 flex flex-col items-center">
-          <BaseImage
-            size="small"
-            alt="arrow-right"
-            src="/icons/arrow-right.webp"
-            onClick={() => {
-              if (isImageProcessing) {
-                handleImageProcessing();
-              } else {
-                if (pageNumber + 1 <= totalPageNumber) {
-                  setPageNumber(pageNumber + 1);
-                }
+  const handlePageChange = (newPage: number) => {
+    if (isImageProcessing) {
+      handleImageProcessing();
+    } else {
+      setPageNumber(newPage);
+      setImageReady(false);
+    }
+  };
 
-                setImageReady(false);
-              }
-            }}
-          />
-        </div>
-      )}
-      <div>
-        <input
-          className={`w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input`}
-          type="number"
-          value={newPageNumber}
-          onChange={(e) => {
-            const inputPageNumber = parseInt(e.target.value);
-            setNewPageNumber(inputPageNumber);
-          }}
-          onKeyDown={(e) => {
-            if (
-              isNaN(newPageNumber) ||
-              newPageNumber <= 0 ||
-              newPageNumber > totalPageNumber
-            )
-              return;
-            if (e.key === "Enter") {
-              setPageNumber(newPageNumber - 1);
-            }
-          }}
-        />
-      </div>
+  return (
+    <div className="flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2">
+      <button
+        className="px-2 py-1 bg-catchup-blue-100 rounded-catchup-small"
+        disabled={pageNumber <= 0}
+        onClick={() => handlePageChange(pageNumber - 1)}
+      >
+        ←
+      </button>
+      <p className="text-md">
+        {pageNumber + 1} / {totalPageNumber}
+      </p>
+      <button
+        className="px-2 py-1 bg-catchup-blue-100 rounded-catchup-small"
+        disabled={pageNumber >= totalPageNumber - 1}
+        onClick={() => handlePageChange(pageNumber + 1)}
+      >
+        →
+      </button>
+      <input
+        className="w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input"
+        type="number"
+        value={newPageNumber}
+        onChange={(e) => {
+          setNewPageNumber(parseInt(e.target.value));
+        }}
+        onKeyDown={(e) => {
+          if (
+            isNaN(newPageNumber) ||
+            newPageNumber <= 0 ||
+            newPageNumber > totalPageNumber
+          )
+            return;
+          if (e.key === "Enter") {
+            handlePageChange(newPageNumber - 1);
+          }
+        }}
+      />
     </div>
   );
 };

package/src/properties/ActivityProperties.ts

@@ -26,6 +26,7 @@ export interface IOrderingActivityProps {
   changeAnswer: (e: any) => void;
   isPreview: boolean;
   showCorrectAnswer: boolean;
+  isFullScreen: boolean;
 }
 
 export interface IOrderingActivityMaterialProps {
@@ -129,6 +130,7 @@ export interface IMatchingActivityProps {
   changeAnswer: (e: any) => void;
   isPreview: boolean;
   showCorrectAnswer: boolean;
+  isFullScreen: boolean;
 }
 
 export interface IMatchingActivityMaterialProps {