catchup-library-web 1.20.28 → 1.20.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.js +165 -137
  2. package/dist/index.mjs +165 -137
  3. package/package.json +1 -1
  4. package/src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx +30 -11
  5. package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx +10 -0
  6. package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx +10 -0
  7. package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx +5 -0
package/dist/index.js CHANGED
@@ -5006,158 +5006,161 @@ var FillInTheBlanksActivityMaterialContent = ({
5006
5006
  const checkAnswerProvided = (answerMap2, option) => {
5007
5007
  return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
5008
5008
  };
5009
+ const handleSelectOption = (option) => {
5010
+ setSelectedOption(option);
5011
+ setPasteOptionIndex(null);
5012
+ };
5009
5013
  const answerMap = retrieveAnswerMap();
5010
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
5011
- }, children: [
5012
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
5013
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}) }),
5014
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
5015
- (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5016
- ShowMaterialMediaByContentType_default,
5017
- {
5018
- contentType: contentMap.type,
5019
- src: option,
5020
- canFullScreen: true
5021
- },
5022
- `${uniqueValue}-${index}`
5023
- ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5024
- DraggableItem_default,
5025
- {
5026
- item: { index: option },
5027
- type: "FILL_IN_THE_BLANKS",
5028
- component: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5029
- "div",
5014
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
5015
+ "div",
5016
+ {
5017
+ className: "flex flex-row flex-wrap items-center",
5018
+ children: [
5019
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
5020
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}) }),
5021
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
5022
+ (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5023
+ ShowMaterialMediaByContentType_default,
5030
5024
  {
5031
- className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer",
5032
- onMouseDown: () => {
5033
- setSelectedOption(option);
5034
- setPasteOptionIndex(null);
5035
- },
5036
- children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5037
- InputWithSpecialExpression_default,
5038
- {
5039
- value: option,
5040
- showSpecialOnly: false
5041
- }
5042
- ) })
5043
- }
5044
- ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5045
- "div",
5025
+ contentType: contentMap.type,
5026
+ src: option,
5027
+ canFullScreen: true
5028
+ },
5029
+ `${uniqueValue}-${index}`
5030
+ ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5031
+ DraggableItem_default,
5046
5032
  {
5047
- className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
5048
- onMouseDown: () => {
5049
- setSelectedOption(option);
5050
- setPasteOptionIndex(null);
5051
- },
5052
- children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5053
- ShowMaterialMediaByContentType_default,
5054
- {
5055
- contentType: contentMap.type,
5056
- src: option,
5057
- canFullScreen: true
5058
- },
5059
- `${uniqueValue}-${index}`
5060
- )
5061
- }
5062
- ),
5063
- moveCardHandler: () => {
5064
- onChange(answer, pasteOptionIndex, selectedOption);
5065
- }
5066
- },
5067
- index
5068
- )
5069
- ) }),
5070
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
5071
- const learnerAnswerState = checkAnswerState(
5072
- JSON.parse(materialMap[materialKey]),
5073
- answerMap[materialKey]
5074
- );
5075
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5076
- DroppableItem_default,
5077
- {
5078
- item: { index },
5079
- type: "FILL_IN_THE_BLANKS",
5080
- target: pasteOptionIndex,
5081
- setTarget: setPasteOptionIndex,
5082
- dropRef: drop,
5083
- component: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
5084
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { className: "text-xl", children: [
5085
- parseFloat(materialKey) + 1,
5086
- "."
5087
- ] }) }),
5088
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative", children: [
5089
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5033
+ item: { index: option },
5034
+ type: "FILL_IN_THE_BLANKS",
5035
+ component: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5090
5036
  "div",
5091
5037
  {
5092
- className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
5093
- onClick: () => {
5094
- if (answerMap[materialKey]) {
5095
- onChange(answer, materialKey, "");
5096
- }
5097
- },
5098
- children: answerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5038
+ className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
5039
+ onClick: () => handleSelectOption(option),
5040
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5099
5041
  InputWithSpecialExpression_default,
5100
5042
  {
5101
- value: answerMap[materialKey],
5043
+ value: option,
5102
5044
  showSpecialOnly: false
5103
5045
  }
5104
- ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-gray-400 italic" })
5046
+ ) })
5105
5047
  }
5106
- ) }),
5107
- learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5108
- BaseImage_default,
5109
- {
5110
- src: "/icons/checkbox.webp",
5111
- alt: "checkbox",
5112
- size: "small"
5113
- }
5114
- ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5115
- BaseImage_default,
5048
+ ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5049
+ "div",
5116
5050
  {
5117
- src: "/icons/cross-red.webp",
5118
- alt: "cross-red",
5119
- size: "small"
5051
+ className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
5052
+ onClick: () => handleSelectOption(option),
5053
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5054
+ ShowMaterialMediaByContentType_default,
5055
+ {
5056
+ contentType: contentMap.type,
5057
+ src: option,
5058
+ canFullScreen: true
5059
+ },
5060
+ `${uniqueValue}-${index}`
5061
+ )
5120
5062
  }
5121
- ) }) : null
5122
- ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5123
- "div",
5124
- {
5125
- className: `w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
5126
- children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
5063
+ ),
5064
+ moveCardHandler: () => {
5065
+ onChange(answer, pasteOptionIndex, selectedOption);
5127
5066
  }
5128
- ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5129
- "div",
5130
- {
5131
- className: "flex-1 cursor-pointer",
5132
- onClick: () => {
5133
- onChange(answer, materialKey, "");
5134
- },
5135
- children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5136
- ShowMaterialMediaByContentType_default,
5067
+ },
5068
+ index
5069
+ )
5070
+ ) }),
5071
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
5072
+ const learnerAnswerState = checkAnswerState(
5073
+ JSON.parse(materialMap[materialKey]),
5074
+ answerMap[materialKey]
5075
+ );
5076
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5077
+ DroppableItem_default,
5078
+ {
5079
+ item: { index },
5080
+ type: "FILL_IN_THE_BLANKS",
5081
+ target: pasteOptionIndex,
5082
+ setTarget: setPasteOptionIndex,
5083
+ dropRef: drop,
5084
+ component: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
5085
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { className: "text-xl", children: [
5086
+ parseFloat(materialKey) + 1,
5087
+ "."
5088
+ ] }) }),
5089
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative", children: [
5090
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5091
+ "div",
5092
+ {
5093
+ className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
5094
+ onClick: () => {
5095
+ if (answerMap[materialKey]) {
5096
+ onChange(answer, materialKey, "");
5097
+ }
5098
+ },
5099
+ children: answerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5100
+ InputWithSpecialExpression_default,
5101
+ {
5102
+ value: answerMap[materialKey],
5103
+ showSpecialOnly: false
5104
+ }
5105
+ ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-gray-400 italic" })
5106
+ }
5107
+ ) }),
5108
+ learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5109
+ BaseImage_default,
5110
+ {
5111
+ src: "/icons/checkbox.webp",
5112
+ alt: "checkbox",
5113
+ size: "small"
5114
+ }
5115
+ ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5116
+ BaseImage_default,
5117
+ {
5118
+ src: "/icons/cross-red.webp",
5119
+ alt: "cross-red",
5120
+ size: "small"
5121
+ }
5122
+ ) }) : null
5123
+ ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5124
+ "div",
5137
5125
  {
5138
- contentType: contentMap.type,
5139
- src: answerMap[materialKey],
5140
- canFullScreen: true
5126
+ className: `w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
5127
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
5128
+ }
5129
+ ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5130
+ "div",
5131
+ {
5132
+ className: "flex-1 cursor-pointer",
5133
+ onClick: () => {
5134
+ onChange(answer, materialKey, "");
5135
+ },
5136
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5137
+ ShowMaterialMediaByContentType_default,
5138
+ {
5139
+ contentType: contentMap.type,
5140
+ src: answerMap[materialKey],
5141
+ canFullScreen: true
5142
+ },
5143
+ `${uniqueValue}-${index}`
5144
+ )
5145
+ }
5146
+ ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
5147
+ answerMap[materialKey]
5148
+ ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5149
+ "span",
5150
+ {
5151
+ className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5152
+ children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
5141
5153
  },
5142
- `${uniqueValue}-${index}`
5143
- )
5144
- }
5145
- ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
5146
- answerMap[materialKey]
5147
- ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5148
- "span",
5149
- {
5150
- className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5151
- children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
5152
- },
5153
- index2
5154
- )) }, materialKey) })
5155
- ] })
5156
- },
5157
- index
5158
- ) }) }, index);
5159
- }) })
5160
- ] });
5154
+ index2
5155
+ )) }, materialKey) })
5156
+ ] })
5157
+ },
5158
+ index
5159
+ ) }) }, index);
5160
+ }) })
5161
+ ]
5162
+ }
5163
+ );
5161
5164
  };
5162
5165
  var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
5163
5166
 
@@ -5372,11 +5375,21 @@ var GroupingActivityMaterialContent = ({
5372
5375
  setSelectedValue(materialValue);
5373
5376
  }
5374
5377
  },
5378
+ onTouchEnd: () => {
5379
+ if (checkCanAnswerQuestion()) {
5380
+ setSelectedValue(materialValue);
5381
+ }
5382
+ },
5375
5383
  onMouseUp: () => {
5376
5384
  if (checkCanAnswerQuestion()) {
5377
5385
  setSelectedValue(null);
5378
5386
  }
5379
5387
  },
5388
+ onTouchStart: () => {
5389
+ if (checkCanAnswerQuestion()) {
5390
+ setSelectedValue(null);
5391
+ }
5392
+ },
5380
5393
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5381
5394
  materialValue
5382
5395
  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -5664,11 +5677,21 @@ var MatchingActivityMaterialContent = ({
5664
5677
  setSelectedValue(materialValue);
5665
5678
  }
5666
5679
  },
5680
+ onTouchEnd: () => {
5681
+ if (checkCanAnswerQuestion()) {
5682
+ setSelectedValue(materialValue);
5683
+ }
5684
+ },
5667
5685
  onMouseUp: () => {
5668
5686
  if (checkCanAnswerQuestion()) {
5669
5687
  setSelectedValue(null);
5670
5688
  }
5671
5689
  },
5690
+ onTouchStart: () => {
5691
+ if (checkCanAnswerQuestion()) {
5692
+ setSelectedValue(null);
5693
+ }
5694
+ },
5672
5695
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5673
5696
  materialValue
5674
5697
  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -6550,6 +6573,11 @@ var OrderingActivityMaterialContent = ({
6550
6573
  setSelectedKey(materialKey);
6551
6574
  }
6552
6575
  },
6576
+ onTouchEnd: () => {
6577
+ if (checkCanAnswerQuestion()) {
6578
+ setSelectedKey(materialKey);
6579
+ }
6580
+ },
6553
6581
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
6554
6582
  materialMap[answerMap[materialKey]]
6555
6583
  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
package/dist/index.mjs CHANGED
@@ -4790,158 +4790,161 @@ var FillInTheBlanksActivityMaterialContent = ({
4790
4790
  const checkAnswerProvided = (answerMap2, option) => {
4791
4791
  return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
4792
4792
  };
4793
+ const handleSelectOption = (option) => {
4794
+ setSelectedOption(option);
4795
+ setPasteOptionIndex(null);
4796
+ };
4793
4797
  const answerMap = retrieveAnswerMap();
4794
- return /* @__PURE__ */ jsxs17("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
4795
- }, children: [
4796
- /* @__PURE__ */ jsx30("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx30("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
4797
- /* @__PURE__ */ jsx30("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx30(DividerLine_default, {}) }),
4798
- /* @__PURE__ */ jsx30("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
4799
- (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ jsx30("div", { className: "opacity-30", children: /* @__PURE__ */ jsx30(
4800
- ShowMaterialMediaByContentType_default,
4801
- {
4802
- contentType: contentMap.type,
4803
- src: option,
4804
- canFullScreen: true
4805
- },
4806
- `${uniqueValue}-${index}`
4807
- ) }, index) : /* @__PURE__ */ jsx30(
4808
- DraggableItem_default,
4809
- {
4810
- item: { index: option },
4811
- type: "FILL_IN_THE_BLANKS",
4812
- component: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30(
4813
- "div",
4798
+ return /* @__PURE__ */ jsxs17(
4799
+ "div",
4800
+ {
4801
+ className: "flex flex-row flex-wrap items-center",
4802
+ children: [
4803
+ /* @__PURE__ */ jsx30("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx30("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
4804
+ /* @__PURE__ */ jsx30("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx30(DividerLine_default, {}) }),
4805
+ /* @__PURE__ */ jsx30("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
4806
+ (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ jsx30("div", { className: "opacity-30", children: /* @__PURE__ */ jsx30(
4807
+ ShowMaterialMediaByContentType_default,
4814
4808
  {
4815
- className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer",
4816
- onMouseDown: () => {
4817
- setSelectedOption(option);
4818
- setPasteOptionIndex(null);
4819
- },
4820
- children: /* @__PURE__ */ jsx30("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx30(
4821
- InputWithSpecialExpression_default,
4822
- {
4823
- value: option,
4824
- showSpecialOnly: false
4825
- }
4826
- ) })
4827
- }
4828
- ) : /* @__PURE__ */ jsx30(
4829
- "div",
4809
+ contentType: contentMap.type,
4810
+ src: option,
4811
+ canFullScreen: true
4812
+ },
4813
+ `${uniqueValue}-${index}`
4814
+ ) }, index) : /* @__PURE__ */ jsx30(
4815
+ DraggableItem_default,
4830
4816
  {
4831
- className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
4832
- onMouseDown: () => {
4833
- setSelectedOption(option);
4834
- setPasteOptionIndex(null);
4835
- },
4836
- children: /* @__PURE__ */ jsx30(
4837
- ShowMaterialMediaByContentType_default,
4838
- {
4839
- contentType: contentMap.type,
4840
- src: option,
4841
- canFullScreen: true
4842
- },
4843
- `${uniqueValue}-${index}`
4844
- )
4845
- }
4846
- ),
4847
- moveCardHandler: () => {
4848
- onChange(answer, pasteOptionIndex, selectedOption);
4849
- }
4850
- },
4851
- index
4852
- )
4853
- ) }),
4854
- /* @__PURE__ */ jsx30("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
4855
- const learnerAnswerState = checkAnswerState(
4856
- JSON.parse(materialMap[materialKey]),
4857
- answerMap[materialKey]
4858
- );
4859
- return /* @__PURE__ */ jsx30("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx30("div", { className: "mx-2", children: /* @__PURE__ */ jsx30(
4860
- DroppableItem_default,
4861
- {
4862
- item: { index },
4863
- type: "FILL_IN_THE_BLANKS",
4864
- target: pasteOptionIndex,
4865
- setTarget: setPasteOptionIndex,
4866
- dropRef: drop,
4867
- component: /* @__PURE__ */ jsxs17("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
4868
- /* @__PURE__ */ jsx30("div", { className: "my-auto", children: /* @__PURE__ */ jsxs17("p", { className: "text-xl", children: [
4869
- parseFloat(materialKey) + 1,
4870
- "."
4871
- ] }) }),
4872
- /* @__PURE__ */ jsx30("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
4873
- /* @__PURE__ */ jsx30("div", { className: "flex-1", children: /* @__PURE__ */ jsx30(
4817
+ item: { index: option },
4818
+ type: "FILL_IN_THE_BLANKS",
4819
+ component: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30(
4874
4820
  "div",
4875
4821
  {
4876
- className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
4877
- onClick: () => {
4878
- if (answerMap[materialKey]) {
4879
- onChange(answer, materialKey, "");
4880
- }
4881
- },
4882
- children: answerMap[materialKey] ? /* @__PURE__ */ jsx30(
4822
+ className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
4823
+ onClick: () => handleSelectOption(option),
4824
+ children: /* @__PURE__ */ jsx30("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx30(
4883
4825
  InputWithSpecialExpression_default,
4884
4826
  {
4885
- value: answerMap[materialKey],
4827
+ value: option,
4886
4828
  showSpecialOnly: false
4887
4829
  }
4888
- ) : /* @__PURE__ */ jsx30("p", { className: "text-gray-400 italic" })
4830
+ ) })
4889
4831
  }
4890
- ) }),
4891
- learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
4892
- BaseImage_default,
4893
- {
4894
- src: "/icons/checkbox.webp",
4895
- alt: "checkbox",
4896
- size: "small"
4897
- }
4898
- ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
4899
- BaseImage_default,
4832
+ ) : /* @__PURE__ */ jsx30(
4833
+ "div",
4900
4834
  {
4901
- src: "/icons/cross-red.webp",
4902
- alt: "cross-red",
4903
- size: "small"
4835
+ className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
4836
+ onClick: () => handleSelectOption(option),
4837
+ children: /* @__PURE__ */ jsx30(
4838
+ ShowMaterialMediaByContentType_default,
4839
+ {
4840
+ contentType: contentMap.type,
4841
+ src: option,
4842
+ canFullScreen: true
4843
+ },
4844
+ `${uniqueValue}-${index}`
4845
+ )
4904
4846
  }
4905
- ) }) : null
4906
- ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx30(
4907
- "div",
4908
- {
4909
- className: `w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
4910
- children: /* @__PURE__ */ jsx30("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx30("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
4847
+ ),
4848
+ moveCardHandler: () => {
4849
+ onChange(answer, pasteOptionIndex, selectedOption);
4911
4850
  }
4912
- ) : /* @__PURE__ */ jsx30(
4913
- "div",
4914
- {
4915
- className: "flex-1 cursor-pointer",
4916
- onClick: () => {
4917
- onChange(answer, materialKey, "");
4918
- },
4919
- children: /* @__PURE__ */ jsx30(
4920
- ShowMaterialMediaByContentType_default,
4851
+ },
4852
+ index
4853
+ )
4854
+ ) }),
4855
+ /* @__PURE__ */ jsx30("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
4856
+ const learnerAnswerState = checkAnswerState(
4857
+ JSON.parse(materialMap[materialKey]),
4858
+ answerMap[materialKey]
4859
+ );
4860
+ return /* @__PURE__ */ jsx30("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx30("div", { className: "mx-2", children: /* @__PURE__ */ jsx30(
4861
+ DroppableItem_default,
4862
+ {
4863
+ item: { index },
4864
+ type: "FILL_IN_THE_BLANKS",
4865
+ target: pasteOptionIndex,
4866
+ setTarget: setPasteOptionIndex,
4867
+ dropRef: drop,
4868
+ component: /* @__PURE__ */ jsxs17("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
4869
+ /* @__PURE__ */ jsx30("div", { className: "my-auto", children: /* @__PURE__ */ jsxs17("p", { className: "text-xl", children: [
4870
+ parseFloat(materialKey) + 1,
4871
+ "."
4872
+ ] }) }),
4873
+ /* @__PURE__ */ jsx30("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
4874
+ /* @__PURE__ */ jsx30("div", { className: "flex-1", children: /* @__PURE__ */ jsx30(
4875
+ "div",
4876
+ {
4877
+ className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
4878
+ onClick: () => {
4879
+ if (answerMap[materialKey]) {
4880
+ onChange(answer, materialKey, "");
4881
+ }
4882
+ },
4883
+ children: answerMap[materialKey] ? /* @__PURE__ */ jsx30(
4884
+ InputWithSpecialExpression_default,
4885
+ {
4886
+ value: answerMap[materialKey],
4887
+ showSpecialOnly: false
4888
+ }
4889
+ ) : /* @__PURE__ */ jsx30("p", { className: "text-gray-400 italic" })
4890
+ }
4891
+ ) }),
4892
+ learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
4893
+ BaseImage_default,
4894
+ {
4895
+ src: "/icons/checkbox.webp",
4896
+ alt: "checkbox",
4897
+ size: "small"
4898
+ }
4899
+ ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
4900
+ BaseImage_default,
4901
+ {
4902
+ src: "/icons/cross-red.webp",
4903
+ alt: "cross-red",
4904
+ size: "small"
4905
+ }
4906
+ ) }) : null
4907
+ ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx30(
4908
+ "div",
4921
4909
  {
4922
- contentType: contentMap.type,
4923
- src: answerMap[materialKey],
4924
- canFullScreen: true
4910
+ className: `w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
4911
+ children: /* @__PURE__ */ jsx30("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx30("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
4912
+ }
4913
+ ) : /* @__PURE__ */ jsx30(
4914
+ "div",
4915
+ {
4916
+ className: "flex-1 cursor-pointer",
4917
+ onClick: () => {
4918
+ onChange(answer, materialKey, "");
4919
+ },
4920
+ children: /* @__PURE__ */ jsx30(
4921
+ ShowMaterialMediaByContentType_default,
4922
+ {
4923
+ contentType: contentMap.type,
4924
+ src: answerMap[materialKey],
4925
+ canFullScreen: true
4926
+ },
4927
+ `${uniqueValue}-${index}`
4928
+ )
4929
+ }
4930
+ ) : /* @__PURE__ */ jsx30("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
4931
+ answerMap[materialKey]
4932
+ ).map((inputPart, index2) => /* @__PURE__ */ jsx30(
4933
+ "span",
4934
+ {
4935
+ className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
4936
+ children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-xl", children: /* @__PURE__ */ jsx30(InlineMath4, { math: inputPart.value }) }) : inputPart.value
4925
4937
  },
4926
- `${uniqueValue}-${index}`
4927
- )
4928
- }
4929
- ) : /* @__PURE__ */ jsx30("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
4930
- answerMap[materialKey]
4931
- ).map((inputPart, index2) => /* @__PURE__ */ jsx30(
4932
- "span",
4933
- {
4934
- className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
4935
- children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-xl", children: /* @__PURE__ */ jsx30(InlineMath4, { math: inputPart.value }) }) : inputPart.value
4936
- },
4937
- index2
4938
- )) }, materialKey) })
4939
- ] })
4940
- },
4941
- index
4942
- ) }) }, index);
4943
- }) })
4944
- ] });
4938
+ index2
4939
+ )) }, materialKey) })
4940
+ ] })
4941
+ },
4942
+ index
4943
+ ) }) }, index);
4944
+ }) })
4945
+ ]
4946
+ }
4947
+ );
4945
4948
  };
4946
4949
  var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
4947
4950
 
@@ -5156,11 +5159,21 @@ var GroupingActivityMaterialContent = ({
5156
5159
  setSelectedValue(materialValue);
5157
5160
  }
5158
5161
  },
5162
+ onTouchEnd: () => {
5163
+ if (checkCanAnswerQuestion()) {
5164
+ setSelectedValue(materialValue);
5165
+ }
5166
+ },
5159
5167
  onMouseUp: () => {
5160
5168
  if (checkCanAnswerQuestion()) {
5161
5169
  setSelectedValue(null);
5162
5170
  }
5163
5171
  },
5172
+ onTouchStart: () => {
5173
+ if (checkCanAnswerQuestion()) {
5174
+ setSelectedValue(null);
5175
+ }
5176
+ },
5164
5177
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx32("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx32("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5165
5178
  materialValue
5166
5179
  ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
@@ -5448,11 +5461,21 @@ var MatchingActivityMaterialContent = ({
5448
5461
  setSelectedValue(materialValue);
5449
5462
  }
5450
5463
  },
5464
+ onTouchEnd: () => {
5465
+ if (checkCanAnswerQuestion()) {
5466
+ setSelectedValue(materialValue);
5467
+ }
5468
+ },
5451
5469
  onMouseUp: () => {
5452
5470
  if (checkCanAnswerQuestion()) {
5453
5471
  setSelectedValue(null);
5454
5472
  }
5455
5473
  },
5474
+ onTouchStart: () => {
5475
+ if (checkCanAnswerQuestion()) {
5476
+ setSelectedValue(null);
5477
+ }
5478
+ },
5456
5479
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx34("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4", children: /* @__PURE__ */ jsx34("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5457
5480
  materialValue
5458
5481
  ).map((inputPart, index2) => /* @__PURE__ */ jsx34(
@@ -6334,6 +6357,11 @@ var OrderingActivityMaterialContent = ({
6334
6357
  setSelectedKey(materialKey);
6335
6358
  }
6336
6359
  },
6360
+ onTouchEnd: () => {
6361
+ if (checkCanAnswerQuestion()) {
6362
+ setSelectedKey(materialKey);
6363
+ }
6364
+ },
6337
6365
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx43("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
6338
6366
  materialMap[answerMap[materialKey]]
6339
6367
  ).map((inputPart, index2) => /* @__PURE__ */ jsx43(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "catchup-library-web",
3
- "version": "1.20.28",
3
+ "version": "1.20.30",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx CHANGED
@@ -80,10 +80,19 @@ const FillInTheBlanksActivityMaterialContent = ({
80
80
  );
81
81
  };
82
82
 
83
+ const handleSelectOption = (option: any) => {
84
+ setSelectedOption(option);
85
+ setPasteOptionIndex(null);
86
+ };
87
+
83
88
  const answerMap = retrieveAnswerMap();
84
89
 
85
90
  return (
86
- <div className="flex flex-row flex-wrap items-center" onMouseUp={() => {}}>
91
+ <div
92
+ className="flex flex-row flex-wrap items-center"
93
+ // onMouseUp={() => {}}
94
+ // onTouchStart={() => {}}
95
+ >
87
96
  <div className="hidden md:block">
88
97
  <span className="font-semibold text-xl opacity-60">
89
98
  {i18n.t("please_select_fill_in_the_blanks_text")}
@@ -112,11 +121,16 @@ const FillInTheBlanksActivityMaterialContent = ({
112
121
  component={
113
122
  contentMap.type === "TEXT" ? (
114
123
  <div
115
- className="border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer"
116
- onMouseDown={() => {
117
- setSelectedOption(option);
118
- setPasteOptionIndex(null);
119
- }}
124
+ className="border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none"
125
+ onClick={() => handleSelectOption(option)}
126
+ // onMouseDown={() => {
127
+ // setSelectedOption(option);
128
+ // setPasteOptionIndex(null);
129
+ // }}
130
+ // onTouchEnd={() => {
131
+ // setSelectedOption(option);
132
+ // setPasteOptionIndex(null);
133
+ // }}
120
134
  >
121
135
  <p className="italic whitespace-pre-wrap">
122
136
  <InputWithSpecialExpression
@@ -127,11 +141,16 @@ const FillInTheBlanksActivityMaterialContent = ({
127
141
  </div>
128
142
  ) : (
129
143
  <div
130
- className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer"
131
- onMouseDown={() => {
132
- setSelectedOption(option);
133
- setPasteOptionIndex(null);
134
- }}
144
+ className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none"
145
+ onClick={() => handleSelectOption(option)}
146
+ // onMouseDown={() => {
147
+ // setSelectedOption(option);
148
+ // setPasteOptionIndex(null);
149
+ // }}
150
+ // onTouchEnd={() => {
151
+ // setSelectedOption(option);
152
+ // setPasteOptionIndex(null);
153
+ // }}
135
154
  >
136
155
  <ShowMaterialMediaByContentType
137
156
  key={`${uniqueValue}-${index}`}
package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx CHANGED
@@ -136,11 +136,21 @@ const GroupingActivityMaterialContent = ({
136
136
  setSelectedValue(materialValue);
137
137
  }
138
138
  }}
139
+ onTouchEnd={() => {
140
+ if (checkCanAnswerQuestion()) {
141
+ setSelectedValue(materialValue);
142
+ }
143
+ }}
139
144
  onMouseUp={() => {
140
145
  if (checkCanAnswerQuestion()) {
141
146
  setSelectedValue(null);
142
147
  }
143
148
  }}
149
+ onTouchStart={() => {
150
+ if (checkCanAnswerQuestion()) {
151
+ setSelectedValue(null);
152
+ }
153
+ }}
144
154
  >
145
155
  {contentMap.type === "TEXT" ? (
146
156
  <div className="flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto">
package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx CHANGED
@@ -142,11 +142,21 @@ const MatchingActivityMaterialContent = ({
142
142
  setSelectedValue(materialValue);
143
143
  }
144
144
  }}
145
+ onTouchEnd={() => {
146
+ if (checkCanAnswerQuestion()) {
147
+ setSelectedValue(materialValue);
148
+ }
149
+ }}
145
150
  onMouseUp={() => {
146
151
  if (checkCanAnswerQuestion()) {
147
152
  setSelectedValue(null);
148
153
  }
149
154
  }}
155
+ onTouchStart={() => {
156
+ if (checkCanAnswerQuestion()) {
157
+ setSelectedValue(null);
158
+ }
159
+ }}
150
160
  >
151
161
  {contentMap.type === "TEXT" ? (
152
162
  <div className="flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4">
package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx CHANGED
@@ -172,6 +172,11 @@ const OrderingActivityMaterialContent = ({
172
172
  setSelectedKey(materialKey);
173
173
  }
174
174
  }}
175
+ onTouchEnd={() => {
176
+ if (checkCanAnswerQuestion()) {
177
+ setSelectedKey(materialKey);
178
+ }
179
+ }}
175
180
  >
176
181
  {contentMap.type === "TEXT" ? (
177
182
  <p className="text-xl whitespace-pre-wrap">