@citolab/qti-components 6.7.1-36 → 6.7.1-37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +94 -94
- package/dist/item.css +168 -207
- package/package.json +1 -1
|
@@ -96,65 +96,6 @@
|
|
|
96
96
|
}
|
|
97
97
|
]
|
|
98
98
|
},
|
|
99
|
-
{
|
|
100
|
-
"kind": "javascript-module",
|
|
101
|
-
"path": "src/lib/qti-transformers/index.ts",
|
|
102
|
-
"declarations": [],
|
|
103
|
-
"exports": [
|
|
104
|
-
{
|
|
105
|
-
"kind": "js",
|
|
106
|
-
"name": "*",
|
|
107
|
-
"declaration": {
|
|
108
|
-
"name": "*",
|
|
109
|
-
"package": "./qti-transformers"
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
]
|
|
113
|
-
},
|
|
114
|
-
{
|
|
115
|
-
"kind": "javascript-module",
|
|
116
|
-
"path": "src/lib/qti-transformers/qti-transformers.ts",
|
|
117
|
-
"declarations": [
|
|
118
|
-
{
|
|
119
|
-
"kind": "function",
|
|
120
|
-
"name": "qtiTransformItem",
|
|
121
|
-
"return": {
|
|
122
|
-
"type": {
|
|
123
|
-
"text": ""
|
|
124
|
-
}
|
|
125
|
-
},
|
|
126
|
-
"description": "Browser based QTI-XML to HTML transformer.\nReturns an object with methods to load, parse, transform and serialize QTI XML items."
|
|
127
|
-
},
|
|
128
|
-
{
|
|
129
|
-
"kind": "function",
|
|
130
|
-
"name": "qtiTransformTest",
|
|
131
|
-
"return": {
|
|
132
|
-
"type": {
|
|
133
|
-
"text": ""
|
|
134
|
-
}
|
|
135
|
-
},
|
|
136
|
-
"description": "Returns an object with methods to load, parse and transform QTI tests."
|
|
137
|
-
}
|
|
138
|
-
],
|
|
139
|
-
"exports": [
|
|
140
|
-
{
|
|
141
|
-
"kind": "js",
|
|
142
|
-
"name": "qtiTransformItem",
|
|
143
|
-
"declaration": {
|
|
144
|
-
"name": "qtiTransformItem",
|
|
145
|
-
"module": "src/lib/qti-transformers/qti-transformers.ts"
|
|
146
|
-
}
|
|
147
|
-
},
|
|
148
|
-
{
|
|
149
|
-
"kind": "js",
|
|
150
|
-
"name": "qtiTransformTest",
|
|
151
|
-
"declaration": {
|
|
152
|
-
"name": "qtiTransformTest",
|
|
153
|
-
"module": "src/lib/qti-transformers/qti-transformers.ts"
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
]
|
|
157
|
-
},
|
|
158
99
|
{
|
|
159
100
|
"kind": "javascript-module",
|
|
160
101
|
"path": "src/lib/qti-components/index.ts",
|
|
@@ -570,6 +511,65 @@
|
|
|
570
511
|
}
|
|
571
512
|
]
|
|
572
513
|
},
|
|
514
|
+
{
|
|
515
|
+
"kind": "javascript-module",
|
|
516
|
+
"path": "src/lib/qti-transformers/index.ts",
|
|
517
|
+
"declarations": [],
|
|
518
|
+
"exports": [
|
|
519
|
+
{
|
|
520
|
+
"kind": "js",
|
|
521
|
+
"name": "*",
|
|
522
|
+
"declaration": {
|
|
523
|
+
"name": "*",
|
|
524
|
+
"package": "./qti-transformers"
|
|
525
|
+
}
|
|
526
|
+
}
|
|
527
|
+
]
|
|
528
|
+
},
|
|
529
|
+
{
|
|
530
|
+
"kind": "javascript-module",
|
|
531
|
+
"path": "src/lib/qti-transformers/qti-transformers.ts",
|
|
532
|
+
"declarations": [
|
|
533
|
+
{
|
|
534
|
+
"kind": "function",
|
|
535
|
+
"name": "qtiTransformItem",
|
|
536
|
+
"return": {
|
|
537
|
+
"type": {
|
|
538
|
+
"text": ""
|
|
539
|
+
}
|
|
540
|
+
},
|
|
541
|
+
"description": "Browser based QTI-XML to HTML transformer.\nReturns an object with methods to load, parse, transform and serialize QTI XML items."
|
|
542
|
+
},
|
|
543
|
+
{
|
|
544
|
+
"kind": "function",
|
|
545
|
+
"name": "qtiTransformTest",
|
|
546
|
+
"return": {
|
|
547
|
+
"type": {
|
|
548
|
+
"text": ""
|
|
549
|
+
}
|
|
550
|
+
},
|
|
551
|
+
"description": "Returns an object with methods to load, parse and transform QTI tests."
|
|
552
|
+
}
|
|
553
|
+
],
|
|
554
|
+
"exports": [
|
|
555
|
+
{
|
|
556
|
+
"kind": "js",
|
|
557
|
+
"name": "qtiTransformItem",
|
|
558
|
+
"declaration": {
|
|
559
|
+
"name": "qtiTransformItem",
|
|
560
|
+
"module": "src/lib/qti-transformers/qti-transformers.ts"
|
|
561
|
+
}
|
|
562
|
+
},
|
|
563
|
+
{
|
|
564
|
+
"kind": "js",
|
|
565
|
+
"name": "qtiTransformTest",
|
|
566
|
+
"declaration": {
|
|
567
|
+
"name": "qtiTransformTest",
|
|
568
|
+
"module": "src/lib/qti-transformers/qti-transformers.ts"
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
]
|
|
572
|
+
},
|
|
573
573
|
{
|
|
574
574
|
"kind": "javascript-module",
|
|
575
575
|
"path": "src/lib/qti-components/internal/event-types.ts",
|
|
@@ -695,41 +695,6 @@
|
|
|
695
695
|
"declarations": [],
|
|
696
696
|
"exports": []
|
|
697
697
|
},
|
|
698
|
-
{
|
|
699
|
-
"kind": "javascript-module",
|
|
700
|
-
"path": "src/lib/qti-components/qti-companion-materials-info/qti-companion-materials-info.ts",
|
|
701
|
-
"declarations": [
|
|
702
|
-
{
|
|
703
|
-
"kind": "class",
|
|
704
|
-
"description": "",
|
|
705
|
-
"name": "QtiCompanionMaterialsInfo",
|
|
706
|
-
"superclass": {
|
|
707
|
-
"name": "LitElement",
|
|
708
|
-
"package": "lit"
|
|
709
|
-
},
|
|
710
|
-
"tagName": "qti-companion-materials-info",
|
|
711
|
-
"customElement": true
|
|
712
|
-
}
|
|
713
|
-
],
|
|
714
|
-
"exports": [
|
|
715
|
-
{
|
|
716
|
-
"kind": "js",
|
|
717
|
-
"name": "QtiCompanionMaterialsInfo",
|
|
718
|
-
"declaration": {
|
|
719
|
-
"name": "QtiCompanionMaterialsInfo",
|
|
720
|
-
"module": "src/lib/qti-components/qti-companion-materials-info/qti-companion-materials-info.ts"
|
|
721
|
-
}
|
|
722
|
-
},
|
|
723
|
-
{
|
|
724
|
-
"kind": "custom-element-definition",
|
|
725
|
-
"name": "qti-companion-materials-info",
|
|
726
|
-
"declaration": {
|
|
727
|
-
"name": "QtiCompanionMaterialsInfo",
|
|
728
|
-
"module": "src/lib/qti-components/qti-companion-materials-info/qti-companion-materials-info.ts"
|
|
729
|
-
}
|
|
730
|
-
}
|
|
731
|
-
]
|
|
732
|
-
},
|
|
733
698
|
{
|
|
734
699
|
"kind": "javascript-module",
|
|
735
700
|
"path": "src/lib/qti-components/qti-assessment-item/item-print-variables.ts",
|
|
@@ -909,6 +874,41 @@
|
|
|
909
874
|
}
|
|
910
875
|
]
|
|
911
876
|
},
|
|
877
|
+
{
|
|
878
|
+
"kind": "javascript-module",
|
|
879
|
+
"path": "src/lib/qti-components/qti-companion-materials-info/qti-companion-materials-info.ts",
|
|
880
|
+
"declarations": [
|
|
881
|
+
{
|
|
882
|
+
"kind": "class",
|
|
883
|
+
"description": "",
|
|
884
|
+
"name": "QtiCompanionMaterialsInfo",
|
|
885
|
+
"superclass": {
|
|
886
|
+
"name": "LitElement",
|
|
887
|
+
"package": "lit"
|
|
888
|
+
},
|
|
889
|
+
"tagName": "qti-companion-materials-info",
|
|
890
|
+
"customElement": true
|
|
891
|
+
}
|
|
892
|
+
],
|
|
893
|
+
"exports": [
|
|
894
|
+
{
|
|
895
|
+
"kind": "js",
|
|
896
|
+
"name": "QtiCompanionMaterialsInfo",
|
|
897
|
+
"declaration": {
|
|
898
|
+
"name": "QtiCompanionMaterialsInfo",
|
|
899
|
+
"module": "src/lib/qti-components/qti-companion-materials-info/qti-companion-materials-info.ts"
|
|
900
|
+
}
|
|
901
|
+
},
|
|
902
|
+
{
|
|
903
|
+
"kind": "custom-element-definition",
|
|
904
|
+
"name": "qti-companion-materials-info",
|
|
905
|
+
"declaration": {
|
|
906
|
+
"name": "QtiCompanionMaterialsInfo",
|
|
907
|
+
"module": "src/lib/qti-components/qti-companion-materials-info/qti-companion-materials-info.ts"
|
|
908
|
+
}
|
|
909
|
+
}
|
|
910
|
+
]
|
|
911
|
+
},
|
|
912
912
|
{
|
|
913
913
|
"kind": "javascript-module",
|
|
914
914
|
"path": "src/lib/qti-components/qti-custom-operator/qti-custom-operator.ts",
|
package/dist/item.css
CHANGED
|
@@ -280,371 +280,347 @@ qti-response-declaration {
|
|
|
280
280
|
qti-choice-interaction {
|
|
281
281
|
&.qti-input-control-hidden {
|
|
282
282
|
& qti-simple-choice {
|
|
283
|
-
|
|
284
|
-
&::part(ch) {
|
|
285
|
-
@apply !hidden;
|
|
283
|
+
&::part(ch) {display:none !important;
|
|
286
284
|
}
|
|
287
|
-
&[aria-checked='true'] {
|
|
288
|
-
@apply act;
|
|
285
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
289
286
|
}
|
|
290
|
-
&[aria-readonly='true'] {
|
|
291
|
-
@apply rdo;
|
|
292
|
-
}
|
|
293
|
-
&[aria-disabled='true'] {
|
|
294
|
-
@apply dis;
|
|
287
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
295
288
|
}
|
|
289
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
290
|
+
}padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:pointer;outline:2px solid transparent;outline-offset:2px
|
|
296
291
|
}
|
|
292
|
+
& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
293
|
+
& qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
297
294
|
}
|
|
298
295
|
|
|
299
296
|
&:not(.qti-input-control-hidden) {
|
|
300
297
|
& qti-simple-choice {
|
|
301
|
-
|
|
302
|
-
&[aria-checked='true'] {
|
|
303
|
-
@apply act;
|
|
298
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
304
299
|
}
|
|
305
|
-
&[aria-readonly='true'] {
|
|
306
|
-
@apply rdo;
|
|
300
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
307
301
|
}
|
|
308
|
-
&[aria-disabled='true'] {
|
|
309
|
-
@apply dis;
|
|
302
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
310
303
|
}
|
|
311
304
|
|
|
312
305
|
&::part(cha) {
|
|
313
|
-
/* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
|
|
314
|
-
@apply h-2/3 w-2/3;
|
|
315
|
-
}
|
|
316
|
-
&[role='radio']::part(ch) {
|
|
317
|
-
@apply check-radio;
|
|
306
|
+
/* let the checkmark or radio circle already take up space, else when checking everyhing collapses */height:66.6666666667%;width:66.6666666667%;
|
|
318
307
|
}
|
|
319
|
-
&[role='radio']
|
|
320
|
-
@apply check-radio-checked;
|
|
308
|
+
&[role='radio']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
|
|
321
309
|
}
|
|
322
|
-
&[role='
|
|
323
|
-
@apply check-checkbox;
|
|
310
|
+
&[role='radio'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;
|
|
324
311
|
}
|
|
325
|
-
&[role='checkbox']
|
|
326
|
-
@apply check-checkbox-checked;
|
|
312
|
+
&[role='checkbox']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.25rem;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
|
|
327
313
|
}
|
|
314
|
+
&[role='checkbox'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
315
|
+
}padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;border-radius:0.375rem;display:flex;gap:0.5rem;outline:2px solid transparent;outline-offset:2px;align-items:center
|
|
328
316
|
}
|
|
317
|
+
& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
318
|
+
& qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
329
319
|
}
|
|
330
320
|
|
|
331
321
|
& qti-simple-choice {
|
|
332
322
|
&[data-correct-response='true'] {
|
|
333
323
|
&::after {
|
|
334
|
-
content: '\02714';
|
|
335
|
-
@apply text-green-600;
|
|
324
|
+
content: '\02714';--qti-text-opacity:1;color:rgb(22 163 74 / var(--qti-text-opacity));
|
|
336
325
|
}
|
|
337
326
|
}
|
|
338
327
|
}
|
|
339
328
|
|
|
340
|
-
& qti-simple-choice > p {
|
|
341
|
-
@apply m-0 p-0;
|
|
329
|
+
& qti-simple-choice > p {padding:0;margin:0;
|
|
342
330
|
}
|
|
343
331
|
}
|
|
344
332
|
|
|
345
333
|
qti-text-entry-interaction {
|
|
346
|
-
&::part(input) {
|
|
347
|
-
@apply text hover:hov focus:foc;
|
|
334
|
+
&::part(input) {padding:0.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;cursor:text;outline:2px solid transparent;outline-offset:2px;
|
|
348
335
|
}
|
|
336
|
+
&::part(input):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
337
|
+
&::part(input):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
349
338
|
}
|
|
350
339
|
|
|
351
340
|
qti-extended-text-interaction {
|
|
352
|
-
&::part(textarea) {
|
|
353
|
-
@apply text hover:hov focus:foc;
|
|
341
|
+
&::part(textarea) {padding:0.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;cursor:text;outline:2px solid transparent;outline-offset:2px;
|
|
354
342
|
}
|
|
343
|
+
&::part(textarea):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
344
|
+
&::part(textarea):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
355
345
|
}
|
|
356
346
|
|
|
357
347
|
qti-gap-match-interaction {
|
|
358
|
-
& qti-gap-text {
|
|
359
|
-
|
|
348
|
+
& qti-gap-text {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
|
|
349
|
+
radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
|
|
350
|
+
background-repeat: repeat-y;
|
|
351
|
+
background-position: left 2px;
|
|
352
|
+
background-size: 14px 8px;
|
|
360
353
|
}
|
|
361
|
-
& qti-gap
|
|
362
|
-
|
|
363
|
-
|
|
354
|
+
& qti-gap-text:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
355
|
+
& qti-gap-text:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
356
|
+
& qti-gap { /* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
|
|
364
357
|
&:empty:after {
|
|
365
358
|
content: '\0000a0'; /* when empty, put a space in it */
|
|
366
359
|
}
|
|
367
|
-
&:not(:empty) {
|
|
368
|
-
@apply inline-flex w-auto p-0;
|
|
369
|
-
}
|
|
370
|
-
&:not(:empty) > * {
|
|
371
|
-
@apply flex-1 rotate-0 ring-gray-200;
|
|
360
|
+
&:not(:empty) {padding:0;display:inline-flex;width:auto;
|
|
372
361
|
}
|
|
362
|
+
&:not(:empty) > * {--qti-ring-opacity:1;--qti-ring-color:rgb(229 231 235 / var(--qti-ring-opacity));flex:1 1 0%;--qti-rotate-x:0;--qti-rotate-y:0;--qti-rotate-z:0;--qti-rotate:0;transform:translateX(var(--qti-translate-x)) translateY(var(--qti-translate-y)) translateZ(var(--qti-translate-z)) rotate(var(--qti-rotate)) rotateX(var(--qti-rotate-x)) rotateY(var(--qti-rotate-y)) rotateZ(var(--qti-rotate-z)) skewX(var(--qti-skew-x)) skewY(var(--qti-skew-y)) scaleX(var(--qti-scale-x)) scaleY(var(--qti-scale-y)) scaleZ(var(--qti-scale-z));
|
|
363
|
+
}width:8rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:inline-flex
|
|
373
364
|
}
|
|
365
|
+
& qti-gap:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
366
|
+
& qti-gap:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
374
367
|
}
|
|
375
368
|
|
|
376
369
|
qti-hotspot-interaction {
|
|
377
370
|
& qti-hotspot-choice {
|
|
378
|
-
@apply hover:bg-blue-100 hover:bg-opacity-30;
|
|
379
371
|
&[shape='circle'] {
|
|
380
|
-
|
|
381
|
-
&[aria-checked='true'] {
|
|
382
|
-
@apply act;
|
|
372
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
383
373
|
}
|
|
384
|
-
&[aria-readonly='true'] {
|
|
385
|
-
@apply rdo;
|
|
386
|
-
}
|
|
387
|
-
&[aria-disabled='true'] {
|
|
388
|
-
@apply dis;
|
|
374
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
389
375
|
}
|
|
376
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
377
|
+
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px;border-radius:9999px
|
|
390
378
|
}
|
|
379
|
+
&[shape="circle"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
391
380
|
&[shape='rect'] {
|
|
392
|
-
|
|
393
|
-
&[aria-checked='true'] {
|
|
394
|
-
@apply act;
|
|
395
|
-
}
|
|
396
|
-
&[aria-readonly='true'] {
|
|
397
|
-
@apply rdo;
|
|
381
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
398
382
|
}
|
|
399
|
-
&[aria-
|
|
400
|
-
@apply dis;
|
|
383
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
401
384
|
}
|
|
385
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
386
|
+
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
|
|
402
387
|
}
|
|
388
|
+
&[shape="rect"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
403
389
|
&[shape='poly'] {
|
|
404
|
-
|
|
405
|
-
&[aria-checked='true'] {
|
|
406
|
-
@apply act;
|
|
390
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
407
391
|
}
|
|
408
|
-
&[aria-readonly='true'] {
|
|
409
|
-
@apply rdo;
|
|
392
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
410
393
|
}
|
|
411
|
-
&[aria-disabled='true'] {
|
|
412
|
-
@apply dis;
|
|
394
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
413
395
|
}
|
|
414
396
|
}
|
|
397
|
+
&[shape="poly"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
398
|
+
&[shape="poly"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
415
399
|
}
|
|
400
|
+
& qti-hotspot-choice:hover{--qti-bg-opacity:1;background-color:rgb(219 234 254 / var(--qti-bg-opacity));--qti-bg-opacity:0.3;}
|
|
416
401
|
}
|
|
417
402
|
|
|
418
403
|
qti-hottext-interaction {
|
|
419
404
|
&.qti-input-control-hidden {
|
|
420
405
|
qti-hottext {
|
|
421
|
-
|
|
422
|
-
&::part(ch) {
|
|
423
|
-
@apply !hidden;
|
|
424
|
-
}
|
|
425
|
-
&[aria-checked='true'] {
|
|
426
|
-
@apply act;
|
|
406
|
+
&::part(ch) {display:none !important;
|
|
427
407
|
}
|
|
428
|
-
&[aria-
|
|
429
|
-
@apply rdo;
|
|
408
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
430
409
|
}
|
|
431
|
-
&[aria-
|
|
432
|
-
@apply dis;
|
|
410
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
433
411
|
}
|
|
412
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
413
|
+
}padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:pointer;outline:2px solid transparent;outline-offset:2px;display:inline-flex
|
|
434
414
|
}
|
|
415
|
+
qti-hottext:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
416
|
+
qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
435
417
|
}
|
|
436
418
|
|
|
437
419
|
&:not(.qti-input-control-hidden) {
|
|
438
420
|
qti-hottext {
|
|
439
|
-
@apply check hover:hov focus:foc inline-flex;
|
|
440
421
|
&::part(cha) {
|
|
441
|
-
/* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
|
|
442
|
-
@apply h-2/3 w-2/3;
|
|
422
|
+
/* let the checkmark or radio circle already take up space, else when checking everyhing collapses */height:66.6666666667%;width:66.6666666667%;
|
|
443
423
|
}
|
|
444
|
-
&[role='radio']::part(ch) {
|
|
445
|
-
@apply check-radio;
|
|
424
|
+
&[role='radio']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
|
|
446
425
|
}
|
|
447
|
-
&[role='radio'][aria-checked='true']::part(cha) {
|
|
448
|
-
@apply check-radio-checked;
|
|
426
|
+
&[role='radio'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;
|
|
449
427
|
}
|
|
450
|
-
&[role='checkbox']::part(ch) {
|
|
451
|
-
@apply check-checkbox;
|
|
452
|
-
}
|
|
453
|
-
&[role='checkbox'][aria-checked='true']::part(cha) {
|
|
454
|
-
@apply check-checkbox-checked;
|
|
428
|
+
&[role='checkbox']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.25rem;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
|
|
455
429
|
}
|
|
430
|
+
&[role='checkbox'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
431
|
+
}padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;border-radius:0.375rem;display:flex;gap:0.5rem;outline:2px solid transparent;outline-offset:2px;align-items:center;display:inline-flex
|
|
456
432
|
}
|
|
433
|
+
qti-hottext:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
434
|
+
qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
457
435
|
}
|
|
458
436
|
}
|
|
459
437
|
|
|
460
438
|
qti-inline-choice-interaction {
|
|
461
|
-
&::part(select) {
|
|
462
|
-
@apply select hover:hov focus:foc; /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */
|
|
439
|
+
&::part(select) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-right:1.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E") no-repeat center right 6px;
|
|
463
440
|
}
|
|
441
|
+
&::part(select):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
442
|
+
&::part(select):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
464
443
|
}
|
|
465
444
|
|
|
466
445
|
qti-match-interaction:not(.qti-match-tabular) {
|
|
467
446
|
& qti-simple-match-set:first-of-type {
|
|
468
|
-
@apply flex flex-wrap gap-2 pb-4;
|
|
469
447
|
|
|
470
|
-
& qti-simple-associable-choice {
|
|
471
|
-
|
|
448
|
+
& qti-simple-associable-choice {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
|
|
449
|
+
radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
|
|
450
|
+
background-repeat: repeat-y;
|
|
451
|
+
background-position: left 2px;
|
|
452
|
+
background-size: 14px 8px;
|
|
472
453
|
}
|
|
454
|
+
|
|
455
|
+
& qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
456
|
+
|
|
457
|
+
& qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}padding-bottom:1rem;display:flex;flex-wrap:wrap;gap:0.5rem
|
|
473
458
|
}
|
|
474
459
|
|
|
475
460
|
& qti-simple-match-set:last-of-type {
|
|
476
|
-
@apply grid auto-cols-fr grid-flow-col gap-2;
|
|
477
461
|
|
|
478
|
-
& qti-simple-associable-choice {
|
|
479
|
-
@apply drop hover:hov focus:foc;
|
|
480
|
-
@apply flex h-32 flex-col;
|
|
462
|
+
& qti-simple-associable-choice {display:flex;flex-direction:column;height:8rem;margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;
|
|
481
463
|
}
|
|
482
464
|
|
|
465
|
+
& qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
466
|
+
|
|
467
|
+
& qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
468
|
+
|
|
483
469
|
& qti-simple-associable-choice > qti-simple-associable-choice {
|
|
484
|
-
|
|
485
|
-
|
|
470
|
+
flex-basis: fit-content;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
|
|
471
|
+
radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
|
|
472
|
+
background-repeat: repeat-y;
|
|
473
|
+
background-position: left 2px;
|
|
474
|
+
background-size: 14px 8px;
|
|
486
475
|
}
|
|
476
|
+
|
|
477
|
+
& qti-simple-associable-choice>qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
478
|
+
|
|
479
|
+
& qti-simple-associable-choice>qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:0.5rem
|
|
487
480
|
}
|
|
488
481
|
}
|
|
489
482
|
|
|
490
483
|
qti-order-interaction {
|
|
491
484
|
&::part(qti-simple-choice),
|
|
492
|
-
& qti-simple-choice {
|
|
493
|
-
|
|
485
|
+
& qti-simple-choice {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
|
|
486
|
+
radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
|
|
487
|
+
background-repeat: repeat-y;
|
|
488
|
+
background-position: left 2px;
|
|
489
|
+
background-size: 14px 8px;
|
|
494
490
|
}
|
|
495
|
-
&::part(qti-simple-choice) {
|
|
496
|
-
|
|
491
|
+
&::part(qti-simple-choice):hover,& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
492
|
+
&::part(qti-simple-choice):focus,& qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
493
|
+
&::part(qti-simple-choice) {text-overflow:ellipsis;display:flex;width:100%;overflow:hidden;align-items:center;
|
|
497
494
|
}
|
|
498
|
-
&::part(drops) {
|
|
499
|
-
@apply gap-2;
|
|
495
|
+
&::part(drops) {gap:0.5rem;
|
|
500
496
|
}
|
|
501
|
-
&::part(drags) {
|
|
502
|
-
@apply gap-2;
|
|
497
|
+
&::part(drags) {gap:0.5rem;
|
|
503
498
|
}
|
|
504
|
-
&::part(drop-list) {
|
|
505
|
-
@apply drop hover:hov focus:foc flex min-h-[4rem];
|
|
499
|
+
&::part(drop-list) {margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:flex;min-height:4rem;
|
|
506
500
|
}
|
|
507
|
-
&::part(
|
|
508
|
-
|
|
501
|
+
&::part(drop-list):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
502
|
+
&::part(drop-list):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
503
|
+
&::part(active) {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
509
504
|
}
|
|
510
505
|
}
|
|
511
506
|
|
|
512
507
|
qti-associate-interaction {
|
|
513
508
|
&::part(qti-simple-associable-choice),
|
|
514
|
-
& qti-simple-associable-choice {
|
|
515
|
-
|
|
509
|
+
& qti-simple-associable-choice {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
|
|
510
|
+
radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
|
|
511
|
+
background-repeat: repeat-y;
|
|
512
|
+
background-position: left 2px;
|
|
513
|
+
background-size: 14px 8px;;text-overflow:ellipsis;display:flex;overflow:hidden;align-items:center;
|
|
516
514
|
}
|
|
515
|
+
&::part(qti-simple-associable-choice):hover,& qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
516
|
+
&::part(qti-simple-associable-choice):focus,& qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
517
517
|
&::part(associables-container) {
|
|
518
|
-
@apply my-2 flex w-full justify-between;
|
|
519
518
|
background: linear-gradient(
|
|
520
519
|
180deg,
|
|
521
520
|
rgb(0 0 0 / 0%) calc(50% - 1px),
|
|
522
521
|
#000000 calc(50%),
|
|
523
522
|
rgb(0 0 0 / 0%) calc(50% + 1px)
|
|
524
|
-
);
|
|
523
|
+
);margin-top:0.5rem;margin-bottom:0.5rem;display:flex;width:100%;justify-content:space-between;
|
|
525
524
|
}
|
|
526
|
-
&::part(active) {
|
|
527
|
-
@apply act;
|
|
525
|
+
&::part(active) {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
528
526
|
}
|
|
529
|
-
&::part(drop-list) {
|
|
530
|
-
@apply drop grid h-[3rem] w-1/3;
|
|
527
|
+
&::part(drop-list) {margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:grid;height:3rem;width:33.3333333333%;
|
|
531
528
|
}
|
|
532
529
|
}
|
|
533
530
|
|
|
534
531
|
qti-graphic-order-interaction {
|
|
535
532
|
& qti-hotspot-choice {
|
|
536
|
-
|
|
537
|
-
&[aria-checked='true'] {
|
|
538
|
-
@apply act;
|
|
533
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
539
534
|
}
|
|
540
|
-
&[aria-readonly='true'] {
|
|
541
|
-
@apply rdo;
|
|
535
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
542
536
|
}
|
|
543
|
-
&[aria-disabled='true'] {
|
|
544
|
-
@apply dis;
|
|
537
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
545
538
|
}
|
|
546
|
-
&[aria-ordervalue] {
|
|
547
|
-
@apply order flex items-center justify-center;
|
|
539
|
+
&[aria-ordervalue] {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;--qti-text-opacity:1;color:rgb(255 255 255 / var(--qti-text-opacity));height:1.5rem;width:1.5rem;display:flex;justify-content:center;align-items:center;
|
|
548
540
|
}
|
|
549
541
|
&[aria-ordervalue]::after {
|
|
550
542
|
content: attr(aria-ordervalue) !important;
|
|
551
|
-
}
|
|
543
|
+
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
|
|
552
544
|
}
|
|
545
|
+
& qti-hotspot-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
546
|
+
& qti-hotspot-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
553
547
|
}
|
|
554
548
|
|
|
555
549
|
qti-graphic-associate-interaction {
|
|
556
|
-
@apply relative block;
|
|
557
550
|
|
|
558
551
|
& qti-associable-hotspot {
|
|
559
552
|
&[shape='circle'] {
|
|
560
553
|
/* border-radius: 100%;
|
|
561
554
|
background-color: green; */
|
|
562
|
-
|
|
563
|
-
&[aria-checked='true'] {
|
|
564
|
-
@apply act;
|
|
565
|
-
}
|
|
566
|
-
&[aria-readonly='true'] {
|
|
567
|
-
@apply rdo;
|
|
555
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
568
556
|
}
|
|
569
|
-
&[aria-
|
|
570
|
-
@apply dis;
|
|
557
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
571
558
|
}
|
|
559
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
560
|
+
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
|
|
572
561
|
}
|
|
562
|
+
&[shape="circle"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
563
|
+
&[shape="circle"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
573
564
|
|
|
574
565
|
&[shape='square'] {
|
|
575
566
|
/* border-radius: 0; */
|
|
576
567
|
/* background-color: green; */
|
|
577
|
-
|
|
578
|
-
&[aria-checked='true'] {
|
|
579
|
-
@apply act;
|
|
568
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
580
569
|
}
|
|
581
|
-
&[aria-readonly='true'] {
|
|
582
|
-
@apply rdo;
|
|
583
|
-
}
|
|
584
|
-
&[aria-disabled='true'] {
|
|
585
|
-
@apply dis;
|
|
570
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
586
571
|
}
|
|
572
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
573
|
+
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
|
|
587
574
|
}
|
|
588
|
-
|
|
575
|
+
|
|
576
|
+
&[shape="square"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
577
|
+
|
|
578
|
+
&[shape="square"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
579
|
+
}display:block;position:relative
|
|
589
580
|
}
|
|
590
581
|
|
|
591
582
|
qti-graphic-gap-match-interaction {
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
@apply m-0 p-0;
|
|
595
|
-
}
|
|
583
|
+
& img {padding:0;margin:0;
|
|
584
|
+
}position:relative
|
|
596
585
|
}
|
|
597
586
|
|
|
598
|
-
qti-slider-interaction {
|
|
599
|
-
@apply block; /* else no screenshot will be made with html-to-image */
|
|
587
|
+
qti-slider-interaction { /* else no screenshot will be made with html-to-image */
|
|
600
588
|
|
|
601
589
|
--qti-tick-color: rgb(229 231 235 / 1);
|
|
602
590
|
--qti-tick-width: 1px;
|
|
603
591
|
|
|
604
|
-
&::part(slider) {
|
|
605
|
-
@apply mx-8; /* so the slider stays INSIDE of the qti-slider-interaction */
|
|
606
|
-
@apply pb-4 pt-5; /* this keeps all content in the qti-slider interaction, also for html-to-image */
|
|
592
|
+
&::part(slider) { /* so the slider stays INSIDE of the qti-slider-interaction */ /* this keeps all content in the qti-slider interaction, also for html-to-image */margin-left:2rem;margin-right:2rem;padding-bottom:1rem;padding-top:1.25rem;
|
|
607
593
|
}
|
|
608
594
|
|
|
609
595
|
--show-bounds: true;
|
|
610
|
-
&::part(bounds) {
|
|
611
|
-
@apply flex w-full justify-between; /* the two divs with value lower and upper will now be at start and end of this bounds container */
|
|
612
|
-
@apply mb-2; /* just so it aligns with the value 'knob' */
|
|
596
|
+
&::part(bounds) { /* the two divs with value lower and upper will now be at start and end of this bounds container */ /* just so it aligns with the value 'knob' */display:flex;width:100%;justify-content:space-between;margin-bottom:0.5rem;
|
|
613
597
|
}
|
|
614
598
|
|
|
615
599
|
--show-ticks: true;
|
|
616
|
-
&::part(ticks) {
|
|
617
|
-
@apply mx-0.5 mb-1 h-2; /* absolute height for the ticks, and keep distance of the rail. push them 0.5 inward */
|
|
600
|
+
&::part(ticks) { /* absolute height for the ticks, and keep distance of the rail. push them 0.5 inward */
|
|
618
601
|
background-position: 0 center;
|
|
619
602
|
background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
|
|
620
|
-
background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
|
|
603
|
+
background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;margin-left:0.125rem;margin-right:0.125rem;margin-bottom:0.25rem;height:0.5rem;
|
|
621
604
|
}
|
|
622
605
|
|
|
623
|
-
&::part(rail) {
|
|
624
|
-
|
|
625
|
-
/* DESIGN */
|
|
626
|
-
@apply box-border; /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */
|
|
627
|
-
@apply h-1.5 w-full cursor-pointer rounded-full border border-solid border-gray-300 bg-gray-200;
|
|
606
|
+
&::part(rail) { /* so the knob is neatly centered vertically */
|
|
607
|
+
/* DESIGN */ /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */display:flex;align-items:center;box-sizing:border-box;--qti-bg-opacity:1;background-color:rgb(229 231 235 / var(--qti-bg-opacity));border-width:1px;--qti-border-opacity:1;border-color:rgb(209 213 219 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;height:0.375rem;width:100%;cursor:pointer;
|
|
628
608
|
}
|
|
629
609
|
|
|
630
610
|
&::part(knob) {
|
|
631
|
-
|
|
632
|
-
left: var(--value-percentage);
|
|
611
|
+
left: var(--value-percentage);--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;position:relative;height:1rem;width:1rem;cursor:pointer;transform-origin:center;--qti-translate-x:-50%;transform:translateX(var(--qti-translate-x)) translateY(var(--qti-translate-y)) translateZ(var(--qti-translate-z)) rotate(var(--qti-rotate)) rotateX(var(--qti-rotate-x)) rotateY(var(--qti-rotate-y)) rotateZ(var(--qti-rotate-z)) skewX(var(--qti-skew-x)) skewY(var(--qti-skew-y)) scaleX(var(--qti-scale-x)) scaleY(var(--qti-scale-y)) scaleZ(var(--qti-scale-z));
|
|
633
612
|
}
|
|
634
613
|
|
|
635
614
|
--show-value: true;
|
|
636
|
-
&::part(value) {
|
|
637
|
-
|
|
638
|
-
@apply left-2; /* should be half width of the knob if you want to center these two */
|
|
639
|
-
@apply -translate-x-1/2 cursor-pointer rounded bg-gray-100 px-2 py-1 text-center text-gray-500;
|
|
640
|
-
}
|
|
615
|
+
&::part(value) { /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ /* should be half width of the knob if you want to center these two */position:absolute;bottom:2rem;left:0.5rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));border-radius:0.25rem;--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));text-align:center;cursor:pointer;--qti-translate-x:-50%;transform:translateX(var(--qti-translate-x)) translateY(var(--qti-translate-y)) translateZ(var(--qti-translate-z)) rotate(var(--qti-rotate)) rotateX(var(--qti-rotate-x)) rotateY(var(--qti-rotate-y)) rotateZ(var(--qti-rotate-z)) skewX(var(--qti-skew-x)) skewY(var(--qti-skew-y)) scaleX(var(--qti-scale-x)) scaleY(var(--qti-scale-y)) scaleZ(var(--qti-scale-z));
|
|
616
|
+
}display:block
|
|
641
617
|
}
|
|
642
618
|
|
|
643
619
|
qti-select-point-interaction {
|
|
644
|
-
&::part(point) {
|
|
645
|
-
@apply hover:bg-blue-100 hover:bg-opacity-30;
|
|
646
|
-
@apply point hover:hov-ring focus:foc rounded-full; /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/
|
|
620
|
+
&::part(point) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:1.5rem;width:1.5rem;outline:2px solid transparent;outline-offset:2px;border-radius:9999px;
|
|
647
621
|
}
|
|
622
|
+
&::part(point):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
623
|
+
&::part(point):hover{--qti-bg-opacity:1;background-color:rgb(219 234 254 / var(--qti-bg-opacity));--qti-bg-opacity:0.3;}
|
|
648
624
|
}
|
|
649
625
|
|
|
650
626
|
qti-position-object-stage {
|
|
@@ -654,8 +630,7 @@ qti-response-declaration {
|
|
|
654
630
|
}
|
|
655
631
|
}
|
|
656
632
|
|
|
657
|
-
qti-prompt {
|
|
658
|
-
@apply my-2 block w-full;
|
|
633
|
+
qti-prompt {margin-top:0.5rem;margin-bottom:0.5rem;display:block;width:100%;
|
|
659
634
|
}
|
|
660
635
|
}
|
|
661
636
|
|
|
@@ -717,8 +692,7 @@ qti-response-declaration {
|
|
|
717
692
|
border: 1px solid #888;
|
|
718
693
|
}
|
|
719
694
|
|
|
720
|
-
.qti-well {
|
|
721
|
-
@apply bordered inline-block rounded border border-gray-300 bg-gray-100 px-3 py-2 text-gray-600;
|
|
695
|
+
.qti-well {padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;outline:2px solid transparent;outline-offset:2px;border-width:1px;--qti-border-opacity:1;border-color:rgb(209 213 219 / var(--qti-border-opacity));border-radius:0.25rem;--qti-text-opacity:1;color:rgb(75 85 99 / var(--qti-text-opacity));
|
|
722
696
|
}
|
|
723
697
|
}
|
|
724
698
|
|
|
@@ -766,38 +740,25 @@ qti-response-declaration {
|
|
|
766
740
|
@layer qti-variants {
|
|
767
741
|
qti-choice-interaction {
|
|
768
742
|
&.qti-choices-stacking-2 {
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
qti-prompt {
|
|
772
|
-
@apply col-span-2;
|
|
773
|
-
}
|
|
743
|
+
qti-prompt {grid-column:span 2/span 2;
|
|
744
|
+
}display:grid;grid-template-columns:repeat(2,minmax(0,1fr))
|
|
774
745
|
}
|
|
775
746
|
&.qti-choices-stacking-3 {
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
qti-prompt {
|
|
779
|
-
@apply col-span-3;
|
|
780
|
-
}
|
|
747
|
+
qti-prompt {grid-column:span 3/span 3;
|
|
748
|
+
}display:grid;grid-template-columns:repeat(3,minmax(0,1fr))
|
|
781
749
|
}
|
|
782
750
|
&.qti-choices-stacking-4 {
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
qti-prompt {
|
|
786
|
-
@apply col-span-4;
|
|
787
|
-
}
|
|
751
|
+
qti-prompt {grid-column:span 4/span 4;
|
|
752
|
+
}display:grid;grid-template-columns:repeat(4,minmax(0,1fr))
|
|
788
753
|
}
|
|
789
754
|
&.qti-choices-stacking-5 {
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
qti-prompt {
|
|
793
|
-
@apply col-span-5;
|
|
794
|
-
}
|
|
755
|
+
qti-prompt {grid-column:span 5/span 5;
|
|
756
|
+
}display:grid;grid-template-columns:repeat(5,minmax(0,1fr))
|
|
795
757
|
}
|
|
796
758
|
&.qti-orientation-horizontal {
|
|
797
759
|
/* is the default layout */
|
|
798
760
|
}
|
|
799
|
-
&[orientation='horizontal'] {
|
|
800
|
-
@apply flex-row;
|
|
761
|
+
&[orientation='horizontal'] {flex-direction:row;
|
|
801
762
|
}
|
|
802
763
|
}
|
|
803
764
|
}
|