@citolab/qti-components 7.17.0 → 7.17.1

package/custom-elements.json

@@ -6690,110 +6690,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-item/src/components/item-container/item-container.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ItemDoc",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: (_, { loaded: { itemDoc } }) => { return html` <qti-item> <item-container .itemDoc=${itemDoc}></item-container> </qti-item> `; }, loaders: [ async ({ args }) => { const itemDoc = qtiTransformItem() .load(args['item-url']) .then(api => api.htmlDoc()); return { itemDoc }; } ], play: ItemURL.play, tags: ['!autodocs'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "ItemURL",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { return html`<qti-item>${template(args)}</qti-item>`; }, play: async ({ canvasElement }) => { const assessmentItem = await getAssessmentItemFromItemContainer(canvasElement); expect(assessmentItem).toBeInTheDocument(); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "ItemWithTemplate",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { return html` <qti-item> <item-container item-url=${args['item-url']}> <template> <style> qti-simple-choice { border: 2px solid blue; } </style> </template> </item-container> </qti-item> `; }, play: ItemURL.play, tags: ['!autodocs'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "ItemWithTemplateScale",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { return html` <qti-item> <item-container item-url=${args['item-url']}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> </qti-item> `; }, play: ItemURL.play, tags: ['!autodocs'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "ItemXML",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: (_, { loaded: { itemXML } }) => { return html` <qti-item> <item-container .itemXML=${itemXML}></item-container> </qti-item> `; }, loaders: [ async ({ args }) => { const itemXML = await qtiTransformItem() .load(args['item-url']) .then(api => api.xml()); return { itemXML }; } ], play: ItemURL.play, tags: ['!autodocs'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<typeof ItemContainer & { 'item-url': string }>"
-          },
-          "default": "{ component: 'item-container', args: { ...args, 'item-url': 'assets/qti-item/example-choice-item.xml' }, argTypes, parameters: { actions: { handles: events } } // tags: ['autodocs', 'new'] }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-item/src/components/item-container/item-container.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ItemDoc",
-          "declaration": {
-            "name": "ItemDoc",
-            "module": "packages/qti-item/src/components/item-container/item-container.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ItemURL",
-          "declaration": {
-            "name": "ItemURL",
-            "module": "packages/qti-item/src/components/item-container/item-container.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ItemWithTemplate",
-          "declaration": {
-            "name": "ItemWithTemplate",
-            "module": "packages/qti-item/src/components/item-container/item-container.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ItemWithTemplateScale",
-          "declaration": {
-            "name": "ItemWithTemplateScale",
-            "module": "packages/qti-item/src/components/item-container/item-container.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ItemXML",
-          "declaration": {
-            "name": "ItemXML",
-            "module": "packages/qti-item/src/components/item-container/item-container.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-item/src/components/item-container/item-container.ts",
@@ -6998,94 +6894,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-item/src/components/item-print-variables/item-print-variables.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-item> <div style=\"display: flex; gap: 1rem;\"> <item-container style=\"width: 400px\" item-url=${args['item-url']}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-print-variables></item-print-variables> </div> </qti-item>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "GraphicMatch",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': '/qti-test-package/items/graphic_gap_match.xml' // Set the new item URL here }, render: args => html` <qti-item> <div style=\"display: flex; gap: 1rem;\"> <item-container style=\"width: 400px\" item-url=${args['item-url']}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-print-variables></item-print-variables> </div> </qti-item>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "Match",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': '/qti-item/example-match.xml' // Set the new item URL here }, render: args => html` <qti-item> <div style=\"display: flex; gap: 1rem;\"> <item-container style=\"width: 400px\" item-url=${args['item-url']}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-print-variables></item-print-variables> </div> </qti-item>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<typeof ItemContainer & { 'item-url': string }>"
-          },
-          "default": "{ component: 'item-container', args: { ...args, 'item-url': '/qti-item/example-choice-item.xml' }, argTypes, parameters: { actions: { handles: events } } // tags: ['autodocs', 'new'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "MultipleResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': '/qti-item/example-choice-multiple-item.xml' // Set the new item URL here }, render: args => html` <qti-item> <div style=\"display: flex; gap: 1rem;\"> <item-container style=\"width: 400px\" item-url=${args['item-url']}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-print-variables></item-print-variables> </div> </qti-item>` }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-item/src/components/item-print-variables/item-print-variables.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-item/src/components/item-print-variables/item-print-variables.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GraphicMatch",
-          "declaration": {
-            "name": "GraphicMatch",
-            "module": "packages/qti-item/src/components/item-print-variables/item-print-variables.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Match",
-          "declaration": {
-            "name": "Match",
-            "module": "packages/qti-item/src/components/item-print-variables/item-print-variables.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MultipleResponse",
-          "declaration": {
-            "name": "MultipleResponse",
-            "module": "packages/qti-item/src/components/item-print-variables/item-print-variables.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-item/src/components/item-print-variables/item-print-variables.ts",
@@ -7136,174 +6944,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { return html`<qti-item> <!-- <div style=\"display: flex; flex-direction: column; gap: 1rem;\"> --> <item-container style=\"width: 400px; height: 350px; display: block;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-candidate-correction ${spread(args)}></item-show-candidate-correction> <!-- </div> --> </qti-item>`; }, play: async ({ canvasElement, step }) => { // wait for qti-simple-choice to be rendered const canvas = within(canvasElement); // const choices = await canvas.findAllByShadowRole('radio'); const choiceA: QtiSimpleChoice = await canvas.findByShadowText('You must stay with your luggage at all times.'); const choiceB: QtiSimpleChoice = await canvas.findByShadowText('Do not let someone else look after your luggage.'); const choiceC: QtiSimpleChoice = await canvas.findByShadowText('Remember your luggage when you leave.'); const showCorrectButton = canvas.getAllByShadowText(/Show candidate correction/i)[0]; await step('Click on the Show candidate correction button', async () => { await choiceA.click(); await showCorrectButton.click(); await step('Verify candidate correction is applied', async () => { expect(choiceA.internals.states.has('candidate-correct')).toBe(true); expect(choiceB.internals.states.has('candidate-correct')).toBe(false); expect(choiceC.internals.states.has('candidate-correct')).toBe(false); expect(choiceA.internals.states.has('candidate-incorrect')).toBe(false); expect(choiceB.internals.states.has('candidate-incorrect')).toBe(false); expect(choiceC.internals.states.has('candidate-incorrect')).toBe(false); }); await step('Click on the Show Candidate Correction again', async () => { expect(canvas.queryByShadowText(/Show candidate correction/i)).toBeNull(); expect(canvas.getAllByShadowText(/Hide candidate correction/i).length).toBe(1); await showCorrectButton.click(); await choiceA.click(); // Deselect option expect(choiceA.internals.states.has('candidate-correct')).toBe(false); expect(choiceB.internals.states.has('candidate-correct')).toBe(false); expect(choiceC.internals.states.has('candidate-correct')).toBe(false); expect(choiceA.internals.states.has('candidate-incorrect')).toBe(false); expect(choiceB.internals.states.has('candidate-incorrect')).toBe(false); expect(choiceC.internals.states.has('candidate-incorrect')).toBe(false); }); await step('Change answer after showing Candidate Correction', async () => { expect(canvas.getAllByShadowText(/Show candidate correction/i).length).toBe(1); await choiceA.click(); await showCorrectButton.click(); await choiceB.click(); expect(choiceA.internals.states.has('candidate-correct')).toBe(false); expect(choiceB.internals.states.has('candidate-correct')).toBe(false); expect(choiceC.internals.states.has('candidate-correct')).toBe(false); expect(choiceA.internals.states.has('candidate-incorrect')).toBe(false); expect(choiceB.internals.states.has('candidate-incorrect')).toBe(false); expect(choiceC.internals.states.has('candidate-incorrect')).toBe(false); expect(canvas.queryByShadowText(/Hide candidate correction/i)).toBeNull(); await choiceB.click(); // Deselect option }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "GapMatch",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/gap_match.xml' }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-candidate-correction></item-show-candidate-correction> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); const interaction = await getAssessmentItemFromItemContainer(canvasElement); const showCorrectButton = await canvas.findByShadowText(/Show candidate correction/i); const matchItem1 = (await canvas.findByShadowText('winter')) as QtiGapMatchInteraction; const matchItem2 = (await canvas.findByShadowText('spring')) as QtiGapMatchInteraction; const dropZones = interaction.querySelectorAll(`qti-gap`); const dropZone1 = dropZones[0]; const dropZone2 = dropZones[1]; await step('Drag and drop match interaction items', async () => { await drag(matchItem1, { to: dropZone1 }); await drag(matchItem2, { to: dropZone2 }); await showCorrectButton.click(); await step('Verify candidate correction state is applied', async () => { const matchItem1List = Array.from(await canvas.findAllByShadowText('winter')); const matchItem1CandidateResponse = matchItem1List[1] as QtiGapMatchInteraction; const matchItem2List = Array.from(await canvas.findAllByShadowText('spring')); const matchItem2CandidateResponse = matchItem2List[1] as QtiGapMatchInteraction; expect(matchItem1CandidateResponse.internals.states.has('candidate-correct')).toBe(true); expect(matchItem2CandidateResponse.internals.states.has('candidate-correct')).toBe(false); expect(matchItem1CandidateResponse.internals.states.has('candidate-incorrect')).toBe(false); expect(matchItem2CandidateResponse.internals.states.has('candidate-incorrect')).toBe(true); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "InlineChoice",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-inline-choice.xml' }, render: args => html` <qti-item> <div> <item-container style=\"display: block; width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-candidate-correction></item-show-candidate-correction> </div> </qti-item> `, play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); const item = await getAssessmentItemFromItemContainer(canvasElement); const interaction = await waitFor(() => { const el = item.querySelector('qti-inline-choice-interaction'); if (!el) throw new Error('inline-choice interaction not found'); return el; }); const selectElement = await waitFor(() => { const select = interaction.shadowRoot?.querySelector<HTMLSelectElement>('select'); if (!select) throw new Error('select element not yet available'); return select; }); const showButton = await canvas.findByShadowText(/Show candidate correction/i); await step('Select an inline choice option', async () => { selectElement.value = 'Y'; // de correcte identifier (York) selectElement.dispatchEvent(new Event('change', { bubbles: true })); }); await step('Click on the Show Candidate Correction button', async () => { await showButton.click(); await step('Verify candidate correction by checking selected option', async () => { const selectedOption = Array.from(selectElement.options).find(opt => opt.selected); expect(selectedOption).not.toBeUndefined(); expect(selectedOption.value).toBe('Y'); expect(selectedOption.textContent.trim()).toBe('York'); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Match",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/match.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-candidate-correction></item-show-candidate-correction> </div> </qti-item>`, play: async ({ canvasElement, step }) => { // wait for qti-simple-choice to be rendered const canvas = within(canvasElement); const showCorrectButton = await canvas.findByShadowText(/Show candidate correction/i); const matchItem1 = (await canvas.findByShadowText('Prospero')) as QtiSimpleAssociableChoice; const matchItem2 = (await canvas.findByShadowText('Capulet')) as QtiSimpleAssociableChoice; const matchItem3 = (await canvas.findByShadowText('Demetrius')) as QtiSimpleAssociableChoice; const dropZone1 = await canvas.findByShadowText('The Tempest'); const dropZone2 = await canvas.findByShadowText(\"A Midsummer-Night's Dream\"); const dropZone3 = await canvas.findByShadowText('Romeo and Juliet'); await step('Drag and drop match interaction items', async () => { await drag(matchItem1, { to: dropZone1 }); await drag(matchItem2, { to: dropZone2 }); await drag(matchItem3, { to: dropZone3 }); await showCorrectButton.click(); await step('Verify candidate correction state is applied', async () => { const matchItem1List = Array.from(await canvas.findAllByShadowText('Prospero')); const matchItem1CandidateResponse = matchItem1List[1] as QtiSimpleAssociableChoice; const matchItem2List = Array.from(await canvas.findAllByShadowText('Capulet')); const matchItem2CandidateResponse = matchItem2List[1] as QtiSimpleAssociableChoice; const matchItem3List = Array.from(await canvas.findAllByShadowText('Demetrius')); const matchItem3CandidateResponse = matchItem3List[1] as QtiSimpleAssociableChoice; expect(matchItem1CandidateResponse.internals.states.has('candidate-correct')).toBe(true); expect(matchItem2CandidateResponse.internals.states.has('candidate-correct')).toBe(false); expect(matchItem3CandidateResponse.internals.states.has('candidate-correct')).toBe(false); expect(matchItem1CandidateResponse.internals.states.has('candidate-incorrect')).toBe(false); expect(matchItem2CandidateResponse.internals.states.has('candidate-incorrect')).toBe(true); expect(matchItem3CandidateResponse.internals.states.has('candidate-incorrect')).toBe(true); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "MatchAllToOneZone",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/match.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-candidate-correction></item-show-candidate-correction> </div> </qti-item>`, play: async ({ canvasElement, step }) => { // wait for qti-simple-choice to be rendered - fresh UI state const canvas = within(canvasElement); const showCorrectButton = await canvas.findByShadowText(/Show candidate correction/i); const matchItem1 = (await canvas.findByShadowText('Prospero')) as QtiSimpleAssociableChoice; const matchItem2 = (await canvas.findByShadowText('Lysander')) as QtiSimpleAssociableChoice; const matchItem3 = (await canvas.findByShadowText('Demetrius')) as QtiSimpleAssociableChoice; const dropZone1 = await canvas.findByShadowText('The Tempest'); await step('Drag and drop all match interaction items to single dropzone', async () => { await drag(matchItem1, { to: dropZone1 }); await drag(matchItem2, { to: dropZone1 }); await drag(matchItem3, { to: dropZone1 }); await showCorrectButton.click(); await step('Verify candidate correction state is applied', async () => { const matchItem1List = Array.from(await canvas.findAllByShadowText('Prospero')); const matchItem1CandidateResponse = matchItem1List[1] as QtiSimpleAssociableChoice; const matchItem2List = Array.from(await canvas.findAllByShadowText('Lysander')); const matchItem2CandidateResponse = matchItem2List[1] as QtiSimpleAssociableChoice; const matchItem3List = Array.from(await canvas.findAllByShadowText('Demetrius')); const matchItem3CandidateResponse = matchItem3List[1] as QtiSimpleAssociableChoice; expect(matchItem1CandidateResponse.internals.states.has('candidate-correct')).toBe(true); expect(matchItem2CandidateResponse.internals.states.has('candidate-correct')).toBe(false); expect(matchItem3CandidateResponse.internals.states.has('candidate-correct')).toBe(false); expect(matchItem1CandidateResponse.internals.states.has('candidate-incorrect')).toBe(false); expect(matchItem2CandidateResponse.internals.states.has('candidate-incorrect')).toBe(true); expect(matchItem3CandidateResponse.internals.states.has('candidate-incorrect')).toBe(true); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<typeof ItemContainer & { 'item-url': string }>"
-          },
-          "default": "{ component: 'item-container', args: { ...args, 'item-url': 'assets/qti-item/example-choice-item.xml' }, argTypes, parameters: { actions: { handles: events } } // tags: ['autodocs', 'new'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "MultipleResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-choice-multiple-item.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-candidate-correction ${spread(args)}></item-show-candidate-correction> </div> </qti-item>`, play: async ({ canvasElement, step }) => { // wait for qti-simple-choice to be rendered const canvas = within(canvasElement); // const choices = await canvas.findAllByShadowRole('radio'); const choiceA: QtiSimpleChoice = await canvas.findByShadowText('This is correct.'); const choiceB: QtiSimpleChoice = await canvas.findByShadowText('This is also correct.'); const choiceC: QtiSimpleChoice = await canvas.findByShadowText('This is wrong.'); const showCorrectButton = canvas.getAllByShadowText(/Show candidate correction/i)[0]; await step('Click on the Show Correct button', async () => { await choiceA.click(); await choiceC.click(); await showCorrectButton.click(); await step('Verify candidate correction state is applied', async () => { expect(choiceA.internals.states.has('candidate-correct')).toBe(true); expect(choiceB.internals.states.has('candidate-correct')).toBe(false); expect(choiceC.internals.states.has('candidate-correct')).toBe(false); expect(choiceA.internals.states.has('candidate-incorrect')).toBe(false); expect(choiceB.internals.states.has('candidate-incorrect')).toBe(false); expect(choiceC.internals.states.has('candidate-incorrect')).toBe(true); }); }); await step('Click on the Hide Correct button and deselect options', async () => { await showCorrectButton.click(); await step('Verify candidate correction state is removed', async () => { expect(choiceA.internals.states.has('candidate-correct')).toBe(false); expect(choiceB.internals.states.has('candidate-correct')).toBe(false); expect(choiceC.internals.states.has('candidate-correct')).toBe(false); expect(choiceA.internals.states.has('candidate-incorrect')).toBe(false); expect(choiceB.internals.states.has('candidate-incorrect')).toBe(false); expect(choiceC.internals.states.has('candidate-incorrect')).toBe(false); }); await choiceA.click(); await choiceC.click(); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "NoCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-choice-nocorrect-item.xml' // Set the new item URL here }, render: args => html` <qti-item> <item-container style=\"width: 400px; height: 350px; display: block;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-candidate-correction ${spread(args)}></item-show-candidate-correction> <!-- </div> --> </qti-item>`, play: async ({ canvasElement, step }) => { // // wait for qti-simple-choice to be rendered const canvas = within(canvasElement); await canvas.findByShadowText('You must stay with your luggage at all times.'); const _ = canvas.getAllByShadowText(/No correct response specified/i)[0]; const itemShowCorrect = canvasElement.querySelector('item-show-candidate-correction'); await step('Verify the Show Correct button is disabled', async () => { expect(itemShowCorrect.disabled).toBe(true); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "SelectPoint",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/select_point.xml' }, render: args => html` <qti-item> <div> <item-container style=\"display: block; width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-candidate-correction></item-show-candidate-correction> </div> </qti-item> `, play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); const showButton = await canvas.findByShadowText(/Show candidate correction/i); const image = await canvas.findByShadowAltText('UK Map'); await step('Click on correct point in the image', async () => { const rect = image.getBoundingClientRect(); await fireEvent.click(image, { clientX: rect.left + rect.width * 0.5, clientY: rect.top + rect.height * 0.4 }); }); await step('Click on incorrect points in the image', async () => { const rect = image.getBoundingClientRect(); await fireEvent.click(image, { clientX: rect.left + rect.width * 0.5, clientY: rect.top + rect.height * 0.6 }); await fireEvent.click(image, { clientX: rect.left + rect.width * 0.55, clientY: rect.top + rect.height * 0.65 }); }); await step('Click on the Show Candidate Correction button', async () => { await showButton.click(); await step('Verify candidate correction by checking selected options', async () => { const item = await getAssessmentItemFromItemContainer(canvasElement); const interaction: QtiSelectPointInteraction = item.querySelector('qti-select-point-interaction'); const buttonsCorrect = interaction.shadowRoot?.querySelectorAll<HTMLButtonElement>('button[part=\"point correct\"]'); const buttonsIncorrect = interaction.shadowRoot?.querySelectorAll<HTMLButtonElement>( 'button[part=\"point incorrect\"]' ); expect(buttonsCorrect).toHaveLength(1); expect(buttonsIncorrect).toHaveLength(2); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "TextEntry",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-text-entry.xml' }, render: args => html` <qti-item> <div> <item-container style=\"display: block; width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-candidate-correction></item-show-candidate-correction> </div> </qti-item> `, play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); const showButton = await canvas.findByShadowText(/Show candidate correction/i); const item = await getAssessmentItemFromItemContainer(canvasElement); const interaction: QtiTextEntryInteraction = item.querySelector('qti-text-entry-interaction'); const input = interaction.shadowRoot?.querySelector<HTMLInputElement>('input'); await step('Type in the correct answer text entry interaction', async () => { input.value = 'York'; input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); }); await step('Click on the Show Candidate Correction button', async () => { await showButton.click(); await step('Verify candidate correction by checking selected option', async () => { expect(interaction.internals.states.has('candidate-correct')).toBe(true); expect(interaction.internals.states.has('candidate-incorrect')).toBe(false); expect(interaction.internals.states.has('candidate-partially-correct')).toBe(false); }); }); await step('Type in the partially correct answer text entry interaction', async () => { input.value = 'york'; input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); }); await step('Click on the Show Candidate Correction button', async () => { await showButton.click(); await step('Verify candidate correction by checking selected option', async () => { const interactionResponse: QtiTextEntryInteraction = item.querySelector('qti-text-entry-interaction'); expect(interactionResponse.internals.states.has('candidate-correct')).toBe(false); expect(interactionResponse.internals.states.has('candidate-incorrect')).toBe(false); expect(interactionResponse.internals.states.has('candidate-partially-correct')).toBe(true); }); }); await step('Type in the incorrect answer text entry interaction', async () => { input.value = 'bla'; input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); }); await step('Click on the Show Candidate Correction button', async () => { await showButton.click(); await step('Verify candidate correction by checking selected option', async () => { const interactionResponse: QtiTextEntryInteraction = item.querySelector('qti-text-entry-interaction'); expect(interactionResponse.internals.states.has('candidate-correct')).toBe(false); expect(interactionResponse.internals.states.has('candidate-incorrect')).toBe(true); expect(interactionResponse.internals.states.has('candidate-partially-correct')).toBe(false); }); }); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GapMatch",
-          "declaration": {
-            "name": "GapMatch",
-            "module": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "InlineChoice",
-          "declaration": {
-            "name": "InlineChoice",
-            "module": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Match",
-          "declaration": {
-            "name": "Match",
-            "module": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MatchAllToOneZone",
-          "declaration": {
-            "name": "MatchAllToOneZone",
-            "module": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MultipleResponse",
-          "declaration": {
-            "name": "MultipleResponse",
-            "module": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "NoCorrectResponse",
-          "declaration": {
-            "name": "NoCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SelectPoint",
-          "declaration": {
-            "name": "SelectPoint",
-            "module": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TextEntry",
-          "declaration": {
-            "name": "TextEntry",
-            "module": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-item/src/components/item-show-candidate-correction/item-show-candidate-correction.ts",
@@ -7484,382 +7124,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ChoiceFullCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { return html`<qti-item> <div style=\"display: flex; flex-direction: column; gap: 1rem; align-items: start\"> <item-container style=\"width: 400px; height: 350px; display: block;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`; }, play: async ({ canvasElement, step }) => { const item = document.querySelector('qti-item'); item.configContext = { correctResponseMode: 'full', fullCorrectResponseOnlyWhenIncorrect: false }; const canvas = within(canvasElement); const showCorrectButton = await canvas.findByShadowText(/Show correct/i); const choiceA: QtiSimpleChoice = await canvas.findByShadowText('You must stay with your luggage at all times.'); await step('Click on the Show Correct button', async () => { await choiceA.click(); await fireEvent.click(showCorrectButton); await step('Verify correct response state is applied', async () => { const fullCorrectResponse = await canvas.findByShadowRole('full-correct-response'); expect(fullCorrectResponse).toBeVisible(); const interaction = fullCorrectResponse.querySelector('qti-choice-interaction'); const choices = Array.from(interaction.querySelectorAll('qti-simple-choice')); await interaction.updateComplete; expect(choices[0].internals.states.has('--checked')).toBe(true); expect(choices[1].internals.states.has('--checked')).toBe(false); expect(choices[2].internals.states.has('--checked')).toBe(false); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "ChoiceFullCorrectResponseOnlyWhenIncorrect",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { return html`<qti-item> <div style=\"display: flex; flex-direction: column; gap: 1rem; align-items: start\"> <item-container style=\"width: 400px; height: 350px; display: block;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`; }, play: async ({ canvasElement, step }) => { const item = document.querySelector('qti-item'); item.configContext = { correctResponseMode: 'full', fullCorrectResponseOnlyWhenIncorrect: true }; const canvas = within(canvasElement); const showCorrectButton = await canvas.findByShadowText(/Show correct/i); const choiceA: QtiSimpleChoice = await canvas.findByShadowText('You must stay with your luggage at all times.'); await step('Click on the Show Correct button', async () => { await choiceA.click(); await fireEvent.click(showCorrectButton); await step('Verify correct full correct response is not visible', async () => { const fullCorrectResponse = await canvas.queryByShadowRole('full-correct-response'); expect(fullCorrectResponse).toBeNull(); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "ChoiceInternalCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { return html`<qti-item> <div style=\"display: flex; flex-direction: column; gap: 1rem; align-items: start\"> <item-container style=\"width: 400px; height: 350px; display: block;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`; }, play: async ({ canvasElement, step }) => { const item = document.querySelector('qti-item'); item.configContext = { correctResponseMode: 'internal' }; // wait for qti-simple-choice to be rendered const canvas = within(canvasElement); // const choices = await canvas.findAllByShadowRole('radio'); const choiceA: QtiSimpleChoice = await canvas.findByShadowText('You must stay with your luggage at all times.'); const choiceB: QtiSimpleChoice = await canvas.findByShadowText('Do not let someone else look after your luggage.'); const choiceC: QtiSimpleChoice = await canvas.findByShadowText('Remember your luggage when you leave.'); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); await step('Verify correct response state is applied', async () => { expect(choiceA.internals.states.has('correct-response')).toBe(true); expect(choiceB.internals.states.has('correct-response')).toBe(false); expect(choiceC.internals.states.has('correct-response')).toBe(false); expect(choiceA.internals.states.has('incorrect-response')).toBe(false); expect(choiceB.internals.states.has('incorrect-response')).toBe(true); expect(choiceC.internals.states.has('incorrect-response')).toBe(true); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { return html`<qti-item> <div style=\"display: flex; flex-direction: column; gap: 1rem; align-items: start\"> <item-container style=\"width: 400px; height: 350px; display: block;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-correct-response-mode></item-correct-response-mode> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`; }, play: async ({ canvasElement, step }) => { // wait for qti-simple-choice to be rendered const canvas = within(canvasElement); // const choices = await canvas.findAllByShadowRole('radio'); const choiceA: QtiSimpleChoice = await canvas.findByShadowText('You must stay with your luggage at all times.'); const choiceB: QtiSimpleChoice = await canvas.findByShadowText('Do not let someone else look after your luggage.'); const choiceC: QtiSimpleChoice = await canvas.findByShadowText('Remember your luggage when you leave.'); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); await step('Verify correct response state is applied', async () => { expect(choiceA.internals.states.has('correct-response')).toBe(true); expect(choiceB.internals.states.has('correct-response')).toBe(false); expect(choiceC.internals.states.has('correct-response')).toBe(false); expect(choiceA.internals.states.has('incorrect-response')).toBe(false); expect(choiceB.internals.states.has('incorrect-response')).toBe(true); expect(choiceC.internals.states.has('incorrect-response')).toBe(true); }); await step('Click on the Show Correct button again', async () => { expect(canvas.queryByShadowText(/Show correct/i)).toBeNull(); expect(canvas.getAllByShadowText(/Hide correct/i).length).toBe(1); await showCorrectButton.click(); expect(choiceA.internals.states.has('correct-response')).toBe(false); expect(choiceB.internals.states.has('correct-response')).toBe(false); expect(choiceC.internals.states.has('correct-response')).toBe(false); expect(choiceA.internals.states.has('incorrect-response')).toBe(false); expect(choiceB.internals.states.has('incorrect-response')).toBe(false); expect(choiceC.internals.states.has('incorrect-response')).toBe(false); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "GapMatch",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/gap_match.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); const interaction = await getAssessmentItemFromItemContainer(canvasElement); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); const correctOptions = interaction.querySelectorAll(`[class=\"correct-option\"]`); expect(correctOptions.length).toBe(2); expect(correctOptions[0].textContent).toBe('winter'); expect(correctOptions[1].textContent).toBe('summer'); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "GapMatchCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/gap_match.xml' }, render: args => html`<qti-item> <div> <item-container style=\"display: block; width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); const showCorrectButton = await canvas.findByShadowText(/Show correct/i); const interaction = await getAssessmentItemFromItemContainer(canvasElement); const matchItem1 = (await canvas.findByShadowText('winter')) as QtiGapMatchInteraction; const matchItem2 = (await canvas.findByShadowText('spring')) as QtiGapMatchInteraction; const dropZones = interaction.querySelectorAll(`qti-gap`); const dropZone1 = dropZones[0]; const dropZone2 = dropZones[1]; await step('Drag and drop match interaction items', async () => { await drag(matchItem1, { to: dropZone1 }); await drag(matchItem2, { to: dropZone2 }); await showCorrectButton.click(); await step('Verify correct response is shown', async () => { const correctResponses = interaction.querySelectorAll('[class=\"correct-option\"]'); expect(correctResponses.length).toBe(2); expect(correctResponses[0].textContent).toBe('winter'); expect(correctResponses[1].textContent).toBe('summer'); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "GraphicAssociate",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/graphic_associate.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; border: 2px solid blue; transform: scale(0.7); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response></item-show-correct-response> <!-- <item-print-variables></item-print-variables> --> </div> </qti-item>`, play: async ({ canvasElement, step }) => { // wait for qti-simple-choices to be rendered const canvas = within(canvasElement); const item = await getAssessmentItemFromItemContainer(canvasElement); const interaction = item.querySelector('qti-graphic-associate-interaction'); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); const lines = interaction.shadowRoot.querySelector('line-container').querySelectorAll(`[part='correct-line']`).length === 2; expect(lines).toBe(true); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "GraphicOrder",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-graphic-order.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { // wait for qti-simple-choices to be rendered const canvas = within(canvasElement); const item = await getAssessmentItemFromItemContainer(canvasElement); const interaction = item.querySelector('qti-graphic-order-interaction'); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); const hotspotChoice = interaction.querySelectorAll('qti-hotspot-choice'); // const get after content expect(window.getComputedStyle(hotspotChoice[0], ':after').content).toBe('\"C=1\"'); expect(window.getComputedStyle(hotspotChoice[1], ':after').content).toBe('\"C=4\"'); expect(window.getComputedStyle(hotspotChoice[2], ':after').content).toBe('\"C=2\"'); expect(window.getComputedStyle(hotspotChoice[3], ':after').content).toBe('\"C=3\"'); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "InlineChoiceFullCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-inline-choice.xml' // Zorg dat dit item een inline-choice bevat }, render: args => html`<qti-item> <div> <item-container style=\"display: block; width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const item = document.querySelector('qti-item'); item.configContext = { correctResponseMode: 'full' }; const canvas = within(canvasElement); const showCorrectButton = await canvas.findByShadowText(/Show correct/i); await step('Click on the Show Correct button', async () => { await fireEvent.click(showCorrectButton); await step('Verify full correct response is shown', async () => { const fullCorrectResponse = await waitFor(() => canvas.getByShadowRole('full-correct-response')); expect(fullCorrectResponse).toBeVisible(); const interaction = fullCorrectResponse.querySelector('qti-inline-choice-interaction'); expect(interaction).not.toBeNull(); const select = interaction.shadowRoot.querySelector('select'); expect(select).not.toBeNull(); const selectedOption = Array.from(select.options).find(opt => opt.selected); expect(selectedOption).not.toBeUndefined(); expect(selectedOption.textContent.trim()).toBe('York'); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "InlineChoiceInternalCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-inline-choice.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const item = document.querySelector('qti-item'); item.configContext = { correctResponseMode: 'internal' }; const canvas = within(canvasElement); const itemAssessment = await getAssessmentItemFromItemContainer(canvasElement); const interaction = itemAssessment.querySelector('qti-inline-choice-interaction'); const showCorrectButton = await canvas.findByShadowText(`Show correct response`); await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); const correctResponse = interaction.shadowRoot.querySelector<HTMLSpanElement>('[part=\"correct-option\"]'); //.findByShadowLabelText('correct-response'); expect(correctResponse).not.toBeNull(); expect(correctResponse.innerText).toBe('York'); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Match",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/match.xml' // Set the new item URL here // 'item-url': 'api/kennisnet-1/ITEM002.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); const interaction = await getAssessmentItemFromItemContainer(canvasElement); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); const correctElements = interaction.querySelectorAll(`[class=\"correct-option\"]`); expect(correctElements.length).toBe(3); const correctOptions = Array.from(correctElements).map(el => el.textContent); const allExist = correctOptions.every(element => ['Prospero', 'Demetrius', 'Capulet'].includes(element)); expect(allExist).toBe(true); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "MatchFullCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/match.xml' // Set the new item URL here // 'item-url': 'api/kennisnet-1/ITEM002.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const item = document.querySelector('qti-item'); item.configContext = { correctResponseMode: 'full' }; const canvas = within(canvasElement); const showCorrectButton = await canvas.findByShadowText(/Show correct/i); await step('Click on the Show Correct button', async () => { await fireEvent.click(showCorrectButton); await step('Verify full correct response is shown', async () => { const fullCorrectResponse = await waitFor(() => canvas.getByShadowRole('full-correct-response')); expect(fullCorrectResponse).toBeVisible(); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "MatchTabular",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/match-tabular.xml' // Set the new item URL here // 'item-url': 'api/kennisnet-1/ITEM002.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); const item = await getAssessmentItemFromItemContainer(canvasElement); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; const interaction = item.querySelector('qti-match-interaction'); await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); // Find all elements with rb-correct or cb-correct parts // This uses the shadow DOM API to find elements with specific part attributes const correctRadioButtons = interaction.shadowRoot.querySelectorAll('[part~=\"rb-correct\"]'); const correctCheckboxes = interaction.shadowRoot.querySelectorAll('[part~=\"cb-correct\"]'); // Combine both types of correct elements const allCorrectElements = [...correctRadioButtons, ...correctCheckboxes] as HTMLInputElement[]; // Verify we have the expected number of correct answers expect(allCorrectElements.length).toBe(4); // Get the associated row identifiers for the correct options const correctRowIds = Array.from(allCorrectElements).map(el => el.name); // Get the values of the correct inputs (which contain the row and column IDs) const correctValues = Array.from(allCorrectElements).map(el => el.value); // Parse the values to extract row IDs const rowIds = correctValues.map(value => value.split(' ')[0]); // Verify the correct row IDs exist const expectedRowIds = ['C', 'P', 'L', 'D']; const allExist = rowIds.every(rowId => expectedRowIds.includes(rowId)); expect(allExist).toBe(true); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<typeof ItemContainer & { 'item-url': string }>"
-          },
-          "default": "{ component: 'item-container', args: { ...args, 'item-url': 'assets/qti-item/example-choice-item.xml' }, argTypes, parameters: { actions: { handles: events } } // tags: ['autodocs', 'new'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "MultipleInteractions",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-multiple-interactions.xml' // Set the new item URL here }, render: args => html` <qti-item> <item-container style=\"width: 400px; height: 350px; display: block;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> <!-- </div> --> </qti-item>`, play: async ({ canvasElement, step }) => { // // wait for qti-simple-choice to be rendered const canvas = within(canvasElement); const interactions = await waitFor(() => { const itemContainer = canvasElement.querySelector('item-container'); if (!itemContainer) { throw new Error('Item container not found'); } if (!itemContainer.shadowRoot) { throw new Error('Shadow root not found'); } if (!itemContainer.shadowRoot.querySelector('qti-inline-choice-interaction')) { throw new Error('qti-inline-choice-interaction not found'); } return itemContainer.shadowRoot.querySelectorAll('qti-inline-choice-interaction'); }); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); }); await step('Verify correct response state is applied', async () => { for (const interaction of interactions) { const feedback = interaction.shadowRoot.querySelector('[part=\"correct-option\"]'); expect(feedback).not.toBeNull(); } }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "MultipleResponseFullCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-choice-multiple-item.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const item = document.querySelector('qti-item'); item.configContext = { correctResponseMode: 'full' }; const canvas = within(canvasElement); const showCorrectButton = await canvas.findByShadowText(/Show correct/i); await step('Select the correct response mode full', async () => { await fireEvent.click(showCorrectButton); await step('Verify correct response full state is applied', async () => { const fullCorrectResponse = await canvas.findByShadowRole('full-correct-response'); expect(fullCorrectResponse).toBeVisible(); const interaction = fullCorrectResponse.querySelector('qti-choice-interaction'); const choices = Array.from(interaction.querySelectorAll('qti-simple-choice')); await interaction.updateComplete; expect(choices[0].internals.states.has('--checked')).toBe(true); expect(choices[1].internals.states.has('--checked')).toBe(true); expect(choices[2].internals.states.has('--checked')).toBe(false); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "MultipleResponseInternalCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-choice-multiple-item.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const item = document.querySelector('qti-item'); item.configContext = { correctResponseMode: 'internal' }; // wait for qti-simple-choice to be rendered const canvas = within(canvasElement); // const choices = await canvas.findAllByShadowRole('radio'); const choiceA: QtiSimpleChoice = await canvas.findByShadowText('This is correct.'); const choiceB: QtiSimpleChoice = await canvas.findByShadowText('This is also correct.'); const choiceC: QtiSimpleChoice = await canvas.findByShadowText('This is wrong.'); const showCorrectButton = await canvas.findByShadowText(/Show correct/i); await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); await step('Verify correct response state is applied', async () => { expect(choiceA.internals.states.has('correct-response')).toBe(true); expect(choiceB.internals.states.has('correct-response')).toBe(true); expect(choiceC.internals.states.has('correct-response')).toBe(false); expect(choiceA.internals.states.has('incorrect-response')).toBe(false); expect(choiceB.internals.states.has('incorrect-response')).toBe(false); expect(choiceC.internals.states.has('incorrect-response')).toBe(true); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "NoCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-choice-nocorrect-item.xml' // Set the new item URL here }, render: args => html` <qti-item> <item-container style=\"width: 400px; height: 350px; display: block;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> <!-- </div> --> </qti-item>`, play: async ({ canvasElement, step }) => { // // wait for qti-simple-choice to be rendered const canvas = within(canvasElement); await canvas.findByShadowText('You must stay with your luggage at all times.'); const _ = canvas.getAllByShadowText(/No correct response specified/i)[0]; const itemShowCorrect = canvasElement.querySelector('item-show-correct-response'); await step('Verify the Show Correct button is disabled', async () => { expect(itemShowCorrect.disabled).toBe(true); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "SelectPoint",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/select_point.xml' // Set the new item URL here }, render: args => html`<qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { // wait for qti-simple-choice to be rendered const canvas = within(canvasElement); const item = await getAssessmentItemFromItemContainer(canvasElement); const interaction = item.querySelector('qti-select-point-interaction'); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); const correctIndication = interaction.shadowRoot.querySelector('[alt=\"correct-response-1\"]'); expect(correctIndication).not.toBeNull(); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "SelectPointMultipleNoAreaMapping",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-select-point.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { // wait for qti-simple-choices to be rendered const canvas = within(canvasElement); const item = await getAssessmentItemFromItemContainer(canvasElement); const interaction = item.querySelector('qti-select-point-interaction'); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); const correctIndication1 = interaction.shadowRoot.querySelector('[alt=\"correct-response-1\"]'); const correctIndication2 = interaction.shadowRoot.querySelector('[alt=\"correct-response-2\"]'); const correctIndication3 = interaction.shadowRoot.querySelector('[alt=\"correct-response-3\"]'); expect(correctIndication1).not.toBeNull(); expect(correctIndication2).not.toBeNull(); expect(correctIndication3).not.toBeNull(); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Slider",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-item/example-slider.xml' // Set the new item URL here }, render: args => html` <qti-item> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { // wait for qti-simple-choices to be rendered const canvas = within(canvasElement); const item = await getAssessmentItemFromItemContainer(canvasElement); const interaction = item.querySelector('qti-slider-interaction'); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); const correctIndication = interaction.shadowRoot.querySelectorAll('[id=\"knob-correct\"]'); expect(correctIndication.length).toBe(1); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "TextEntryFullCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/text_entry.xml' // Set the new item URL here }, render: args => html` <qti-item navigate=\"item\"> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const test = document.querySelector('qti-item'); test.configContext = { correctResponseMode: 'full' }; const canvas = within(canvasElement); const showCorrectButton = await canvas.findByShadowText(/Show correct/i); await step('Select the correct response mode full', async () => { await fireEvent.click(showCorrectButton); await step('Verify correct response full state is applied', async () => { const fullCorrectResponse = await canvas.findByShadowRole('full-correct-response'); expect(fullCorrectResponse).toBeVisible(); }); }); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "TextEntryInternalCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { 'item-url': 'assets/qti-test-package/items/text_entry.xml' // Set the new item URL here }, render: args => html` <qti-item navigate=\"item\"> <div> <item-container style=\"display: block;width: 400px; height: 350px;\" item-url=${args['item-url'] as string}> <template> <style> qti-assessment-item { padding: 1rem; display: block; aspect-ratio: 4 / 3; width: 800px; border: 2px solid blue; transform: scale(0.5); transform-origin: top left; } </style> </template> </item-container> <item-show-correct-response ${spread(args)}></item-show-correct-response> </div> </qti-item>`, play: async ({ canvasElement, step }) => { const test = document.querySelector('qti-item'); test.configContext = { correctResponseMode: 'internal' }; const canvas = within(canvasElement); const item = await getAssessmentItemFromItemContainer(canvasElement); const interaction = item.querySelector('qti-text-entry-interaction'); const showCorrectButton = canvas.getAllByShadowText(/Show correct/i)[0]; await step('Click on the Show Correct button', async () => { await showCorrectButton.click(); const correctElement = interaction.shadowRoot.querySelector('[part=\"correct\"]'); expect(correctElement).toBeVisible(); }); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ChoiceFullCorrectResponse",
-          "declaration": {
-            "name": "ChoiceFullCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ChoiceFullCorrectResponseOnlyWhenIncorrect",
-          "declaration": {
-            "name": "ChoiceFullCorrectResponseOnlyWhenIncorrect",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ChoiceInternalCorrectResponse",
-          "declaration": {
-            "name": "ChoiceInternalCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GapMatch",
-          "declaration": {
-            "name": "GapMatch",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GapMatchCorrectResponse",
-          "declaration": {
-            "name": "GapMatchCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GraphicAssociate",
-          "declaration": {
-            "name": "GraphicAssociate",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GraphicOrder",
-          "declaration": {
-            "name": "GraphicOrder",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "InlineChoiceFullCorrectResponse",
-          "declaration": {
-            "name": "InlineChoiceFullCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "InlineChoiceInternalCorrectResponse",
-          "declaration": {
-            "name": "InlineChoiceInternalCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Match",
-          "declaration": {
-            "name": "Match",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MatchFullCorrectResponse",
-          "declaration": {
-            "name": "MatchFullCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MatchTabular",
-          "declaration": {
-            "name": "MatchTabular",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MultipleInteractions",
-          "declaration": {
-            "name": "MultipleInteractions",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MultipleResponseFullCorrectResponse",
-          "declaration": {
-            "name": "MultipleResponseFullCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MultipleResponseInternalCorrectResponse",
-          "declaration": {
-            "name": "MultipleResponseInternalCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "NoCorrectResponse",
-          "declaration": {
-            "name": "NoCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SelectPoint",
-          "declaration": {
-            "name": "SelectPoint",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SelectPointMultipleNoAreaMapping",
-          "declaration": {
-            "name": "SelectPointMultipleNoAreaMapping",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Slider",
-          "declaration": {
-            "name": "Slider",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TextEntryFullCorrectResponse",
-          "declaration": {
-            "name": "TextEntryFullCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TextEntryInternalCorrectResponse",
-          "declaration": {
-            "name": "TextEntryInternalCorrectResponse",
-            "module": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-item/src/components/item-show-correct-response/item-show-correct-response.ts",
@@ -9251,12 +8515,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-processing/src/components/qti-gcd/qti.gcd.spec.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-processing/src/components/qti-gcd/qti.gcd.ts",
@@ -12807,103 +12065,15 @@
           "name": "test-check-item",
           "declaration": {
             "name": "TestCheckItem",
-            "module": "packages/qti-test/src/components/test-check-item/test-check-item.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TestCheckItem",
-          "declaration": {
-            "name": "TestCheckItem",
-            "module": "packages/qti-test/src/components/test-check-item/test-check-item.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-container/test-container.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestContainer & { 'test-url': string }>"
-          },
-          "default": "{ component: 'test-container', args: { ...args, 'test-url': '/assets/qti-conformance/Basic/T4-T7/assessment.xml' }, argTypes, parameters: { actions: { handles: events } } }"
-        },
-        {
-          "kind": "variable",
-          "name": "TestDoc",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: (_, { loaded: { testDoc } }) => { return html` <qti-test navigate=\"item\"> <test-container .testDoc=${testDoc}></test-container> </qti-test> `; }, loaders: [ async ({ args }) => { const testDoc = qtiTransformTest() .load(args['test-url']) .then(api => api.htmlDoc()); return { testDoc }; } ], play: TestURL.play, tags: ['!autodocs'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "TestURL",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { return html`<qti-test navigate=\"item\">${template(args)}</qti-test>`; }, play: async ({ canvasElement }) => { //getAssessmentItemFromTestContainerByDataTitle const testElement = await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'T1 - Test Entry - Item 1'); expect(testElement).toBeInTheDocument(); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "TestWithTemplate",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { return html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=${args['test-url']}> <template> <style> qti-assessment-test { display: block; border: 2px solid blue; } </style> </template> </test-container> </test-navigation> </qti-test> `; }, play: TestURL.play, tags: ['!autodocs'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "TestXML",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: (_, { loaded: { testXML } }) => { return html` <qti-test navigate=\"item\"> <test-container .testXML=${testXML}></test-container> </qti-test> `; }, loaders: [ async ({ args }) => { const testXML = await qtiTransformTest() .load(args['test-url']) .then(api => api.xml()); return { testXML }; } ], play: TestURL.play, tags: ['!autodocs'] }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-container/test-container.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TestDoc",
-          "declaration": {
-            "name": "TestDoc",
-            "module": "packages/qti-test/src/components/test-container/test-container.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TestURL",
-          "declaration": {
-            "name": "TestURL",
-            "module": "packages/qti-test/src/components/test-container/test-container.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TestWithTemplate",
-          "declaration": {
-            "name": "TestWithTemplate",
-            "module": "packages/qti-test/src/components/test-container/test-container.stories.ts"
+            "module": "packages/qti-test/src/components/test-check-item/test-check-item.ts"
           }
         },
         {
           "kind": "js",
-          "name": "TestXML",
+          "name": "TestCheckItem",
           "declaration": {
-            "name": "TestXML",
-            "module": "packages/qti-test/src/components/test-container/test-container.stories.ts"
+            "name": "TestCheckItem",
+            "module": "packages/qti-test/src/components/test-check-item/test-check-item.ts"
           }
         }
       ]
@@ -13017,62 +12187,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-end-attempt/test-end-attempt.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <!-- <test-print-item-variables></test-print-item-variables> --> <test-container test-url=\"/assets/qti-test-package/assessment.xml\"></test-container> ${template(args, html`End Attempt`)} <test-next>Volgende</test-next> </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestEndAttempt>"
-          },
-          "default": "{ component: 'test-end-attempt', args, argTypes, parameters: { actions: { handles: events } } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Test",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <!-- <test-print-item-variables> </test-print-item-variables> --> <test-container test-url=\"/assets/qti-test-package/assessment.xml\"> </test-container> <test-end-attempt ${spread(args)}>End Attempt</test-end-attempt> <test-next>Volgende</test-next> <test-item-link item-id=\"ITM-text_entry\">link</test-item-link> </test-navigation> </qti-test> `, play: async ({ canvasElement }) => { const canvas = within(canvasElement); const link = await canvas.findByShadowText('link'); const info = await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'Info Start'); await fireEvent.click(link); const nextButton = await canvas.findByShadowText('Volgende'); await waitFor(() => expect(nextButton).toBeEnabled()); const firstItem = await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'Richard III (Take 3)'); expect(firstItem).toBeInTheDocument(); // click end attempt const endAttemptButton = await findByShadowText(canvasElement, 'End Attempt'); endAttemptButton.click(); await new Promise(resolve => setTimeout(resolve, 0)); /* why is this necessary */ // check if incorrect feedback block is visible const incorrect = await canvas.findByShadowText('Incorrect'); expect(incorrect.assignedSlot).toBeVisible(); // type York in the text field const textEntryInteraction = await canvas.findByShadowRole<HTMLInputElement>('textbox'); await userEvent.type(textEntryInteraction, 'York'); endAttemptButton.click(); await new Promise(resolve => setTimeout(resolve, 0)); /* why is this necessary */ // check if correct feedback block is visible const correct = await canvas.findByShadowText('Correct'); expect(correct.assignedSlot).toBeVisible(); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-end-attempt/test-end-attempt.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-end-attempt/test-end-attempt.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Test",
-          "declaration": {
-            "name": "Test",
-            "module": "packages/qti-test/src/components/test-end-attempt/test-end-attempt.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-end-attempt/test-end-attempt.ts",
@@ -13111,46 +12225,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-item-link/test-item-link.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/api/biologie/assessment.xml\"></test-container> ${template(args, html`Link to item`)} </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestItemLink>"
-          },
-          "default": "{ component: 'test-item-link', args: { ...args }, // itemId: 'ITM-32cjnu' - private property, set via attribute argTypes, parameters: { actions: { handles: events } } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-item-link/test-item-link.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-item-link/test-item-link.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-item-link/test-item-link.ts",
@@ -13236,46 +12310,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-navigation/test-navigation.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> ${template(args, html` <test-container test-url=\"/assets/qti-test-package/assessment.xml\"></test-container>`)} </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestNavigation>"
-          },
-          "default": "{ component: 'test-navigation', args, argTypes, parameters: { actions: { handles: events } } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-navigation/test-navigation.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-navigation/test-navigation.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-navigation/test-navigation.ts",
@@ -13543,62 +12577,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-next/test-next.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/qti-conformance/Basic/T4-T7/assessment.xml\"> </test-container> <test-prev>vorige</test-prev> ${template(args, html`volgende`)} </test-navigation> </qti-test> ` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestNext>"
-          },
-          "default": "{ component: 'test-next', args, argTypes, parameters: { actions: { handles: events } } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Test",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/qti-conformance/Basic/T4-T7/assessment.xml\"> </test-container> <test-prev>vorige</test-prev> <test-next>volgende</test-next> </test-navigation> </qti-test> `, play: async ({ canvasElement }) => { const canvas = within(canvasElement); const prevButton = canvas.getByShadowText('vorige'); const nextButton = canvas.getByShadowText('volgende'); await waitFor(() => expect(nextButton).toBeEnabled()); const firstItem = await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'T1 - Test Entry - Item 1'); expect(firstItem).toBeInTheDocument(); await new Promise(resolve => setTimeout(resolve, 500)); await fireEvent.click(nextButton); const secondItem = await getAssessmentItemFromTestContainerByDataTitle( canvasElement, 'T1 - Choice Interaction - Multiple Cardinality' ); expect(secondItem).toBeInTheDocument(); await fireEvent.click(nextButton); await new Promise(resolve => setTimeout(resolve, 1)); // minimal time to let the next button know about the update on sessionContext await fireEvent.click(nextButton); await new Promise(resolve => setTimeout(resolve, 1)); // minimal time to let the next button know about the update on sessionContext await fireEvent.click(nextButton); await new Promise(resolve => setTimeout(resolve, 1)); // minimal time to let the next button know about the update on sessionContext expect(nextButton).toBeDisabled(); await fireEvent.click(prevButton); await new Promise(resolve => setTimeout(resolve, 1)); // minimal time to let the next button know about the update on sessionContext expect(nextButton).toBeEnabled(); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-next/test-next.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-next/test-next.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Test",
-          "declaration": {
-            "name": "Test",
-            "module": "packages/qti-test/src/components/test-next/test-next.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-next/test-next.ts",
@@ -13762,62 +12740,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-paging-buttons-stamp/test-paging-buttons-stamp.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/api/biologie/assessment.xml\"></test-container> ${template( args, html`<template> <test-item-link item-id=\"{{ item.identifier }}\"> {{ item.index }} </test-item-link> </template>` )} </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestPagingButtonsStamp>"
-          },
-          "default": "{ component: 'test-paging-buttons-stamp', args, argTypes, parameters: { actions: { handles: events } } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Title",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <qti-test auto-score-items> <test-navigation .initContext=${[ { identifier: 'ITEM001', title: 'Test title', volgnummer: 2 }, { identifier: 'ITEM002', title: 'Test title 2', volgnummer: 2 } ]} .configContext=${{ infoItemCategory: 'info' }} .sessionContext=${{ navItemRefId: 'ITEM001' }} > <test-container test-url=\"/assets/api/kennisnet-1/AssessmentTest.xml\"></test-container> <test-paging-buttons-stamp data-testid=\"paging-buttons\"> <style> dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; } dt { font-weight: bold; } dd { margin: 0; /* Remove default margin */ } </style> <template> <test-item-link class=\"{{item.active ? 'active' : ''}}\" item-id=\"{{ item.identifier }}\" >{{ item.index }}:{{ item.title }}</test-item-link > </template> </test-paging-buttons-stamp> </test-navigation> </qti-test> `, play: async ({ canvasElement }) => { const canvas = within(canvasElement); // expect(nextButton).toBeDisabled(); const pagingButtons = await canvas.findByTestId('paging-buttons'); await waitFor( () => { const button = pagingButtons.querySelector('test-item-link'); if (!button) { throw new Error('interaction not loaded yet'); } }, { timeout: 5000 } ); // const allButtons = pagingButtons.querySelectorAll('test-item-link'); // waitFor(() => expect(allButtons[0].textContent).toBe(':')); // waitFor(() => expect(allButtons[1].textContent).toBe('1:Test title')); // await new Promise(resolve => setTimeout(resolve, 500)); // await fireEvent.click(allButtons[6]); // await new Promise(resolve => setTimeout(resolve, 500)); // waitFor(() => expect(allButtons[0].textContent).toBe(':')); // expect(allButtons[0].textContent).toBe('1:'); // const firstItem = await findByShadowTitle(canvasElement, 'T1 - Test Entry - Item 1'); // expect(firstItem).toBeInTheDocument(); // await new Promise(resolve => setTimeout(resolve, 50)); // await fireEvent.click(linkButton); // await new Promise(resolve => setTimeout(resolve, 50)); // const secondItem = await findByShadowTitle(canvasElement, 'T1 - Choice Interaction - Multiple Cardinality'); // expect(secondItem).toBeInTheDocument(); // await fireEvent.click(linkButton); // await new Promise(resolve => setTimeout(resolve, 50)); // await fireEvent.click(linkButton); // await new Promise(resolve => setTimeout(resolve, 50)); // expect(linkButton).toBeDisabled(); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-paging-buttons-stamp/test-paging-buttons-stamp.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-paging-buttons-stamp/test-paging-buttons-stamp.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Title",
-          "declaration": {
-            "name": "Title",
-            "module": "packages/qti-test/src/components/test-paging-buttons-stamp/test-paging-buttons-stamp.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-paging-buttons-stamp/test-paging-buttons-stamp.ts",
@@ -13892,62 +12814,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-prev/test-prev.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <qti-test> <test-navigation> <test-container test-url=\"/assets/qti-conformance/Basic/T4-T7/assessment.xml\"> </test-container> ${template(args, html`vorige`)} <test-next>volgende</test-next> </test-navigation> </qti-test> ` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestPrev>"
-          },
-          "default": "{ component: 'test-prev', args, argTypes, parameters: { actions: { handles: events } } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Test",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/qti-conformance/Basic/T4-T7/assessment.xml\"> </test-container> <test-prev>vorige</test-prev> <test-next>volgende</test-next> </test-navigation> <test-item-link item-id=\"t1-test-entry-item4\">link</test-item-link> </qti-test> `, play: async ({ canvasElement }) => { const canvas = within(canvasElement); const link = await canvas.findByShadowText('link'); await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'T1 - Test Entry - Item 1'); await fireEvent.click(link); const prevButton = canvas.getByShadowText('vorige'); const nextButton = canvas.getByShadowText('volgende'); expect(prevButton).toBeDisabled(); const firstItem = await getAssessmentItemFromTestContainerByDataTitle( canvasElement, 'T1 - Extended Text Interaction' ); expect(prevButton).not.toBeDisabled(); expect(firstItem).toBeInTheDocument(); await new Promise(resolve => setTimeout(resolve, 1)); await fireEvent.click(prevButton); await new Promise(resolve => setTimeout(resolve, 1)); await fireEvent.click(prevButton); await new Promise(resolve => setTimeout(resolve, 1)); await fireEvent.click(prevButton); const secondItem = await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'T1 - Test Entry - Item 1'); expect(secondItem).toBeInTheDocument(); expect(prevButton).toBeDisabled(); await fireEvent.click(nextButton); await new Promise(resolve => setTimeout(resolve, 1)); expect(prevButton).not.toBeDisabled(); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-prev/test-prev.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-prev/test-prev.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Test",
-          "declaration": {
-            "name": "Test",
-            "module": "packages/qti-test/src/components/test-prev/test-prev.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-prev/test-prev.ts",
@@ -14087,46 +12953,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-print-context/test-print-context.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/api/biologie/assessment.xml\"></test-container> ${template(args)} <test-next>Volgende</test-next> </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestPrintContext>"
-          },
-          "default": "{ component: 'test-print-context', args, argTypes, parameters: { actions: { handles: events } } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-print-context/test-print-context.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-print-context/test-print-context.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-print-context/test-print-context.ts",
@@ -14145,74 +12971,34 @@
               "privacy": "public",
               "parsedType": {
                 "text": "{ view: '' | 'author' | 'candidate' | 'proctor' | 'scorer' | 'testConstructor' | 'tutor', identifier: string, title: string, testParts: { active?: boolean; identifier: string; navigationMode: 'linear' | 'nonlinear'; submissionMode: 'individual' | 'simultaneous'; sections: { active?: boolean; identifier: string; title: string; completed?: boolean; items: ComputedItem[]; }[]; }[] } | undefined"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "test-print-context",
-          "customElement": true,
-          "modulePath": "packages/qti-test/src/components/test-print-context/test-print-context.ts",
-          "definitionPath": "packages/qti-test/src/components/test-print-context/test-print-context.ts"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "test-print-context",
-          "declaration": {
-            "name": "TestPrintContext",
-            "module": "packages/qti-test/src/components/test-print-context/test-print-context.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TestPrintContext",
-          "declaration": {
-            "name": "TestPrintContext",
-            "module": "packages/qti-test/src/components/test-print-context/test-print-context.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-print-item-variables/test-print-item-variables.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/api/biologie/assessment.xml\"></test-container> ${template(args)} <test-next>Volgende</test-next> </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestPrintVariables>"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
           },
-          "default": "{ component: 'test-print-item-variables', args, argTypes, parameters: { actions: { handles: events } } }"
+          "tagName": "test-print-context",
+          "customElement": true,
+          "modulePath": "packages/qti-test/src/components/test-print-context/test-print-context.ts",
+          "definitionPath": "packages/qti-test/src/components/test-print-context/test-print-context.ts"
         }
       ],
       "exports": [
         {
-          "kind": "js",
-          "name": "default",
+          "kind": "custom-element-definition",
+          "name": "test-print-context",
           "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-print-item-variables/test-print-item-variables.stories.ts"
+            "name": "TestPrintContext",
+            "module": "packages/qti-test/src/components/test-print-context/test-print-context.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Default",
+          "name": "TestPrintContext",
           "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-print-item-variables/test-print-item-variables.stories.ts"
+            "name": "TestPrintContext",
+            "module": "packages/qti-test/src/components/test-print-context/test-print-context.ts"
           }
         }
       ]
@@ -14267,62 +13053,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-scoring-buttons/test-scoring-buttons.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/test-scoring-buttons/assessment.xml\"></test-container> ${template( args, html`<template> <template type=\"repeat\" repeat=\"{{ scores }}\"> <label> <input type=\"radio\" ?checked=\"{{item == score}}\" name=\"scoring-buttons\" value=\"{{item}}\" /> <span>{{ item }}</span> </label> </template> </template>` )} <test-next>Volgende</test-next> <test-stamp> <template> {{ item.score }} </template> </test-stamp> </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestScoringButtons>"
-          },
-          "default": "{ component: 'test-scoring-buttons', args, argTypes, parameters: { actions: { handles: events } } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Test",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: Default.render, play: async ({ canvasElement }) => { const assessmentTest = await getAssessmentTest(canvasElement); expect(assessmentTest).toBeInTheDocument(); // // 2 Assume the candidate rubric is not visible // const rubricElement = await canvas.findByShadowText('candidate rubric block'); // expect(rubricElement).toBeVisible(); // // 3 Select the candidate view // // 4 Wait for the candidate rubric to be visible // expect(rubricElement).toBeVisible(); // // 5 Assume correctResponse is not set // const firstChoiceElement = await canvas.findByShadowText('Correct'); // const afterStyle = getComputedStyle(firstChoiceElement, '::after'); // expect(afterStyle.content).toBe('none'); // // 6 Set the view to scorer // await userEvent.click(switchElement); // expect(afterStyle.content).not.toBe('none'); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-scoring-buttons/test-scoring-buttons.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-scoring-buttons/test-scoring-buttons.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Test",
-          "declaration": {
-            "name": "Test",
-            "module": "packages/qti-test/src/components/test-scoring-buttons/test-scoring-buttons.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-scoring-buttons/test-scoring-buttons.ts",
@@ -14514,62 +13244,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-section-buttons-stamp/test-section-buttons-stamp.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <!-- <template item-ref><div style=\"border:2px solid red\">{{ xmlDoc }}</div></template> --> <test-navigation> ${template( args, html`<template> <test-section-link section-id=\"{{ item.identifier }}\"> {{ item.identifier }} </test-section-link> </template>` )} <test-container test-url=\"/assets/qti-test-package-stimulus/assessment.xml\"></test-container> </test-navigation> </qti-test>`, play: async ({ canvasElement }) => { const canvas = within(canvasElement); const navInfoStart = await canvas.findByShadowText('info-start'); const navBasic = await canvas.findByShadowText('basic'); const navAdvanced = await canvas.findByShadowText('advanced'); const navInfoEnd = await canvas.findByShadowText('info-end'); const firstItem = await getAssessmentItemsFromTestContainer(canvasElement); expect(firstItem[0]).toBeInTheDocument(); // Spy on event listener const eventSpy = fn(); canvasElement.addEventListener('qti-assessment-stimulus-ref-connected', eventSpy); await fireEvent.click(navInfoStart); await fireEvent.click(navBasic); // Wait until the event has been triggered four times await new Promise<void>(resolve => { const checkEventCount = () => { if (eventSpy.mock.calls.length === 4) { fireEvent.click(navAdvanced); resolve(); } else { setTimeout(checkEventCount, 10); } }; checkEventCount(); }); await fireEvent.click(navInfoEnd); const lastItem = await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'Info End'); expect(lastItem).toBeInTheDocument(); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestSectionButtonsStamp>"
-          },
-          "default": "{ component: 'test-section-buttons-stamp', args, argTypes, parameters: { actions: { handles: events } } }"
-        },
-        {
-          "kind": "variable",
-          "name": "StimulusDeliveryPlatform",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => { const placeholderRef = createRef<HTMLElement>(); return html` <qti-test @qti-assessment-stimulus-ref-connected=${async (e: Event) => { e.preventDefault(); // this prevents the default behaviour of the item to set the stimulus content const stimulusRef = e.composedPath()[0] as QtiAssessmentStimulusRef; stimulusRef.updateStimulusRef(placeholderRef.value); }} > <test-navigation> ${template( args, html`<template> <test-section-link section-id=\"{{ item.identifier }}\"> {{ item.identifier }} </test-section-link> </template>` )} <div class=\"flex\"> <div class=\"qti-base-stimulus\" ${ref(placeholderRef)}></div> <test-container test-url=\"/assets/qti-test-package-stimulus/assessment.xml\"></test-container> </div> </test-navigation> </qti-test>`; }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); const navInfoStart = await canvas.findByShadowText('info-start'); const navBasic = await canvas.findByShadowText('basic'); const navAdvanced = await canvas.findByShadowText('advanced'); const navInfoEnd = await canvas.findByShadowText('info-end'); const testContainer = await getTestContainer(canvasElement); expect(testContainer).toBeInTheDocument(); await fireEvent.click(navInfoStart); await fireEvent.click(navBasic); await fireEvent.click(navAdvanced); await fireEvent.click(navInfoEnd); const lastItem = await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'Info End'); expect(lastItem).toBeInTheDocument(); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-section-buttons-stamp/test-section-buttons-stamp.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-section-buttons-stamp/test-section-buttons-stamp.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "StimulusDeliveryPlatform",
-          "declaration": {
-            "name": "StimulusDeliveryPlatform",
-            "module": "packages/qti-test/src/components/test-section-buttons-stamp/test-section-buttons-stamp.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-section-buttons-stamp/test-section-buttons-stamp.ts",
@@ -14644,46 +13318,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-section-link/test-section-link.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/qti-test-package/assessment.xml\"></test-container> ${template(args, html`Link to section`)} </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestSectionLink & { 'section-id' }>"
-          },
-          "default": "{ component: 'test-section-link', args: { ...args, 'section-id': 'advanced' }, argTypes, parameters: { actions: { handles: events } } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-section-link/test-section-link.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-section-link/test-section-link.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-section-link/test-section-link.ts",
@@ -14764,94 +13398,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-show-correct-response/test-show-correct-response.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test> <test-navigation> <test-container test-url=\"/assets/qti-test-package/assessment.xml\"> </test-container> ${template(args, html`Show Correct`)} <test-next>Volgende</test-next> </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestShowCorrectResponse>"
-          },
-          "default": "{ component: 'test-show-correct-response', args, argTypes, parameters: { actions: { handles: events } } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Test",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <!-- <test-print-item-variables></test-print-item-variables> --> <test-container test-url=\"/assets/qti-test-package/assessment.xml\"> </test-container> <test-show-correct-response ${spread(args)}>Show correct</test-show-correct-response> <test-next>Volgende</test-next> <test-item-link item-id=\"ITM-text_entry\">link</test-item-link> </test-navigation> </qti-test> `, play: async ({ canvasElement }) => { const canvas = within(canvasElement); const link = await canvas.findByShadowText('link'); await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'Info Start'); await fireEvent.click(link); const nextButton = await canvas.findByShadowText('Volgende'); await waitFor(() => expect(nextButton).toBeEnabled()); const firstItem = await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'Richard III (Take 3)'); expect(firstItem).toBeInTheDocument(); const showCorrectButton = await findByShadowText(canvasElement, 'Show correct response'); showCorrectButton.click(); const incorrect = await canvas.findByShadowText('York'); expect(incorrect).toBeInTheDocument(); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "Test2",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/qti-test-package2/AssessmentTest.xml\"> </test-container> ${template(args, html`Show Correct`)} <test-prev>Vorige</test-prev> <test-next>Volgende</test-next> </test-navigation> </qti-test>`, play: async ({ canvasElement }) => { const canvas = within(canvasElement); const nextButton = await canvas.findByShadowText('Volgende'); await waitFor(() => expect(nextButton).toBeEnabled()); // check if show correct button is enabled const showCorrectButton = await findByShadowText(canvasElement, 'Show correct response'); await waitFor(() => expect(showCorrectButton).toBeEnabled()); // check the first alernative const firstAlternative = await findByShadowText(canvasElement, 'Richting het noorden'); await fireEvent.click(firstAlternative); // check if the item is added under the correct item-ref const itemRef = firstAlternative.closest('qti-assessment-item-ref'); expect(itemRef.getAttribute('identifier')).toBe('ODD-13122024-124755-RES1'); // navigate to the next item await fireEvent.click(nextButton); const secondAlternative = await findByShadowText(canvasElement, 'bipolaire staat'); await fireEvent.click(secondAlternative); await fireEvent.click(nextButton); // now the same item as item1 is show, check if no alternatives are selected const choiceA = await canvas.findByShadowText('Richting het noorden'); expect((choiceA.closest('qti-simple-choice') as QtiSimpleChoice).internals.states.has('--checked')).toBe(false); const choiceC = await canvas.findByShadowText('Richting het zuiden'); await fireEvent.click(choiceC); expect((choiceC.closest('qti-simple-choice') as QtiSimpleChoice).internals.states.has('--checked')).toBe(true); const prevButton = await canvas.findByShadowText('Vorige'); await fireEvent.click(prevButton); await await findByShadowText(canvasElement, 'bipolaire staat'); await fireEvent.click(prevButton); // check if A is selected again const choiceA2 = await canvas.findByShadowText('Richting het noorden'); expect((choiceA2.closest('qti-simple-choice') as QtiSimpleChoice).internals.states.has('--checked')).toBe(true); } }"
-        },
-        {
-          "kind": "variable",
-          "name": "TestFullCorrectResponse",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <!-- <test-print-item-variables></test-print-item-variables> --> <test-container test-url=\"/assets/qti-test-package/assessment.xml\"> </test-container> <test-show-correct-response ${spread(args)}>Show correct</test-show-correct-response> <test-next>Volgende</test-next> <test-item-link item-id=\"ITM-text_entry\">link</test-item-link> </test-navigation> </qti-test> `, play: async ({ canvasElement }) => { const testNavigation = document.querySelector('test-navigation') as TestNavigation; testNavigation.configContext = { correctResponseMode: 'full' }; const canvas = within(canvasElement); const link = await canvas.findByShadowText('link'); await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'Info Start'); await fireEvent.click(link); const nextButton = await canvas.findByShadowText('Volgende'); await waitFor(() => expect(nextButton).toBeEnabled()); const firstItem = await getAssessmentItemFromTestContainerByDataTitle(canvasElement, 'Richard III (Take 3)'); expect(firstItem).toBeInTheDocument(); const showCorrectButton = await findByShadowText(canvasElement, 'Show correct response'); showCorrectButton.click(); const fullCorrectResponse = await canvas.findByShadowRole('full-correct-response'); expect(fullCorrectResponse).toBeInTheDocument(); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-show-correct-response/test-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-show-correct-response/test-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Test",
-          "declaration": {
-            "name": "Test",
-            "module": "packages/qti-test/src/components/test-show-correct-response/test-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Test2",
-          "declaration": {
-            "name": "Test2",
-            "module": "packages/qti-test/src/components/test-show-correct-response/test-show-correct-response.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TestFullCorrectResponse",
-          "declaration": {
-            "name": "TestFullCorrectResponse",
-            "module": "packages/qti-test/src/components/test-show-correct-response/test-show-correct-response.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-show-correct-response/test-show-correct-response.ts",
@@ -15023,46 +13569,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-stamp/test-stamp.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <!-- <test-print-context></test-print-context> --> ${template(args, html`<template>{{ test.title }}</template>`)} ${template( args, html` <template> <ul> <li>{{ test.identifier }}</li> <li>{{ test.title }}</li> </ul> <ul> <li>{{ testpart.items }}</li> <li>{{ testpart.active }}</li> <li>{{ testpart.identifier }}</li> <li>{{ testpart.navigationMode }}</li> <li>{{ testpart.submissionMode }}</li> </ul> <ul> <li>{{ section.title }}</li> <li>{{ section.active }}</li> <li>{{ section.identifier }}</li> <li>{{required}}</li> <li>{{fixed}}</li> <li>{{visible}}</li> <li>{{keepTogether}}</li> <li>{{ section.items }}</li> </ul> <template type=\"if\" if=\"{{ testpart.items }}\"> <template type=\"repeat\" repeat=\"{{ testpart.items }}\"> <p>{{ item.identifier }}</p> </template> </template> </template> ` )} ${template( args, html` <template> <template type=\"if\" if=\"{{ section.items }}\"> <template type=\"repeat\" repeat=\"{{ section.items }}\"> <p>{{ item.identifier }}</p> </template> </template> </template> ` )} ${template(args, html`<template>{{ item.identifier }}</template>`)} <test-container test-url=\"/assets/api/kennisnet-1/AssessmentTest.xml\"></test-container> <test-next>Volgende</test-next> </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestStamp>"
-          },
-          "default": "{ component: 'test-stamp', args, argTypes, parameters: { actions: { handles: events } } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-stamp/test-stamp.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-stamp/test-stamp.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-stamp/test-stamp.ts",
@@ -15160,62 +13666,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-view-toggle/test-view-toggle.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/qti-conformance/Basic/T4-T7/assessment.xml\"></test-container> ${template(args)} </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestViewToggle>"
-          },
-          "default": "{ component: 'test-view-toggle', args, argTypes, parameters: { actions: { handles: events } }, tags: ['no-tests'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "Test",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/qti-conformance/Basic/T4-T7/assessment.xml\"> </test-container> <test-view-toggle ${spread(args)} role=\"switch\"> <template> {{ view === 'scorer' ? 'Scorer' : 'Candidate'}} </template> </test-view-toggle> </test-navigation> </qti-test> `, play: async ({ canvasElement }) => { const canvas = within(canvasElement); const switchElement = await canvas.findByShadowRole('switch'); // 1 Wait for the item to load const itemElement = await canvas.findByShadowTitle('T1 - Test Entry - Item 1'); expect(itemElement).toBeInTheDocument(); // 2 Assume the candidate rubric is not visible const rubricElement = await canvas.findByShadowText('candidate rubric block'); expect(rubricElement).toBeVisible(); // 3 Select the candidate view // 4 Wait for the candidate rubric to be visible expect(rubricElement).toBeVisible(); // 5 Assume correctResponse is not set const firstChoiceElement = await canvas.findByShadowText('Correct'); const afterStyle = getComputedStyle(firstChoiceElement, '::after'); expect(afterStyle.content).toBe('none'); // 6 Set the view to scorer await userEvent.click(switchElement); expect(afterStyle.content).not.toBe('none'); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-view-toggle/test-view-toggle.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-view-toggle/test-view-toggle.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Test",
-          "declaration": {
-            "name": "Test",
-            "module": "packages/qti-test/src/components/test-view-toggle/test-view-toggle.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-view-toggle/test-view-toggle.ts",
@@ -15293,62 +13743,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/qti-test/src/components/test-view-toggle/test-view.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/qti-conformance/Basic/T4-T7/assessment.xml\"></test-container> ${template(args)} </test-navigation> </qti-test>` }"
-        },
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta<TestViewClass>"
-          },
-          "default": "{ component: 'test-view', args, argTypes, parameters: { actions: { handles: events } }, tags: ['no-tests'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "Test",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <qti-test navigate=\"item\"> <test-navigation> <test-container test-url=\"/assets/qti-conformance/Basic/T4-T7/assessment.xml\"> </test-container> <test-view ${spread(args)}>vorige</test-view> </test-navigation> </qti-test> `, play: async ({ canvasElement }) => { const canvas = within(canvasElement); const selectElement = await canvas.findByShadowLabelText('view'); // 1 Wait for the item to load const itemElement = await canvas.findByShadowTitle('T1 - Test Entry - Item 1'); expect(itemElement).toBeInTheDocument(); // 2 Assume the candidate rubric is not visible const rubricElement = await canvas.findByShadowText('candidate rubric block'); expect(rubricElement).toBeVisible(); // 3 Select the candidate view await userEvent.selectOptions(selectElement, 'candidate'); // 4 Wait for the candidate rubric to be visible expect(rubricElement).toBeVisible(); // 5 Assume correctResponse is not set const firstChoiceElement = await canvas.findByShadowText('Correct'); const afterStyle = getComputedStyle(firstChoiceElement, '::after'); expect(afterStyle.content).toBe('none'); // 6 Set the view to scorer await userEvent.selectOptions(selectElement, 'scorer'); // Expect the correctResponse to be visible expect(afterStyle.content).not.toBe('none'); }, args: { 'view-options': 'candidate, scorer' } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "packages/qti-test/src/components/test-view-toggle/test-view.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "packages/qti-test/src/components/test-view-toggle/test-view.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Test",
-          "declaration": {
-            "name": "Test",
-            "module": "packages/qti-test/src/components/test-view-toggle/test-view.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/qti-test/src/components/test-view-toggle/test-view.ts",