catchup-library-web 1.20.28 → 1.20.29

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 +178 -136
  2. package/dist/index.mjs +178 -136
  3. package/package.json +1 -1
  4. package/src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx +13 -1
  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
@@ -5007,157 +5007,174 @@ var FillInTheBlanksActivityMaterialContent = ({
5007
5007
  return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
5008
5008
  };
5009
5009
  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",
5010
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
5011
+ "div",
5012
+ {
5013
+ className: "flex flex-row flex-wrap items-center",
5014
+ onMouseUp: () => {
5015
+ },
5016
+ onTouchStart: () => {
5017
+ },
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
- }
5038
+ className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer",
5039
+ onMouseDown: () => {
5040
+ setSelectedOption(option);
5041
+ setPasteOptionIndex(null);
5097
5042
  },
5098
- children: answerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5043
+ onTouchEnd: () => {
5044
+ setSelectedOption(option);
5045
+ setPasteOptionIndex(null);
5046
+ },
5047
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5099
5048
  InputWithSpecialExpression_default,
5100
5049
  {
5101
- value: answerMap[materialKey],
5050
+ value: option,
5102
5051
  showSpecialOnly: false
5103
5052
  }
5104
- ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-gray-400 italic" })
5105
- }
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"
5053
+ ) })
5113
5054
  }
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,
5055
+ ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5056
+ "div",
5116
5057
  {
5117
- src: "/icons/cross-red.webp",
5118
- alt: "cross-red",
5119
- size: "small"
5058
+ className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
5059
+ onMouseDown: () => {
5060
+ setSelectedOption(option);
5061
+ setPasteOptionIndex(null);
5062
+ },
5063
+ onTouchEnd: () => {
5064
+ setSelectedOption(option);
5065
+ setPasteOptionIndex(null);
5066
+ },
5067
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5068
+ ShowMaterialMediaByContentType_default,
5069
+ {
5070
+ contentType: contentMap.type,
5071
+ src: option,
5072
+ canFullScreen: true
5073
+ },
5074
+ `${uniqueValue}-${index}`
5075
+ )
5120
5076
  }
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") }) })
5077
+ ),
5078
+ moveCardHandler: () => {
5079
+ onChange(answer, pasteOptionIndex, selectedOption);
5127
5080
  }
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,
5081
+ },
5082
+ index
5083
+ )
5084
+ ) }),
5085
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
5086
+ const learnerAnswerState = checkAnswerState(
5087
+ JSON.parse(materialMap[materialKey]),
5088
+ answerMap[materialKey]
5089
+ );
5090
+ 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)(
5091
+ DroppableItem_default,
5092
+ {
5093
+ item: { index },
5094
+ type: "FILL_IN_THE_BLANKS",
5095
+ target: pasteOptionIndex,
5096
+ setTarget: setPasteOptionIndex,
5097
+ dropRef: drop,
5098
+ component: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
5099
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { className: "text-xl", children: [
5100
+ parseFloat(materialKey) + 1,
5101
+ "."
5102
+ ] }) }),
5103
+ /* @__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: [
5104
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5105
+ "div",
5106
+ {
5107
+ 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"}`,
5108
+ onClick: () => {
5109
+ if (answerMap[materialKey]) {
5110
+ onChange(answer, materialKey, "");
5111
+ }
5112
+ },
5113
+ children: answerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5114
+ InputWithSpecialExpression_default,
5115
+ {
5116
+ value: answerMap[materialKey],
5117
+ showSpecialOnly: false
5118
+ }
5119
+ ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-gray-400 italic" })
5120
+ }
5121
+ ) }),
5122
+ 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)(
5123
+ BaseImage_default,
5124
+ {
5125
+ src: "/icons/checkbox.webp",
5126
+ alt: "checkbox",
5127
+ size: "small"
5128
+ }
5129
+ ) }) : 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)(
5130
+ BaseImage_default,
5131
+ {
5132
+ src: "/icons/cross-red.webp",
5133
+ alt: "cross-red",
5134
+ size: "small"
5135
+ }
5136
+ ) }) : null
5137
+ ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5138
+ "div",
5137
5139
  {
5138
- contentType: contentMap.type,
5139
- src: answerMap[materialKey],
5140
- canFullScreen: true
5140
+ 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"}`,
5141
+ 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") }) })
5142
+ }
5143
+ ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5144
+ "div",
5145
+ {
5146
+ className: "flex-1 cursor-pointer",
5147
+ onClick: () => {
5148
+ onChange(answer, materialKey, "");
5149
+ },
5150
+ children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5151
+ ShowMaterialMediaByContentType_default,
5152
+ {
5153
+ contentType: contentMap.type,
5154
+ src: answerMap[materialKey],
5155
+ canFullScreen: true
5156
+ },
5157
+ `${uniqueValue}-${index}`
5158
+ )
5159
+ }
5160
+ ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
5161
+ answerMap[materialKey]
5162
+ ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5163
+ "span",
5164
+ {
5165
+ className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5166
+ 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
5167
  },
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
- ] });
5168
+ index2
5169
+ )) }, materialKey) })
5170
+ ] })
5171
+ },
5172
+ index
5173
+ ) }) }, index);
5174
+ }) })
5175
+ ]
5176
+ }
5177
+ );
5161
5178
  };
5162
5179
  var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
5163
5180
 
@@ -5372,11 +5389,21 @@ var GroupingActivityMaterialContent = ({
5372
5389
  setSelectedValue(materialValue);
5373
5390
  }
5374
5391
  },
5392
+ onTouchEnd: () => {
5393
+ if (checkCanAnswerQuestion()) {
5394
+ setSelectedValue(materialValue);
5395
+ }
5396
+ },
5375
5397
  onMouseUp: () => {
5376
5398
  if (checkCanAnswerQuestion()) {
5377
5399
  setSelectedValue(null);
5378
5400
  }
5379
5401
  },
5402
+ onTouchStart: () => {
5403
+ if (checkCanAnswerQuestion()) {
5404
+ setSelectedValue(null);
5405
+ }
5406
+ },
5380
5407
  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
5408
  materialValue
5382
5409
  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -5664,11 +5691,21 @@ var MatchingActivityMaterialContent = ({
5664
5691
  setSelectedValue(materialValue);
5665
5692
  }
5666
5693
  },
5694
+ onTouchEnd: () => {
5695
+ if (checkCanAnswerQuestion()) {
5696
+ setSelectedValue(materialValue);
5697
+ }
5698
+ },
5667
5699
  onMouseUp: () => {
5668
5700
  if (checkCanAnswerQuestion()) {
5669
5701
  setSelectedValue(null);
5670
5702
  }
5671
5703
  },
5704
+ onTouchStart: () => {
5705
+ if (checkCanAnswerQuestion()) {
5706
+ setSelectedValue(null);
5707
+ }
5708
+ },
5672
5709
  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
5710
  materialValue
5674
5711
  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -6550,6 +6587,11 @@ var OrderingActivityMaterialContent = ({
6550
6587
  setSelectedKey(materialKey);
6551
6588
  }
6552
6589
  },
6590
+ onTouchEnd: () => {
6591
+ if (checkCanAnswerQuestion()) {
6592
+ setSelectedKey(materialKey);
6593
+ }
6594
+ },
6553
6595
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
6554
6596
  materialMap[answerMap[materialKey]]
6555
6597
  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
package/dist/index.mjs CHANGED
@@ -4791,157 +4791,174 @@ var FillInTheBlanksActivityMaterialContent = ({
4791
4791
  return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
4792
4792
  };
4793
4793
  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",
4794
+ return /* @__PURE__ */ jsxs17(
4795
+ "div",
4796
+ {
4797
+ className: "flex flex-row flex-wrap items-center",
4798
+ onMouseUp: () => {
4799
+ },
4800
+ onTouchStart: () => {
4801
+ },
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
- }
4822
+ className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer",
4823
+ onMouseDown: () => {
4824
+ setSelectedOption(option);
4825
+ setPasteOptionIndex(null);
4881
4826
  },
4882
- children: answerMap[materialKey] ? /* @__PURE__ */ jsx30(
4827
+ onTouchEnd: () => {
4828
+ setSelectedOption(option);
4829
+ setPasteOptionIndex(null);
4830
+ },
4831
+ children: /* @__PURE__ */ jsx30("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx30(
4883
4832
  InputWithSpecialExpression_default,
4884
4833
  {
4885
- value: answerMap[materialKey],
4834
+ value: option,
4886
4835
  showSpecialOnly: false
4887
4836
  }
4888
- ) : /* @__PURE__ */ jsx30("p", { className: "text-gray-400 italic" })
4889
- }
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"
4837
+ ) })
4897
4838
  }
4898
- ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
4899
- BaseImage_default,
4839
+ ) : /* @__PURE__ */ jsx30(
4840
+ "div",
4900
4841
  {
4901
- src: "/icons/cross-red.webp",
4902
- alt: "cross-red",
4903
- size: "small"
4842
+ className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
4843
+ onMouseDown: () => {
4844
+ setSelectedOption(option);
4845
+ setPasteOptionIndex(null);
4846
+ },
4847
+ onTouchEnd: () => {
4848
+ setSelectedOption(option);
4849
+ setPasteOptionIndex(null);
4850
+ },
4851
+ children: /* @__PURE__ */ jsx30(
4852
+ ShowMaterialMediaByContentType_default,
4853
+ {
4854
+ contentType: contentMap.type,
4855
+ src: option,
4856
+ canFullScreen: true
4857
+ },
4858
+ `${uniqueValue}-${index}`
4859
+ )
4904
4860
  }
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") }) })
4861
+ ),
4862
+ moveCardHandler: () => {
4863
+ onChange(answer, pasteOptionIndex, selectedOption);
4911
4864
  }
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,
4865
+ },
4866
+ index
4867
+ )
4868
+ ) }),
4869
+ /* @__PURE__ */ jsx30("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
4870
+ const learnerAnswerState = checkAnswerState(
4871
+ JSON.parse(materialMap[materialKey]),
4872
+ answerMap[materialKey]
4873
+ );
4874
+ return /* @__PURE__ */ jsx30("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx30("div", { className: "mx-2", children: /* @__PURE__ */ jsx30(
4875
+ DroppableItem_default,
4876
+ {
4877
+ item: { index },
4878
+ type: "FILL_IN_THE_BLANKS",
4879
+ target: pasteOptionIndex,
4880
+ setTarget: setPasteOptionIndex,
4881
+ dropRef: drop,
4882
+ component: /* @__PURE__ */ jsxs17("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
4883
+ /* @__PURE__ */ jsx30("div", { className: "my-auto", children: /* @__PURE__ */ jsxs17("p", { className: "text-xl", children: [
4884
+ parseFloat(materialKey) + 1,
4885
+ "."
4886
+ ] }) }),
4887
+ /* @__PURE__ */ jsx30("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
4888
+ /* @__PURE__ */ jsx30("div", { className: "flex-1", children: /* @__PURE__ */ jsx30(
4889
+ "div",
4890
+ {
4891
+ 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"}`,
4892
+ onClick: () => {
4893
+ if (answerMap[materialKey]) {
4894
+ onChange(answer, materialKey, "");
4895
+ }
4896
+ },
4897
+ children: answerMap[materialKey] ? /* @__PURE__ */ jsx30(
4898
+ InputWithSpecialExpression_default,
4899
+ {
4900
+ value: answerMap[materialKey],
4901
+ showSpecialOnly: false
4902
+ }
4903
+ ) : /* @__PURE__ */ jsx30("p", { className: "text-gray-400 italic" })
4904
+ }
4905
+ ) }),
4906
+ learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
4907
+ BaseImage_default,
4908
+ {
4909
+ src: "/icons/checkbox.webp",
4910
+ alt: "checkbox",
4911
+ size: "small"
4912
+ }
4913
+ ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx30("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ jsx30(
4914
+ BaseImage_default,
4915
+ {
4916
+ src: "/icons/cross-red.webp",
4917
+ alt: "cross-red",
4918
+ size: "small"
4919
+ }
4920
+ ) }) : null
4921
+ ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ jsx30(
4922
+ "div",
4921
4923
  {
4922
- contentType: contentMap.type,
4923
- src: answerMap[materialKey],
4924
- canFullScreen: true
4924
+ 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"}`,
4925
+ 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") }) })
4926
+ }
4927
+ ) : /* @__PURE__ */ jsx30(
4928
+ "div",
4929
+ {
4930
+ className: "flex-1 cursor-pointer",
4931
+ onClick: () => {
4932
+ onChange(answer, materialKey, "");
4933
+ },
4934
+ children: /* @__PURE__ */ jsx30(
4935
+ ShowMaterialMediaByContentType_default,
4936
+ {
4937
+ contentType: contentMap.type,
4938
+ src: answerMap[materialKey],
4939
+ canFullScreen: true
4940
+ },
4941
+ `${uniqueValue}-${index}`
4942
+ )
4943
+ }
4944
+ ) : /* @__PURE__ */ jsx30("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
4945
+ answerMap[materialKey]
4946
+ ).map((inputPart, index2) => /* @__PURE__ */ jsx30(
4947
+ "span",
4948
+ {
4949
+ className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
4950
+ children: inputPart.isEquation ? /* @__PURE__ */ jsx30("span", { className: "text-xl", children: /* @__PURE__ */ jsx30(InlineMath4, { math: inputPart.value }) }) : inputPart.value
4925
4951
  },
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
- ] });
4952
+ index2
4953
+ )) }, materialKey) })
4954
+ ] })
4955
+ },
4956
+ index
4957
+ ) }) }, index);
4958
+ }) })
4959
+ ]
4960
+ }
4961
+ );
4945
4962
  };
4946
4963
  var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
4947
4964
 
@@ -5156,11 +5173,21 @@ var GroupingActivityMaterialContent = ({
5156
5173
  setSelectedValue(materialValue);
5157
5174
  }
5158
5175
  },
5176
+ onTouchEnd: () => {
5177
+ if (checkCanAnswerQuestion()) {
5178
+ setSelectedValue(materialValue);
5179
+ }
5180
+ },
5159
5181
  onMouseUp: () => {
5160
5182
  if (checkCanAnswerQuestion()) {
5161
5183
  setSelectedValue(null);
5162
5184
  }
5163
5185
  },
5186
+ onTouchStart: () => {
5187
+ if (checkCanAnswerQuestion()) {
5188
+ setSelectedValue(null);
5189
+ }
5190
+ },
5164
5191
  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
5192
  materialValue
5166
5193
  ).map((inputPart, index2) => /* @__PURE__ */ jsx32(
@@ -5448,11 +5475,21 @@ var MatchingActivityMaterialContent = ({
5448
5475
  setSelectedValue(materialValue);
5449
5476
  }
5450
5477
  },
5478
+ onTouchEnd: () => {
5479
+ if (checkCanAnswerQuestion()) {
5480
+ setSelectedValue(materialValue);
5481
+ }
5482
+ },
5451
5483
  onMouseUp: () => {
5452
5484
  if (checkCanAnswerQuestion()) {
5453
5485
  setSelectedValue(null);
5454
5486
  }
5455
5487
  },
5488
+ onTouchStart: () => {
5489
+ if (checkCanAnswerQuestion()) {
5490
+ setSelectedValue(null);
5491
+ }
5492
+ },
5456
5493
  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
5494
  materialValue
5458
5495
  ).map((inputPart, index2) => /* @__PURE__ */ jsx34(
@@ -6334,6 +6371,11 @@ var OrderingActivityMaterialContent = ({
6334
6371
  setSelectedKey(materialKey);
6335
6372
  }
6336
6373
  },
6374
+ onTouchEnd: () => {
6375
+ if (checkCanAnswerQuestion()) {
6376
+ setSelectedKey(materialKey);
6377
+ }
6378
+ },
6337
6379
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx43("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
6338
6380
  materialMap[answerMap[materialKey]]
6339
6381
  ).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.29",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx CHANGED
@@ -83,7 +83,11 @@ const FillInTheBlanksActivityMaterialContent = ({
83
83
  const answerMap = retrieveAnswerMap();
84
84
 
85
85
  return (
86
- <div className="flex flex-row flex-wrap items-center" onMouseUp={() => {}}>
86
+ <div
87
+ className="flex flex-row flex-wrap items-center"
88
+ onMouseUp={() => {}}
89
+ onTouchStart={() => {}}
90
+ >
87
91
  <div className="hidden md:block">
88
92
  <span className="font-semibold text-xl opacity-60">
89
93
  {i18n.t("please_select_fill_in_the_blanks_text")}
@@ -117,6 +121,10 @@ const FillInTheBlanksActivityMaterialContent = ({
117
121
  setSelectedOption(option);
118
122
  setPasteOptionIndex(null);
119
123
  }}
124
+ onTouchEnd={() => {
125
+ setSelectedOption(option);
126
+ setPasteOptionIndex(null);
127
+ }}
120
128
  >
121
129
  <p className="italic whitespace-pre-wrap">
122
130
  <InputWithSpecialExpression
@@ -132,6 +140,10 @@ const FillInTheBlanksActivityMaterialContent = ({
132
140
  setSelectedOption(option);
133
141
  setPasteOptionIndex(null);
134
142
  }}
143
+ onTouchEnd={() => {
144
+ setSelectedOption(option);
145
+ setPasteOptionIndex(null);
146
+ }}
135
147
  >
136
148
  <ShowMaterialMediaByContentType
137
149
  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">