@qti-components/match-interaction 2.1.0-next.2 → 2.1.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
|
+
import choiceB3Image from '../fixtures/72c4b1f4ea9f7ba5548683c37806580e.png';
|
|
3
|
+
import choiceB2Image from '../fixtures/80378beafd6b12ab7b97899ce39a2b78.jpg';
|
|
4
|
+
import choiceB1Image from '../fixtures/8c571f983f691e42e7b3a0dc2664e51d.png';
|
|
2
5
|
/** Fixtures shared by the overview demos and the behavior stories. */
|
|
3
6
|
export const testTemplate = html `<qti-prompt
|
|
4
7
|
>Match the following characters to the Shakespeare play they appeared in:</qti-prompt
|
|
@@ -170,13 +173,13 @@ export const withImagesTemplate = html `
|
|
|
170
173
|
</qti-simple-match-set>
|
|
171
174
|
<qti-simple-match-set>
|
|
172
175
|
<qti-simple-associable-choice identifier="B1" match-max="1">
|
|
173
|
-
<img src
|
|
176
|
+
<img src=${choiceB1Image} alt="afbeelding" />
|
|
174
177
|
</qti-simple-associable-choice>
|
|
175
178
|
<qti-simple-associable-choice identifier="B2" match-max="1">
|
|
176
|
-
<img src
|
|
179
|
+
<img src=${choiceB2Image} alt="afbeelding" />
|
|
177
180
|
</qti-simple-associable-choice>
|
|
178
181
|
<qti-simple-associable-choice identifier="B3" match-max="1">
|
|
179
|
-
<img src
|
|
182
|
+
<img src=${choiceB3Image} alt="afbeelding" />
|
|
180
183
|
</qti-simple-associable-choice>
|
|
181
184
|
</qti-simple-match-set>
|
|
182
185
|
</qti-match-interaction>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qti-match-interaction.templates.js","sourceRoot":"","sources":["../../src/stories/qti-match-interaction.templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,sEAAsE;AACtE,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;2BAgBL,CAAC;AAE5B,MAAM,CAAC,MAAM,4BAA4B,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAyCvB,CAAC;AAE1B,MAAM,CAAC,MAAM,6BAA6B,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BhD,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;CAgBvC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDtC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;CAoBrC,CAAC;AAEF,MAAM,CAAC,MAAM,+BAA+B,GAAG,IAAI,CAAA;;;;;;;;;;;;CAYlD,CAAC;AAEF,MAAM,CAAC,MAAM,8CAA8C,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;CAgBjE,CAAC;AAEF,MAAM,CAAC,MAAM,yCAAyC,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;CAgB5D,CAAC","sourcesContent":["import { html } from 'lit';\n\n/** Fixtures shared by the overview demos and the behavior stories. */\nexport const testTemplate = html`<qti-prompt\n >Match the following characters to the Shakespeare play they appeared in:</qti-prompt\n >\n <qti-match-interaction data-testid=\"match-interaction\" response-identifier=\"RESPONSE\" max-associations=\"3\">\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"C\" match-max=\"1\">Capulet</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"D\" match-max=\"1\">Demetrius</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"L\" match-max=\"1\">Lysander</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"P\" match-max=\"1\">Prospero</qti-simple-associable-choice>\n </qti-simple-match-set>\n\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"M\" match-max=\"2\">A Midsummer-Nights</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"R\" match-max=\"2\">Romeo and Juliet</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T\" match-max=\"2\">The Tempest</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>`;\n\nexport const multipleAssociationsTemplate = html` <qti-match-interaction\n response-identifier=\"match_languages_countries\"\n shuffle=\"false\"\n max-associations=\"5\"\n min-associations=\"0\"\n>\n <qti-prompt>Can you match the cities below with the language most likely to be spoken there?</qti-prompt>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"french\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >French</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"hungarian\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Hungarian</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"polish\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Polish</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"dutch\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Dutch</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"lithuanian\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Lithuanian</qti-simple-associable-choice\n >\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"budapest\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Budapest</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"vilnius\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Vilnius</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"paris\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Paris</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"amsterdam\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Amsterdam</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"warsaw\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Warsaw</qti-simple-associable-choice\n >\n </qti-simple-match-set>\n</qti-match-interaction>`;\n\nexport const multipleAssociations2Template = html`\n <div>\n <p>Which properties do the following animal classes have?</p>\n\n <qti-match-interaction max-associations=\"3\" response-identifier=\"RESPONSE\">\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"r1\" match-max=\"0\">\n <p>Asexual</p>\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"r2\" match-max=\"0\">\n <p>Endothermic</p>\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"r3\" match-max=\"0\">\n <p>Possess Gills</p>\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"r4\" match-max=\"0\">\n <p>Bear Live Young</p>\n </qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"h1\" match-max=\"2\">Birds</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"h2\" match-max=\"2\">Reptiles</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"h3\" match-max=\"2\">Mammals</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n </div>\n <p>Select all choices that apply.</p>\n`;\n\nexport const optionsRightTemplate = html`\n <qti-match-interaction response-identifier=\"RESPONSE\" shuffle=\"true\" max-associations=\"4\" class=\"qti-choices-right\">\n <qti-prompt>Combineer de teksten</qti-prompt>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A1\" match-max=\"1\">Berlijn</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A2\" match-max=\"1\">Amsterdam</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A3\" match-max=\"1\">Parijs</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A4\" match-max=\"1\">Brussel</qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"B1\" match-max=\"1\">Duitsland</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B2\" match-max=\"1\">Nederland</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B3\" match-max=\"1\">Frankrijk</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B4\" match-max=\"1\">Belgie</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n\nexport const manyOptionsTemplate = html`\n <div>\n <p>\n <strong>Organellen en hun functies.</strong><br /><br />Geef in het overzicht van de verschillende organellen in\n cellen hun functies.\n </p>\n </div>\n <qti-match-interaction response-identifier=\"RESPONSE\" shuffle=\"true\" max-associations=\"7\">\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A1\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n endoplasmatisch reticulum\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A2\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n ribosomen\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A3\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n mitochondriën\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A4\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n lysosomen\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A5\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n golgi-apparaat\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A6\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n kern\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A7\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n centrosomen\n </qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"B1\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n isolatie en vervoer van eiwitten\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B2\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n aanmaak van eiwitten\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B3\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n energieproductie\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B4\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n afbreken en/of uitstoten van afval uit de cel\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B5\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n opslag van celproducten\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B6\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n besturing en voortplanting van de cel\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B7\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n vorming van draden bij de kerndeling\n </qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n\nexport const withImagesTemplate = html`\n <qti-match-interaction response-identifier=\"RESPONSE\" shuffle=\"true\" max-associations=\"3\" class=\"qti-choices-bottom\">\n <qti-prompt>Hoe heet iedereen?</qti-prompt>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A1\" match-max=\"1\">Ernie</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A2\" match-max=\"1\">Pino</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A3\" match-max=\"1\">Kermit</qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"B1\" match-max=\"1\">\n <img src=\"assets/qti-match-interaction/8c571f983f691e42e7b3a0dc2664e51d.png\" alt=\"afbeelding\" />\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B2\" match-max=\"1\">\n <img src=\"assets/qti-match-interaction/80378beafd6b12ab7b97899ce39a2b78.jpg\" alt=\"afbeelding\" />\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B3\" match-max=\"1\">\n <img src=\"assets/qti-match-interaction/72c4b1f4ea9f7ba5548683c37806580e.png\" alt=\"afbeelding\" />\n </qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n\nexport const duplicateDropRegressionTemplate = html`\n <qti-match-interaction data-testid=\"match-interaction-duplicates\" response-identifier=\"RESPONSE\" max-associations=\"3\">\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A\" match-max=\"0\">Alpha</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B\" match-max=\"0\">Beta</qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"T1\" match-max=\"1\">Target 1</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T2\" match-max=\"1\">Target 2</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T3\" match-max=\"1\">Target 3</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n\nexport const sortableAppendWhenTargetAllowsMultipleTemplate = html`\n <qti-match-interaction\n data-testid=\"match-interaction-sortable-append\"\n response-identifier=\"RESPONSE\"\n max-associations=\"4\"\n >\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A\" match-max=\"0\">Alpha</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B\" match-max=\"0\">Beta</qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"T1\" match-max=\"1\">Target 1</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T2\" match-max=\"1\">Target 2</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T3\" match-max=\"2\">Target 3</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n\nexport const sortableAppendWhenTargetUnlimitedTemplate = html`\n <qti-match-interaction\n data-testid=\"match-interaction-sortable-unlimited-target\"\n response-identifier=\"RESPONSE\"\n max-associations=\"6\"\n >\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A\" match-max=\"0\">Alpha</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B\" match-max=\"0\">Beta</qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"T1\" match-max=\"1\">Target 1</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T2\" match-max=\"1\">Target 2</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T3\" match-max=\"0\">Target 3</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"qti-match-interaction.templates.js","sourceRoot":"","sources":["../../src/stories/qti-match-interaction.templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAE7E,sEAAsE;AACtE,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;2BAgBL,CAAC;AAE5B,MAAM,CAAC,MAAM,4BAA4B,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAyCvB,CAAC;AAE1B,MAAM,CAAC,MAAM,6BAA6B,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BhD,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;CAgBvC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDtC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAA;;;;;;;;;;mBAUnB,aAAa;;;mBAGb,aAAa;;;mBAGb,aAAa;;;;CAI/B,CAAC;AAEF,MAAM,CAAC,MAAM,+BAA+B,GAAG,IAAI,CAAA;;;;;;;;;;;;CAYlD,CAAC;AAEF,MAAM,CAAC,MAAM,8CAA8C,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;CAgBjE,CAAC;AAEF,MAAM,CAAC,MAAM,yCAAyC,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;CAgB5D,CAAC","sourcesContent":["import { html } from 'lit';\n\nimport choiceB3Image from '../fixtures/72c4b1f4ea9f7ba5548683c37806580e.png';\nimport choiceB2Image from '../fixtures/80378beafd6b12ab7b97899ce39a2b78.jpg';\nimport choiceB1Image from '../fixtures/8c571f983f691e42e7b3a0dc2664e51d.png';\n\n/** Fixtures shared by the overview demos and the behavior stories. */\nexport const testTemplate = html`<qti-prompt\n >Match the following characters to the Shakespeare play they appeared in:</qti-prompt\n >\n <qti-match-interaction data-testid=\"match-interaction\" response-identifier=\"RESPONSE\" max-associations=\"3\">\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"C\" match-max=\"1\">Capulet</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"D\" match-max=\"1\">Demetrius</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"L\" match-max=\"1\">Lysander</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"P\" match-max=\"1\">Prospero</qti-simple-associable-choice>\n </qti-simple-match-set>\n\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"M\" match-max=\"2\">A Midsummer-Nights</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"R\" match-max=\"2\">Romeo and Juliet</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T\" match-max=\"2\">The Tempest</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>`;\n\nexport const multipleAssociationsTemplate = html` <qti-match-interaction\n response-identifier=\"match_languages_countries\"\n shuffle=\"false\"\n max-associations=\"5\"\n min-associations=\"0\"\n>\n <qti-prompt>Can you match the cities below with the language most likely to be spoken there?</qti-prompt>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"french\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >French</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"hungarian\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Hungarian</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"polish\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Polish</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"dutch\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Dutch</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"lithuanian\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Lithuanian</qti-simple-associable-choice\n >\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"budapest\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Budapest</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"vilnius\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Vilnius</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"paris\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Paris</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"amsterdam\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Amsterdam</qti-simple-associable-choice\n >\n <qti-simple-associable-choice identifier=\"warsaw\" fixed=\"false\" show-hide=\"show\" match-max=\"0\" match-min=\"0\"\n >Warsaw</qti-simple-associable-choice\n >\n </qti-simple-match-set>\n</qti-match-interaction>`;\n\nexport const multipleAssociations2Template = html`\n <div>\n <p>Which properties do the following animal classes have?</p>\n\n <qti-match-interaction max-associations=\"3\" response-identifier=\"RESPONSE\">\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"r1\" match-max=\"0\">\n <p>Asexual</p>\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"r2\" match-max=\"0\">\n <p>Endothermic</p>\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"r3\" match-max=\"0\">\n <p>Possess Gills</p>\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"r4\" match-max=\"0\">\n <p>Bear Live Young</p>\n </qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"h1\" match-max=\"2\">Birds</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"h2\" match-max=\"2\">Reptiles</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"h3\" match-max=\"2\">Mammals</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n </div>\n <p>Select all choices that apply.</p>\n`;\n\nexport const optionsRightTemplate = html`\n <qti-match-interaction response-identifier=\"RESPONSE\" shuffle=\"true\" max-associations=\"4\" class=\"qti-choices-right\">\n <qti-prompt>Combineer de teksten</qti-prompt>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A1\" match-max=\"1\">Berlijn</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A2\" match-max=\"1\">Amsterdam</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A3\" match-max=\"1\">Parijs</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A4\" match-max=\"1\">Brussel</qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"B1\" match-max=\"1\">Duitsland</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B2\" match-max=\"1\">Nederland</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B3\" match-max=\"1\">Frankrijk</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B4\" match-max=\"1\">Belgie</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n\nexport const manyOptionsTemplate = html`\n <div>\n <p>\n <strong>Organellen en hun functies.</strong><br /><br />Geef in het overzicht van de verschillende organellen in\n cellen hun functies.\n </p>\n </div>\n <qti-match-interaction response-identifier=\"RESPONSE\" shuffle=\"true\" max-associations=\"7\">\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A1\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n endoplasmatisch reticulum\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A2\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n ribosomen\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A3\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n mitochondriën\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A4\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n lysosomen\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A5\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n golgi-apparaat\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A6\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n kern\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A7\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n centrosomen\n </qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"B1\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n isolatie en vervoer van eiwitten\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B2\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n aanmaak van eiwitten\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B3\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n energieproductie\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B4\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n afbreken en/of uitstoten van afval uit de cel\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B5\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n opslag van celproducten\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B6\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n besturing en voortplanting van de cel\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B7\" fixed=\"false\" match-max=\"1\" match-min=\"0\">\n vorming van draden bij de kerndeling\n </qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n\nexport const withImagesTemplate = html`\n <qti-match-interaction response-identifier=\"RESPONSE\" shuffle=\"true\" max-associations=\"3\" class=\"qti-choices-bottom\">\n <qti-prompt>Hoe heet iedereen?</qti-prompt>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A1\" match-max=\"1\">Ernie</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A2\" match-max=\"1\">Pino</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"A3\" match-max=\"1\">Kermit</qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"B1\" match-max=\"1\">\n <img src=${choiceB1Image} alt=\"afbeelding\" />\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B2\" match-max=\"1\">\n <img src=${choiceB2Image} alt=\"afbeelding\" />\n </qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B3\" match-max=\"1\">\n <img src=${choiceB3Image} alt=\"afbeelding\" />\n </qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n\nexport const duplicateDropRegressionTemplate = html`\n <qti-match-interaction data-testid=\"match-interaction-duplicates\" response-identifier=\"RESPONSE\" max-associations=\"3\">\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A\" match-max=\"0\">Alpha</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B\" match-max=\"0\">Beta</qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"T1\" match-max=\"1\">Target 1</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T2\" match-max=\"1\">Target 2</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T3\" match-max=\"1\">Target 3</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n\nexport const sortableAppendWhenTargetAllowsMultipleTemplate = html`\n <qti-match-interaction\n data-testid=\"match-interaction-sortable-append\"\n response-identifier=\"RESPONSE\"\n max-associations=\"4\"\n >\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A\" match-max=\"0\">Alpha</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B\" match-max=\"0\">Beta</qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"T1\" match-max=\"1\">Target 1</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T2\" match-max=\"1\">Target 2</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T3\" match-max=\"2\">Target 3</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n\nexport const sortableAppendWhenTargetUnlimitedTemplate = html`\n <qti-match-interaction\n data-testid=\"match-interaction-sortable-unlimited-target\"\n response-identifier=\"RESPONSE\"\n max-associations=\"6\"\n >\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"A\" match-max=\"0\">Alpha</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"B\" match-max=\"0\">Beta</qti-simple-associable-choice>\n </qti-simple-match-set>\n <qti-simple-match-set>\n <qti-simple-associable-choice identifier=\"T1\" match-max=\"1\">Target 1</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T2\" match-max=\"1\">Target 2</qti-simple-associable-choice>\n <qti-simple-associable-choice identifier=\"T3\" match-max=\"0\">Target 3</qti-simple-associable-choice>\n </qti-simple-match-set>\n </qti-match-interaction>\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qti-components/match-interaction",
|
|
3
3
|
"description": "QTI match-interaction interaction",
|
|
4
|
-
"version": "2.1.0-next.
|
|
4
|
+
"version": "2.1.0-next.3",
|
|
5
5
|
"author": "",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@qti-components/base": "^
|
|
8
|
-
"@qti-components/interactions-core": "^2.2.0-next.
|
|
7
|
+
"@qti-components/base": "^3.0.0-next.3",
|
|
8
|
+
"@qti-components/interactions-core": "^2.2.0-next.4",
|
|
9
9
|
"@qti-components/utilities": "^1.3.3"
|
|
10
10
|
},
|
|
11
11
|
"devDependencies": {
|