catchup-library-web 1.21.2 → 1.21.4

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 +16 -3
  2. package/dist/index.mjs +16 -3
  3. package/package.json +1 -1
  4. package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx +146 -133
  5. package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx +1 -2
package/dist/index.js CHANGED
@@ -5359,6 +5359,7 @@ var GroupingActivityMaterialContent = ({
5359
5359
  y: 0
5360
5360
  });
5361
5361
  const ref = (0, import_react20.useRef)(null);
5362
+ const dropZoneRefs = (0, import_react20.useRef)({});
5362
5363
  (0, import_react20.useEffect)(() => {
5363
5364
  const shuffleArray2 = (array) => {
5364
5365
  if (!isShuffled) {
@@ -5386,6 +5387,17 @@ var GroupingActivityMaterialContent = ({
5386
5387
  (answerData) => answerData.type === "GROUPING"
5387
5388
  ).answerMap = materialMap;
5388
5389
  }, [showCorrectAnswer, answer, materialMap]);
5390
+ (0, import_react20.useEffect)(() => {
5391
+ if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
5392
+ const dropZoneElement = dropZoneRefs.current[dropTargetKey];
5393
+ if (dropZoneElement) {
5394
+ dropZoneElement.scrollIntoView({
5395
+ behavior: "smooth",
5396
+ block: "end"
5397
+ });
5398
+ }
5399
+ }
5400
+ }, [dropTargetKey]);
5389
5401
  const retrieveAnswerMap = () => {
5390
5402
  const foundIndex = answer.data.findIndex(
5391
5403
  (answerData) => answerData.type === "GROUPING"
@@ -5590,7 +5602,7 @@ var GroupingActivityMaterialContent = ({
5590
5602
  }) }),
5591
5603
  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {})
5592
5604
  ] }) : null,
5593
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row w-full", children: [
5605
+ Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row w-full", children: [
5594
5606
  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5595
5607
  "div",
5596
5608
  {
@@ -5611,6 +5623,7 @@ var GroupingActivityMaterialContent = ({
5611
5623
  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-full py-3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5612
5624
  "div",
5613
5625
  {
5626
+ ref: (el) => dropZoneRefs.current[answerMapKey] = el,
5614
5627
  "data-grouping-drop-zone": answerMapKey,
5615
5628
  onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
5616
5629
  onMouseLeave: () => setDropTargetKey(null),
@@ -5673,7 +5686,7 @@ var GroupingActivityMaterialContent = ({
5673
5686
  ) }) })
5674
5687
  }
5675
5688
  ) }) })
5676
- ] }, index)) })
5689
+ ] }, index))
5677
5690
  ] });
5678
5691
  };
5679
5692
  var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
@@ -5794,7 +5807,7 @@ var MatchingActivityMaterialContent = ({
5794
5807
  if (dropZoneElement) {
5795
5808
  dropZoneElement.scrollIntoView({
5796
5809
  behavior: "smooth",
5797
- block: "center"
5810
+ block: "end"
5798
5811
  });
5799
5812
  }
5800
5813
  }
package/dist/index.mjs CHANGED
@@ -5143,6 +5143,7 @@ var GroupingActivityMaterialContent = ({
5143
5143
  y: 0
5144
5144
  });
5145
5145
  const ref = useRef5(null);
5146
+ const dropZoneRefs = useRef5({});
5146
5147
  useEffect10(() => {
5147
5148
  const shuffleArray2 = (array) => {
5148
5149
  if (!isShuffled) {
@@ -5170,6 +5171,17 @@ var GroupingActivityMaterialContent = ({
5170
5171
  (answerData) => answerData.type === "GROUPING"
5171
5172
  ).answerMap = materialMap;
5172
5173
  }, [showCorrectAnswer, answer, materialMap]);
5174
+ useEffect10(() => {
5175
+ if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
5176
+ const dropZoneElement = dropZoneRefs.current[dropTargetKey];
5177
+ if (dropZoneElement) {
5178
+ dropZoneElement.scrollIntoView({
5179
+ behavior: "smooth",
5180
+ block: "end"
5181
+ });
5182
+ }
5183
+ }
5184
+ }, [dropTargetKey]);
5173
5185
  const retrieveAnswerMap = () => {
5174
5186
  const foundIndex = answer.data.findIndex(
5175
5187
  (answerData) => answerData.type === "GROUPING"
@@ -5374,7 +5386,7 @@ var GroupingActivityMaterialContent = ({
5374
5386
  }) }),
5375
5387
  /* @__PURE__ */ jsx30(DividerLine_default, {})
5376
5388
  ] }) : null,
5377
- /* @__PURE__ */ jsx30("div", { className: "overflow-y-auto max-h-[500px]", children: Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
5389
+ Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
5378
5390
  /* @__PURE__ */ jsx30("div", { className: "w-1/3", children: /* @__PURE__ */ jsx30(
5379
5391
  "div",
5380
5392
  {
@@ -5395,6 +5407,7 @@ var GroupingActivityMaterialContent = ({
5395
5407
  /* @__PURE__ */ jsx30("div", { className: "flex-1 min-w-0", ref, children: /* @__PURE__ */ jsx30("div", { className: "h-full py-3", children: /* @__PURE__ */ jsx30(
5396
5408
  "div",
5397
5409
  {
5410
+ ref: (el) => dropZoneRefs.current[answerMapKey] = el,
5398
5411
  "data-grouping-drop-zone": answerMapKey,
5399
5412
  onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
5400
5413
  onMouseLeave: () => setDropTargetKey(null),
@@ -5457,7 +5470,7 @@ var GroupingActivityMaterialContent = ({
5457
5470
  ) }) })
5458
5471
  }
5459
5472
  ) }) })
5460
- ] }, index)) })
5473
+ ] }, index))
5461
5474
  ] });
5462
5475
  };
5463
5476
  var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
@@ -5578,7 +5591,7 @@ var MatchingActivityMaterialContent = ({
5578
5591
  if (dropZoneElement) {
5579
5592
  dropZoneElement.scrollIntoView({
5580
5593
  behavior: "smooth",
5581
- block: "center"
5594
+ block: "end"
5582
5595
  });
5583
5596
  }
5584
5597
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "catchup-library-web",
3
- "version": "1.21.02",
3
+ "version": "1.21.04",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx CHANGED
@@ -33,6 +33,7 @@ const GroupingActivityMaterialContent = ({
33
33
  y: 0,
34
34
  });
35
35
  const ref = useRef<HTMLDivElement>(null);
36
+ const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
36
37
 
37
38
  useEffect(() => {
38
39
  const shuffleArray = (array: any) => {
@@ -63,6 +64,19 @@ const GroupingActivityMaterialContent = ({
63
64
  ).answerMap = materialMap;
64
65
  }, [showCorrectAnswer, answer, materialMap]);
65
66
 
67
+ // Auto-scroll to center the drop zone when hovering
68
+ useEffect(() => {
69
+ if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
70
+ const dropZoneElement = dropZoneRefs.current[dropTargetKey];
71
+ if (dropZoneElement) {
72
+ dropZoneElement.scrollIntoView({
73
+ behavior: "smooth",
74
+ block: "end",
75
+ });
76
+ }
77
+ }
78
+ }, [dropTargetKey]);
79
+
66
80
  const retrieveAnswerMap = () => {
67
81
  const foundIndex = answer.data.findIndex(
68
82
  (answerData: any) => answerData.type === "GROUPING"
@@ -369,152 +383,151 @@ const GroupingActivityMaterialContent = ({
369
383
  <DividerLine />
370
384
  </>
371
385
  ) : null}
372
- <div className="overflow-y-auto max-h-[500px]">
373
- {Object.keys(answerMap).map((answerMapKey, index) => (
374
- <div key={index} className="flex flex-row w-full">
375
- <div className="w-1/3">
376
- <div
377
- className={`border-catchup-blue ${
378
- contentMap.type === "TEXT"
379
- ? "h-catchup-activity-text-outer-box-item"
380
- : "h-catchup-activity-media-outer-box-item"
381
- } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`}
382
- >
383
- <div className="flex flex-col items-center justify-center transition-all duration-300 px-4 text-center">
384
- <p className="text-lg whitespace-pre-wrap">
385
- {constructInputWithSpecialExpressionList(answerMapKey).map(
386
- (inputPart, index) => (
387
- <span
388
- key={index}
389
- className={`${inputPart.isBold ? "font-bold" : ""} ${
390
- inputPart.isUnderline ? "underline" : ""
391
- }`}
392
- >
393
- {inputPart.isEquation ? (
394
- <span className="text-2xl">
395
- <InlineMath math={inputPart.value} />
396
- </span>
397
- ) : (
398
- inputPart.value
399
- )}
400
- </span>
401
- )
402
- )}
403
- </p>
404
- </div>
386
+ {Object.keys(answerMap).map((answerMapKey, index) => (
387
+ <div key={index} className="flex flex-row w-full">
388
+ <div className="w-1/3">
389
+ <div
390
+ className={`border-catchup-blue ${
391
+ contentMap.type === "TEXT"
392
+ ? "h-catchup-activity-text-outer-box-item"
393
+ : "h-catchup-activity-media-outer-box-item"
394
+ } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`}
395
+ >
396
+ <div className="flex flex-col items-center justify-center transition-all duration-300 px-4 text-center">
397
+ <p className="text-lg whitespace-pre-wrap">
398
+ {constructInputWithSpecialExpressionList(answerMapKey).map(
399
+ (inputPart, index) => (
400
+ <span
401
+ key={index}
402
+ className={`${inputPart.isBold ? "font-bold" : ""} ${
403
+ inputPart.isUnderline ? "underline" : ""
404
+ }`}
405
+ >
406
+ {inputPart.isEquation ? (
407
+ <span className="text-2xl">
408
+ <InlineMath math={inputPart.value} />
409
+ </span>
410
+ ) : (
411
+ inputPart.value
412
+ )}
413
+ </span>
414
+ )
415
+ )}
416
+ </p>
405
417
  </div>
406
418
  </div>
407
- <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
408
- <div className="flex-1 min-w-0" ref={ref}>
409
- <div className="h-full py-3">
410
- <div
411
- data-grouping-drop-zone={answerMapKey}
412
- onMouseEnter={() =>
413
- draggedValue && setDropTargetKey(answerMapKey)
414
- }
415
- onMouseLeave={() => setDropTargetKey(null)}
416
- onClick={() => handleDropZoneClick(answerMapKey)}
417
- className={`${
418
- dropTargetKey === answerMapKey
419
- ? "bg-catchup-light-blue ring-2 ring-blue-400"
420
- : ""
421
- } flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1 transition-all duration-200`}
422
- >
423
- <div className="h-full w-full overflow-x-auto">
424
- <div className="flex flex-row items-center gap-2 w-max h-full">
425
- {answerMap[answerMapKey].map(
426
- (answerMapValue: string, answerMapIndex: number) => {
427
- const learnerAnswerState = checkAnswerState(
428
- materialMap[answerMapKey],
429
- answerMapValue
430
- );
431
- return (
432
- <div key={answerMapIndex} className="p-1">
419
+ </div>
420
+ <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
421
+ <div className="flex-1 min-w-0" ref={ref}>
422
+ <div className="h-full py-3">
423
+ <div
424
+ ref={(el) => (dropZoneRefs.current[answerMapKey] = el)}
425
+ data-grouping-drop-zone={answerMapKey}
426
+ onMouseEnter={() =>
427
+ draggedValue && setDropTargetKey(answerMapKey)
428
+ }
429
+ onMouseLeave={() => setDropTargetKey(null)}
430
+ onClick={() => handleDropZoneClick(answerMapKey)}
431
+ className={`${
432
+ dropTargetKey === answerMapKey
433
+ ? "bg-catchup-light-blue ring-2 ring-blue-400"
434
+ : ""
435
+ } flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1 transition-all duration-200`}
436
+ >
437
+ <div className="h-full w-full overflow-x-auto">
438
+ <div className="flex flex-row items-center gap-2 w-max h-full">
439
+ {answerMap[answerMapKey].map(
440
+ (answerMapValue: string, answerMapIndex: number) => {
441
+ const learnerAnswerState = checkAnswerState(
442
+ materialMap[answerMapKey],
443
+ answerMapValue
444
+ );
445
+ return (
446
+ <div key={answerMapIndex} className="p-1">
447
+ <div
448
+ className={`${
449
+ contentMap.type === "TEXT"
450
+ ? "h-catchup-activity-text-box-item"
451
+ : "h-catchup-activity-media-box-item"
452
+ }`}
453
+ >
433
454
  <div
434
455
  className={`${
435
- contentMap.type === "TEXT"
436
- ? "h-catchup-activity-text-box-item"
437
- : "h-catchup-activity-media-box-item"
438
- }`}
456
+ learnerAnswerState === "EMPTY"
457
+ ? "border-catchup-lighter-gray"
458
+ : learnerAnswerState === "CORRECT"
459
+ ? "border-catchup-green"
460
+ : learnerAnswerState === "INCORRECT"
461
+ ? "border-catchup-red"
462
+ : "border-catchup-blue"
463
+ } border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`}
464
+ onClick={(e) => {
465
+ e.stopPropagation();
466
+ if (checkCanAnswerQuestion()) {
467
+ onChange(
468
+ answer,
469
+ answerMapKey,
470
+ null,
471
+ answerMapIndex
472
+ );
473
+ setSelectedValue(null);
474
+ }
475
+ }}
439
476
  >
440
- <div
441
- className={`${
442
- learnerAnswerState === "EMPTY"
443
- ? "border-catchup-lighter-gray"
444
- : learnerAnswerState === "CORRECT"
445
- ? "border-catchup-green"
446
- : learnerAnswerState === "INCORRECT"
447
- ? "border-catchup-red"
448
- : "border-catchup-blue"
449
- } border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`}
450
- onClick={(e) => {
451
- e.stopPropagation();
452
- if (checkCanAnswerQuestion()) {
453
- onChange(
454
- answer,
455
- answerMapKey,
456
- null,
457
- answerMapIndex
458
- );
459
- setSelectedValue(null);
460
- }
461
- }}
462
- >
463
- {contentMap.type === "TEXT" ? (
464
- <div className="flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto">
465
- <div className="m-2">
466
- <p className="text-xl text-center whitespace-pre-wrap">
467
- {constructInputWithSpecialExpressionList(
468
- answerMapValue
469
- ).map((inputPart, index) => (
470
- <span
471
- key={index}
472
- className={`${
473
- inputPart.isBold
474
- ? "font-bold"
475
- : ""
476
- } ${
477
- inputPart.isUnderline
478
- ? "underline"
479
- : ""
480
- }`}
481
- >
482
- {inputPart.isEquation ? (
483
- <span className="text-2xl">
484
- <InlineMath
485
- math={inputPart.value}
486
- />
487
- </span>
488
- ) : (
489
- inputPart.value
490
- )}
491
- </span>
492
- ))}
493
- </p>
494
- </div>
477
+ {contentMap.type === "TEXT" ? (
478
+ <div className="flex flex-col items-center justify-center transition-all duration-300 min-w-[200px] overflow-y-auto">
479
+ <div className="m-2">
480
+ <p className="text-xl text-center whitespace-pre-wrap">
481
+ {constructInputWithSpecialExpressionList(
482
+ answerMapValue
483
+ ).map((inputPart, index) => (
484
+ <span
485
+ key={index}
486
+ className={`${
487
+ inputPart.isBold
488
+ ? "font-bold"
489
+ : ""
490
+ } ${
491
+ inputPart.isUnderline
492
+ ? "underline"
493
+ : ""
494
+ }`}
495
+ >
496
+ {inputPart.isEquation ? (
497
+ <span className="text-2xl">
498
+ <InlineMath
499
+ math={inputPart.value}
500
+ />
501
+ </span>
502
+ ) : (
503
+ inputPart.value
504
+ )}
505
+ </span>
506
+ ))}
507
+ </p>
495
508
  </div>
496
- ) : (
497
- <ShowMaterialMediaByContentType
498
- key={`${uniqueValue}-${answerMapIndex}`}
499
- contentType={contentMap.type}
500
- src={answerMapValue}
501
- canFullScreen={false}
502
- />
503
- )}
504
- </div>
509
+ </div>
510
+ ) : (
511
+ <ShowMaterialMediaByContentType
512
+ key={`${uniqueValue}-${answerMapIndex}`}
513
+ contentType={contentMap.type}
514
+ src={answerMapValue}
515
+ canFullScreen={false}
516
+ />
517
+ )}
505
518
  </div>
506
519
  </div>
507
- );
508
- }
509
- )}
510
- </div>
520
+ </div>
521
+ );
522
+ }
523
+ )}
511
524
  </div>
512
525
  </div>
513
526
  </div>
514
527
  </div>
515
528
  </div>
516
- ))}
517
- </div>
529
+ </div>
530
+ ))}
518
531
  </div>
519
532
  );
520
533
  };
package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx CHANGED
@@ -62,14 +62,13 @@ const MatchingActivityMaterialContent = ({
62
62
  ).answerMap = materialMap;
63
63
  }, [showCorrectAnswer, answer, materialMap]);
64
64
 
65
- // Auto-scroll to center the drop zone when hovering
66
65
  useEffect(() => {
67
66
  if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
68
67
  const dropZoneElement = dropZoneRefs.current[dropTargetKey];
69
68
  if (dropZoneElement) {
70
69
  dropZoneElement.scrollIntoView({
71
70
  behavior: "smooth",
72
- block: "center",
71
+ block: "end",
73
72
  });
74
73
  }
75
74
  }