@citolab/qti-components 6.0.2-1 → 6.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -211,6 +211,8 @@
211
211
 
212
212
  html,
213
213
  body,
214
+ #root,
215
+ #root-inner,
214
216
  qti-test {
215
217
  height: 100%;
216
218
  }
@@ -219,7 +221,15 @@ qti-test {
219
221
  display: flex;
220
222
  flex-direction: column;
221
223
  gap: 1rem;
222
- height: 100%;
224
+ }
225
+ qti-test qti-assessment-item {
226
+ display: block; /* necessary to calculate scaling position */
227
+ flex: 1;
228
+ gap: 1rem;
229
+ overflow-y: scroll;
230
+ }
231
+ qti-test qti-assessment-item qti-item-body {
232
+ display: block;
223
233
  }
224
234
  qti-test qti-test-nav {
225
235
  display: flex;
@@ -295,25 +305,10 @@ qti-test qti-test-nav qti-test-progress qti-test-item[checked] {
295
305
  color: white;
296
306
  }
297
307
 
298
- qti-modal-feedback[showstatus=on] {
299
- position: absolute;
300
- top: 2rem;
301
- right: 0;
302
- left: 0;
303
- width: 400px;
304
- height: 300px;
305
- border: 1px solid #ddd;
306
- border-radius: 10px;
307
- margin-right: auto;
308
- margin-left: auto;
309
- background-color: white;
310
- text-align: center;
311
- }
312
-
313
308
  .qti-theme-raised {
314
309
  /* < usabled classes to extend in qti-components > */
315
310
  }
316
- .qti-theme-raised qti-text-entry-interaction, .qti-theme-raised qti-extended-text-interaction {
311
+ .qti-theme-raised qti-text-entry-interaction {
317
312
  position: relative;
318
313
  display: inline-block;
319
314
  border-radius: var(--qti-border-radius);
@@ -322,24 +317,24 @@ qti-modal-feedback[showstatus=on] {
322
317
  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
323
318
  border-radius: calc(var(--qti-border-radius) * 3);
324
319
  }
325
- .qti-theme-raised qti-text-entry-interaction[disabled], .qti-theme-raised qti-extended-text-interaction[disabled] {
320
+ .qti-theme-raised qti-text-entry-interaction[disabled] {
326
321
  box-shadow: unset !important;
327
322
  color: var(--qti-border-color);
328
323
  cursor: unset !important;
329
324
  }
330
- .qti-theme-raised qti-text-entry-interaction:focus, .qti-theme-raised qti-extended-text-interaction:focus {
325
+ .qti-theme-raised qti-text-entry-interaction:focus {
331
326
  outline-color: rgb(var(--qti-primary) 0.4);
332
327
  outline-offset: 2px;
333
328
  outline-style: solid;
334
329
  outline-width: var(--qti-border-width);
335
330
  }
336
- .qti-theme-raised qti-text-entry-interaction:hover:not([disabled]), .qti-theme-raised qti-extended-text-interaction:hover:not([disabled]) {
331
+ .qti-theme-raised qti-text-entry-interaction:hover:not([disabled]) {
337
332
  outline-color: rgb(var(--qti-primary) 0.4);
338
333
  outline-offset: 0;
339
334
  outline-style: solid;
340
335
  outline-width: calc(var(--qti-border-width) * 2);
341
336
  }
342
- .qti-theme-raised .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-raised qti-hottext, .qti-theme-raised .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-raised qti-simple-choice {
337
+ .qti-theme-raised .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-raised qti-simple-choice, .qti-theme-raised .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-raised qti-hottext {
343
338
  position: relative;
344
339
  display: inline-block;
345
340
  border-radius: var(--qti-border-radius);
@@ -350,51 +345,27 @@ qti-modal-feedback[showstatus=on] {
350
345
  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
351
346
  border-radius: calc(var(--qti-border-radius) * 3);
352
347
  }
353
- .qti-theme-raised .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-raised qti-hottext[disabled], .qti-theme-raised .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-raised qti-simple-choice[disabled] {
348
+ .qti-theme-raised .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-raised qti-simple-choice[disabled], .qti-theme-raised .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-raised qti-hottext[disabled] {
354
349
  box-shadow: unset !important;
355
350
  color: var(--qti-border-color);
356
351
  cursor: unset !important;
357
352
  }
358
- .qti-theme-raised .qti-input-control-hidden qti-hottext:focus, .qti-input-control-hidden .qti-theme-raised qti-hottext:focus, .qti-theme-raised .qti-input-control-hidden qti-simple-choice:focus, .qti-input-control-hidden .qti-theme-raised qti-simple-choice:focus {
353
+ .qti-theme-raised .qti-input-control-hidden qti-simple-choice:focus, .qti-input-control-hidden .qti-theme-raised qti-simple-choice:focus, .qti-theme-raised .qti-input-control-hidden qti-hottext:focus, .qti-input-control-hidden .qti-theme-raised qti-hottext:focus {
359
354
  outline-color: rgb(var(--qti-primary) 0.4);
360
355
  outline-offset: 2px;
361
356
  outline-style: solid;
362
357
  outline-width: var(--qti-border-width);
363
358
  }
364
- .qti-theme-raised .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-hottext:hover:not([disabled]), .qti-theme-raised .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-simple-choice:hover:not([disabled]) {
359
+ .qti-theme-raised .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-simple-choice:hover:not([disabled]), .qti-theme-raised .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-hottext:hover:not([disabled]) {
365
360
  outline-color: rgb(var(--qti-primary) 0.4);
366
361
  outline-offset: 0;
367
362
  outline-style: solid;
368
363
  outline-width: calc(var(--qti-border-width) * 2);
369
364
  }
370
- .qti-theme-raised .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-hottext[aria-checked=true], .qti-theme-raised .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-simple-choice[aria-checked=true] {
365
+ .qti-theme-raised .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-simple-choice[aria-checked=true], .qti-theme-raised .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-hottext[aria-checked=true] {
371
366
  --qti-border-color: var(--qti-primary-color);
372
367
  }
373
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice {
374
- cursor: pointer;
375
- background: var(--qti-background);
376
- }
377
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[disabled], qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[disabled] {
378
- box-shadow: unset !important;
379
- color: var(--qti-border-color);
380
- cursor: unset !important;
381
- }
382
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice:focus, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice:focus {
383
- outline-color: rgb(var(--qti-primary) 0.4);
384
- outline-offset: 2px;
385
- outline-style: solid;
386
- outline-width: var(--qti-border-width);
387
- }
388
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice:hover:not([disabled]), qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice:hover:not([disabled]) {
389
- outline-color: rgb(var(--qti-primary) 0.4);
390
- outline-offset: 0;
391
- outline-style: solid;
392
- outline-width: calc(var(--qti-border-width) * 2);
393
- }
394
- .qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[aria-checked=true], qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[aria-checked=true] {
395
- --qti-border-color: var(--qti-primary-color);
396
- }
397
- .qti-theme-raised qti-hottext, .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice, .qti-theme-raised qti-simple-choice {
368
+ .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice, .qti-theme-raised qti-simple-choice, .qti-theme-raised qti-hottext {
398
369
  cursor: pointer;
399
370
  --width: 22px;
400
371
  --height: 22px;
@@ -403,24 +374,24 @@ qti-modal-feedback[showstatus=on] {
403
374
  align-items: center;
404
375
  gap: 0.2rem;
405
376
  }
406
- .qti-theme-raised qti-hottext[disabled], .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[disabled], .qti-theme-raised qti-simple-choice[disabled] {
377
+ .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[disabled], .qti-theme-raised qti-simple-choice[disabled], .qti-theme-raised qti-hottext[disabled] {
407
378
  box-shadow: unset !important;
408
379
  color: var(--qti-border-color);
409
380
  cursor: unset !important;
410
381
  }
411
- .qti-theme-raised qti-hottext:focus, .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice:focus, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice:focus, .qti-theme-raised qti-simple-choice:focus {
382
+ .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice:focus, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice:focus, .qti-theme-raised qti-simple-choice:focus, .qti-theme-raised qti-hottext:focus {
412
383
  outline-color: rgb(var(--qti-primary) 0.4);
413
384
  outline-offset: 2px;
414
385
  outline-style: solid;
415
386
  outline-width: var(--qti-border-width);
416
387
  }
417
- .qti-theme-raised qti-hottext:hover:not([disabled]), .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice:hover:not([disabled]), .qti-theme-raised qti-simple-choice:hover:not([disabled]) {
388
+ .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice:hover:not([disabled]), .qti-theme-raised qti-simple-choice:hover:not([disabled]), .qti-theme-raised qti-hottext:hover:not([disabled]) {
418
389
  outline-color: rgb(var(--qti-primary) 0.4);
419
390
  outline-offset: 0;
420
391
  outline-style: solid;
421
392
  outline-width: calc(var(--qti-border-width) * 2);
422
393
  }
423
- .qti-theme-raised qti-hottext::before, .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice::before, .qti-theme-raised qti-simple-choice::before {
394
+ .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice::before, .qti-theme-raised qti-simple-choice::before, .qti-theme-raised qti-hottext::before {
424
395
  position: relative;
425
396
  display: inline-block;
426
397
  border-radius: var(--qti-border-radius);
@@ -562,32 +533,32 @@ qti-modal-feedback[showstatus=on] {
562
533
  .qti-theme-subtle {
563
534
  /* < usabled classes to extend in qti-components */
564
535
  }
565
- .qti-theme-subtle qti-text-entry-interaction, .qti-theme-subtle qti-extended-text-interaction {
536
+ .qti-theme-subtle qti-text-entry-interaction {
566
537
  position: relative;
567
538
  display: inline-block;
568
539
  border-radius: var(--qti-border-radius);
569
540
  color: var(--qti-text-color);
570
541
  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
571
542
  }
572
- .qti-theme-subtle qti-text-entry-interaction[disabled], .qti-theme-subtle qti-extended-text-interaction[disabled] {
543
+ .qti-theme-subtle qti-text-entry-interaction[disabled] {
573
544
  --qti-border-color: transparent;
574
545
  box-shadow: unset !important;
575
546
  color: var(--qti-shadow-color);
576
547
  cursor: unset !important;
577
548
  }
578
- .qti-theme-subtle qti-text-entry-interaction:focus, .qti-theme-subtle qti-extended-text-interaction:focus {
549
+ .qti-theme-subtle qti-text-entry-interaction:focus {
579
550
  outline-color: rgb(var(--qti-primary) 0.4);
580
551
  outline-offset: 2px;
581
552
  outline-style: solid;
582
553
  outline-width: var(--qti-border-width);
583
554
  }
584
- .qti-theme-subtle qti-text-entry-interaction:hover:not([disabled]), .qti-theme-subtle qti-extended-text-interaction:hover:not([disabled]) {
555
+ .qti-theme-subtle qti-text-entry-interaction:hover:not([disabled]) {
585
556
  outline-color: rgb(var(--qti-primary) 0.4);
586
557
  outline-offset: 0;
587
558
  outline-style: solid;
588
559
  outline-width: calc(var(--qti-border-width) * 2);
589
560
  }
590
- .qti-theme-subtle .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-subtle qti-hottext, .qti-theme-subtle .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-subtle qti-simple-choice {
561
+ .qti-theme-subtle .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-subtle qti-simple-choice, .qti-theme-subtle .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-subtle qti-hottext {
591
562
  position: relative;
592
563
  display: inline-block;
593
564
  border-radius: var(--qti-border-radius);
@@ -596,55 +567,29 @@ qti-modal-feedback[showstatus=on] {
596
567
  cursor: pointer;
597
568
  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
598
569
  }
599
- .qti-theme-subtle .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-subtle qti-hottext[disabled], .qti-theme-subtle .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-subtle qti-simple-choice[disabled] {
600
- --qti-border-color: transparent;
601
- box-shadow: unset !important;
602
- color: var(--qti-shadow-color);
603
- cursor: unset !important;
604
- }
605
- .qti-theme-subtle .qti-input-control-hidden qti-hottext:focus, .qti-input-control-hidden .qti-theme-subtle qti-hottext:focus, .qti-theme-subtle .qti-input-control-hidden qti-simple-choice:focus, .qti-input-control-hidden .qti-theme-subtle qti-simple-choice:focus {
606
- outline-color: rgb(var(--qti-primary) 0.4);
607
- outline-offset: 2px;
608
- outline-style: solid;
609
- outline-width: var(--qti-border-width);
610
- }
611
- .qti-theme-subtle .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-hottext:hover:not([disabled]), .qti-theme-subtle .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-simple-choice:hover:not([disabled]) {
612
- outline-color: rgb(var(--qti-primary) 0.4);
613
- outline-offset: 0;
614
- outline-style: solid;
615
- outline-width: calc(var(--qti-border-width) * 2);
616
- }
617
- .qti-theme-subtle .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-hottext[aria-checked=true], .qti-theme-subtle .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-simple-choice[aria-checked=true] {
618
- --qti-border-color: var(--qti-primary-color);
619
- background-color: rgb(var(--qti-primary) 0.1);
620
- }
621
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice {
622
- cursor: pointer;
623
- background: var(--qti-background);
624
- }
625
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[disabled], qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[disabled] {
570
+ .qti-theme-subtle .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-subtle qti-simple-choice[disabled], .qti-theme-subtle .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-subtle qti-hottext[disabled] {
626
571
  --qti-border-color: transparent;
627
572
  box-shadow: unset !important;
628
573
  color: var(--qti-shadow-color);
629
574
  cursor: unset !important;
630
575
  }
631
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice:focus, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice:focus {
576
+ .qti-theme-subtle .qti-input-control-hidden qti-simple-choice:focus, .qti-input-control-hidden .qti-theme-subtle qti-simple-choice:focus, .qti-theme-subtle .qti-input-control-hidden qti-hottext:focus, .qti-input-control-hidden .qti-theme-subtle qti-hottext:focus {
632
577
  outline-color: rgb(var(--qti-primary) 0.4);
633
578
  outline-offset: 2px;
634
579
  outline-style: solid;
635
580
  outline-width: var(--qti-border-width);
636
581
  }
637
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice:hover:not([disabled]), qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice:hover:not([disabled]) {
582
+ .qti-theme-subtle .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-simple-choice:hover:not([disabled]), .qti-theme-subtle .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-hottext:hover:not([disabled]) {
638
583
  outline-color: rgb(var(--qti-primary) 0.4);
639
584
  outline-offset: 0;
640
585
  outline-style: solid;
641
586
  outline-width: calc(var(--qti-border-width) * 2);
642
587
  }
643
- .qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[aria-checked=true], qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[aria-checked=true] {
588
+ .qti-theme-subtle .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-simple-choice[aria-checked=true], .qti-theme-subtle .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-hottext[aria-checked=true] {
644
589
  --qti-border-color: var(--qti-primary-color);
645
590
  background-color: rgb(var(--qti-primary) 0.1);
646
591
  }
647
- .qti-theme-subtle qti-hottext, .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice, .qti-theme-subtle qti-simple-choice {
592
+ .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice, .qti-theme-subtle qti-simple-choice, .qti-theme-subtle qti-hottext {
648
593
  cursor: pointer;
649
594
  --width: 22px;
650
595
  --height: 22px;
@@ -653,25 +598,25 @@ qti-modal-feedback[showstatus=on] {
653
598
  align-items: center;
654
599
  gap: 0.2rem;
655
600
  }
656
- .qti-theme-subtle qti-hottext[disabled], .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[disabled], .qti-theme-subtle qti-simple-choice[disabled] {
601
+ .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[disabled], .qti-theme-subtle qti-simple-choice[disabled], .qti-theme-subtle qti-hottext[disabled] {
657
602
  --qti-border-color: transparent;
658
603
  box-shadow: unset !important;
659
604
  color: var(--qti-shadow-color);
660
605
  cursor: unset !important;
661
606
  }
662
- .qti-theme-subtle qti-hottext:focus, .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice:focus, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice:focus, .qti-theme-subtle qti-simple-choice:focus {
607
+ .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice:focus, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice:focus, .qti-theme-subtle qti-simple-choice:focus, .qti-theme-subtle qti-hottext:focus {
663
608
  outline-color: rgb(var(--qti-primary) 0.4);
664
609
  outline-offset: 2px;
665
610
  outline-style: solid;
666
611
  outline-width: var(--qti-border-width);
667
612
  }
668
- .qti-theme-subtle qti-hottext:hover:not([disabled]), .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice:hover:not([disabled]), .qti-theme-subtle qti-simple-choice:hover:not([disabled]) {
613
+ .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice:hover:not([disabled]), .qti-theme-subtle qti-simple-choice:hover:not([disabled]), .qti-theme-subtle qti-hottext:hover:not([disabled]) {
669
614
  outline-color: rgb(var(--qti-primary) 0.4);
670
615
  outline-offset: 0;
671
616
  outline-style: solid;
672
617
  outline-width: calc(var(--qti-border-width) * 2);
673
618
  }
674
- .qti-theme-subtle qti-hottext::before, .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice::before, .qti-theme-subtle qti-simple-choice::before {
619
+ .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice::before, .qti-theme-subtle qti-simple-choice::before, .qti-theme-subtle qti-hottext::before {
675
620
  position: relative;
676
621
  display: inline-block;
677
622
  border-radius: var(--qti-border-radius);
@@ -816,7 +761,7 @@ qti-modal-feedback[showstatus=on] {
816
761
  .qti-theme-ims {
817
762
  /* < usabled classes to extend in qti-components > */
818
763
  }
819
- .qti-theme-ims qti-text-entry-interaction, .qti-theme-ims qti-extended-text-interaction {
764
+ .qti-theme-ims qti-text-entry-interaction {
820
765
  position: relative;
821
766
  display: inline-block;
822
767
  border-radius: var(--qti-border-radius);
@@ -824,29 +769,29 @@ qti-modal-feedback[showstatus=on] {
824
769
  background: var(--qti-background);
825
770
  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
826
771
  }
827
- .qti-theme-ims qti-text-entry-interaction[disabled], .qti-theme-ims qti-extended-text-interaction[disabled] {
772
+ .qti-theme-ims qti-text-entry-interaction[disabled] {
828
773
  --qti-border-color: var(--qti-shadow-color);
829
774
  color: var(--qti-shadow-color);
830
775
  cursor: unset !important;
831
776
  filter: grayscale(100%);
832
777
  }
833
- .qti-theme-ims qti-text-entry-interaction:focus-within, .qti-theme-ims qti-extended-text-interaction:focus-within {
778
+ .qti-theme-ims qti-text-entry-interaction:focus-within {
834
779
  outline-color: rgb(var(--qti-primary) 0.6);
835
780
  outline-offset: 4px;
836
781
  outline-style: solid;
837
782
  outline-width: var(--qti-border-width);
838
783
  /* applies to all before elements, choice round and circle, slider thumb */
839
784
  }
840
- .qti-theme-ims qti-text-entry-interaction:focus-within::before, .qti-theme-ims qti-extended-text-interaction:focus-within::before {
785
+ .qti-theme-ims qti-text-entry-interaction:focus-within::before {
841
786
  background-color: rgb(var(--qti-primary) 0.2);
842
787
  }
843
- .qti-theme-ims qti-text-entry-interaction:hover:not([disabled]), .qti-theme-ims qti-extended-text-interaction:hover:not([disabled]) {
788
+ .qti-theme-ims qti-text-entry-interaction:hover:not([disabled]) {
844
789
  outline-color: rgb(var(--qti-primary) 0.4);
845
790
  outline-offset: 2px;
846
791
  outline-style: solid;
847
792
  outline-width: calc(var(--qti-border-width) * 2);
848
793
  }
849
- .qti-theme-ims .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-ims qti-hottext, .qti-theme-ims .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-ims qti-simple-choice {
794
+ .qti-theme-ims .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-ims qti-simple-choice, .qti-theme-ims .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-ims qti-hottext {
850
795
  position: relative;
851
796
  display: inline-block;
852
797
  border-radius: var(--qti-border-radius);
@@ -856,34 +801,35 @@ qti-modal-feedback[showstatus=on] {
856
801
  background: var(--qti-background);
857
802
  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
858
803
  }
859
- .qti-theme-ims .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-ims qti-hottext[disabled], .qti-theme-ims .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-ims qti-simple-choice[disabled] {
804
+ .qti-theme-ims .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-ims qti-simple-choice[disabled], .qti-theme-ims .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-ims qti-hottext[disabled] {
860
805
  --qti-border-color: var(--qti-shadow-color);
861
806
  color: var(--qti-shadow-color);
862
807
  cursor: unset !important;
863
808
  filter: grayscale(100%);
864
809
  }
865
- .qti-theme-ims .qti-input-control-hidden qti-hottext:focus-within, .qti-input-control-hidden .qti-theme-ims qti-hottext:focus-within, .qti-theme-ims .qti-input-control-hidden qti-simple-choice:focus-within, .qti-input-control-hidden .qti-theme-ims qti-simple-choice:focus-within {
810
+ .qti-theme-ims .qti-input-control-hidden qti-simple-choice:focus-within, .qti-input-control-hidden .qti-theme-ims qti-simple-choice:focus-within, .qti-theme-ims .qti-input-control-hidden qti-hottext:focus-within, .qti-input-control-hidden .qti-theme-ims qti-hottext:focus-within {
866
811
  outline-color: rgb(var(--qti-primary) 0.6);
867
812
  outline-offset: 4px;
868
813
  outline-style: solid;
869
814
  outline-width: var(--qti-border-width);
870
815
  /* applies to all before elements, choice round and circle, slider thumb */
871
816
  }
872
- .qti-theme-ims .qti-input-control-hidden qti-hottext:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-hottext:focus-within::before, .qti-theme-ims .qti-input-control-hidden qti-simple-choice:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-simple-choice:focus-within::before {
817
+ .qti-theme-ims .qti-input-control-hidden qti-simple-choice:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-simple-choice:focus-within::before, .qti-theme-ims .qti-input-control-hidden qti-hottext:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-hottext:focus-within::before {
873
818
  background-color: rgb(var(--qti-primary) 0.2);
874
819
  }
875
- .qti-theme-ims .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-hottext:hover:not([disabled]), .qti-theme-ims .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-simple-choice:hover:not([disabled]) {
820
+ .qti-theme-ims .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-simple-choice:hover:not([disabled]), .qti-theme-ims .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-hottext:hover:not([disabled]) {
876
821
  outline-color: rgb(var(--qti-primary) 0.4);
877
822
  outline-offset: 2px;
878
823
  outline-style: solid;
879
824
  outline-width: calc(var(--qti-border-width) * 2);
880
825
  }
881
- .qti-theme-ims .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-hottext[aria-checked=true], .qti-theme-ims .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-simple-choice[aria-checked=true] {
826
+ .qti-theme-ims .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-simple-choice[aria-checked=true], .qti-theme-ims .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-hottext[aria-checked=true] {
882
827
  --qti-border-color: var(--qti-primary-color);
883
828
  background-color: var(--qti-primary-color);
884
829
  color: #fff;
885
830
  }
886
831
  .qti-theme-ims qti-hotspot-interaction qti-hotspot-choice, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice {
832
+ padding: var(--qti-padding-x) var(--qti-padding-y);
887
833
  cursor: pointer;
888
834
  background: var(--qti-background);
889
835
  }
@@ -914,7 +860,7 @@ qti-modal-feedback[showstatus=on] {
914
860
  background-color: var(--qti-primary-color);
915
861
  color: #fff;
916
862
  }
917
- .qti-theme-ims qti-hottext, .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice, .qti-theme-ims qti-simple-choice {
863
+ .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice, .qti-theme-ims qti-simple-choice, .qti-theme-ims qti-hottext {
918
864
  cursor: pointer;
919
865
  --width: 22px;
920
866
  --height: 22px;
@@ -923,35 +869,35 @@ qti-modal-feedback[showstatus=on] {
923
869
  align-items: center;
924
870
  gap: 0.2rem;
925
871
  }
926
- .qti-theme-ims qti-hottext[disabled], .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[disabled], .qti-theme-ims qti-simple-choice[disabled] {
872
+ .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[disabled], .qti-theme-ims qti-simple-choice[disabled], .qti-theme-ims qti-hottext[disabled] {
927
873
  --qti-border-color: var(--qti-shadow-color);
928
874
  color: var(--qti-shadow-color);
929
875
  cursor: unset !important;
930
876
  filter: grayscale(100%);
931
877
  }
932
- .qti-theme-ims qti-hottext:focus-within, .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:focus-within, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:focus-within, .qti-theme-ims qti-simple-choice:focus-within {
878
+ .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:focus-within, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:focus-within, .qti-theme-ims qti-simple-choice:focus-within, .qti-theme-ims qti-hottext:focus-within {
933
879
  outline-color: rgb(var(--qti-primary) 0.6);
934
880
  outline-offset: 4px;
935
881
  outline-style: solid;
936
882
  outline-width: var(--qti-border-width);
937
883
  /* applies to all before elements, choice round and circle, slider thumb */
938
884
  }
939
- .qti-theme-ims qti-hottext:focus-within::before, .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:focus-within::before, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:focus-within::before, .qti-theme-ims qti-simple-choice:focus-within::before {
885
+ .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:focus-within::before, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:focus-within::before, .qti-theme-ims qti-simple-choice:focus-within::before, .qti-theme-ims qti-hottext:focus-within::before {
940
886
  background-color: rgb(var(--qti-primary) 0.2);
941
887
  }
942
- .qti-theme-ims qti-hottext:hover:not([disabled]), .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:hover:not([disabled]), .qti-theme-ims qti-simple-choice:hover:not([disabled]) {
888
+ .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:hover:not([disabled]), .qti-theme-ims qti-simple-choice:hover:not([disabled]), .qti-theme-ims qti-hottext:hover:not([disabled]) {
943
889
  outline-color: rgb(var(--qti-primary) 0.4);
944
890
  outline-offset: 2px;
945
891
  outline-style: solid;
946
892
  outline-width: calc(var(--qti-border-width) * 2);
947
893
  }
948
- .qti-theme-ims qti-hottext[role=checkbox]::before, .qti-theme-ims qti-simple-choice[role=checkbox]::before {
894
+ .qti-theme-ims qti-simple-choice[role=checkbox]::before, .qti-theme-ims qti-hottext[role=checkbox]::before {
949
895
  content: "";
950
896
  min-height: var(--width);
951
897
  min-width: var(--width);
952
898
  transition: border-radius 1s ease-in;
953
899
  }
954
- .qti-theme-ims qti-hottext[role=checkbox]::after, .qti-theme-ims qti-simple-choice[role=checkbox]::after {
900
+ .qti-theme-ims qti-simple-choice[role=checkbox]::after, .qti-theme-ims qti-hottext[role=checkbox]::after {
955
901
  border-bottom: 3px solid var(--qti-primary-color);
956
902
  border-left: 3px solid var(--qti-primary-color);
957
903
  content: "";
@@ -963,18 +909,18 @@ qti-modal-feedback[showstatus=on] {
963
909
  transition: all 0.2s ease;
964
910
  width: 10px;
965
911
  }
966
- .qti-theme-ims qti-hottext[role=checkbox][aria-checked=true]::after, .qti-theme-ims qti-simple-choice[role=checkbox][aria-checked=true]::after {
912
+ .qti-theme-ims qti-simple-choice[role=checkbox][aria-checked=true]::after, .qti-theme-ims qti-hottext[role=checkbox][aria-checked=true]::after {
967
913
  border-bottom: 2px solid var(--qti-primary-color);
968
914
  border-left: 2px solid var(--qti-primary-color);
969
915
  opacity: 1;
970
916
  }
971
- .qti-theme-ims qti-hottext[role=radio]::before, .qti-theme-ims qti-simple-choice[role=radio]::before {
917
+ .qti-theme-ims qti-simple-choice[role=radio]::before, .qti-theme-ims qti-hottext[role=radio]::before {
972
918
  border-radius: 100%;
973
919
  content: "";
974
920
  min-height: 22px;
975
921
  min-width: 22px;
976
922
  }
977
- .qti-theme-ims qti-hottext[role=radio]::after, .qti-theme-ims qti-simple-choice[role=radio]::after {
923
+ .qti-theme-ims qti-simple-choice[role=radio]::after, .qti-theme-ims qti-hottext[role=radio]::after {
978
924
  background: var(--qti-primary-color);
979
925
  border-radius: 100%;
980
926
  content: "";
@@ -987,11 +933,11 @@ qti-modal-feedback[showstatus=on] {
987
933
  transition: all 0.1s ease-out;
988
934
  width: 14px;
989
935
  }
990
- .qti-theme-ims qti-hottext[role=radio][aria-checked=true]::after, .qti-theme-ims qti-simple-choice[role=radio][aria-checked=true]::after {
936
+ .qti-theme-ims qti-simple-choice[role=radio][aria-checked=true]::after, .qti-theme-ims qti-hottext[role=radio][aria-checked=true]::after {
991
937
  opacity: 1;
992
938
  transform: scale(1);
993
939
  }
994
- .qti-theme-ims qti-hottext::before, .qti-theme-ims qti-simple-choice::before {
940
+ .qti-theme-ims qti-simple-choice::before, .qti-theme-ims qti-hottext::before {
995
941
  position: relative;
996
942
  display: inline-block;
997
943
  border-radius: var(--qti-border-radius);
@@ -1165,6 +1111,34 @@ qti-modal-feedback[showstatus=on] {
1165
1111
  transform-origin: center;
1166
1112
  }
1167
1113
 
1114
+ /* Choice as checkbox */
1115
+ qti-hottext {
1116
+ position: relative;
1117
+ vertical-align: bottom;
1118
+ }
1119
+
1120
+ .qti-input-control-hidden qti-hottext {
1121
+ vertical-align: unset;
1122
+ }
1123
+ .qti-input-control-hidden qti-hottext::before, .qti-input-control-hidden qti-hottext::after {
1124
+ content: unset !important;
1125
+ }
1126
+
1127
+ qti-modal-feedback[showstatus=on] {
1128
+ position: absolute;
1129
+ top: 2rem;
1130
+ right: 0;
1131
+ left: 0;
1132
+ width: 400px;
1133
+ height: 300px;
1134
+ border: 1px solid #ddd;
1135
+ border-radius: 10px;
1136
+ margin-right: auto;
1137
+ margin-left: auto;
1138
+ background-color: white;
1139
+ text-align: center;
1140
+ }
1141
+
1168
1142
  qti-associate-interaction::part(associables-container) {
1169
1143
  display: flex;
1170
1144
  width: 100%;
@@ -1194,9 +1168,6 @@ qti-choice-interaction {
1194
1168
  grid-gap: 10px;
1195
1169
  grid-template-rows: auto auto;
1196
1170
  }
1197
- qti-choice-interaction.qti-choices-stacking-1 {
1198
- grid-template-columns: repeat(1, 1fr);
1199
- }
1200
1171
  qti-choice-interaction.qti-choices-stacking-2 {
1201
1172
  grid-template-columns: repeat(2, 1fr);
1202
1173
  }
@@ -1239,13 +1210,30 @@ qti-graphic-associate-interaction {
1239
1210
  position: relative;
1240
1211
  display: block;
1241
1212
  }
1242
- qti-graphic-associate-interaction qti-associable-hotspot[shape=circle] {
1213
+ qti-graphic-associate-interaction [qti-choice] {
1214
+ position: absolute;
1215
+ }
1216
+ qti-graphic-associate-interaction [qti-choice][shape=circle]::before {
1243
1217
  border-radius: 100%;
1244
- background-color: green;
1218
+ background: transparent;
1245
1219
  }
1246
- qti-graphic-associate-interaction qti-associable-hotspot[shape=square] {
1220
+ qti-graphic-associate-interaction [qti-choice][shape=square]::before {
1247
1221
  border-radius: 0;
1248
- background-color: green;
1222
+ background: transparent;
1223
+ }
1224
+ qti-graphic-associate-interaction [qti-choice]::after {
1225
+ display: flex !important;
1226
+ width: unset !important;
1227
+ min-width: var(--width);
1228
+ height: unset !important;
1229
+ min-height: var(--width);
1230
+ align-items: center;
1231
+ justify-content: center;
1232
+ border: unset !important;
1233
+ content: attr(aria-ordervalue) !important;
1234
+ opacity: unset !important;
1235
+ transform: unset !important;
1236
+ transition: unset !important;
1249
1237
  }
1250
1238
 
1251
1239
  qti-graphic-gap-match-interaction {
@@ -1291,19 +1279,6 @@ qti-hotspot-interaction qti-hotspot-choice {
1291
1279
  position: absolute;
1292
1280
  }
1293
1281
 
1294
- /* Choice as checkbox */
1295
- qti-hottext {
1296
- position: relative;
1297
- vertical-align: bottom;
1298
- }
1299
-
1300
- .qti-input-control-hidden qti-hottext {
1301
- vertical-align: unset;
1302
- }
1303
- .qti-input-control-hidden qti-hottext::before, .qti-input-control-hidden qti-hottext::after {
1304
- content: unset !important;
1305
- }
1306
-
1307
1282
  qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type {
1308
1283
  display: flex;
1309
1284
  gap: var(--qti-gap, 0.5rem);
@@ -1412,9 +1387,4 @@ qti-rubric-block qti-content-body:not(:empty) {
1412
1387
  --qti-background: #ebebeb;
1413
1388
  --qti-padding-x: 0.5rem;
1414
1389
  --qti-padding-y: 0.8rem;
1415
- }
1416
-
1417
- qti-item-body img {
1418
- width: 100% !important;
1419
- height: auto !important;
1420
1390
  }
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  ],
10
10
  "license": "MIT",
11
11
  "private": false,
12
- "version": "6.0.2-1",
12
+ "version": "6.0.2",
13
13
  "type": "module",
14
14
  "main": "dist/qti-components/index.js",
15
15
  "exports": {
@@ -40,6 +40,9 @@
40
40
  "qti-item": [
41
41
  "./dist/qti-item/index.d.ts"
42
42
  ],
43
+ "react/qti-item": [
44
+ "./dist/qti-item-react/index.d.ts"
45
+ ],
43
46
  "qti-test": [
44
47
  "./dist/qti-test/index.d.ts"
45
48
  ],
@@ -1,23 +0,0 @@
1
- interface directedPair {
2
- destination: string;
3
- source: string;
4
- }
5
- interface ResponseInteraction {
6
- responseIdentifier: string;
7
- response: string | string[];
8
- }
9
- interface InputResponseFormat {
10
- item: string;
11
- value: ResponseInteraction;
12
- }
13
- interface Calculate {
14
- calculate: () => string | string[];
15
- }
16
- type float = number;
17
- type integer = number;
18
- type BaseType = 'boolean' | 'directedPair' | 'float' | 'integer' | 'string' | 'identifier' | 'pair';
19
- type Multiple = string | string[][];
20
- type Ordered = string | string[][];
21
- type Cardinality = 'multiple' | 'ordered' | 'single';
22
-
23
- export { BaseType as B, Cardinality as C, InputResponseFormat as I, Multiple as M, Ordered as O, ResponseInteraction as R, Calculate as a, directedPair as d, float as f, integer as i };
@@ -1 +0,0 @@
1
- import{a as o}from"./chunk-NMCIOGD2.js";function U(e,l){let r=o({waitUntilFirstUpdate:!1},l);return(s,d)=>{let{update:c}=s,p=Array.isArray(e)?e:[e];s.update=function(t){p.forEach(f=>{let n=f;if(t.has(n)){let i=t.get(n),a=this[n];i!==a&&(!r.waitUntilFirstUpdate||this.hasUpdated)&&this[d](i,a)}}),c.call(this,t)}}}import{createContext as u}from"@lit-labs/context";var h=u("logger");export{U as a,h as b};