catchup-library-web 1.21.0 → 1.21.2

package/dist/index.js

@@ -5080,7 +5080,7 @@ var FillInTheBlanksActivityMaterialContent = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
-          (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             ShowMaterialMediaByContentType_default,
             {
               contentType: contentMap.type,
@@ -5088,7 +5088,7 @@ var FillInTheBlanksActivityMaterialContent = ({
               canFullScreen: true
             },
             `${uniqueValue}-${index}`
-          ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "div",
             {
               ref: draggedOption === option ? dragElementRef : null,
@@ -5762,6 +5762,7 @@ var MatchingActivityMaterialContent = ({
     y: 0
   });
   const itemsRef = (0, import_react21.useRef)(null);
+  const dropZoneRefs = (0, import_react21.useRef)({});
   (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5787,6 +5788,17 @@ var MatchingActivityMaterialContent = ({
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
+  (0, import_react21.useEffect)(() => {
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+    }
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5989,7 +6001,7 @@ var MatchingActivityMaterialContent = ({
       ),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
+    Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
@@ -5999,22 +6011,23 @@ var MatchingActivityMaterialContent = ({
           "div",
           {
             className: `${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 transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-              answerMapKey
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-              "span",
-              {
-                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
-              },
-              index2
-            )) }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+              (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                "span",
+                {
+                  className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                  children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                },
+                index2
+              )
+            ) }) })
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "div",
           {
+            ref: (el) => dropZoneRefs.current[answerMapKey] = el,
             "data-matching-drop-zone": answerMapKey,
             onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
             onMouseLeave: () => setDropTargetKey(null),
@@ -6054,7 +6067,7 @@ var MatchingActivityMaterialContent = ({
           }
         ) })
       ] }, index);
-    }) })
+    })
   ] });
 };
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;

package/dist/index.mjs

@@ -4864,7 +4864,7 @@ var FillInTheBlanksActivityMaterialContent = ({
           }
         ),
         /* @__PURE__ */ jsx28("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
-          (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ jsx28("div", { className: "opacity-30", children: /* @__PURE__ */ jsx28(
+          (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ jsx28(
             ShowMaterialMediaByContentType_default,
             {
               contentType: contentMap.type,
@@ -4872,7 +4872,7 @@ var FillInTheBlanksActivityMaterialContent = ({
               canFullScreen: true
             },
             `${uniqueValue}-${index}`
-          ) }, index) : /* @__PURE__ */ jsx28(
+          ) : /* @__PURE__ */ jsx28(
             "div",
             {
               ref: draggedOption === option ? dragElementRef : null,
@@ -5546,6 +5546,7 @@ var MatchingActivityMaterialContent = ({
     y: 0
   });
   const itemsRef = useRef6(null);
+  const dropZoneRefs = useRef6({});
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5571,6 +5572,17 @@ var MatchingActivityMaterialContent = ({
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
+  useEffect11(() => {
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+    }
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5773,7 +5785,7 @@ var MatchingActivityMaterialContent = ({
       ),
       /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx32(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ jsx32("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => {
+    Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
@@ -5783,22 +5795,23 @@ var MatchingActivityMaterialContent = ({
           "div",
           {
             className: `${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 transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-            children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-              answerMapKey
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
-              "span",
-              {
-                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-xl", children: /* @__PURE__ */ jsx32(InlineMath6, { math: inputPart.value }) }) : inputPart.value
-              },
-              index2
-            )) }) })
+            children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4 text-center", children: /* @__PURE__ */ jsx32("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+              (inputPart, index2) => /* @__PURE__ */ jsx32(
+                "span",
+                {
+                  className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                  children: inputPart.isEquation ? /* @__PURE__ */ jsx32("span", { className: "text-xl", children: /* @__PURE__ */ jsx32(InlineMath6, { math: inputPart.value }) }) : inputPart.value
+                },
+                index2
+              )
+            ) }) })
           }
         ) }),
         /* @__PURE__ */ jsx32("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
         /* @__PURE__ */ jsx32("div", { className: "flex-1", children: /* @__PURE__ */ jsx32(
           "div",
           {
+            ref: (el) => dropZoneRefs.current[answerMapKey] = el,
             "data-matching-drop-zone": answerMapKey,
             onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
             onMouseLeave: () => setDropTargetKey(null),
@@ -5838,7 +5851,7 @@ var MatchingActivityMaterialContent = ({
           }
         ) })
       ] }, index);
-    }) })
+    })
   ] });
 };
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.21.00",
+  "version": "1.21.02",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

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

@@ -261,14 +261,12 @@ const FillInTheBlanksActivityMaterialContent = ({
       <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>
+            <ShowMaterialMediaByContentType
+              key={`${uniqueValue}-${index}`}
+              contentType={contentMap.type}
+              src={option}
+              canFullScreen={true}
+            />
           ) : (
             <div
               key={index}

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

@@ -33,6 +33,7 @@ const MatchingActivityMaterialContent = ({
     y: 0,
   });
   const itemsRef = useRef<HTMLDivElement>(null);
+  const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
 
   useEffect(() => {
     const shuffleArray = (array: any) => {
@@ -61,6 +62,19 @@ const MatchingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
 
+  // Auto-scroll to center the drop zone when hovering
+  useEffect(() => {
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      }
+    }
+  }, [dropTargetKey]);
+
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "MATCHING"
@@ -365,36 +379,34 @@ const MatchingActivityMaterialContent = ({
         </>
       ) : null}
 
-      <div className="overflow-y-auto max-h-[500px]">
-        {Object.keys(answerMap).map((answerMapKey, index) => {
-          const learnerAnswerState = checkAnswerState(
-            materialMap[answerMapKey],
-            answerMap[answerMapKey]
-          );
+      {Object.keys(answerMap).map((answerMapKey, index) => {
+        const learnerAnswerState = checkAnswerState(
+          materialMap[answerMapKey],
+          answerMap[answerMapKey]
+        );
 
-          return (
-            <div key={index} className="flex flex-row w-full">
-              <div className="w-1/3">
-                <div
-                  className={`${
-                    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 transition-all duration-300 my-3 ${
-                    learnerAnswerState === "EMPTY"
-                      ? "border-catchup-blue"
-                      : learnerAnswerState === "CORRECT"
-                      ? "border-catchup-green"
-                      : learnerAnswerState === "INCORRECT"
-                      ? "border-catchup-red"
-                      : "border-catchup-blue"
-                  }`}
-                >
-                  <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) => (
+        return (
+          <div key={index} className="flex flex-row w-full">
+            <div className="w-1/3">
+              <div
+                className={`${
+                  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 transition-all duration-300 my-3 ${
+                  learnerAnswerState === "EMPTY"
+                    ? "border-catchup-blue"
+                    : learnerAnswerState === "CORRECT"
+                    ? "border-catchup-green"
+                    : learnerAnswerState === "INCORRECT"
+                    ? "border-catchup-red"
+                    : "border-catchup-blue"
+                }`}
+              >
+                <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" : ""} ${
@@ -409,86 +421,87 @@ const MatchingActivityMaterialContent = ({
                             inputPart.value
                           )}
                         </span>
-                      ))}
-                    </p>
-                  </div>
+                      )
+                    )}
+                  </p>
                 </div>
               </div>
-              <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
-              <div className="flex-1">
+            </div>
+            <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
+            <div className="flex-1">
+              <div
+                ref={(el) => (dropZoneRefs.current[answerMapKey] = el)}
+                data-matching-drop-zone={answerMapKey}
+                onMouseEnter={() =>
+                  draggedValue && setDropTargetKey(answerMapKey)
+                }
+                onMouseLeave={() => setDropTargetKey(null)}
+                onClick={() => handleDropZoneClick(answerMapKey)}
+                className={`${
+                  dropTargetKey === answerMapKey
+                    ? "bg-catchup-light-blue ring-2 ring-blue-400"
+                    : ""
+                } ${
+                  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 my-3 ${
+                  learnerAnswerState === "EMPTY"
+                    ? "border-catchup-blue"
+                    : learnerAnswerState === "CORRECT"
+                    ? "border-catchup-green"
+                    : learnerAnswerState === "INCORRECT"
+                    ? "border-catchup-red"
+                    : "border-catchup-blue"
+                }`}
+              >
                 <div
-                  data-matching-drop-zone={answerMapKey}
-                  onMouseEnter={() =>
-                    draggedValue && setDropTargetKey(answerMapKey)
-                  }
-                  onMouseLeave={() => setDropTargetKey(null)}
-                  onClick={() => handleDropZoneClick(answerMapKey)}
-                  className={`${
-                    dropTargetKey === answerMapKey
-                      ? "bg-catchup-light-blue ring-2 ring-blue-400"
-                      : ""
-                  } ${
-                    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 my-3 ${
-                    learnerAnswerState === "EMPTY"
-                      ? "border-catchup-blue"
-                      : learnerAnswerState === "CORRECT"
-                      ? "border-catchup-green"
-                      : learnerAnswerState === "INCORRECT"
-                      ? "border-catchup-red"
-                      : "border-catchup-blue"
-                  }`}
+                  className="h-full flex-1 flex flex-row items-center justify-center px-4"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (checkCanAnswerQuestion() && answerMap[answerMapKey]) {
+                      onChange(answer, answerMapKey, null);
+                      setSelectedValue(null);
+                    }
+                  }}
                 >
-                  <div
-                    className="h-full flex-1 flex flex-row items-center justify-center px-4"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      if (checkCanAnswerQuestion() && answerMap[answerMapKey]) {
-                        onChange(answer, answerMapKey, null);
-                        setSelectedValue(null);
-                      }
-                    }}
-                  >
-                    {answerMap[answerMapKey] ? (
-                      contentMap.type === "TEXT" ? (
-                        <p className="text-lg whitespace-pre-wrap">
-                          {constructInputWithSpecialExpressionList(
-                            answerMap[answerMapKey]
-                          ).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>
-                      ) : (
-                        <ShowMaterialMediaByContentType
-                          key={`${uniqueValue}-${index}`}
-                          contentType={contentMap.type}
-                          src={answerMap[answerMapKey]}
-                          canFullScreen={false}
-                        />
-                      )
-                    ) : null}
-                  </div>
+                  {answerMap[answerMapKey] ? (
+                    contentMap.type === "TEXT" ? (
+                      <p className="text-lg whitespace-pre-wrap">
+                        {constructInputWithSpecialExpressionList(
+                          answerMap[answerMapKey]
+                        ).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>
+                    ) : (
+                      <ShowMaterialMediaByContentType
+                        key={`${uniqueValue}-${index}`}
+                        contentType={contentMap.type}
+                        src={answerMap[answerMapKey]}
+                        canFullScreen={false}
+                      />
+                    )
+                  ) : null}
                 </div>
               </div>
             </div>
-          );
-        })}
-      </div>
+          </div>
+        );
+      })}
     </div>
   );
 };