catchup-library-web 1.21.2 → 1.21.3
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.
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: "center"
|
|
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
|
-
|
|
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;
|
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: "center"
|
|
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
|
-
|
|
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;
|
package/package.json
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: "center",
|
|
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
|
-
|
|
373
|
-
{
|
|
374
|
-
<div
|
|
375
|
-
<div
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
>
|
|
383
|
-
<
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
<
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
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
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
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
|
-
|
|
436
|
-
? "
|
|
437
|
-
: "
|
|
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
|
-
|
|
441
|
-
className=
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
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
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
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
|
-
|
|
520
|
+
</div>
|
|
521
|
+
);
|
|
522
|
+
}
|
|
523
|
+
)}
|
|
511
524
|
</div>
|
|
512
525
|
</div>
|
|
513
526
|
</div>
|
|
514
527
|
</div>
|
|
515
528
|
</div>
|
|
516
|
-
|
|
517
|
-
|
|
529
|
+
</div>
|
|
530
|
+
))}
|
|
518
531
|
</div>
|
|
519
532
|
);
|
|
520
533
|
};
|