cognikit 0.2.0 → 1.0.0
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/README.md +309 -237
- package/dist/client.js +188 -117
- package/dist/client.js.map +3 -3
- package/dist/index.js +219 -148
- package/dist/index.js.map +3 -3
- package/dist/interactions/shared/classification-implementation/grader.d.ts +1 -1
- package/dist/shell/simple-shell/script.d.ts +0 -1
- package/package.json +1 -1
- package/public/app.js +149 -109
- package/public/app.js.map +2 -2
- package/public/assets/DEMONSTRATION-1.jpeg +0 -0
- package/public/index.html +62 -16
package/dist/client.js
CHANGED
|
@@ -128,6 +128,7 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
128
128
|
|
|
129
129
|
:host {
|
|
130
130
|
display: inline-block;
|
|
131
|
+
container-type: size;
|
|
131
132
|
--chip-color: rgb(var(--edu-first-accent));
|
|
132
133
|
--chip-colored-color: #d1d1d1;
|
|
133
134
|
}
|
|
@@ -135,20 +136,36 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
135
136
|
:host([colored]) {
|
|
136
137
|
& .chip-container { position: relative; }
|
|
137
138
|
|
|
139
|
+
& .content-zone {
|
|
140
|
+
border-color: color-mix(in srgb, var(--chip-colored-color) 55%, rgb(var(--edu-border)));
|
|
141
|
+
background:
|
|
142
|
+
linear-gradient(
|
|
143
|
+
180deg,
|
|
144
|
+
color-mix(in srgb, var(--chip-colored-color) 18%, rgb(var(--edu-card))) 0%,
|
|
145
|
+
rgb(var(--edu-card)) 44%
|
|
146
|
+
);
|
|
147
|
+
box-shadow:
|
|
148
|
+
inset 0 4px 0 color-mix(in srgb, var(--chip-colored-color) 85%, white 15%),
|
|
149
|
+
0 0 0 1px color-mix(in srgb, var(--chip-colored-color) 22%, transparent);
|
|
150
|
+
}
|
|
151
|
+
|
|
138
152
|
& .chip-container::after {
|
|
139
153
|
content: '';
|
|
140
154
|
position: absolute;
|
|
141
|
-
top:
|
|
142
|
-
left:
|
|
143
|
-
right:
|
|
144
|
-
|
|
155
|
+
top: 0.25rem;
|
|
156
|
+
left: 0.25rem;
|
|
157
|
+
right: 0.25rem;
|
|
158
|
+
height: 0.4rem;
|
|
145
159
|
border-radius: 10px;
|
|
146
|
-
background: var(--chip-colored-color);
|
|
147
|
-
opacity: 0.
|
|
148
|
-
mix-blend-mode: multiply;
|
|
160
|
+
background: color-mix(in srgb, var(--chip-colored-color) 90%, white 10%);
|
|
161
|
+
opacity: 0.95;
|
|
149
162
|
z-index: 2;
|
|
150
163
|
pointer-events: none;
|
|
151
164
|
}
|
|
165
|
+
|
|
166
|
+
& .prefix {
|
|
167
|
+
color: color-mix(in srgb, var(--chip-colored-color) 82%, rgb(var(--edu-ink)));
|
|
168
|
+
}
|
|
152
169
|
}
|
|
153
170
|
|
|
154
171
|
:host([aria-disabled]) {
|
|
@@ -161,7 +178,8 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
161
178
|
flex-direction: column;
|
|
162
179
|
align-items: center;
|
|
163
180
|
position: relative;
|
|
164
|
-
width: 100%;
|
|
181
|
+
width: 100%;
|
|
182
|
+
height: 100%;
|
|
165
183
|
}
|
|
166
184
|
|
|
167
185
|
::slotted(img.chip-image) {
|
|
@@ -195,8 +213,9 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
195
213
|
border: 1px solid rgb(var(--edu-border));
|
|
196
214
|
padding: 0.5rem 1rem;
|
|
197
215
|
cursor: pointer;
|
|
198
|
-
font-size:
|
|
216
|
+
font-size: clamp(0.95rem, min(12cqi, 24cqb), 2.35rem);
|
|
199
217
|
font-weight: 500;
|
|
218
|
+
line-height: 1.2;
|
|
200
219
|
text-align: center;
|
|
201
220
|
transition: all 0.2s ease;
|
|
202
221
|
user-select: none;
|
|
@@ -234,6 +253,7 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
234
253
|
align-items: center;
|
|
235
254
|
justify-content: center;
|
|
236
255
|
min-width: 0;
|
|
256
|
+
overflow-wrap: anywhere;
|
|
237
257
|
}
|
|
238
258
|
|
|
239
259
|
/* ==================== MODALITY ACTION BUTTON ==================== */
|
|
@@ -421,38 +441,45 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
421
441
|
/* ==================== VARIANT: PLAYFUL ==================== */
|
|
422
442
|
|
|
423
443
|
:host([variant="playful"]) .content-zone {
|
|
424
|
-
background:
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
border:
|
|
428
|
-
|
|
444
|
+
background:
|
|
445
|
+
linear-gradient(135deg, rgb(var(--edu-card)), rgb(var(--edu-muted) / 0.9));
|
|
446
|
+
color: rgb(var(--edu-ink));
|
|
447
|
+
border-radius: 14px;
|
|
448
|
+
border: 2px solid rgb(var(--edu-border));
|
|
449
|
+
box-shadow: 0 6px 14px rgb(var(--edu-shadow-color) / 0.12);
|
|
429
450
|
font-weight: 600;
|
|
430
451
|
}
|
|
431
452
|
|
|
432
453
|
:host([variant="playful"]) .content-zone:hover:not([aria-disabled="true"]) {
|
|
433
|
-
|
|
454
|
+
transform: translateY(-2px) rotate(-1deg);
|
|
455
|
+
border-color: rgb(var(--edu-first-accent) / 0.5);
|
|
456
|
+
box-shadow: 0 10px 22px rgb(var(--edu-shadow-color) / 0.18);
|
|
434
457
|
}
|
|
435
458
|
|
|
436
459
|
:host([variant="playful"]) .content-zone:active:not([aria-disabled="true"]) {
|
|
460
|
+
transform: translateY(0) rotate(0deg);
|
|
437
461
|
}
|
|
438
462
|
|
|
439
463
|
:host([variant="playful"]) .prefix {
|
|
440
|
-
color:
|
|
441
|
-
opacity:
|
|
464
|
+
color: var(--chip-color);
|
|
465
|
+
opacity: 1;
|
|
442
466
|
}
|
|
443
467
|
|
|
444
468
|
:host([variant="playful"]) .modality-action {
|
|
445
|
-
background:
|
|
446
|
-
color: var(--
|
|
469
|
+
background: var(--chip-color);
|
|
470
|
+
color: rgb(var(--edu-inverted-ink));
|
|
447
471
|
}
|
|
448
472
|
|
|
449
473
|
:host([variant="playful"][selected]) .content-zone {
|
|
450
|
-
|
|
474
|
+
background:
|
|
475
|
+
linear-gradient(135deg, rgb(var(--edu-card)), rgb(var(--edu-muted)));
|
|
476
|
+
border-color: var(--chip-color);
|
|
477
|
+
box-shadow: 0 0 0 3px rgb(var(--chip-color) / 0.22), 0 10px 22px rgb(var(--edu-shadow-color) / 0.16);
|
|
451
478
|
}
|
|
452
479
|
|
|
453
480
|
:host([variant="playful"]) ::slotted(img.chip-image) {
|
|
454
|
-
border:
|
|
455
|
-
border-radius:
|
|
481
|
+
border: 3px solid rgb(var(--edu-border) / 0.6);
|
|
482
|
+
border-radius: 8px;
|
|
456
483
|
}
|
|
457
484
|
|
|
458
485
|
|
|
@@ -517,7 +544,6 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
517
544
|
border-radius: 2px;
|
|
518
545
|
background: rgb(var(--edu-card));
|
|
519
546
|
color: rgb(var(--edu-ink));
|
|
520
|
-
font-size: 0.95rem;
|
|
521
547
|
letter-spacing: 0.5px;
|
|
522
548
|
}
|
|
523
549
|
|
|
@@ -545,82 +571,88 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
545
571
|
/* ==================== VARIANT: MINIMAL ==================== */
|
|
546
572
|
|
|
547
573
|
:host([variant="minimal"]) .content-zone {
|
|
548
|
-
background:
|
|
574
|
+
background: transparent;
|
|
549
575
|
border: 1px solid rgb(var(--edu-border));
|
|
550
|
-
border-radius:
|
|
551
|
-
color: rgb(var(--edu-ink));
|
|
552
|
-
padding: 0.
|
|
553
|
-
font-size: 0.9rem;
|
|
576
|
+
border-radius: 10px;
|
|
577
|
+
color: rgb(var(--edu-second-ink));
|
|
578
|
+
padding: 0.45rem 0.85rem;
|
|
554
579
|
}
|
|
555
580
|
|
|
556
581
|
:host([variant="minimal"]) .content-zone:hover:not([aria-disabled="true"]) {
|
|
557
|
-
|
|
558
|
-
|
|
582
|
+
background: rgb(var(--edu-card) / 0.8);
|
|
583
|
+
color: rgb(var(--edu-ink));
|
|
584
|
+
border-color: rgb(var(--edu-first-accent) / 0.35);
|
|
585
|
+
box-shadow: 0 4px 12px rgba(var(--edu-shadow-color), 0.08);
|
|
559
586
|
}
|
|
560
587
|
|
|
561
588
|
:host([variant="minimal"][selected]) .content-zone {
|
|
562
589
|
border-color: var(--chip-color);
|
|
563
590
|
background: rgba(var(--chip-color), 0.08);
|
|
591
|
+
color: rgb(var(--edu-ink));
|
|
564
592
|
}
|
|
565
593
|
|
|
566
594
|
/* ==================== VARIANT: GLASS ==================== */
|
|
567
595
|
|
|
568
596
|
:host([variant="glass"]) .content-zone {
|
|
569
|
-
background: rgb(var(--edu-card));
|
|
570
|
-
|
|
571
|
-
border
|
|
597
|
+
background: rgb(var(--edu-card) / 0.65);
|
|
598
|
+
backdrop-filter: blur(10px);
|
|
599
|
+
border: 1px solid rgb(var(--edu-border) / 0.6);
|
|
600
|
+
border-radius: 14px;
|
|
572
601
|
color: rgb(var(--edu-ink));
|
|
573
|
-
padding: 0.5rem
|
|
574
|
-
font-weight:
|
|
575
|
-
letter-spacing:
|
|
576
|
-
|
|
602
|
+
padding: 0.5rem 1rem;
|
|
603
|
+
font-weight: 600;
|
|
604
|
+
letter-spacing: 0.03em;
|
|
605
|
+
box-shadow: inset 0 1px 0 rgb(var(--edu-card) / 0.8), 0 8px 20px rgb(var(--edu-shadow-color) / 0.12);
|
|
577
606
|
}
|
|
578
607
|
|
|
579
608
|
:host([variant="glass"]) .content-zone:hover:not([aria-disabled="true"]) {
|
|
580
|
-
background: var(--
|
|
581
|
-
color: rgb(var(--edu-
|
|
582
|
-
|
|
609
|
+
background: rgb(var(--edu-card) / 0.78);
|
|
610
|
+
border-color: rgb(var(--edu-first-accent) / 0.45);
|
|
611
|
+
box-shadow: inset 0 1px 0 rgb(var(--edu-card) / 0.9), 0 12px 24px rgb(var(--edu-shadow-color) / 0.16);
|
|
583
612
|
}
|
|
584
613
|
|
|
585
614
|
:host([variant="glass"]) .content-zone:active:not([aria-disabled="true"]) {
|
|
586
|
-
background:
|
|
615
|
+
background: rgb(var(--edu-card) / 0.88);
|
|
587
616
|
}
|
|
588
617
|
|
|
589
618
|
:host([variant="glass"]) .prefix {
|
|
590
|
-
font-weight:
|
|
619
|
+
font-weight: 700;
|
|
620
|
+
color: rgb(var(--edu-first-accent));
|
|
591
621
|
}
|
|
592
622
|
|
|
593
623
|
:host([variant="glass"][selected]) .content-zone {
|
|
594
624
|
background: rgba(var(--chip-color), 0.15);
|
|
595
625
|
border-color: var(--chip-color);
|
|
596
|
-
box-shadow: 0 0 0 2px rgba(var(--chip-color), 0.
|
|
626
|
+
box-shadow: 0 0 0 2px rgba(var(--chip-color), 0.24), inset 0 1px 0 rgb(var(--edu-card) / 0.85);
|
|
597
627
|
}
|
|
598
628
|
|
|
599
629
|
/* ==================== VARIANT: CARD ==================== */
|
|
600
630
|
|
|
601
631
|
:host([variant="card"]) .content-zone {
|
|
602
|
-
background:
|
|
603
|
-
border:
|
|
604
|
-
border-radius:
|
|
632
|
+
background: rgb(var(--edu-card));
|
|
633
|
+
border: 1px solid rgb(var(--edu-border));
|
|
634
|
+
border-radius: 12px;
|
|
605
635
|
color: rgb(var(--edu-ink));
|
|
636
|
+
box-shadow: 0 8px 18px rgb(var(--edu-shadow-color) / 0.1);
|
|
606
637
|
}
|
|
607
638
|
|
|
608
639
|
:host([variant="card"]) .content-zone:hover:not([aria-disabled="true"]) {
|
|
609
|
-
background: rgb(var(--edu-muted));
|
|
610
|
-
border-color: var(--
|
|
640
|
+
background: linear-gradient(180deg, rgb(var(--edu-card)), rgb(var(--edu-muted) / 0.8));
|
|
641
|
+
border-color: rgb(var(--edu-first-accent) / 0.35);
|
|
642
|
+
box-shadow: 0 12px 24px rgb(var(--edu-shadow-color) / 0.14);
|
|
611
643
|
}
|
|
612
644
|
|
|
613
645
|
:host([variant="card"]) .content-zone:active:not([aria-disabled="true"]) {
|
|
614
|
-
|
|
646
|
+
transform: translateY(1px);
|
|
615
647
|
}
|
|
616
648
|
|
|
617
649
|
:host([variant="card"]) .prefix {
|
|
618
|
-
color: var(--
|
|
650
|
+
color: rgb(var(--edu-third-ink));
|
|
619
651
|
}
|
|
620
652
|
|
|
621
653
|
:host([variant="card"][selected]) .content-zone {
|
|
622
654
|
border-color: var(--chip-color);
|
|
623
|
-
box-shadow: 0 0 0 3px rgba(var(--chip-color), 0.
|
|
655
|
+
box-shadow: 0 0 0 3px rgba(var(--chip-color), 0.18), 0 12px 24px rgb(var(--edu-shadow-color) / 0.12);
|
|
624
656
|
}
|
|
625
657
|
|
|
626
658
|
/* ==================== VARIANT: SIGN ==================== */
|
|
@@ -630,9 +662,8 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
630
662
|
border-radius: 0;
|
|
631
663
|
color: rgb(var(--edu-ink));
|
|
632
664
|
padding: 0.5rem 1.2rem;
|
|
633
|
-
font-size: 0.9rem;
|
|
634
665
|
font-weight: bold;
|
|
635
|
-
transform: skewX(-
|
|
666
|
+
transform: skewX(-3deg);
|
|
636
667
|
text-transform: uppercase;
|
|
637
668
|
letter-spacing: 0.2rem;
|
|
638
669
|
}
|
|
@@ -891,16 +922,17 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
891
922
|
}
|
|
892
923
|
|
|
893
924
|
.block[variant="playful"] {
|
|
894
|
-
background: var(--
|
|
895
|
-
border:
|
|
896
|
-
color: rgb(var(--edu-
|
|
925
|
+
background: linear-gradient(135deg, rgb(var(--edu-card)), rgb(var(--edu-muted) / 0.92));
|
|
926
|
+
border: 2px solid rgb(var(--edu-border));
|
|
927
|
+
color: rgb(var(--edu-ink));
|
|
897
928
|
border-radius: 16px;
|
|
898
|
-
box-shadow:
|
|
929
|
+
box-shadow: 0 6px 14px rgb(var(--edu-shadow-color) / 0.12);
|
|
899
930
|
}
|
|
900
931
|
|
|
901
932
|
.block[variant="playful"]:hover {
|
|
902
|
-
transform: translateY(-2px) rotate(-
|
|
903
|
-
|
|
933
|
+
transform: translateY(-2px) rotate(-1deg);
|
|
934
|
+
border-color: color-mix(in srgb, var(--accent-color) 38%, rgb(var(--edu-border)));
|
|
935
|
+
box-shadow: 0 10px 22px rgb(var(--edu-shadow-color) / 0.18);
|
|
904
936
|
}
|
|
905
937
|
|
|
906
938
|
.block[variant="outline"] {
|
|
@@ -931,40 +963,45 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
931
963
|
}
|
|
932
964
|
|
|
933
965
|
.block[variant="minimal"] {
|
|
934
|
-
background:
|
|
935
|
-
color: rgb(var(--edu-ink));
|
|
966
|
+
background: transparent;
|
|
967
|
+
color: rgb(var(--edu-second-ink));
|
|
936
968
|
border: 1px solid rgb(var(--edu-border));
|
|
937
|
-
border-radius:
|
|
969
|
+
border-radius: 10px;
|
|
938
970
|
padding: 0.75rem;
|
|
939
971
|
}
|
|
940
972
|
|
|
941
973
|
.block[variant="minimal"]:hover {
|
|
942
|
-
|
|
943
|
-
|
|
974
|
+
background: rgb(var(--edu-card) / 0.8);
|
|
975
|
+
color: rgb(var(--edu-ink));
|
|
976
|
+
border-color: rgb(var(--edu-first-accent) / 0.35);
|
|
977
|
+
box-shadow: 0 4px 12px rgba(var(--edu-shadow-color), 0.08);
|
|
944
978
|
}
|
|
945
979
|
|
|
946
980
|
.block[variant="glass"] {
|
|
947
981
|
background: rgba(var(--edu-card), 0.7);
|
|
948
982
|
backdrop-filter: blur(10px);
|
|
949
|
-
border:
|
|
950
|
-
border-radius:
|
|
983
|
+
border: 1px solid rgba(var(--edu-border), 0.45);
|
|
984
|
+
border-radius: 14px;
|
|
985
|
+
box-shadow: inset 0 1px 0 rgb(var(--edu-card) / 0.85), 0 8px 20px rgba(var(--edu-shadow-color), 0.12);
|
|
951
986
|
}
|
|
952
987
|
|
|
953
988
|
.block[variant="glass"]:hover {
|
|
954
|
-
background: rgba(var(--edu-card), 0.
|
|
955
|
-
border-color: rgba(var(--edu-first-accent), 0.
|
|
989
|
+
background: rgba(var(--edu-card), 0.82);
|
|
990
|
+
border-color: rgba(var(--edu-first-accent), 0.4);
|
|
991
|
+
box-shadow: inset 0 1px 0 rgb(var(--edu-card) / 0.95), 0 12px 24px rgba(var(--edu-shadow-color), 0.16);
|
|
956
992
|
}
|
|
957
993
|
|
|
958
994
|
.block[variant="card"] {
|
|
959
995
|
background: rgb(var(--edu-card));
|
|
960
|
-
border:
|
|
961
|
-
border-radius:
|
|
962
|
-
box-shadow: 0
|
|
996
|
+
border: 1px solid rgb(var(--edu-border));
|
|
997
|
+
border-radius: 12px;
|
|
998
|
+
box-shadow: 0 8px 18px rgba(var(--edu-shadow-color), 0.1);
|
|
963
999
|
}
|
|
964
1000
|
|
|
965
1001
|
.block[variant="card"]:hover {
|
|
966
|
-
|
|
967
|
-
|
|
1002
|
+
background: linear-gradient(180deg, rgb(var(--edu-card)), rgb(var(--edu-muted) / 0.8));
|
|
1003
|
+
border-color: rgb(var(--edu-first-accent) / 0.35);
|
|
1004
|
+
box-shadow: 0 12px 24px rgba(var(--edu-shadow-color), 0.14);
|
|
968
1005
|
}
|
|
969
1006
|
|
|
970
1007
|
.block[variant="sign"] {
|
|
@@ -980,7 +1017,7 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
980
1017
|
|
|
981
1018
|
.block[variant="sign"]:hover {
|
|
982
1019
|
border-color: var(--accent-color);
|
|
983
|
-
background: var(
|
|
1020
|
+
background: rgb(var(--edu-muted));
|
|
984
1021
|
}
|
|
985
1022
|
|
|
986
1023
|
.block[variant="empty"] {
|
|
@@ -1033,10 +1070,10 @@ ${Object.entries(e).map(([n,t])=>` ${n}: ${t};`).join(`
|
|
|
1033
1070
|
`+e.slice(a+1):l+=e.slice(i),l.slice(1)}function _o(e){for(var n="",t=0,r,i=0;i<e.length;t>=65536?i+=2:i++)t=me(e,i),r=A[t],!r&&xe(t)?(n+=e[i],t>=65536&&(n+=e[i+1])):n+=r||wo(t);return n}function Io(e,n,t){var r="",i=e.tag,o,a,s;for(o=0,a=t.length;o<a;o+=1)s=t[o],e.replacer&&(s=e.replacer.call(t,String(o),s)),(z(e,n,s,!1,!1)||typeof s>"u"&&z(e,n,null,!1,!1))&&(r!==""&&(r+=","+(e.condenseFlow?"":" ")),r+=e.dump);e.tag=i,e.dump="["+r+"]"}function Ft(e,n,t,r){var i="",o=e.tag,a,s,l;for(a=0,s=t.length;a<s;a+=1)l=t[a],e.replacer&&(l=e.replacer.call(t,String(a),l)),(z(e,n+1,l,!0,!0,!1,!0)||typeof l>"u"&&z(e,n+1,null,!0,!0,!1,!0))&&((!r||i!=="")&&(i+=lt(e,n)),e.dump&&be===e.dump.charCodeAt(0)?i+="-":i+="- ",i+=e.dump);e.tag=o,e.dump=i||"[]"}function Mo(e,n,t){var r="",i=e.tag,o=Object.keys(t),a,s,l,c,d;for(a=0,s=o.length;a<s;a+=1)d="",r!==""&&(d+=", "),e.condenseFlow&&(d+='"'),l=o[a],c=t[l],e.replacer&&(c=e.replacer.call(t,l,c)),z(e,n,l,!1,!1)&&(e.dump.length>1024&&(d+="? "),d+=e.dump+(e.condenseFlow?'"':"")+":"+(e.condenseFlow?"":" "),z(e,n,c,!1,!1)&&(d+=e.dump,r+=d));e.tag=i,e.dump="{"+r+"}"}function Lo(e,n,t,r){var i="",o=e.tag,a=Object.keys(t),s,l,c,d,u,p;if(e.sortKeys===!0)a.sort();else if(typeof e.sortKeys=="function")a.sort(e.sortKeys);else if(e.sortKeys)throw new _("sortKeys must be a boolean or a function");for(s=0,l=a.length;s<l;s+=1)p="",(!r||i!=="")&&(p+=lt(e,n)),c=a[s],d=t[c],e.replacer&&(d=e.replacer.call(t,c,d)),z(e,n+1,c,!0,!0,!0)&&(u=e.tag!==null&&e.tag!=="?"||e.dump&&e.dump.length>1024,u&&(e.dump&&be===e.dump.charCodeAt(0)?p+="?":p+="? "),p+=e.dump,u&&(p+=lt(e,n)),z(e,n+1,d,!0,u)&&(e.dump&&be===e.dump.charCodeAt(0)?p+=":":p+=": ",p+=e.dump,i+=p));e.tag=o,e.dump=i||"{}"}function jt(e,n,t){var r,i,o,a,s,l;for(i=t?e.explicitTypes:e.implicitTypes,o=0,a=i.length;o<a;o+=1)if(s=i[o],(s.instanceOf||s.predicate)&&(!s.instanceOf||typeof n=="object"&&n instanceof s.instanceOf)&&(!s.predicate||s.predicate(n))){if(t?s.multi&&s.representName?e.tag=s.representName(n):e.tag=s.tag:e.tag="?",s.represent){if(l=e.styleMap[s.tag]||s.defaultStyle,Cr.call(s.represent)==="[object Function]")r=s.represent(n,l);else if(kr.call(s.represent,l))r=s.represent[l](n,l);else throw new _("!<"+s.tag+'> tag resolver accepts not "'+l+'" style');e.dump=r}return!0}return!1}function z(e,n,t,r,i,o,a){e.tag=null,e.dump=t,jt(e,t,!1)||jt(e,t,!0);var s=Cr.call(e.dump),l=r,c;r&&(r=e.flowLevel<0||e.flowLevel>n);var d=s==="[object Object]"||s==="[object Array]",u,p;if(d&&(u=e.duplicates.indexOf(t),p=u!==-1),(e.tag!==null&&e.tag!=="?"||p||e.indent!==2&&n>0)&&(i=!1),p&&e.usedDuplicates[u])e.dump="*ref_"+u;else{if(d&&p&&!e.usedDuplicates[u]&&(e.usedDuplicates[u]=!0),s==="[object Object]")r&&Object.keys(e.dump).length!==0?(Lo(e,n,e.dump,i),p&&(e.dump="&ref_"+u+e.dump)):(Mo(e,n,e.dump),p&&(e.dump="&ref_"+u+" "+e.dump));else if(s==="[object Array]")r&&e.dump.length!==0?(e.noArrayIndent&&!a&&n>0?Ft(e,n-1,e.dump,i):Ft(e,n,e.dump,i),p&&(e.dump="&ref_"+u+e.dump)):(Io(e,n,e.dump),p&&(e.dump="&ref_"+u+" "+e.dump));else if(s==="[object String]")e.tag!=="?"&&$o(e,e.dump,n,o,l);else{if(s==="[object Undefined]")return!1;if(e.skipInvalid)return!1;throw new _("unacceptable kind of an object to dump "+s)}e.tag!==null&&e.tag!=="?"&&(c=encodeURI(e.tag[0]==="!"?e.tag.slice(1):e.tag).replace(/!/g,"%21"),e.tag[0]==="!"?c="!"+c:c.slice(0,18)==="tag:yaml.org,2002:"?c="!!"+c.slice(18):c="!<"+c+">",e.dump=c+" "+e.dump)}return!0}function Do(e,n){var t=[],r=[],i,o;for(dt(e,t,r),i=0,o=r.length;i<o;i+=1)n.duplicates.push(t[r[i]]);n.usedDuplicates=new Array(o)}function dt(e,n,t){var r,i,o;if(e!==null&&typeof e=="object")if(i=n.indexOf(e),i!==-1)t.indexOf(i)===-1&&t.push(i);else if(n.push(e),Array.isArray(e))for(i=0,o=e.length;i<o;i+=1)dt(e[i],n,t);else for(r=Object.keys(e),i=0,o=r.length;i<o;i+=1)dt(e[r[i]],n,t)}function Ro(e,n){n=n||{};var t=new Eo(n);t.noRefs||Do(e,t);var r=e;return t.replacer&&(r=t.replacer.call({"":r},"",r)),z(t,0,r,!0,!0)?t.dump+`
|
|
1034
1071
|
`:""}var Po=Ro,Bo={dump:Po};function ft(e,n){return function(){throw new Error("Function yaml."+e+" is removed in js-yaml 4. Use yaml."+n+" instead, which is now safe by default.")}}var qo=$,zo=Kt,Ho=Xt,No=ir,Go=nr,Oo=pt,Vo=Er.load,Fo=Er.loadAll,jo=Bo.dump,Uo=_,Yo={binary:cr,float:rr,map:Zt,null:Jt,pairs:ur,set:pr,timestamp:sr,bool:er,int:tr,merge:lr,omap:dr,seq:Qt,str:Wt},Ko=ft("safeLoad","load"),Wo=ft("safeLoadAll","loadAll"),Qo=ft("safeDump","dump"),Rr={Type:qo,Schema:zo,FAILSAFE_SCHEMA:Ho,JSON_SCHEMA:No,CORE_SCHEMA:Go,DEFAULT_SCHEMA:Oo,load:Vo,loadAll:Fo,dump:jo,YAMLException:Uo,types:Yo,safeLoad:Ko,safeLoadAll:Wo,safeDump:Qo};var U=["#10b981","#f59e0b","#06b6d4","#ec4899","#8b5cf6","#3b82f6","#f43f5e","#84cc16","#a855f7","#6366f1"];function T(e){let n=e.length,t;for(;n!==0;)t=Math.floor(Math.random()*n),n--,[e[n],e[t]]=[e[t],e[n]];return e}var P=(e,n=0)=>{let t=3735928559^n,r=1103547991^n;for(let i=0,o;i<e.length;i++)o=e.charCodeAt(i),t=Math.imul(t^o,265443561),r=Math.imul(r^o,159334677);return t=Math.imul(t^r>>>16,2246822507)^Math.imul(r^r>>>13,3266489909),r=Math.imul(r^r>>>16,2246822507)^Math.imul(t^t>>>13,3266489909),(4294967296*(2009751&r)+(t>>>0)).toString()};function C(e){return e.replace(/[&<>"']/g,n=>n==="&"?"&":n==="<"?"<":n===">"?">":n==='"'?""":"'")}function Zo(e){try{return Rr.load(e)}catch(n){throw new Error(`Invalid YAML assets:
|
|
1035
1072
|
${n instanceof Error?n.message:String(n)}`)}}function M(e){return typeof e=="string"}function bt(e){return typeof e=="number"}function vt(e){return/^(\d{1,2}:)?\d{1,2}:\d{2}$/.test(e)}function Pr(e){return e===null?"null":Array.isArray(e)?"array":typeof e}function Ye(e){return typeof e=="object"&&e!==null&&(Object.getPrototypeOf(e)===Object.prototype||Object.getPrototypeOf(e)===null)}function Y(e){return e.split("|").map(n=>n.trim()).filter(Boolean)}var ee=e=>[...new Set(e)];var we=class extends Error{constructor(n){super(`Asset validation failed:n- ${n.join(`
|
|
1036
|
-
- `)}`),this.name="AssetValidationError",this.issues=n}};function Xo(e){let n=[];if(!Ye(e))throw new we(["Top-level assets must be an object/map like { mango: {...}, trend: {...} }"]);let t=e,r={};for(let[o,a]of Object.entries(t)){if(!o||typeof o!="string"){n.push(`Asset key must be a non-empty string (got: ${String(o)})`);continue}if(/^[a-zA-Z0-9._-]+$/.test(o)||n.push(`Asset id "${o}" has invalid chars; use letters/numbers/._-`),!Ye(a)){n.push(`Asset "${o}" must be an object (got: ${Pr(a)})`);continue}let s=a,l=s.type,c=!!s.dialog;if(!M(l)){n.push(`Asset "${o}" missing string field "type"`);continue}if(!Jo(l)){n.push(`Asset "${o}" has unsupported type "${l}" (use image|video|audio|html)`);continue}switch(l){case"image":{let d=s.url;M(d)||n.push(`Asset "${o}" (image) missing "url"`);let u=s.size;u!==void 0&&!M(u)&&n.push(`Asset "${o}" (image) field "size" must be a string`),M(d)&&(r[o]={id:o,type:l,dialog:c,url:d,...M(u)?{size:u}:{}});break}case"video":{let d=s.url;M(d)||n.push(`Asset "${o}" (video) missing "url"`);let u=s.span,p;if(u!==void 0)if(!Ye(u))n.push(`Asset "${o}" (video) field "span" must be an object`);else{let h=u.from,g=u.to;!M(h)||!M(g)?n.push(`Asset "${o}" (video) span requires string "from" and "to"`):((!vt(h)||!vt(g))&&n.push(`Asset "${o}" (video) span times should look like "02:15" or "01:02:45"`),p={from:h,to:g})}M(d)&&(r[o]={id:o,type:l,dialog:c,url:d,...p?{span:p}:{}});break}case"audio":{let d=s.url;M(d)||n.push(`Asset "${o}" (audio) missing "url"`);let u=s.volume;u!==void 0&&(!bt(u)||!Number.isFinite(u)?n.push(`Asset "${o}" (audio) field "volume" must be a number`):(u<0||u>100)&&n.push(`Asset "${o}" (audio) field "volume" must be between 0 and 100`)),M(d)&&(r[o]={id:o,type:l,dialog:c,url:d,...bt(u)?{volume:u}:{}});break}case"html":{let d=s.content;if(!M(d)){n.push(`Asset "${o}" (html) missing string field "content"`);break}r[o]={id:o,type:l,dialog:c,content:d};break}case"tts":{let d=s.content;if(!M(d)){n.push(`Asset "${o}" (tts) missing string field "content"`);break}r[o]={id:o,type:l,dialog:c,content:d};break}}}if(n.length)throw new we(n);let i=Object.keys(r).sort((o,a)=>o.localeCompare(a)).map(o=>r[o]);return{assetsById:r,assetsList:i}}function Jo(e){return e==="image"||e==="video"||e==="audio"||e==="html"}function ye(e,n,t){let
|
|
1073
|
+
- `)}`),this.name="AssetValidationError",this.issues=n}};function Xo(e){let n=[];if(!Ye(e))throw new we(["Top-level assets must be an object/map like { mango: {...}, trend: {...} }"]);let t=e,r={};for(let[o,a]of Object.entries(t)){if(!o||typeof o!="string"){n.push(`Asset key must be a non-empty string (got: ${String(o)})`);continue}if(/^[a-zA-Z0-9._-]+$/.test(o)||n.push(`Asset id "${o}" has invalid chars; use letters/numbers/._-`),!Ye(a)){n.push(`Asset "${o}" must be an object (got: ${Pr(a)})`);continue}let s=a,l=s.type,c=!!s.dialog;if(!M(l)){n.push(`Asset "${o}" missing string field "type"`);continue}if(!Jo(l)){n.push(`Asset "${o}" has unsupported type "${l}" (use image|video|audio|html)`);continue}switch(l){case"image":{let d=s.url;M(d)||n.push(`Asset "${o}" (image) missing "url"`);let u=s.size;u!==void 0&&!M(u)&&n.push(`Asset "${o}" (image) field "size" must be a string`),M(d)&&(r[o]={id:o,type:l,dialog:c,url:d,...M(u)?{size:u}:{}});break}case"video":{let d=s.url;M(d)||n.push(`Asset "${o}" (video) missing "url"`);let u=s.span,p;if(u!==void 0)if(!Ye(u))n.push(`Asset "${o}" (video) field "span" must be an object`);else{let h=u.from,g=u.to;!M(h)||!M(g)?n.push(`Asset "${o}" (video) span requires string "from" and "to"`):((!vt(h)||!vt(g))&&n.push(`Asset "${o}" (video) span times should look like "02:15" or "01:02:45"`),p={from:h,to:g})}M(d)&&(r[o]={id:o,type:l,dialog:c,url:d,...p?{span:p}:{}});break}case"audio":{let d=s.url;M(d)||n.push(`Asset "${o}" (audio) missing "url"`);let u=s.volume;u!==void 0&&(!bt(u)||!Number.isFinite(u)?n.push(`Asset "${o}" (audio) field "volume" must be a number`):(u<0||u>100)&&n.push(`Asset "${o}" (audio) field "volume" must be between 0 and 100`)),M(d)&&(r[o]={id:o,type:l,dialog:c,url:d,...bt(u)?{volume:u}:{}});break}case"html":{let d=s.content;if(!M(d)){n.push(`Asset "${o}" (html) missing string field "content"`);break}r[o]={id:o,type:l,dialog:c,content:d};break}case"tts":{let d=s.content;if(!M(d)){n.push(`Asset "${o}" (tts) missing string field "content"`);break}r[o]={id:o,type:l,dialog:c,content:d};break}}}if(n.length)throw new we(n);let i=Object.keys(r).sort((o,a)=>o.localeCompare(a)).map(o=>r[o]);return{assetsById:r,assetsList:i}}function Jo(e){return e==="image"||e==="video"||e==="audio"||e==="html"}function ye(e,n,t,r){let i=0,o=0;return e.forEach(s=>{s.items.forEach(l=>{o++;let c=n.get(l),d=t.querySelector(`[data-label="${l}"]`);c===s.label?(i++,d.chipState="correct"):d.chipState="wrong"})}),r&&r.forEach(s=>{o++;let l=n.get(s),c=t.querySelector(`[data-label="${s}"]`);l==="Invalid"?(i++,c.chipState="correct"):c.chipState="wrong"}),{score:o>0?Math.round(i/o*100):0,correct:i,total:o}}var Ee=class extends x{constructor(t,r,i){super(t,r,i);this.interactionMechanic="static";this.categories=[];this.allItems=[];this.categoryColors=["#6366f1","#3b82f6","#10b981","#f59e0b","#ef4444","#8b5cf6","#ec4899","#14b8a6","#f97316","#94a3b8"];this.currentColor=this.categoryColors[0];this.data.categories.forEach(({label:o,items:a})=>{this.categories.push(o),this.allItems.push(...a)}),this.currentCategory=this.categories[0],this.data.distractors&&(this.allItems.push(...this.data.distractors),this.categories.push("Invalid")),this.allItems=T(this.allItems),this.categorized=new Map,this.initializeProgress(this.allItems.length)}initialize(){}cleanup(){}onVariantChange(t){this.querySelectorAll("edu-chip, edu-block").forEach(r=>{r.variant!==void 0&&(r.variant=t)})}render(){this.innerHTML=`
|
|
1037
1074
|
<style>
|
|
1038
1075
|
open-classification {
|
|
1039
|
-
--current-color: #
|
|
1076
|
+
--current-color: #aa94b8;
|
|
1040
1077
|
display: flex;
|
|
1041
1078
|
width: 100%;
|
|
1042
1079
|
height: 100%;
|
|
@@ -1081,7 +1118,7 @@ ${n instanceof Error?n.message:String(n)}`)}}function M(e){return typeof e=="str
|
|
|
1081
1118
|
.items-container {
|
|
1082
1119
|
display: grid;
|
|
1083
1120
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
|
|
1084
|
-
grid-auto-rows: minmax(
|
|
1121
|
+
grid-auto-rows: minmax(clamp(56px, 12cqh, 88px), 1fr);
|
|
1085
1122
|
gap: clamp(0.5rem, min(1.6cqw, 1.6cqh), 1rem);
|
|
1086
1123
|
padding: clamp(0.5rem, min(1.6cqw, 1.6cqh), 1.25rem);
|
|
1087
1124
|
background: rgb(var(--edu-muted));
|
|
@@ -1193,7 +1230,7 @@ ${n instanceof Error?n.message:String(n)}`)}}function M(e){return typeof e=="str
|
|
|
1193
1230
|
</div>
|
|
1194
1231
|
`,this.style.setProperty("--current-color",this.currentColor),this.$categoriesBar=this.querySelector("#categories-bar"),this.setCategories(this.$categoriesBar);let t=this.querySelector(".items-container");this.setItems(t)}setItems(t){this.allItems.forEach((r,i)=>{let o=document.createElement("edu-chip");o.variant=this.config.variant,o.dataset.label=r,D(r,o,this.assets?.assetsById),o.addEventListener("click",a=>{let s=a.currentTarget,l=s.dataset.label;if(this.categorized.get(l)===this.currentCategory){this.categorized.delete(l),s.colored=!1,this.decrementProgress(),this.emitStateChange();return}this.categorized.has(l)||this.incrementProgress(),this.categorized.set(l,this.currentCategory),s.color=this.currentColor,s.colored=!0,this.emitStateChange()}),t.append(o)})}setCategories(t){this.categories.forEach((r,i)=>{let o=new V;o.variant=this.config.variant;let a=this.categoryColors[i%this.categoryColors.length];o.dataset.category=r,o.dataset.color=a,o.style.setProperty("--category-color",a),o.innerHTML=`
|
|
1195
1232
|
<div class="category-label">${r}</div>
|
|
1196
|
-
`,o.addEventListener("click",s=>{let l=s.currentTarget;this.currentCategory=l.dataset.category,this.currentColor=l.dataset.color,this.style.setProperty("--current-color",this.currentColor),t.querySelectorAll("edu-block").forEach(c=>c.classList.remove("active")),o.classList.add("active")}),r===this.currentCategory&&o.classList.add("active"),t.append(o)})}getCurrentState(){return{categorized:Object.fromEntries(this.categorized),progress:this.progressTracker.current}}isInteractionComplete(){if(this.categorized.size!==this.allItems.length)return!1;for(let t of this.categorized.values())if(t==null)return!1;return!0}onHint(){let t=this.allItems.filter(i=>!this.categorized.has(i));if(t.length===0){alert('All items are categorized! Click "Check" to submit.'),this.emitHintShown("All items categorized");return}let r=t[0];alert(`Hint: You haven't categorized "${r}" yet. Which category does it belong to?`),this.emitHintShown(`Uncategorized item: ${r}`)}submit(){super.submit();let t=ye(this.data.categories,this.categorized,this);console.log(`Classification Score: ${t.score.toFixed(1)}% (${t.correct}/${t.total} correct)`),this.dispatchEvent(new CustomEvent("interaction:graded",{detail:{result:t},bubbles:!0,composed:!0}))
|
|
1233
|
+
`,o.addEventListener("click",s=>{let l=s.currentTarget;this.currentCategory=l.dataset.category,this.currentColor=l.dataset.color,this.style.setProperty("--current-color",this.currentColor),t.querySelectorAll("edu-block").forEach(c=>c.classList.remove("active")),o.classList.add("active")}),r===this.currentCategory&&o.classList.add("active"),t.append(o)})}getCurrentState(){return{categorized:Object.fromEntries(this.categorized),progress:this.progressTracker.current}}isInteractionComplete(){if(this.categorized.size!==this.allItems.length)return!1;for(let t of this.categorized.values())if(t==null)return!1;return!0}onHint(){let t=this.allItems.filter(i=>!this.categorized.has(i));if(t.length===0){alert('All items are categorized! Click "Check" to submit.'),this.emitHintShown("All items categorized");return}let r=t[0];alert(`Hint: You haven't categorized "${r}" yet. Which category does it belong to?`),this.emitHintShown(`Uncategorized item: ${r}`)}submit(){super.submit();let t=ye(this.data.categories,this.categorized,this,this.data.distractors);console.log(`Classification Score: ${t.score.toFixed(1)}% (${t.correct}/${t.total} correct)`),this.dispatchEvent(new CustomEvent("interaction:graded",{detail:{result:t},bubbles:!0,composed:!0}))}reset(){super.reset(),this.categorized.clear(),this.querySelectorAll("edu-chip").forEach(t=>{t.classList.remove("colorized"),t.style.setProperty("--current-color","")})}};customElements.get("open-classification")||customElements.define("open-classification",Ee);var Ce=class extends x{constructor(t,r,i){super(t,r,i);this.interactionMechanic="automatic-sequencing";this.categories=[];this.allItems=[];this.categorized=new Map;this.zones=[];this.chips=[];this.activeChip=null;this.currentZone=null;this.isDragging=!1;this.startX=0;this.startY=0;this.offsetX=0;this.offsetY=0;this.data.categories.forEach(({label:o,items:a})=>{this.categories.push(o),this.allItems.push(...a)}),this.data.distractors&&console.warn("Found a distractor in a Sequential Classification interaction, those are not useful and will be ignored"),this.allItems=this.config.shuffle?T(this.allItems):this.allItems,this.initializeProgress(this.allItems.length),this.boundPointerMove=this.handlePointerMove.bind(this),this.boundPointerUp=this.handlePointerUp.bind(this),this.variant=this.config.variant}initialize(){window.addEventListener("pointermove",this.boundPointerMove),window.addEventListener("pointerup",this.boundPointerUp)}cleanup(){window.removeEventListener("pointermove",this.boundPointerMove),window.removeEventListener("pointerup",this.boundPointerUp)}onVariantChange(t){this.querySelectorAll("edu-chip, edu-block").forEach(r=>{r.variant!==void 0&&(r.variant=t)}),this.variant=t}render(){let t=Math.min(this.categories.length,4);this.innerHTML=`
|
|
1197
1234
|
<style>
|
|
1198
1235
|
sequential-classification {
|
|
1199
1236
|
display: flex;
|
|
@@ -1275,6 +1312,7 @@ ${n instanceof Error?n.message:String(n)}`)}}function M(e){return typeof e=="str
|
|
|
1275
1312
|
gap: clamp(0.5rem, min(1.5cqw, 1.5cqh), 1rem);
|
|
1276
1313
|
overflow-y: auto;
|
|
1277
1314
|
overflow-x: hidden;
|
|
1315
|
+
scrollbar-gutter: stable;
|
|
1278
1316
|
align-content: stretch;
|
|
1279
1317
|
padding: clamp(0.25rem, min(1cqw, 1cqh), 0.5rem);
|
|
1280
1318
|
min-height: 0;
|
|
@@ -1318,11 +1356,17 @@ ${n instanceof Error?n.message:String(n)}`)}}function M(e){return typeof e=="str
|
|
|
1318
1356
|
|
|
1319
1357
|
edu-chip {
|
|
1320
1358
|
position: absolute;
|
|
1359
|
+
width: clamp(160px, 20cqw, 280px);
|
|
1360
|
+
max-width: calc(100% - 0.5rem);
|
|
1321
1361
|
user-select: none;
|
|
1322
1362
|
touch-action: none;
|
|
1323
1363
|
transition: transform 0.2s ease;
|
|
1324
1364
|
}
|
|
1325
1365
|
|
|
1366
|
+
edu-chip::part(content-zone) {
|
|
1367
|
+
min-height: clamp(56px, 10cqh, 88px);
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1326
1370
|
edu-chip:hover {
|
|
1327
1371
|
transform: scale(1.05);
|
|
1328
1372
|
}
|
|
@@ -1575,7 +1619,7 @@ overflow-x: hidden;`;let r=document.createElement("edu-media");r.setAttribute("t
|
|
|
1575
1619
|
}
|
|
1576
1620
|
</style>
|
|
1577
1621
|
<div class="media-html">${this.mediaData}</div>
|
|
1578
|
-
`}parseTime(t){let r=t.split(":").map(i=>parseInt(i,10));return r.length===2?r[0]*60+r[1]:r.length===3?r[0]*3600+r[1]*60+r[2]:null}};customElements.get("edu-media")||customElements.define("edu-media",xt);function zr(e,n){let t=0,r=e.data.length;e.data.forEach(a=>{let s=new Set(a.correctOptions),l=new Set(n[a.question]||[]),c=0,d=0,u=0;l.forEach(m=>{s.has(m)?c++:d++}),s.forEach(m=>{l.has(m)||u++});let p=s.size,h=c-d-u,g=Math.max(0,h/p*100);t+=g});let i=Math.round(t/r),o=0;return e.data.forEach(a=>{let s=new Set(a.correctOptions),l=new Set(n[a.question]||[]);s.size===l.size&&[...s].every(c=>l.has(c))&&o++}),{score:i,correct:o,total:r}}var te=class extends x{constructor(t,r,i){super(t,r,i);this.interactionMechanic="sequential";this.currentQuestionIndex=0;this.userAnswers={};this.shuffledOptions=new Map;this.isGraded=!1;this.data.data.forEach(o=>{this.userAnswers[o.question]=[],this.config.shuffle?this.shuffledOptions.set(o.question,T([...o.options])):this.shuffledOptions.set(o.question,[...o.options])}),this.variant=this.config.variant,this.initializeProgress(this.data.data.length)}get slidesCount(){return this.data.data.length}initialize(){}cleanup(){}onVariantChange(t){this.querySelectorAll("edu-chip, edu-block").forEach(r=>{r.variant!==void 0&&(r.variant=t)}),this.variant=t}setSteps(t){let r=t-1;r>=0&&r<this.data.data.length&&(this.currentQuestionIndex=r,this.renderCurrentQuestion())}render(){this.innerHTML=`
|
|
1622
|
+
`}parseTime(t){let r=t.split(":").map(i=>parseInt(i,10));return r.length===2?r[0]*60+r[1]:r.length===3?r[0]*3600+r[1]*60+r[2]:null}};customElements.get("edu-media")||customElements.define("edu-media",xt);function zr(e,n){let t=0,r=e.data.length;e.data.forEach(a=>{let s=new Set(a.correctOptions),l=new Set(n[a.question]||[]),c=0,d=0,u=0;l.forEach(m=>{s.has(m)?c++:d++}),s.forEach(m=>{l.has(m)||u++});let p=s.size,h=c-d-u,g=Math.max(0,h/p*100);t+=g});let i=Math.round(t/r),o=0;return e.data.forEach(a=>{let s=new Set(a.correctOptions),l=new Set(n[a.question]||[]);s.size===l.size&&[...s].every(c=>l.has(c))&&o++}),{score:i,correct:o,total:r}}var te=class extends x{constructor(t,r,i){super(t,r,i);this.interactionMechanic="sequential";this.currentQuestionIndex=0;this.userAnswers={};this.shuffledOptions=new Map;this.isGraded=!1;this.data.data.forEach(o=>{this.userAnswers[o.question]=[],this.config.shuffle?this.shuffledOptions.set(o.question,T([...o.options,...o.correctOptions])):this.shuffledOptions.set(o.question,[...o.options,...o.correctOptions])}),this.variant=this.config.variant,this.initializeProgress(this.data.data.length)}get slidesCount(){return this.data.data.length}initialize(){}cleanup(){}onVariantChange(t){this.querySelectorAll("edu-chip, edu-block").forEach(r=>{r.variant!==void 0&&(r.variant=t)}),this.variant=t}setSteps(t){let r=t-1;r>=0&&r<this.data.data.length&&(this.currentQuestionIndex=r,this.renderCurrentQuestion())}render(){this.innerHTML=`
|
|
1579
1623
|
<style>
|
|
1580
1624
|
mcq-interaction {
|
|
1581
1625
|
display: flex;
|
|
@@ -1612,17 +1656,17 @@ overflow-x: hidden;`;let r=document.createElement("edu-media");r.setAttribute("t
|
|
|
1612
1656
|
flex-shrink: 0;
|
|
1613
1657
|
display: flex;
|
|
1614
1658
|
flex-direction: column;
|
|
1615
|
-
min-height: clamp(
|
|
1616
|
-
max-height: clamp(
|
|
1659
|
+
min-height: clamp(88px, 16cqh, 160px);
|
|
1660
|
+
max-height: clamp(132px, 32cqh, 280px);
|
|
1617
1661
|
overflow: hidden;
|
|
1618
1662
|
}
|
|
1619
1663
|
|
|
1620
1664
|
.question-text {
|
|
1621
1665
|
padding: 0;
|
|
1622
|
-
font-size: clamp(
|
|
1666
|
+
font-size: clamp(1.05rem, 2.6cqh, 1.45rem);
|
|
1623
1667
|
font-weight: 600;
|
|
1624
1668
|
color: rgb(var(--edu-ink));
|
|
1625
|
-
line-height: 1.
|
|
1669
|
+
line-height: 1.35;
|
|
1626
1670
|
}
|
|
1627
1671
|
|
|
1628
1672
|
.divider {
|
|
@@ -1686,7 +1730,7 @@ overflow-x: hidden;`;let r=document.createElement("edu-media");r.setAttribute("t
|
|
|
1686
1730
|
border: none;
|
|
1687
1731
|
padding: clamp(0.5rem, min(1.6cqw, 1.6cqh), 1rem);
|
|
1688
1732
|
height: 100%;
|
|
1689
|
-
max-height: clamp(
|
|
1733
|
+
max-height: clamp(132px, 32cqh, 280px);
|
|
1690
1734
|
overflow: auto;
|
|
1691
1735
|
align-items: center;
|
|
1692
1736
|
justify-content: flex-start;
|
|
@@ -1771,7 +1815,7 @@ overflow-x: hidden;`;let r=document.createElement("edu-media");r.setAttribute("t
|
|
|
1771
1815
|
.items-list {
|
|
1772
1816
|
display: grid;
|
|
1773
1817
|
grid-template-columns: 1fr;
|
|
1774
|
-
grid-auto-rows: minmax(
|
|
1818
|
+
grid-auto-rows: minmax(clamp(56px, 12cqh, 88px), 1fr);
|
|
1775
1819
|
gap: clamp(0.35rem, min(1.2cqw, 1.2cqh), 0.75rem);
|
|
1776
1820
|
min-height: 0;
|
|
1777
1821
|
height: 100%;
|
|
@@ -1839,8 +1883,8 @@ overflow-x: hidden;`;let r=document.createElement("edu-media");r.setAttribute("t
|
|
|
1839
1883
|
.chips-container {
|
|
1840
1884
|
flex: 1;
|
|
1841
1885
|
display: grid;
|
|
1842
|
-
grid-template-columns:
|
|
1843
|
-
grid-auto-rows: minmax(
|
|
1886
|
+
grid-template-columns: 1fr 1fr;
|
|
1887
|
+
grid-auto-rows: minmax(56px, auto);
|
|
1844
1888
|
gap: clamp(0.4rem, min(1.4cqw, 1.4cqh), 0.75rem);
|
|
1845
1889
|
padding: clamp(0.5rem, min(1.6cqw, 1.6cqh), 1rem);
|
|
1846
1890
|
border: 2px dashed rgb(var(--edu-border));
|
|
@@ -3461,7 +3505,7 @@ slot {
|
|
|
3461
3505
|
<div class="text-wrapper"></div>
|
|
3462
3506
|
</div>
|
|
3463
3507
|
`,this.querySelector(".text-wrapper").appendChild(this._$text)}getTotalTargetCount(){return this._slides.reduce((t,r)=>t+r.targets.length,0)}saveCurrentStepResponse(){this._$text&&(this._responses[this._currentStep]=this._$text.getValue())}getResponseForStep(t){return this._responses[t]??{inputValues:{}}}updateProgressAcrossSteps(){let t=0;for(let r=0;r<this._slides.length;r++){let i=this._slides[r],a=this.getResponseForStep(r).inputValues??{};t+=i.targets.filter(s=>{let l=a[s.id];return l!=null&&String(l).trim()!==""}).length}this.setProgress(t)}getCurrentState(){return this.saveCurrentStepResponse(),{step:this._currentStep,responses:this._responses}}isInteractionComplete(){return this.getProgress().current===this.getProgress().total}onHint(){this.saveCurrentStepResponse();let t=this._slides[this._currentStep],i=this.getResponseForStep(this._currentStep).inputValues??{},o=t.targets.find(a=>{let s=i[a.id];return s==null||String(s).trim()===""});if(!o){this.emitHintShown("This step is complete. Move to another step or submit.");return}this.emitHintShown(`Complete the ${o.expectedValue.type} input on this step.`)}grade(){this.saveCurrentStepResponse();let t=0,r=0,i={};for(let s=0;s<this._slides.length;s++){let l=this._slides[s],c=this.getResponseForStep(s),d=Re(l,c);t+=d.correct,r+=d.total,i[s]=Pe(l,c)}this._gradingByStep=i,this._isGraded=!0;let o=this._gradingByStep[this._currentStep];return o&&this._$text.setGradingState(o),{score:r>0?Math.round(t/r*100):0,correct:t,total:r}}submit(){super.submit();let t=this.grade();this.dispatchEvent(new CustomEvent("interaction:graded",{detail:{result:t},bubbles:!0,composed:!0}))}reset(){super.reset(),this._responses={},this._gradingByStep={},this._isGraded=!1,this._currentStep=0,this._$text&&(this._$text.reset(),this._$text.clearGradingState()),this.setProgress(0),this.render()}};customElements.get("sequential-fill-blanks")||customElements.define("sequential-fill-blanks",ue);function ba(e){let n={};if(!e)return n.data="Data is required",{ok:!1,errors:n};if(e.type!=="seriation"&&(n.type='Data type must be "seriation"'),!Array.isArray(e.items))return n.items="Items must be an array",{ok:!1,errors:n};e.items.length<2&&(n.items="At least 2 items are required for seriation"),e.items.some(i=>typeof i!="string"||i.trim()==="")&&(n.items="All items must be non-empty strings"),new Set(e.items).size!==e.items.length&&(n.items="All items must be unique (duplicates found)");let r=Object.keys(n).length===0;return{ok:r,errors:r?null:n}}function yt(e,n,t){let r=0,i=0,o=e.length;e.forEach((s,l)=>{let c=n.indexOf(s),d=t.querySelector(`[data-item="${s}"]`);if(c===-1){d&&(d.chipState="wrong");return}let u=Math.abs(c-l);u===0?(r+=100,i++,d&&(d.chipState="correct")):u===1?(r+=50,d&&(d.chipState="missed")):d&&(d.chipState="wrong")});let a=o>0?r/o:0;return console.log(`Seriation Score: ${a.toFixed(1)}% (${i}/${o} in correct position)`),{score:a,correct:i,total:o,answerKey:e,userResponse:n}}function va(e){try{if(!e||typeof e!="string")return{ok:!1,errors:{input:"Input must be a non-empty string"}};let n=e.trim();if(n.length===0)return{ok:!1,errors:{input:"Input cannot be empty"}};let t=[];return n.includes("|")?t=n.split("|").map(i=>i.trim()).filter(i=>i.length>0):t=n.split(`
|
|
3464
|
-
`).map(i=>i.replace(/^\s*[\d\w]+[\.\)]\s*/,"").trim()).filter(i=>i.length>0),t.length<2?{ok:!1,errors:{items:"At least 2 items are required for seriation"}}:{ok:!0,data:{type:"seriation",items:t}}}catch(n){return{ok:!1,errors:{"Parse Error":`${n instanceof Error?n.message:String(n)}`}}}}var pe=class extends x{constructor(t,r,i){super(t,r,i);this.interactionMechanic="static";this.currentOrder=[];this.isGraded=!1;this.draggedRowIndex=null;this.dragOverRowIndex=null;this.isDragging=!1;this.draggedRow=null;this.dragOffsetY=0;this.MAX_ITEMS=10;this.MIN_ITEM_HEIGHT=
|
|
3508
|
+
`).map(i=>i.replace(/^\s*[\d\w]+[\.\)]\s*/,"").trim()).filter(i=>i.length>0),t.length<2?{ok:!1,errors:{items:"At least 2 items are required for seriation"}}:{ok:!0,data:{type:"seriation",items:t}}}catch(n){return{ok:!1,errors:{"Parse Error":`${n instanceof Error?n.message:String(n)}`}}}}var pe=class extends x{constructor(t,r,i){super(t,r,i);this.interactionMechanic="static";this.currentOrder=[];this.isGraded=!1;this.draggedRowIndex=null;this.dragOverRowIndex=null;this.isDragging=!1;this.draggedRow=null;this.dragOffsetY=0;this.MAX_ITEMS=10;this.MIN_ITEM_HEIGHT=56;if(!this.isValid||!this.data||!this.config)return;let o=this.data.items;this.data.items=o,this.config.shuffle?this.currentOrder=T([...this.data.items]):this.currentOrder=[...this.data.items],this.implementsProgress=!1,this.variant=this.config.variant}initialize(){this.boundPointerMove=this.handlePointerMove.bind(this),this.boundPointerUp=this.handlePointerUp.bind(this),window.addEventListener("pointermove",this.boundPointerMove),window.addEventListener("pointerup",this.boundPointerUp)}cleanup(){window.removeEventListener("pointermove",this.boundPointerMove),window.removeEventListener("pointerup",this.boundPointerUp)}onVariantChange(t){this.querySelectorAll("edu-chip").forEach(r=>{r.variant!==void 0&&(r.variant=t)}),this.variant=t}render(){this.innerHTML=`
|
|
3465
3509
|
<style>
|
|
3466
3510
|
rank-order {
|
|
3467
3511
|
display: flex;
|
|
@@ -3742,13 +3786,6 @@ slot {
|
|
|
3742
3786
|
<div class="radio-nav" part="radio-nav"></div>
|
|
3743
3787
|
<div class="action-buttons">
|
|
3744
3788
|
<button class="check-btn" type="button" part="check">Check</button>
|
|
3745
|
-
|
|
3746
|
-
<button class="see-answers-btn btn" title="See answers" part="see-answers">
|
|
3747
|
-
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
3748
|
-
<path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z"/>
|
|
3749
|
-
<circle cx="12" cy="12" r="3"/>
|
|
3750
|
-
</svg>
|
|
3751
|
-
</button>
|
|
3752
3789
|
<button class="retry-btn btn" title="Retry" part="retry">
|
|
3753
3790
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
3754
3791
|
<path d="M17 2v4h-4"/>
|
|
@@ -3916,13 +3953,15 @@ footer {
|
|
|
3916
3953
|
position: relative;
|
|
3917
3954
|
display: flex;
|
|
3918
3955
|
flex-direction: column;
|
|
3919
|
-
justify-content:
|
|
3956
|
+
justify-content: flex-start;
|
|
3920
3957
|
align-items: center;
|
|
3921
|
-
|
|
3958
|
+
padding: clamp(0.35rem, 1cqh, 0.75rem) clamp(0.5rem, 1.5cqw, 1rem);
|
|
3922
3959
|
gap: clamp(0.25rem, 0.8cqh, 0.5rem);
|
|
3923
3960
|
flex-shrink: 0;
|
|
3924
|
-
height:
|
|
3925
|
-
min-height: clamp(
|
|
3961
|
+
height: auto;
|
|
3962
|
+
min-height: clamp(76px, 12cqh, 120px);
|
|
3963
|
+
box-sizing: border-box;
|
|
3964
|
+
overflow: visible;
|
|
3926
3965
|
}
|
|
3927
3966
|
|
|
3928
3967
|
.progress-container {
|
|
@@ -3932,6 +3971,7 @@ footer {
|
|
|
3932
3971
|
justify-content: space-between;
|
|
3933
3972
|
gap: clamp(0.25rem, 1cqw, 0.6rem);
|
|
3934
3973
|
width: 100%;
|
|
3974
|
+
min-width: 0;
|
|
3935
3975
|
}
|
|
3936
3976
|
|
|
3937
3977
|
.progress-bar {
|
|
@@ -4051,6 +4091,14 @@ footer {
|
|
|
4051
4091
|
align-items: center;
|
|
4052
4092
|
justify-content: center;
|
|
4053
4093
|
flex-wrap: wrap;
|
|
4094
|
+
width: 100%;
|
|
4095
|
+
min-width: 0;
|
|
4096
|
+
}
|
|
4097
|
+
|
|
4098
|
+
.prompt-btn,
|
|
4099
|
+
.retry-btn,
|
|
4100
|
+
.scores-btn {
|
|
4101
|
+
color: rgb(var(--edu-ink));
|
|
4054
4102
|
}
|
|
4055
4103
|
|
|
4056
4104
|
.check-btn {
|
|
@@ -4111,6 +4159,8 @@ footer {
|
|
|
4111
4159
|
gap: 0.5rem;
|
|
4112
4160
|
align-items: center;
|
|
4113
4161
|
justify-content: center;
|
|
4162
|
+
width: 100%;
|
|
4163
|
+
min-width: 0;
|
|
4114
4164
|
}
|
|
4115
4165
|
|
|
4116
4166
|
.radio-nav[data-active="true"] {
|
|
@@ -4173,6 +4223,10 @@ footer {
|
|
|
4173
4223
|
|
|
4174
4224
|
& .timer { }
|
|
4175
4225
|
|
|
4226
|
+
& footer {
|
|
4227
|
+
color: rgb(var(--edu-inverted-ink));
|
|
4228
|
+
}
|
|
4229
|
+
|
|
4176
4230
|
& .check-btn {
|
|
4177
4231
|
background: transparent;
|
|
4178
4232
|
color: rgb(var(--edu-ink));
|
|
@@ -4206,7 +4260,8 @@ footer {
|
|
|
4206
4260
|
:host([variant="minimal"]) {
|
|
4207
4261
|
& .wrap {
|
|
4208
4262
|
border: 1px solid rgb(var(--edu-border));
|
|
4209
|
-
border-radius:
|
|
4263
|
+
border-radius: 10px;
|
|
4264
|
+
background: rgb(var(--edu-card));
|
|
4210
4265
|
}
|
|
4211
4266
|
|
|
4212
4267
|
& .timer {
|
|
@@ -4214,10 +4269,12 @@ footer {
|
|
|
4214
4269
|
}
|
|
4215
4270
|
|
|
4216
4271
|
& .check-btn {
|
|
4217
|
-
border-radius:
|
|
4272
|
+
border-radius: 10px;
|
|
4273
|
+
box-shadow: none;
|
|
4218
4274
|
}
|
|
4219
4275
|
|
|
4220
4276
|
& footer {
|
|
4277
|
+
color: rgb(var(--edu-inverted-ink));
|
|
4221
4278
|
border-top: 1px solid rgb(var(--edu-border));
|
|
4222
4279
|
}
|
|
4223
4280
|
|
|
@@ -4234,7 +4291,8 @@ footer {
|
|
|
4234
4291
|
}
|
|
4235
4292
|
|
|
4236
4293
|
& .radio-nav label {
|
|
4237
|
-
border-radius:
|
|
4294
|
+
border-radius: 999px;
|
|
4295
|
+
background: transparent;
|
|
4238
4296
|
}
|
|
4239
4297
|
}
|
|
4240
4298
|
|
|
@@ -4256,6 +4314,7 @@ footer {
|
|
|
4256
4314
|
}
|
|
4257
4315
|
|
|
4258
4316
|
& footer {
|
|
4317
|
+
color: rgb(var(--edu-inverted-ink));
|
|
4259
4318
|
border-top: 1px solid rgb(var(--edu-border) / 0.5);
|
|
4260
4319
|
padding: 1.25rem;
|
|
4261
4320
|
}
|
|
@@ -4291,7 +4350,7 @@ footer {
|
|
|
4291
4350
|
|
|
4292
4351
|
:host([variant="playful"]) {
|
|
4293
4352
|
& .wrap {
|
|
4294
|
-
color: rgb(var(--edu-
|
|
4353
|
+
color: rgb(var(--edu-ink));
|
|
4295
4354
|
border-radius: 14px;
|
|
4296
4355
|
border: 2px dashed rgb(var(--edu-border));
|
|
4297
4356
|
}
|
|
@@ -4302,10 +4361,13 @@ footer {
|
|
|
4302
4361
|
}
|
|
4303
4362
|
|
|
4304
4363
|
& .check-btn {
|
|
4364
|
+
background: linear-gradient(135deg, rgb(var(--edu-first-accent));
|
|
4365
|
+
color: rgb(var(--edu-inverted-ink));
|
|
4305
4366
|
border-radius: 12px;
|
|
4306
4367
|
font-weight: 700;
|
|
4307
4368
|
text-transform: uppercase;
|
|
4308
4369
|
letter-spacing: 0.5px;
|
|
4370
|
+
box-shadow: 0 8px 18px rgb(var(--edu-shadow-color) / 0.16);
|
|
4309
4371
|
}
|
|
4310
4372
|
|
|
4311
4373
|
& .check-btn:hover:not(:disabled) {
|
|
@@ -4313,6 +4375,7 @@ footer {
|
|
|
4313
4375
|
}
|
|
4314
4376
|
|
|
4315
4377
|
& footer {
|
|
4378
|
+
color: rgb(var(--edu-inverted-ink));
|
|
4316
4379
|
border-top: 2px dashed rgb(var(--edu-border));
|
|
4317
4380
|
}
|
|
4318
4381
|
|
|
@@ -4332,7 +4395,9 @@ footer {
|
|
|
4332
4395
|
}
|
|
4333
4396
|
|
|
4334
4397
|
& .radio-nav label {
|
|
4335
|
-
background: rgb(var(--edu-
|
|
4398
|
+
background: rgb(var(--edu-card));
|
|
4399
|
+
color: rgb(var(--edu-ink));
|
|
4400
|
+
border: 2px solid rgb(var(--edu-border));
|
|
4336
4401
|
border-radius: 50px;
|
|
4337
4402
|
font-weight: 700;
|
|
4338
4403
|
}
|
|
@@ -4342,9 +4407,10 @@ footer {
|
|
|
4342
4407
|
}
|
|
4343
4408
|
|
|
4344
4409
|
& .radio-nav input:checked + label {
|
|
4345
|
-
background: rgb(var(--edu-first-accent));
|
|
4410
|
+
background: linear-gradient(135deg, rgb(var(--edu-first-accent));
|
|
4346
4411
|
color: rgb(var(--edu-inverted-ink));
|
|
4347
|
-
|
|
4412
|
+
border-color: transparent;
|
|
4413
|
+
box-shadow: 0 5px 15px rgb(var(--edu-shadow-color) / 0.18);
|
|
4348
4414
|
}
|
|
4349
4415
|
}
|
|
4350
4416
|
|
|
@@ -4353,13 +4419,14 @@ footer {
|
|
|
4353
4419
|
background: rgba(var(--edu-card), 0.7);
|
|
4354
4420
|
backdrop-filter: blur(10px);
|
|
4355
4421
|
border: 1px solid rgba(var(--edu-border), 0.35);
|
|
4356
|
-
border-radius:
|
|
4422
|
+
border-radius: 14px;
|
|
4423
|
+
box-shadow: 0 16px 32px rgba(var(--edu-shadow-color), 0.12);
|
|
4357
4424
|
}
|
|
4358
4425
|
|
|
4359
4426
|
& .check-btn {
|
|
4360
|
-
background: rgba(var(--edu-first-accent), 0.
|
|
4427
|
+
background: rgba(var(--edu-first-accent), 0.88);
|
|
4361
4428
|
backdrop-filter: blur(5px);
|
|
4362
|
-
border-radius:
|
|
4429
|
+
border-radius: 999px;
|
|
4363
4430
|
}
|
|
4364
4431
|
|
|
4365
4432
|
& .check-btn:hover:not(:disabled) {
|
|
@@ -4383,6 +4450,7 @@ footer {
|
|
|
4383
4450
|
background: rgba(var(--edu-card), 0.5);
|
|
4384
4451
|
backdrop-filter: blur(5px);
|
|
4385
4452
|
border: 1px solid rgba(var(--edu-border), 0.35);
|
|
4453
|
+
border-radius: 999px;
|
|
4386
4454
|
}
|
|
4387
4455
|
|
|
4388
4456
|
& .radio-nav input:checked + label {
|
|
@@ -4412,6 +4480,7 @@ footer {
|
|
|
4412
4480
|
}
|
|
4413
4481
|
|
|
4414
4482
|
& footer {
|
|
4483
|
+
color: rgb(var(--edu-inverted-ink));
|
|
4415
4484
|
border-top: 1px solid rgb(var(--edu-border));
|
|
4416
4485
|
padding: 1rem 1.5rem;
|
|
4417
4486
|
}
|
|
@@ -4465,6 +4534,7 @@ footer {
|
|
|
4465
4534
|
}
|
|
4466
4535
|
|
|
4467
4536
|
& footer {
|
|
4537
|
+
color: rgb(var(--edu-inverted-ink));
|
|
4468
4538
|
border-top: 2px solid rgb(var(--edu-border));
|
|
4469
4539
|
}
|
|
4470
4540
|
|
|
@@ -4561,13 +4631,14 @@ footer {
|
|
|
4561
4631
|
|
|
4562
4632
|
:host([variant="card"]) {
|
|
4563
4633
|
& .wrap {
|
|
4564
|
-
border-radius:
|
|
4565
|
-
|
|
4634
|
+
border-radius: 14px;
|
|
4635
|
+
background: rgb(var(--edu-card));
|
|
4636
|
+
box-shadow: 0 10px 24px rgba(var(--edu-shadow-color), 0.12), 0 2px 4px rgba(var(--edu-shadow-color), 0.05);
|
|
4566
4637
|
}
|
|
4567
4638
|
|
|
4568
4639
|
& .check-btn {
|
|
4569
|
-
border-radius:
|
|
4570
|
-
box-shadow: 0
|
|
4640
|
+
border-radius: 999px;
|
|
4641
|
+
box-shadow: 0 6px 14px rgba(var(--edu-shadow-color), 0.12);
|
|
4571
4642
|
}
|
|
4572
4643
|
|
|
4573
4644
|
& .check-btn:hover:not(:disabled) {
|
|
@@ -4579,20 +4650,20 @@ footer {
|
|
|
4579
4650
|
}
|
|
4580
4651
|
|
|
4581
4652
|
& .radio-nav label {
|
|
4582
|
-
border-radius:
|
|
4583
|
-
box-shadow: 0
|
|
4653
|
+
border-radius: 999px;
|
|
4654
|
+
box-shadow: 0 4px 10px rgba(var(--edu-shadow-color), 0.08);
|
|
4584
4655
|
}
|
|
4585
4656
|
|
|
4586
4657
|
& .radio-nav input:checked + label {
|
|
4587
4658
|
box-shadow: 0 4px 8px rgba(var(--edu-first-accent), 0.2);
|
|
4588
4659
|
}
|
|
4589
4660
|
}
|
|
4590
|
-
`;var he=class extends HTMLElement{constructor(){super();this.soundManager=new H;this.animationsManager=new L;this.timerInterval=null;this.remainingSeconds=0;this.interactionComplete=!1;this.attemptCount=0;this.attemptLimit=null;this.currentScreen="interaction";this.attachShadow({mode:"open"});let t=document.createElement("style");t.textContent=mi,this.shadowRoot.append(t);let r=document.createElement("section");r.className="wrap",r.innerHTML=gi,this.shadowRoot.append(r),L.injectKeyframes(this.shadowRoot),this.$headerEl=r.querySelector("header"),this.$footerEl=r.querySelector("footer"),this.$titleEl=r.querySelector(".title"),this.$promptBtn=r.querySelector(".prompt-btn"),this.$timerEl=r.querySelector(".timer"),this.$checkBtn=r.querySelector(".check-btn"),this.$scoresBtn=r.querySelector(".scores-btn"),this.$
|
|
4661
|
+
`;var he=class extends HTMLElement{constructor(){super();this.soundManager=new H;this.animationsManager=new L;this.timerInterval=null;this.remainingSeconds=0;this.interactionComplete=!1;this.attemptCount=0;this.attemptLimit=null;this.currentScreen="interaction";this.attachShadow({mode:"open"});let t=document.createElement("style");t.textContent=mi,this.shadowRoot.append(t);let r=document.createElement("section");r.className="wrap",r.innerHTML=gi,this.shadowRoot.append(r),L.injectKeyframes(this.shadowRoot),this.$headerEl=r.querySelector("header"),this.$footerEl=r.querySelector("footer"),this.$titleEl=r.querySelector(".title"),this.$promptBtn=r.querySelector(".prompt-btn"),this.$timerEl=r.querySelector(".timer"),this.$checkBtn=r.querySelector(".check-btn"),this.$scoresBtn=r.querySelector(".scores-btn"),this.$retryBtn=r.querySelector(".retry-btn"),this.$radioNav=r.querySelector(".radio-nav"),this.$progressContainer=r.querySelector(".progress-container"),this.$progressBar=r.querySelector(".progress-bar"),this.$progressIcon=r.querySelector(".progress-icon-wrapper"),this.$progressCounter=r.querySelector(".progress-counter"),this.$contentEl=r.querySelector('[part="content"]'),this.animationsManager.isEnabled=!0,this.$interactionScreen=r.querySelector('[data-screen="interaction"]'),this.$errorContent=r.querySelector(".error-content"),this.$attemptsMessage=r.querySelector(".attempts-message"),this.$scoreDisplay=r.querySelector(".score-display"),this.$timerDisplay=r.querySelector(".timer-display"),this.setupShellListeners()}static get observedAttributes(){return["show-header","show-footer"]}connectedCallback(){this.hasAttribute("show-header")||this.setAttribute("show-header","true"),this.hasAttribute("show-footer")||this.setAttribute("show-footer","true"),this.updateVisibility(),this.animationsManager.animate(this.$progressIcon,"heartbeat"),this.animationsManager.animate(this.$promptBtn,"wobble")}disconnectedCallback(){this.stopTimer(),this.removeInteractionListeners()}attributeChangedCallback(t,r,i){r!==i&&this.updateVisibility()}setInteraction(t){if(this.stopTimer(),!t.isValid){this.$errorContent.textContent=t.errors??"Error loading the interaction.",this.switchScreen("error");return}this.soundManager.playSound("start"),this.interaction&&(this.removeInteractionListeners(),this.$interactionScreen.innerHTML=""),this.interaction=t,this.interactionComplete=!1;let r=this.interaction.config;this.reset(),this.switchScreen("interaction");let i=r.variant??"elegant";this.setAttribute("variant",i),this.interaction.onVariantChange(i),this.$titleEl.textContent=r.prompt||"",r.promptData&&r.promptModality?(this.$titleEl.style.cursor="pointer",this.$titleEl.title="Click to view prompt details",this.$promptBtn.addEventListener("click",()=>this.openPromptDialog()),this.$titleEl.addEventListener("click",()=>this.openPromptDialog())):(this.$titleEl.style.cursor="",this.$titleEl.style.textDecoration="",this.$titleEl.title=""),r.timer!==null&&r.timer>30?(this.remainingSeconds=r.timer,this.$timerEl.classList.remove("edu-hidden"),this.updateTimerDisplay(),this.startTimer()):this.$timerEl.classList.add("edu-hidden"),this.attemptLimit=r.attemptLimit,this.attemptCount=0,this.interaction.interactionMechanic==="sequential"?(this.$radioNav.dataset.active="true",this.renderRadioNav()):this.$radioNav.dataset.active="false",this.interaction.implementsProgress?(this.$checkBtn.classList.add("edu-hidden"),this.$progressContainer.classList.remove("edu-hidden"),this.$progressCounter.textContent=`0/${this.interaction.progressTracker.total}`):(this.$progressContainer.classList.add("edu-hidden"),this.$checkBtn.classList.remove("edu-hidden")),this.setupInteractionListeners(),this.$interactionScreen.innerHTML="",this.$interactionScreen.appendChild(t)}removeInteraction(){this.interaction&&(this.removeInteractionListeners(),this.$interactionScreen.innerHTML="",this.interaction=void 0,this.interactionComplete=!1)}setupShellListeners(){this.$checkBtn.addEventListener("click",()=>{this.soundManager.playSound("pop");try{this.interaction.submit()}catch(t){console.error("Submit failed:",t)}}),this.$scoresBtn.addEventListener("click",()=>{this.soundManager.playSound("pop"),this.currentScreen==="score"?this.switchScreen("interaction"):this.switchScreen("score")}),this.$timerEl.addEventListener("click",()=>{this.soundManager.playSound("pop"),this.$timerDisplay.append(this.$timerEl),this.currentScreen==="time"?(this.switchScreen("interaction"),this.$headerEl.append(this.$timerEl)):this.switchScreen("time")}),this.$retryBtn.addEventListener("click",()=>this.handleRetry()),this.$radioNav.addEventListener("change",t=>{let r=t.target;if(r.type==="radio"){let i=parseInt(r.id.replace("step-",""),10);this.interaction&&this.interaction.setSteps(i),this.dispatchEvent(new CustomEvent("navigation-change",{detail:{step:i},bubbles:!0,composed:!0}))}})}setupInteractionListeners(){this.interaction.addEventListener("interaction:ready",t=>{console.log("[Shell] Interaction ready:",t.detail.id)}),this.interaction.addEventListener("interaction:progress",t=>{let{current:r,total:i,percentage:o}=t.detail;this.updateProgress(r,i),r===i&&i>0?(this.interactionComplete=!0,this.$checkBtn.classList.remove("edu-hidden")):(this.interactionComplete=!1,this.interaction.implementsProgress&&this.$checkBtn.classList.add("edu-hidden"))}),this.interaction.addEventListener("interaction:complete",t=>{console.log("[Shell] Interaction complete:",t.detail),this.stopTimer(),this.handleCompletion(t.detail.state)}),this.interaction.addEventListener("interaction:graded",t=>{t.detail.result.score===100?(this.soundManager.playSound("success"),this.animationsManager.animate(this.$progressIcon,"spin-pulse")):(this.soundManager.playSound("failure"),this.animationsManager.animate(this.$progressIcon,"shake")),this.handleGraded(t.detail.result)}),this.interaction.addEventListener("interaction:hint-shown",t=>{console.log("[Shell] Hint shown:",t.detail.message)}),this.interaction.addEventListener("interaction:error",t=>{console.error("[Shell] Interaction error:",t.detail),alert(t.detail.message)})}removeInteractionListeners(){}updateProgress(t,r){this.$progressBar.max=r,this.$progressBar.value=t??0,this.$progressCounter.textContent=`${t}/${r}`;let i=r>0?t/r*100:0,a=this.$progressBar.offsetWidth*i/100-12;this.$progressIcon.style.left=`${Math.max(0,a)}px`}handleCompletion(t){this.dispatchEvent(new CustomEvent("shell:interaction-complete",{detail:{state:t},bubbles:!0,composed:!0})),console.log("[Shell] Interaction submitted with state:",t)}handleGraded(t){this.$checkBtn.classList.add("edu-hidden"),this.$scoresBtn.classList.remove("edu-hidden"),this.$retryBtn.classList.remove("edu-hidden"),this.attemptLimit&&this.attemptCount>this.attemptLimit&&this.$retryBtn.classList.add("edu-hidden");let r=t.score;this.$scoreDisplay.innerHTML=`
|
|
4591
4662
|
<div style="font-size: 4rem; font-weight: 700; color: ${r>=75?"rgb(var(--edu-success))":r>=50?"rgba(139, 195, 74)":r>=25?"rgb(var(--edu-warning))":"rgb(var(--edu-error))"}">${r}%</div>
|
|
4592
4663
|
<div style="font-size: 1.5rem; margin-top: 1rem; color: rgb(var(--edu-second-ink));">
|
|
4593
4664
|
${r===100?"Perfect Score! \u{1F389}":r>=75?"Great Job!":r>=50?"Good Effort!":r>=25?"Keep Trying!":"Try Again!"}
|
|
4594
4665
|
</div>
|
|
4595
|
-
`,this.$progressIcon.classList.remove("score-fail","score-low","score-mid","score-high"),this.$progressBar.classList.remove("score-fail","score-low","score-mid","score-high");let i="";r<=25?i="score-fail":r<=50?i="score-low":r<=75?i="score-mid":i="score-high",this.$progressIcon.classList.add(i),this.$progressBar.classList.add(i)}reset(){this.resetTimer(),this.interaction.implementsProgress||this.$checkBtn.classList.remove("edu-hidden"),this.$
|
|
4666
|
+
`,this.$progressIcon.classList.remove("score-fail","score-low","score-mid","score-high"),this.$progressBar.classList.remove("score-fail","score-low","score-mid","score-high");let i="";r<=25?i="score-fail":r<=50?i="score-low":r<=75?i="score-mid":i="score-high",this.$progressIcon.classList.add(i),this.$progressBar.classList.add(i)}reset(){this.resetTimer(),this.interaction.implementsProgress||this.$checkBtn.classList.remove("edu-hidden"),this.$scoresBtn.classList.add("edu-hidden"),this.$retryBtn.classList.add("edu-hidden"),this.$progressIcon.classList.remove("score-fail","score-low","score-mid","score-high"),this.$progressBar.classList.remove("score-fail","score-low","score-mid","score-high"),this.animationsManager.animate(this.$progressIcon,"heartbeat"),this.$progressBar.value=0,this.updateProgress(0,this.interaction.progressTracker.total),this.interaction.interactionMechanic==="sequential"&&this.renderRadioNav()}handleRetry(){if(this.$retryBtn.classList.add("edu-hidden"),this.soundManager.playSound("pop"),this.attemptCount++,this.attemptLimit&&this.attemptLimit>0){let t=this.attemptLimit-this.attemptCount+1;this.$attemptsMessage.textContent=`${t} attempt${t!==1?"s":""} remaining`,this.switchScreen("attempts"),setTimeout(()=>{this.switchScreen("interaction"),this.reset(),this.resumeTimer(),this.interaction?.reset(),this.soundManager.playSound("flip")},2e3)}else this.switchScreen("interaction"),this.interaction?.reset()}openPromptDialog(){let t=this.interaction?.config;if(!t)return;this.soundManager.playSound("pop");let r=document.querySelector("edu-dialog#prompt-dialog");r||(r=document.createElement("edu-dialog"),r.id="prompt-dialog",document.body.appendChild(r)),r.title=t.construct||this.interaction?.config.promptModality||"Prompt";let i=document.createElement("edu-media");i.setAttribute("type",t.promptModality),i.setAttribute("data",t.promptData),t.promptDataSpec&&i.setAttribute("spec",t.promptDataSpec),r.innerHTML="",r.appendChild(i),r.open()}switchScreen(t){this.shadowRoot.querySelectorAll(".screen").forEach(r=>{let i=r.getAttribute("data-screen");r.style.display=i===t?"block":"none"}),this.currentScreen=t,console.log(`[Shell] Switched to screen: ${t}`)}startTimer(){this.timerInterval=window.setInterval(()=>{this.remainingSeconds--,this.updateTimerDisplay(),this.remainingSeconds<=0&&(this.stopTimer(),this.handleTimerComplete())},1e3)}stopTimer(){this.timerInterval!==null&&(clearInterval(this.timerInterval),this.timerInterval=null)}getFormattedTime(t){let r=Math.floor(t/60),i=t%60;return`${r}:${i.toString().padStart(2,"0")}`}updateTimerDisplay(){this.$timerEl.textContent=this.getFormattedTime(this.remainingSeconds),this.remainingSeconds===30&&(this.soundManager.playSound("low-time"),this.animationsManager.animate(this.$timerEl,"shake")),delete this.$timerEl.dataset.warning,delete this.$timerEl.dataset.danger,this.remainingSeconds<=10?this.$timerEl.dataset.danger="true":this.remainingSeconds<=30&&(this.$timerEl.dataset.warning="true")}handleTimerComplete(){console.log("[Shell] Timer complete");try{this.interaction.submit()}catch(t){console.error("Auto-submit on timer failed:",t)}this.dispatchEvent(new CustomEvent("shell:timer-complete",{bubbles:!0,composed:!0}))}pauseTimer(){this.stopTimer()}resumeTimer(){this.remainingSeconds>0&&this.timerInterval===null&&this.startTimer()}resetTimer(){this.stopTimer(),this.remainingSeconds=this.interaction.config.timer,this.updateTimerDisplay()}updateVisibility(){let t=this.getAttribute("show-header")!=="false",r=this.getAttribute("show-footer")!=="false";this.$headerEl.style.display=t?"":"none",this.$footerEl.style.display=r?"":"none"}renderRadioNav(){let t=this.interaction&&"slidesCount"in this.interaction?this.interaction.slidesCount:1;this.$radioNav.innerHTML="";for(let r=1;r<=t;r++){let i=document.createElement("input");i.type="radio",i.name="step-nav",i.id=`step-${r}`,r===1&&(i.checked=!0);let o=document.createElement("label");o.htmlFor=`step-${r}`,o.textContent=String(r),this.$radioNav.appendChild(i),this.$radioNav.appendChild(o)}}getContentArea(){return this.$contentEl}};customElements.get("edu-window")||customElements.define("edu-window",he);et();W();export{Ie as AdjacencyTable,we as AssetValidationError,x as BaseInteraction,ae as CategorizeTheWords,Ae as ClassificationMatrix,Qe as EduTable,Je as EduText,de as FillBlanks,he as InteractionsBaseShell,re as ListRecall,$e as LookupTable,te as MCQ,ne as MarkTheWords,_e as NaryChoiceTable,Ee as OpenClassification,pe as RankOrder,se as SequentialCategorizeTheWords,Ce as SequentialClassification,ue as SequentialFillBlanks,oe as SequentialMarkTheWords,ce as SequentialTextTransformation,ke as SimultaneousAssociation,le as TextTransformation,ll as adjacencyTableDataParser,pl as adjacencyTableDataValidator,Vr as adjacencyTableGrader,sl as basicTableDataParser,ul as basicTableDataValidator,Or as classificationTableGrader,Ta as clearInteractionRegistry,He as cognikitThemePresets,Te as compareValues,xi as configureCognikit,bi as createInteraction,tt as defaultCognikitThemeVariables,We as detectCellKind,W as ensureCognikitTheme,Fr as getAdjacencyCellGrading,Ke as getAllUniqueValues,Se as getAllValues,Pe as getBlanksGradingState,Ur as getClassificationCellGrading,qe as getClassificationGradingState,wi as getCognikitConfig,yi as getCognikitThemePresets,ha as getDNDGradingState,De as getHighlightGradingState,fi as getInteraction,$a as getInteractionRegistry,jr as getLookupCellGrading,Yr as getNaryCellGrading,wt as getTransformationGradingState,Aa as listInteractions,cl as lookupTableDataParser,hl as lookupTableDataValidator,Gr as lookupTableGrader,Nr as naryTableGrader,da as parseTextEngineSequential,Zo as parseYamlAssets,zr as recognitionGrader,Hs as recognitionParser,Gs as recognitionValidator,xa as registerBuiltInInteractions,k as registerInteraction,Ci as resetCognikitTheme,$t as resolveCognikitTheme,yt as seriationGrader,va as seriationParser,ba as seriationValidator,Ei as setCognikitTheme,oi as textEngineBaseDataValidator,ri as textEngineBaseGrammarParser,ai as textEngineBlanksDataValidator,Re as textEngineBlanksGrader,ii as textEngineBlanksGrammarParser,si as textEngineClassificationDataValidator,Be as textEngineClassificationGrader,ni as textEngineClassificationGrammarParser,pa as textEngineDNDGrader,ua as textEngineDataValidator,Me as textEngineHighlightGrader,Le as textEngineTransformationGrader,Sa as unregisterInteraction,Xo as validateAndNormalizeAssets};
|
|
4596
4667
|
/*! Bundled license information:
|
|
4597
4668
|
|
|
4598
4669
|
js-yaml/dist/js-yaml.mjs:
|