catchup-library-web 2.5.14 → 2.5.16

package/dist/index.d.mts

@@ -171,6 +171,7 @@ interface IGroupingActivityProps {
     changeAnswer: (e: any) => void;
     isPreview: boolean;
     showCorrectAnswer: boolean;
+    isFullScreen: boolean;
 }
 interface IMatchingActivityProps {
     answerMap: any;
@@ -238,7 +239,7 @@ declare const DropdownActivityContent: ({ answerMap, data, canAnswerQuestion, ch
 
 declare const FillInTheBlanksActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IFillInTheBlanksActivityProps) => react_jsx_runtime.JSX.Element;
 
-declare const GroupingActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, }: IGroupingActivityProps) => react_jsx_runtime.JSX.Element;
+declare const GroupingActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IGroupingActivityProps) => react_jsx_runtime.JSX.Element;
 
 declare const MatchingActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IMatchingActivityProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -171,6 +171,7 @@ interface IGroupingActivityProps {
     changeAnswer: (e: any) => void;
     isPreview: boolean;
     showCorrectAnswer: boolean;
+    isFullScreen: boolean;
 }
 interface IMatchingActivityProps {
     answerMap: any;
@@ -238,7 +239,7 @@ declare const DropdownActivityContent: ({ answerMap, data, canAnswerQuestion, ch
 
 declare const FillInTheBlanksActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IFillInTheBlanksActivityProps) => react_jsx_runtime.JSX.Element;
 
-declare const GroupingActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, }: IGroupingActivityProps) => react_jsx_runtime.JSX.Element;
+declare const GroupingActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IGroupingActivityProps) => react_jsx_runtime.JSX.Element;
 
 declare const MatchingActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IMatchingActivityProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -3819,7 +3819,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col justify-center items-center h-full overflow-y-auto", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col h-full overflow-y-auto", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -5670,7 +5670,8 @@ var GroupingActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
-  showCorrectAnswer
+  showCorrectAnswer,
+  isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
   const groupingBodyMap = parseBodyMapFromData(data, "GROUPING");
@@ -5684,16 +5685,17 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: groupingBodyMap,
         templateType: "GROUPING"
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       GroupingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5705,7 +5707,7 @@ var GroupingActivityContent = ({
         isPreview,
         showCorrectAnswer
       }
-    )
+    ) })
   ] });
 };
 var GroupingActivityContent_default = GroupingActivityContent;

package/dist/index.mjs

@@ -3585,7 +3585,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ jsx21("div", { className: "flex flex-col justify-center items-center h-full overflow-y-auto", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx21("div", { className: "flex flex-col h-full overflow-y-auto", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx21(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -5429,14 +5429,15 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 
 // src/components/activities/GroupingActivityContent.tsx
-import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var GroupingActivityContent = ({
   answerMap,
   data,
   canAnswerQuestion,
   changeAnswer,
   isPreview,
-  showCorrectAnswer
+  showCorrectAnswer,
+  isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
   const groupingBodyMap = parseBodyMapFromData(data, "GROUPING");
@@ -5450,16 +5451,17 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs22(Fragment4, { children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ jsx32("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx32(
       ActivityBodyContent_default,
       {
         bodyMap: groupingBodyMap,
         templateType: "GROUPING"
       }
-    ),
-    /* @__PURE__ */ jsx32(DividerLine_default, {}),
-    /* @__PURE__ */ jsx32(
+    ) }),
+    /* @__PURE__ */ jsx32("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx32(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx32("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx32(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx32("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx32(
       GroupingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5471,7 +5473,7 @@ var GroupingActivityContent = ({
         isPreview,
         showCorrectAnswer
       }
-    )
+    ) })
   ] });
 };
 var GroupingActivityContent_default = GroupingActivityContent;
@@ -5479,7 +5481,7 @@ var GroupingActivityContent_default = GroupingActivityContent;
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
 import { useEffect as useEffect11, useRef as useRef6, useState as useState20 } from "react";
 import { InlineMath as InlineMath6 } from "react-katex";
-import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5726,7 +5728,7 @@ var MatchingActivityMaterialContent = ({
         ) })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs23(Fragment5, { children: [
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
       /* @__PURE__ */ jsx33(
         "div",
         {
@@ -6289,7 +6291,7 @@ var retrieveAcceptedFormats = (fileType) => {
 };
 
 // src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx
-import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 var OpenEndedActivityMaterialContent = ({
   answerMap,
   contentMap,
@@ -6346,7 +6348,7 @@ var OpenEndedActivityMaterialContent = ({
     const answerMapAnswer = answerMap2["ANSWER"];
     const extension = answerMapAnswer.split(".").pop();
     const fileType = retrieveFileTypeFromExtension(extension);
-    return /* @__PURE__ */ jsx39(Fragment6, { children: fileType === "IMAGE" ? /* @__PURE__ */ jsx39("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx39(Fragment5, { children: fileType === "IMAGE" ? /* @__PURE__ */ jsx39("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx39(
       BaseImage_default,
       {
         src: answerMapAnswer,
@@ -6369,7 +6371,7 @@ var OpenEndedActivityMaterialContent = ({
       }
     ) });
   };
-  return /* @__PURE__ */ jsx39(Fragment6, { children: /* @__PURE__ */ jsxs29("div", { className: "", children: [
+  return /* @__PURE__ */ jsx39(Fragment5, { children: /* @__PURE__ */ jsxs29("div", { className: "", children: [
     /* @__PURE__ */ jsx39("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx39("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
     /* @__PURE__ */ jsx39("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx39(DividerLine_default, {}) }),
     contentMap.type === "TEXT" ? RenderTextContent(answerMap) : contentMap.type === "IMAGE" ? RenderImageContent(answerMap) : contentMap.type === "AUDIO" ? RenderAudioContent(answerMap) : null
@@ -6378,7 +6380,7 @@ var OpenEndedActivityMaterialContent = ({
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 
 // src/components/activities/OpenEndedActivityContent.tsx
-import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var OpenEndedActivityContent = ({
   answerMap,
   data,
@@ -6409,7 +6411,7 @@ var OpenEndedActivityContent = ({
         )
       }
     ),
-    showMaterialContent ? /* @__PURE__ */ jsxs30(Fragment7, { children: [
+    showMaterialContent ? /* @__PURE__ */ jsxs30(Fragment6, { children: [
       /* @__PURE__ */ jsx40(
         "div",
         {
@@ -6734,7 +6736,7 @@ var OrderingActivityContent_default = OrderingActivityContent;
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
 import { useEffect as useEffect15, useState as useState24 } from "react";
 import { InlineMath as InlineMath10 } from "react-katex";
-import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6840,7 +6842,7 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ jsxs33(Fragment8, { children: [
+    }) }) : /* @__PURE__ */ jsxs33(Fragment7, { children: [
       displayAnswerMap.trueList.map((item) => /* @__PURE__ */ jsxs33("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ jsx43("div", { className: "flex-1", children: /* @__PURE__ */ jsx43("p", { children: item }) }),
         /* @__PURE__ */ jsx43("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx43("p", { className: "underline", children: i18n_default.t("true") }) })
@@ -7093,7 +7095,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var ACTIVITY_TEMPLATE_LIST = [
   { type: "ORDERING", materialMap: "orderingMaterialMap" },
   { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
@@ -7202,42 +7204,42 @@ var ActivityPreviewByData = ({
     }
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(OrderingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(DropdownActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(MCSAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(MCMAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(MatchingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(GroupingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(
             OpenEndedActivityContent_default,
@@ -7247,7 +7249,7 @@ var ActivityPreviewByData = ({
           )
         ] }) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
@@ -7257,7 +7259,7 @@ var ActivityPreviewByData = ({
   };
   if (!data) return null;
   return /* @__PURE__ */ jsxs38("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
       /* @__PURE__ */ jsxs38("div", { className: "mb-2", children: [
         showDescription ? /* @__PURE__ */ jsx48("div", { className: "my-2", children: /* @__PURE__ */ jsx48("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
         /* @__PURE__ */ jsx48(

package/package.json

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

package/src/components/activities/GroupingActivityContent.tsx

@@ -5,6 +5,7 @@ import {
   parseMaterialMapFromData,
 } from "../../utilization/CatchtivityUtilization";
 import DividerLine from "../dividers/DividerLine";
+import VerticalDividerLine from "../dividers/VerticalDividerLine";
 import ActivityBodyContent from "./body-contents/ActivityBodyContent";
 import GroupingActivityMaterialContent from "./material-contents/GroupingActivityMaterialContent";
 
@@ -15,6 +16,7 @@ const GroupingActivityContent = ({
   changeAnswer,
   isPreview,
   showCorrectAnswer,
+  isFullScreen,
 }: IGroupingActivityProps) => {
   const contentMap = parseContentMapFromData(data);
   const groupingBodyMap = parseBodyMapFromData(data, "GROUPING");
@@ -36,23 +38,32 @@ const GroupingActivityContent = ({
   };
 
   return (
-    <>
-      <ActivityBodyContent
-        bodyMap={groupingBodyMap}
-        templateType={"GROUPING"}
-      />
-      <DividerLine />
-      <GroupingActivityMaterialContent
-        uniqueValue={JSON.stringify(data.contentMap)}
-        answerMap={answerMap}
-        materialMap={groupingMaterialMap}
-        contentMap={contentMap}
-        checkCanAnswerQuestion={canAnswerQuestion}
-        onChange={handleGroupingAnswerOnChange}
-        isPreview={isPreview}
-        showCorrectAnswer={showCorrectAnswer}
-      />
-    </>
+    <div className="flex flex-row flex-wrap h-full">
+      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`}>
+        <ActivityBodyContent
+          bodyMap={groupingBodyMap}
+          templateType={"GROUPING"}
+        />
+      </div>
+      <div className={`${isFullScreen ? "contents" : "contents md:hidden"}`}>
+        <DividerLine />
+      </div>
+      <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
+        <VerticalDividerLine />
+      </div>
+      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
+        <GroupingActivityMaterialContent
+          uniqueValue={JSON.stringify(data.contentMap)}
+          answerMap={answerMap}
+          materialMap={groupingMaterialMap}
+          contentMap={contentMap}
+          checkCanAnswerQuestion={canAnswerQuestion}
+          onChange={handleGroupingAnswerOnChange}
+          isPreview={isPreview}
+          showCorrectAnswer={showCorrectAnswer}
+        />
+      </div>
+    </div>
   );
 };
 

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

@@ -13,7 +13,7 @@ const ActivityBodyContent = ({
     bodyValue: string,
     contentType: string,
     answerMap: string[],
-    startIndex: number
+    startIndex: number,
   ) => {
     let currentQQIndex = startIndex;
     let processedValue = bodyValue;
@@ -31,7 +31,7 @@ const ActivityBodyContent = ({
       if (isEmpty) {
         processedValue = processedValue.replace(
           "@@",
-          () => `----(${currentQQIndex + 1})----`
+          () => `----(${currentQQIndex + 1})----`,
         );
       } else {
         const trimmedAnswer =
@@ -41,25 +41,25 @@ const ActivityBodyContent = ({
           case "TEXT":
             processedValue = processedValue.replace(
               "@@",
-              () => `--TEXT--${trimmedAnswer}--TEXT--`
+              () => `--TEXT--${trimmedAnswer}--TEXT--`,
             );
             break;
           case "IMAGE":
             processedValue = processedValue.replace(
               "@@",
-              () => `--IMAGE--${trimmedAnswer}--IMAGE--`
+              () => `--IMAGE--${trimmedAnswer}--IMAGE--`,
             );
             break;
           case "VIDEO":
             processedValue = processedValue.replace(
               "@@",
-              () => `--VIDEO--${trimmedAnswer}--VIDEO--`
+              () => `--VIDEO--${trimmedAnswer}--VIDEO--`,
             );
             break;
           case "AUDIO":
             processedValue = processedValue.replace(
               "@@",
-              () => `--AUDIO--${trimmedAnswer}--AUDIO--`
+              () => `--AUDIO--${trimmedAnswer}--AUDIO--`,
             );
             break;
           default:
@@ -93,7 +93,7 @@ const ActivityBodyContent = ({
           body.value,
           contentType,
           answerMap,
-          globalAnswerIndex
+          globalAnswerIndex,
         );
         body.value = result.processedValue;
         globalAnswerIndex = result.currentQQIndex;
@@ -107,7 +107,7 @@ const ActivityBodyContent = ({
     .filter(Boolean);
 
   return (
-    <div className="flex flex-col justify-center items-center h-full overflow-y-auto">
+    <div className="flex flex-col h-full overflow-y-auto">
       {processedBodies.map((body, index) => (
         <ShowBodyMediaByContentType
           key={`body-${body.key}-${index}`}

package/src/properties/ActivityProperties.ts

@@ -110,6 +110,7 @@ export interface IGroupingActivityProps {
   changeAnswer: (e: any) => void;
   isPreview: boolean;
   showCorrectAnswer: boolean;
+  isFullScreen: boolean;
 }
 
 export interface IGroupingActivityMaterialProps {