catchup-library-web 2.2.1 → 2.2.2

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 (5) hide show
  1. package/dist/index.js +20 -14
  2. package/dist/index.mjs +20 -14
  3. package/package.json +1 -1
  4. package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx +19 -13
  5. package/src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx +1 -1
package/dist/index.js CHANGED
@@ -6558,6 +6558,7 @@ var OrderingActivityMaterialContent = ({
6558
6558
  });
6559
6559
  const { screenSize } = useScreenSize_default();
6560
6560
  const [view, setView] = (0, import_react23.useState)("PC");
6561
+ const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react23.useState)(answerMap);
6561
6562
  (0, import_react23.useEffect)(() => {
6562
6563
  if (!screenSize) return;
6563
6564
  if (screenSize.width <= 1024) {
@@ -6567,11 +6568,16 @@ var OrderingActivityMaterialContent = ({
6567
6568
  }
6568
6569
  }, [screenSize]);
6569
6570
  (0, import_react23.useEffect)(() => {
6570
- if (!showCorrectAnswer) return;
6571
- Object.keys(answerMap).forEach((answerKey, index) => {
6572
- answerMap[answerKey] = index;
6573
- });
6574
- }, [showCorrectAnswer]);
6571
+ if (showCorrectAnswer) {
6572
+ const correctAnswerMap = {};
6573
+ Object.keys(answerMap).forEach((answerKey, index) => {
6574
+ correctAnswerMap[answerKey] = index;
6575
+ });
6576
+ setDisplayAnswerMap(correctAnswerMap);
6577
+ } else {
6578
+ setDisplayAnswerMap(answerMap);
6579
+ }
6580
+ }, [showCorrectAnswer, answerMap]);
6575
6581
  const checkAnswerState = (correctAnswer, learnerAnswer) => {
6576
6582
  if (!isPreview) return null;
6577
6583
  if (correctAnswer === learnerAnswer) {
@@ -6688,7 +6694,7 @@ var OrderingActivityMaterialContent = ({
6688
6694
  transform: "translate(-50%, -50%)"
6689
6695
  },
6690
6696
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
6691
- materialMap[answerMap[draggedKey]]
6697
+ materialMap[displayAnswerMap[draggedKey]]
6692
6698
  ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
6693
6699
  "span",
6694
6700
  {
@@ -6700,7 +6706,7 @@ var OrderingActivityMaterialContent = ({
6700
6706
  ShowMaterialMediaByContentType_default,
6701
6707
  {
6702
6708
  contentType: contentMap.type,
6703
- src: materialMap[answerMap[draggedKey]],
6709
+ src: materialMap[displayAnswerMap[draggedKey]],
6704
6710
  canFullScreen: false
6705
6711
  },
6706
6712
  `${uniqueValue}-drag-mouse`
@@ -6717,7 +6723,7 @@ var OrderingActivityMaterialContent = ({
6717
6723
  transform: "translate(-50%, -50%)"
6718
6724
  },
6719
6725
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
6720
- materialMap[answerMap[draggedKey]]
6726
+ materialMap[displayAnswerMap[draggedKey]]
6721
6727
  ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
6722
6728
  "span",
6723
6729
  {
@@ -6729,16 +6735,16 @@ var OrderingActivityMaterialContent = ({
6729
6735
  ShowMaterialMediaByContentType_default,
6730
6736
  {
6731
6737
  contentType: contentMap.type,
6732
- src: materialMap[answerMap[draggedKey]],
6738
+ src: materialMap[displayAnswerMap[draggedKey]],
6733
6739
  canFullScreen: false
6734
6740
  },
6735
6741
  `${uniqueValue}-drag-touch`
6736
6742
  ) })
6737
6743
  }
6738
6744
  ),
6739
- Object.keys(answerMap).map((materialKey, index) => {
6745
+ Object.keys(displayAnswerMap).map((materialKey, index) => {
6740
6746
  const learnerAnswerState = checkAnswerState(
6741
- answerMap[materialKey] + "",
6747
+ displayAnswerMap[materialKey] + "",
6742
6748
  index + ""
6743
6749
  );
6744
6750
  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
@@ -6774,7 +6780,7 @@ var OrderingActivityMaterialContent = ({
6774
6780
  className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer p-3 ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
6775
6781
  onClick: () => handleSelectItem(materialKey),
6776
6782
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
6777
- materialMap[answerMap[materialKey]]
6783
+ materialMap[displayAnswerMap[materialKey]]
6778
6784
  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
6779
6785
  "span",
6780
6786
  {
@@ -6786,7 +6792,7 @@ var OrderingActivityMaterialContent = ({
6786
6792
  ShowMaterialMediaByContentType_default,
6787
6793
  {
6788
6794
  contentType: contentMap.type,
6789
- src: materialMap[answerMap[materialKey]],
6795
+ src: materialMap[displayAnswerMap[materialKey]],
6790
6796
  canFullScreen: true
6791
6797
  },
6792
6798
  `${uniqueValue}-${index}`
@@ -6902,7 +6908,7 @@ var TrueFalseActivityMaterialContent = ({
6902
6908
  const correctAnswer = materialMap.trueList.find(
6903
6909
  (trueItem) => trueItem === shuffleOption
6904
6910
  ) !== void 0 ? "TRUE" : "FALSE";
6905
- const learnerAnswer = answerMap.trueList.find(
6911
+ const learnerAnswer = displayAnswerMap.trueList.find(
6906
6912
  (trueItem) => trueItem === shuffleOption
6907
6913
  ) !== void 0 ? "TRUE" : "FALSE";
6908
6914
  const learnerAnswerState = checkAnswerState(
package/dist/index.mjs CHANGED
@@ -6335,6 +6335,7 @@ var OrderingActivityMaterialContent = ({
6335
6335
  });
6336
6336
  const { screenSize } = useScreenSize_default();
6337
6337
  const [view, setView] = useState22("PC");
6338
+ const [displayAnswerMap, setDisplayAnswerMap] = useState22(answerMap);
6338
6339
  useEffect13(() => {
6339
6340
  if (!screenSize) return;
6340
6341
  if (screenSize.width <= 1024) {
@@ -6344,11 +6345,16 @@ var OrderingActivityMaterialContent = ({
6344
6345
  }
6345
6346
  }, [screenSize]);
6346
6347
  useEffect13(() => {
6347
- if (!showCorrectAnswer) return;
6348
- Object.keys(answerMap).forEach((answerKey, index) => {
6349
- answerMap[answerKey] = index;
6350
- });
6351
- }, [showCorrectAnswer]);
6348
+ if (showCorrectAnswer) {
6349
+ const correctAnswerMap = {};
6350
+ Object.keys(answerMap).forEach((answerKey, index) => {
6351
+ correctAnswerMap[answerKey] = index;
6352
+ });
6353
+ setDisplayAnswerMap(correctAnswerMap);
6354
+ } else {
6355
+ setDisplayAnswerMap(answerMap);
6356
+ }
6357
+ }, [showCorrectAnswer, answerMap]);
6352
6358
  const checkAnswerState = (correctAnswer, learnerAnswer) => {
6353
6359
  if (!isPreview) return null;
6354
6360
  if (correctAnswer === learnerAnswer) {
@@ -6465,7 +6471,7 @@ var OrderingActivityMaterialContent = ({
6465
6471
  transform: "translate(-50%, -50%)"
6466
6472
  },
6467
6473
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx40("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx40("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
6468
- materialMap[answerMap[draggedKey]]
6474
+ materialMap[displayAnswerMap[draggedKey]]
6469
6475
  ).map((inputPart, index) => /* @__PURE__ */ jsx40(
6470
6476
  "span",
6471
6477
  {
@@ -6477,7 +6483,7 @@ var OrderingActivityMaterialContent = ({
6477
6483
  ShowMaterialMediaByContentType_default,
6478
6484
  {
6479
6485
  contentType: contentMap.type,
6480
- src: materialMap[answerMap[draggedKey]],
6486
+ src: materialMap[displayAnswerMap[draggedKey]],
6481
6487
  canFullScreen: false
6482
6488
  },
6483
6489
  `${uniqueValue}-drag-mouse`
@@ -6494,7 +6500,7 @@ var OrderingActivityMaterialContent = ({
6494
6500
  transform: "translate(-50%, -50%)"
6495
6501
  },
6496
6502
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx40("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx40("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
6497
- materialMap[answerMap[draggedKey]]
6503
+ materialMap[displayAnswerMap[draggedKey]]
6498
6504
  ).map((inputPart, index) => /* @__PURE__ */ jsx40(
6499
6505
  "span",
6500
6506
  {
@@ -6506,16 +6512,16 @@ var OrderingActivityMaterialContent = ({
6506
6512
  ShowMaterialMediaByContentType_default,
6507
6513
  {
6508
6514
  contentType: contentMap.type,
6509
- src: materialMap[answerMap[draggedKey]],
6515
+ src: materialMap[displayAnswerMap[draggedKey]],
6510
6516
  canFullScreen: false
6511
6517
  },
6512
6518
  `${uniqueValue}-drag-touch`
6513
6519
  ) })
6514
6520
  }
6515
6521
  ),
6516
- Object.keys(answerMap).map((materialKey, index) => {
6522
+ Object.keys(displayAnswerMap).map((materialKey, index) => {
6517
6523
  const learnerAnswerState = checkAnswerState(
6518
- answerMap[materialKey] + "",
6524
+ displayAnswerMap[materialKey] + "",
6519
6525
  index + ""
6520
6526
  );
6521
6527
  return /* @__PURE__ */ jsx40("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs29(
@@ -6551,7 +6557,7 @@ var OrderingActivityMaterialContent = ({
6551
6557
  className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer p-3 ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
6552
6558
  onClick: () => handleSelectItem(materialKey),
6553
6559
  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx40("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
6554
- materialMap[answerMap[materialKey]]
6560
+ materialMap[displayAnswerMap[materialKey]]
6555
6561
  ).map((inputPart, index2) => /* @__PURE__ */ jsx40(
6556
6562
  "span",
6557
6563
  {
@@ -6563,7 +6569,7 @@ var OrderingActivityMaterialContent = ({
6563
6569
  ShowMaterialMediaByContentType_default,
6564
6570
  {
6565
6571
  contentType: contentMap.type,
6566
- src: materialMap[answerMap[materialKey]],
6572
+ src: materialMap[displayAnswerMap[materialKey]],
6567
6573
  canFullScreen: true
6568
6574
  },
6569
6575
  `${uniqueValue}-${index}`
@@ -6679,7 +6685,7 @@ var TrueFalseActivityMaterialContent = ({
6679
6685
  const correctAnswer = materialMap.trueList.find(
6680
6686
  (trueItem) => trueItem === shuffleOption
6681
6687
  ) !== void 0 ? "TRUE" : "FALSE";
6682
- const learnerAnswer = answerMap.trueList.find(
6688
+ const learnerAnswer = displayAnswerMap.trueList.find(
6683
6689
  (trueItem) => trueItem === shuffleOption
6684
6690
  ) !== void 0 ? "TRUE" : "FALSE";
6685
6691
  const learnerAnswerState = checkAnswerState(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "catchup-library-web",
3
- "version": "2.2.1",
3
+ "version": "2.2.2",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx CHANGED
@@ -32,6 +32,7 @@ const OrderingActivityMaterialContent = ({
32
32
  });
33
33
  const { screenSize } = useScreenSize();
34
34
  const [view, setView] = useState("PC");
35
+ const [displayAnswerMap, setDisplayAnswerMap] = useState<any>(answerMap);
35
36
 
36
37
  useEffect(() => {
37
38
  if (!screenSize) return;
@@ -43,11 +44,16 @@ const OrderingActivityMaterialContent = ({
43
44
  }, [screenSize]);
44
45
 
45
46
  useEffect(() => {
46
- if (!showCorrectAnswer) return;
47
- Object.keys(answerMap).forEach((answerKey, index) => {
48
- answerMap[answerKey] = index;
49
- });
50
- }, [showCorrectAnswer]);
47
+ if (showCorrectAnswer) {
48
+ const correctAnswerMap: any = {};
49
+ Object.keys(answerMap).forEach((answerKey, index) => {
50
+ correctAnswerMap[answerKey] = index;
51
+ });
52
+ setDisplayAnswerMap(correctAnswerMap);
53
+ } else {
54
+ setDisplayAnswerMap(answerMap);
55
+ }
56
+ }, [showCorrectAnswer, answerMap]);
51
57
 
52
58
  const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
53
59
  if (!isPreview) return null;
@@ -197,7 +203,7 @@ const OrderingActivityMaterialContent = ({
197
203
  <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg">
198
204
  <p className="text-xl whitespace-pre-wrap">
199
205
  {constructInputWithSpecialExpressionList(
200
- materialMap[answerMap[draggedKey]]
206
+ materialMap[displayAnswerMap[draggedKey]]
201
207
  ).map((inputPart, index) => (
202
208
  <span
203
209
  key={index}
@@ -221,7 +227,7 @@ const OrderingActivityMaterialContent = ({
221
227
  <ShowMaterialMediaByContentType
222
228
  key={`${uniqueValue}-drag-mouse`}
223
229
  contentType={contentMap.type}
224
- src={materialMap[answerMap[draggedKey]]}
230
+ src={materialMap[displayAnswerMap[draggedKey]]}
225
231
  canFullScreen={false}
226
232
  />
227
233
  </div>
@@ -242,7 +248,7 @@ const OrderingActivityMaterialContent = ({
242
248
  <div className="border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg">
243
249
  <p className="text-xl whitespace-pre-wrap">
244
250
  {constructInputWithSpecialExpressionList(
245
- materialMap[answerMap[draggedKey]]
251
+ materialMap[displayAnswerMap[draggedKey]]
246
252
  ).map((inputPart, index) => (
247
253
  <span
248
254
  key={index}
@@ -266,7 +272,7 @@ const OrderingActivityMaterialContent = ({
266
272
  <ShowMaterialMediaByContentType
267
273
  key={`${uniqueValue}-drag-touch`}
268
274
  contentType={contentMap.type}
269
- src={materialMap[answerMap[draggedKey]]}
275
+ src={materialMap[displayAnswerMap[draggedKey]]}
270
276
  canFullScreen={false}
271
277
  />
272
278
  </div>
@@ -274,9 +280,9 @@ const OrderingActivityMaterialContent = ({
274
280
  </div>
275
281
  )}
276
282
 
277
- {Object.keys(answerMap).map((materialKey, index) => {
283
+ {Object.keys(displayAnswerMap).map((materialKey, index) => {
278
284
  const learnerAnswerState = checkAnswerState(
279
- answerMap[materialKey] + "",
285
+ displayAnswerMap[materialKey] + "",
280
286
  index + ""
281
287
  );
282
288
  return (
@@ -348,7 +354,7 @@ const OrderingActivityMaterialContent = ({
348
354
  {contentMap.type === "TEXT" ? (
349
355
  <p className="text-xl whitespace-pre-wrap">
350
356
  {constructInputWithSpecialExpressionList(
351
- materialMap[answerMap[materialKey]]
357
+ materialMap[displayAnswerMap[materialKey]]
352
358
  ).map((inputPart, index) => (
353
359
  <span
354
360
  key={index}
@@ -370,7 +376,7 @@ const OrderingActivityMaterialContent = ({
370
376
  <ShowMaterialMediaByContentType
371
377
  key={`${uniqueValue}-${index}`}
372
378
  contentType={contentMap.type}
373
- src={materialMap[answerMap[materialKey]]}
379
+ src={materialMap[displayAnswerMap[materialKey]]}
374
380
  canFullScreen={true}
375
381
  />
376
382
  )}
package/src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx CHANGED
@@ -76,7 +76,7 @@ const TrueFalseActivityMaterialContent = ({
76
76
  ? "TRUE"
77
77
  : "FALSE";
78
78
  const learnerAnswer =
79
- answerMap.trueList.find(
79
+ displayAnswerMap.trueList.find(
80
80
  (trueItem: string) => trueItem === shuffleOption
81
81
  ) !== undefined
82
82
  ? "TRUE"