@qti-components/choice-interaction 1.2.0-next.4 → 2.0.0-next.5
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.
|
@@ -22,8 +22,10 @@ declare const QtiChoiceInteraction_base: (abstract new (...args: any[]) => {}) &
|
|
|
22
22
|
* @slot - Default slot for `qti-simple-choice` elements.
|
|
23
23
|
*
|
|
24
24
|
* @csspart prompt - Wrapper around the prompt slot.
|
|
25
|
-
* @csspart
|
|
25
|
+
* @csspart choices - The slot holding the choices (was `slot`).
|
|
26
26
|
* @csspart message - Live validation message region (role="alert").
|
|
27
|
+
* @cssstate disabled - The interaction is switched off.
|
|
28
|
+
* @cssstate readonly - The interaction is frozen: it shows its value and takes no input.
|
|
27
29
|
*/
|
|
28
30
|
export declare class QtiChoiceInteraction extends QtiChoiceInteraction_base implements ChoicesInterface {
|
|
29
31
|
#private;
|
|
@@ -29,8 +29,10 @@ import styles from './qti-choice-interaction.styles';
|
|
|
29
29
|
* @slot - Default slot for `qti-simple-choice` elements.
|
|
30
30
|
*
|
|
31
31
|
* @csspart prompt - Wrapper around the prompt slot.
|
|
32
|
-
* @csspart
|
|
32
|
+
* @csspart choices - The slot holding the choices (was `slot`).
|
|
33
33
|
* @csspart message - Live validation message region (role="alert").
|
|
34
|
+
* @cssstate disabled - The interaction is switched off.
|
|
35
|
+
* @cssstate readonly - The interaction is frozen: it shows its value and takes no input.
|
|
34
36
|
*/
|
|
35
37
|
export class QtiChoiceInteraction extends VocabularyMixin(ChoicesMixin(Interaction, 'qti-simple-choice'), 'qti-simple-choice') {
|
|
36
38
|
constructor() {
|
|
@@ -47,7 +49,7 @@ export class QtiChoiceInteraction extends VocabularyMixin(ChoicesMixin(Interacti
|
|
|
47
49
|
render() {
|
|
48
50
|
return html `
|
|
49
51
|
<slot part="prompt" name="prompt"></slot>
|
|
50
|
-
<slot part="slot" @slotchange=${this.#handleSlotChange}></slot>
|
|
52
|
+
<slot part="choices slot" @slotchange=${this.#handleSlotChange}></slot>
|
|
51
53
|
<div part="message" role="alert" id="validation-message"></div>
|
|
52
54
|
`;
|
|
53
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qti-choice-interaction.js","sourceRoot":"","sources":["../src/qti-choice-interaction.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAC9F,OAAO,EAAE,eAAe,EAAE,MAAM,sEAAsE,CAAC;AAEvG,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAOrD
|
|
1
|
+
{"version":3,"file":"qti-choice-interaction.js","sourceRoot":"","sources":["../src/qti-choice-interaction.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAC9F,OAAO,EAAE,eAAe,EAAE,MAAM,sEAAsE,CAAC;AAEvG,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAOrD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,OAAO,oBACX,SAAQ,eAAe,CAAC,YAAY,CAAC,WAAW,EAAE,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAD9F;;QAME,0FAA0F;QAEnF,gBAAW,GAAgB,UAAU,CAAC;IAe/C,CAAC;aAnBiB,WAAM,GAAmB,MAAM,AAAzB,CAA0B;IAMhD,iBAAiB;QACf,4EAA4E;QAC5E,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAC3D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpE,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;8CAE+B,IAAI,CAAC,iBAAiB;;KAE/D,CAAC;IACJ,CAAC;;AAdM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { Interaction } from '@qti-components/base';\nimport { ChoicesMixin } from '@qti-components/interactions-core/mixins/choices/choices.mixin';\nimport { VocabularyMixin } from '@qti-components/interactions-core/mixins/vocabulary/vocabulary-mixin';\n\nimport styles from './qti-choice-interaction.styles';\n\nimport type { ChoicesInterface } from '@qti-components/interactions-core/mixins/choices/choices.mixin';\nimport type { CSSResultGroup } from 'lit';\n\nexport type Orientation = 'horizontal' | 'vertical' | undefined;\n\n/**\n * A single-response or multiple-response choice interaction.\n *\n * @customElement qti-choice-interaction\n *\n * @attr {string} response-identifier - Required. Identifier of the bound response variable.\n * @attr {number} [max-choices=1] - Maximum selectable choices. `1` is a single-response\n * item; `0` means unlimited and makes it a multiple-response item.\n * @attr {number} [min-choices=0] - Minimum selectable choices for a valid response.\n * @attr {'horizontal'|'vertical'} [orientation=vertical] - Deprecated by QTI in favour of\n * the `qti-orientation-*` class vocabulary.\n * @attr {boolean} [shuffle=false] - Requests choice shuffling. Applied by the transform\n * pipeline (`qti-transformers`), not by this element.\n * @attr {'qti-orientation-horizontal'|'qti-orientation-vertical'|'qti-choices-stacking-1'|'qti-choices-stacking-2'|'qti-choices-stacking-3'|'qti-choices-stacking-4'|'qti-choices-stacking-5'|'qti-labels-none'|'qti-labels-decimal'|'qti-labels-lower-alpha'|'qti-labels-upper-alpha'|'qti-labels-suffix-none'|'qti-labels-suffix-period'|'qti-labels-suffix-parenthesis'|'qti-input-control-hidden'} class - QTI shared presentation vocabulary. Space-separated; takes precedence over `orientation`.\n *\n * @slot prompt - The prompt shown above the choices.\n * @slot - Default slot for `qti-simple-choice` elements.\n *\n * @csspart prompt - Wrapper around the prompt slot.\n * @csspart choices - The slot holding the choices (was `slot`).\n * @csspart message - Live validation message region (role=\"alert\").\n * @cssstate disabled - The interaction is switched off.\n * @cssstate readonly - The interaction is frozen: it shows its value and takes no input.\n */\nexport class QtiChoiceInteraction\n extends VocabularyMixin(ChoicesMixin(Interaction, 'qti-simple-choice'), 'qti-simple-choice')\n implements ChoicesInterface\n{\n static override styles: CSSResultGroup = styles;\n\n /** @deprecated, use 'qti-orientation-horizontal' or 'qti-orientation-vertical' instead */\n @property({ type: String })\n public orientation: Orientation = 'vertical';\n\n #handleSlotChange() {\n // count the number of choices, set a css variable for the number of choices\n const choices = this.querySelectorAll('qti-simple-choice');\n this.style.setProperty('--item-count', choices.length.toString());\n }\n\n override render() {\n return html`\n <slot part=\"prompt\" name=\"prompt\"></slot>\n <slot part=\"choices slot\" @slotchange=${this.#handleSlotChange}></slot>\n <div part=\"message\" role=\"alert\" id=\"validation-message\"></div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'qti-choice-interaction': QtiChoiceInteraction;\n }\n}\n"]}
|
|
@@ -10,13 +10,13 @@ export default [
|
|
|
10
10
|
|
|
11
11
|
/* No gap of its own: a choice carries its own padding, which already spaces a list. A theme sets
|
|
12
12
|
--qti-choice-gap where the choices are drawn as separate boxes and need air between them. */
|
|
13
|
-
[part
|
|
13
|
+
[part~='choices'] {
|
|
14
14
|
display: grid;
|
|
15
15
|
gap: var(--qti-choice-gap, 0);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
/* Define the number of columns dynamically */
|
|
19
|
-
:host([class*='qti-choices-stacking-']) [part
|
|
19
|
+
:host([class*='qti-choices-stacking-']) [part~='choices'] {
|
|
20
20
|
grid-template-columns: repeat(var(--stacking-count, 1), 1fr);
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -45,24 +45,24 @@ export default [
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
/* Orientation styles */
|
|
48
|
-
:host(.qti-orientation-horizontal) [part
|
|
48
|
+
:host(.qti-orientation-horizontal) [part~='choices'] {
|
|
49
49
|
grid-auto-flow: dense column;
|
|
50
50
|
grid-auto-columns: 1fr;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
:host(.qti-orientation-vertical) [part
|
|
53
|
+
:host(.qti-orientation-vertical) [part~='choices'] {
|
|
54
54
|
grid-auto-flow: row;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
/* Vertical and horizontal stacking logic */
|
|
58
|
-
:host(.qti-orientation-vertical[class*='qti-choices-stacking-']) [part
|
|
58
|
+
:host(.qti-orientation-vertical[class*='qti-choices-stacking-']) [part~='choices'] {
|
|
59
59
|
grid-auto-flow: dense column;
|
|
60
60
|
grid-auto-columns: 1fr;
|
|
61
61
|
grid-template-columns: repeat(var(--stacking-count), 1fr);
|
|
62
62
|
grid-template-rows: repeat(calc(var(--item-count) / var(--stacking-count)), 1fr);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
:host(.qti-orientation-horizontal[class*='qti-choices-stacking-']) [part
|
|
65
|
+
:host(.qti-orientation-horizontal[class*='qti-choices-stacking-']) [part~='choices'] {
|
|
66
66
|
grid-auto-flow: row;
|
|
67
67
|
grid-template-columns: repeat(var(--stacking-count), 1fr);
|
|
68
68
|
grid-template-rows: unset;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qti-choice-interaction.styles.js","sourceRoot":"","sources":["../src/qti-choice-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,eAAe;IACb,SAAS;IACT,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport { boxSizing, validationMessage } from '@qti-components/base';\n\nexport default [\n boxSizing,\n validationMessage,\n css`\n :host {\n display: block;\n }\n\n /* No gap of its own: a choice carries its own padding, which already spaces a list. A theme sets\n --qti-choice-gap where the choices are drawn as separate boxes and need air between them. */\n [part
|
|
1
|
+
{"version":3,"file":"qti-choice-interaction.styles.js","sourceRoot":"","sources":["../src/qti-choice-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,eAAe;IACb,SAAS;IACT,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport { boxSizing, validationMessage } from '@qti-components/base';\n\nexport default [\n boxSizing,\n validationMessage,\n css`\n :host {\n display: block;\n }\n\n /* No gap of its own: a choice carries its own padding, which already spaces a list. A theme sets\n --qti-choice-gap where the choices are drawn as separate boxes and need air between them. */\n [part~='choices'] {\n display: grid;\n gap: var(--qti-choice-gap, 0);\n }\n\n /* Define the number of columns dynamically */\n :host([class*='qti-choices-stacking-']) [part~='choices'] {\n grid-template-columns: repeat(var(--stacking-count, 1), 1fr);\n }\n\n /* Apply dynamic stacking count based on class */\n :host(.qti-choices-stacking-1) {\n --stacking-count: 1;\n }\n :host(.qti-choices-stacking-2) {\n --stacking-count: 2;\n }\n :host(.qti-choices-stacking-3) {\n --stacking-count: 3;\n }\n :host(.qti-choices-stacking-4) {\n --stacking-count: 4;\n }\n :host(.qti-choices-stacking-5) {\n --stacking-count: 5;\n }\n\n /* Default slot item layout */\n ::slotted(qti-simple-choice) {\n display: flex;\n align-items: center;\n white-space: normal;\n }\n\n /* Orientation styles */\n :host(.qti-orientation-horizontal) [part~='choices'] {\n grid-auto-flow: dense column;\n grid-auto-columns: 1fr;\n }\n\n :host(.qti-orientation-vertical) [part~='choices'] {\n grid-auto-flow: row;\n }\n\n /* Vertical and horizontal stacking logic */\n :host(.qti-orientation-vertical[class*='qti-choices-stacking-']) [part~='choices'] {\n grid-auto-flow: dense column;\n grid-auto-columns: 1fr;\n grid-template-columns: repeat(var(--stacking-count), 1fr);\n grid-template-rows: repeat(calc(var(--item-count) / var(--stacking-count)), 1fr);\n }\n\n :host(.qti-orientation-horizontal[class*='qti-choices-stacking-']) [part~='choices'] {\n grid-auto-flow: row;\n grid-template-columns: repeat(var(--stacking-count), 1fr);\n grid-template-rows: unset;\n }\n\n /* Ensure even distribution in vertical mode */\n :host(.qti-orientation-vertical) ::slotted(qti-simple-choice:nth-child(even)) {\n grid-row: auto;\n }\n `\n];\n"]}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qti-components/choice-interaction",
|
|
3
3
|
"description": "QTI choice-interaction interaction",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "2.0.0-next.5",
|
|
5
5
|
"author": "",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@qti-components/base": "^3.0.0-next.
|
|
8
|
-
"@qti-components/interactions-core": "^3.0.0-next.
|
|
7
|
+
"@qti-components/base": "^3.0.0-next.6",
|
|
8
|
+
"@qti-components/interactions-core": "^3.0.0-next.7",
|
|
9
9
|
"@qti-components/utilities": "^1.3.3"
|
|
10
10
|
},
|
|
11
11
|
"devDependencies": {
|