@citolab/qti-components 7.14.2 → 7.14.3

package/custom-elements.json

@@ -382,6 +382,14 @@
             "name": "*",
             "package": "./qti-variable-declaration/qti-response-declaration/qti-response-declaration"
           }
+        },
+        {
+          "kind": "js",
+          "name": "QtiFeedback",
+          "declaration": {
+            "name": "QtiFeedback",
+            "module": "./qti-feedback/qti-feedback"
+          }
         }
       ]
     },
@@ -3441,6 +3449,25 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "determineMaxWidth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "dragContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "dropContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "disableDroppable",
@@ -3847,6 +3874,16 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "MAX_DRAGGABLE_WIDTH",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "600"
+            },
             {
               "kind": "field",
               "name": "maxAssociations",
@@ -3857,6 +3894,24 @@
               "attribute": "max-associations",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "measureIntrinsicSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<{ width: number; height: number }>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "MIN_DRAG_DISTANCE",
@@ -5042,6 +5097,29 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "determineMaxWidth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "dragContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "dropContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "disableDroppable",
@@ -5588,6 +5666,20 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "MAX_DRAGGABLE_WIDTH",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "600",
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "maxAssociations",
@@ -5602,6 +5694,28 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "measureIntrinsicSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<{ width: number; height: number }>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "MIN_DRAG_DISTANCE",
@@ -7441,6 +7555,29 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "determineMaxWidth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "dragContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "dropContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "disableDroppable",
@@ -7767,6 +7904,24 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "getMatches",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{ source: string; target: string }[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "responseVariable",
+                  "type": {
+                    "text": "ResponseVariable"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "getMatchMaxValue",
@@ -7987,6 +8142,20 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "MAX_DRAGGABLE_WIDTH",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "600",
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "maxAssociations",
@@ -8001,6 +8170,28 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "measureIntrinsicSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<{ width: number; height: number }>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "MIN_DRAG_DISTANCE",
@@ -8224,6 +8415,22 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "toggleCandidateCorrection",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "show",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "type": {
+                "text": "toggleCandidateCorrection(show: boolean) => void"
+              }
+            },
             {
               "kind": "method",
               "name": "toggleCorrectResponse",
@@ -9162,6 +9369,29 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "determineMaxWidth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "dragContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "dropContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "disableDroppable",
@@ -9708,6 +9938,20 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "MAX_DRAGGABLE_WIDTH",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "600",
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "maxAssociations",
@@ -9722,6 +9966,28 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "measureIntrinsicSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<{ width: number; height: number }>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "MIN_DRAG_DISTANCE",
@@ -12613,6 +12879,29 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "determineMaxWidth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "dragContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "dropContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "disableDroppable",
@@ -13196,6 +13485,20 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "MAX_DRAGGABLE_WIDTH",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "600",
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "maxAssociations",
@@ -13210,6 +13513,28 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "measureIntrinsicSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<{ width: number; height: number }>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "MIN_DRAG_DISTANCE",
@@ -14048,6 +14373,29 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "determineMaxWidth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "dragContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "dropContainer",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "disableDroppable",
@@ -14619,6 +14967,20 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "MAX_DRAGGABLE_WIDTH",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "600",
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "maxAssociations",
@@ -14633,6 +14995,28 @@
                 "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "measureIntrinsicSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<{ width: number; height: number }>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "DragDropInteractionMixin",
+                "module": "src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "MIN_DRAG_DISTANCE",
@@ -23564,6 +23948,14 @@
           },
           "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",
@@ -23646,6 +24038,14 @@
             "module": "src/lib/qti-item/components/item-show-candidate-correction.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "GapMatch",
+          "declaration": {
+            "name": "GapMatch",
+            "module": "src/lib/qti-item/components/item-show-candidate-correction.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "InlineChoice",
@@ -23928,6 +24328,14 @@
           },
           "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",
@@ -24006,7 +24414,7 @@
           "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); }); }); } }"
+          "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",
@@ -24114,6 +24522,14 @@
             "module": "src/lib/qti-item/components/item-show-correct-response.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "GapMatchCorrectResponse",
+          "declaration": {
+            "name": "GapMatchCorrectResponse",
+            "module": "src/lib/qti-item/components/item-show-correct-response.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "GraphicAssociate",

package/dist/chunks/{chunk-YD7FVKDP.js → chunk-AGV5GOTF.js}

@@ -5,10 +5,6 @@ import {
   __decorateClass
 } from "./chunk-H2JE6IVU.js";
 
-// src/lib/qti-components/qti-feedback/qti-modal-feedback/qti-modal-feedback.ts
-import { css, html } from "lit";
-import { customElement } from "lit/decorators.js";
-
 // src/lib/qti-components/qti-feedback/qti-feedback.ts
 import { consume } from "@lit/context";
 import { LitElement } from "lit";
@@ -82,6 +78,8 @@ __decorateClass([
 ], QtiFeedback.prototype, "_context", 2);
 
 // src/lib/qti-components/qti-feedback/qti-modal-feedback/qti-modal-feedback.ts
+import { css, html } from "lit";
+import { customElement } from "lit/decorators.js";
 var QtiModalFeedback = class extends QtiFeedback {
   render() {
     return html`
@@ -233,4 +231,4 @@ export {
   QtiFeedback,
   QtiModalFeedback
 };
-//# sourceMappingURL=chunk-YD7FVKDP.js.map
+//# sourceMappingURL=chunk-AGV5GOTF.js.map

package/dist/chunks/chunk-AGV5GOTF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/qti-components/qti-feedback/qti-feedback.ts","../../src/lib/qti-components/internal/utils.ts","../../src/lib/qti-components/qti-feedback/qti-modal-feedback/qti-modal-feedback.ts","../../src/lib/decorators/live-query.ts","../../src/lib/decorators/prop-internal-state.ts"],"sourcesContent":["import { consume } from '@lit/context';\nimport { LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { IsNullOrUndefined } from '../internal/utils';\nimport { itemContext } from '../../exports/qti-assessment-item.context';\n\nimport type { ItemContext } from '../../exports/item.context';\n\nexport abstract class QtiFeedback extends LitElement {\n  @property({ type: String, attribute: 'show-hide' })\n  protected showHide: string;\n\n  @property({ type: String, attribute: 'outcome-identifier' })\n  public outcomeIdentifier: string;\n\n  @property({ type: String })\n  protected identifier: string;\n\n  @property({ type: String, attribute: false })\n  public showStatus: string;\n\n  @consume({ context: itemContext, subscribe: true })\n  @state()\n  private _context?: ItemContext;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.dispatchEvent(\n      new CustomEvent<QtiFeedback>('qti-register-feedback', {\n        bubbles: true,\n        composed: true,\n        detail: this\n      })\n    );\n  }\n\n  public checkShowFeedback(outcomeIdentifier: string) {\n    const outcomeVariable = this._context.variables.find(v => v.identifier === outcomeIdentifier) || null;\n    if (this.outcomeIdentifier !== outcomeIdentifier || !outcomeVariable) return;\n    let isFound = false;\n    if (Array.isArray(outcomeVariable.value)) {\n      isFound = outcomeVariable.value.includes(this.identifier);\n    } else {\n      isFound =\n        (!IsNullOrUndefined(this.identifier) &&\n          !IsNullOrUndefined(outcomeVariable?.value) &&\n          this.identifier === outcomeVariable.value) ||\n        false;\n    }\n\n    this.showFeedback(isFound);\n  }\n\n  private showFeedback(value: boolean) {\n    this.showStatus = (value && this.showHide === 'show') || (!value && this.showHide === 'hide') ? 'on' : 'off';\n  }\n}\n","export const decimalSeparator = () => {\n  return new Intl.NumberFormat().format(0.1).replace(/\\d/g, '');\n};\n\nexport const convertNumberToUniversalFormat = (number: number | string) => {\n  // check if type is string\n  if (typeof number === 'string') {\n    return number;\n  }\n  const dSep = decimalSeparator();\n  if (dSep === '.') {\n    return number.toLocaleString();\n  } else {\n    return number.toString().replace('.', '').replace(dSep, '.');\n  }\n};\n\nexport function IsNullOrUndefined(value: unknown) {\n  return value === null || value === undefined;\n}\n\nexport function removeDoubleSlashes(str: string) {\n  const singleForwardSlashes = str\n    .replace(/([^:]\\/)\\/+/g, '$1')\n    .replace(/\\/\\//g, '/')\n    .replace('http:/', 'http://')\n    .replace('https:/', 'https://');\n  return singleForwardSlashes;\n}\n","import { css, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { QtiFeedback } from '../qti-feedback';\n\n@customElement('qti-modal-feedback')\nexport class QtiModalFeedback extends QtiFeedback {\n  static override styles = css`\n    .qti-dialog {\n      background: var(--qti-bg);\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n      border-radius: var(--qti-border-radius);\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 1000;\n      width: auto;\n      max-width: 90%;\n    }\n\n    .button {\n      border-radius: var(--qti-border-radius);\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n      background-color: var(--qti-bg-active);\n      border: var(--qti-border-active);\n      cursor: pointer;\n      position: relative;\n      display: inline-block;\n    }\n\n    .button:hover {\n      background-color: var(--qti-hover-bg);\n    }\n\n    .button:disabled {\n      background-color: var(--qti-disabled-bg);\n      color: var(--qti-disabled-color);\n      cursor: not-allowed;\n    }\n\n    .button:focus {\n      outline: var(--qti-focus-border-width) solid var(--qti-focus-color);\n    }\n  `;\n\n  override render() {\n    return html`\n      <dialog class=\"qti-dialog\" part=\"feedback\" ?open=\"${this.showStatus === 'on'}\">\n        <slot></slot>\n        <div style=\"margin-top: var(--qti-gap-size); text-align: center;\">\n          <button class=\"button close-button\" @click=\"${this.closeFeedback}\">Close</button>\n        </div>\n      </dialog>\n    `;\n  }\n\n  openFeedback() {\n    const dialog = this.shadowRoot?.querySelector('dialog') as HTMLDialogElement | null;\n    if (dialog && !dialog.open) {\n      dialog.showModal();\n    }\n  }\n\n  closeFeedback() {\n    const dialog = this.shadowRoot?.querySelector('dialog') as HTMLDialogElement | null;\n    if (dialog && dialog.open) {\n      dialog.close();\n      this.showStatus = 'off';\n    }\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    if (this.showStatus === 'on') {\n      this.openFeedback();\n    }\n  }\n\n  protected updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    if (changedProperties.has('showStatus')) {\n      if (this.showStatus === 'on') {\n        this.openFeedback();\n      } else {\n        this.closeFeedback();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-modal-feedback': QtiModalFeedback;\n  }\n}\n","import type { LitElement } from 'lit';\n\ntype LiveQueryHandler = (added: Element[], removed: Element[]) => void;\ntype LiveQueryHandlerKeys<T extends object> = {\n  [K in keyof T]-?: T[K] extends LiveQueryHandler ? K : never;\n}[keyof T];\n\ninterface LiveQueryOptions {\n  /**\n   * If true, will only start watching after the initial update/render\n   */\n  waitUntilFirstUpdate?: boolean;\n}\n\nexport function liveQuery(querySelector: string, options?: LiveQueryOptions) {\n  return <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: LiveQueryHandlerKeys<ElemClass>): void => {\n    const { connectedCallback, disconnectedCallback } = proto;\n\n    proto.connectedCallback = function (this: ElemClass) {\n      connectedCallback.call(this);\n\n      const handler = this[decoratedFnName] as unknown as LiveQueryHandler;\n\n      const callback = (mutationList: MutationRecord[]) => {\n        const added: Element[] = [];\n        const removed: Element[] = [];\n\n        for (const m of mutationList) {\n          if (m.type !== 'childList') continue;\n\n          m.addedNodes.forEach(n => {\n            if (n.nodeType !== 1) return;\n            const el = n as Element;\n            if (el.matches?.(querySelector)) added.push(el);\n            added.push(...(el.querySelectorAll?.(querySelector) ?? []));\n          });\n\n          m.removedNodes.forEach(n => {\n            if (n.nodeType !== 1) return;\n            const el = n as Element;\n            if (el.matches?.(querySelector)) removed.push(el);\n            removed.push(...(el.querySelectorAll?.(querySelector) ?? []));\n          });\n        }\n\n        // deduplicate added and removed (might be multiples since we observe both light and shadow DOM)\n        const dedupe = (arr: Element[]) => Array.from(new Set(arr));\n        const A = dedupe(added);\n        const R = dedupe(removed);\n\n        if (A.length || R.length) {\n          handler.call(this, A, R);\n        }\n      };\n\n      // observe both light and shadow DOM\n      const obsLight = new MutationObserver(callback);\n      obsLight.observe(this, { childList: true, subtree: true });\n\n      const obsShadow = this.shadowRoot ? new MutationObserver(callback) : null;\n      obsShadow?.observe(this.shadowRoot, { childList: true, subtree: true });\n\n      (this as any).__lqObservers = [obsLight, obsShadow].filter((o): o is MutationObserver => !!o);\n\n      const fireInitial = async () => {\n        if (options?.waitUntilFirstUpdate && 'updateComplete' in this) {\n          await (this as any).updateComplete;\n        }\n        const initial = [\n          ...this.querySelectorAll(querySelector),\n          ...(this.shadowRoot?.querySelectorAll(querySelector) ?? [])\n        ] as Element[];\n        if (initial.length) handler.call(this, initial, []);\n      };\n\n      void fireInitial();\n    };\n\n    proto.disconnectedCallback = function (this: ElemClass) {\n      disconnectedCallback.call(this);\n      (this as any).__lqObservers?.forEach((o: MutationObserver) => o.disconnect());\n      (this as any).__lqObservers = undefined;\n    };\n  };\n}\n","import { property } from 'lit/decorators.js';\n\nimport type { ReactiveElement } from 'lit';\nimport type { PropertyDeclaration } from 'lit';\n\n// Extended decorator options\ninterface InternalStateOptions extends PropertyDeclaration {\n  aria?: string; // Corresponding ARIA attribute, e.g., 'aria-disabled'\n}\n\nexport function propInternalState(options: InternalStateOptions) {\n  return (protoOrDescriptor: any, name: string) => {\n    // Apply the default Lit `@property` decorator\n    property(options)(protoOrDescriptor, name);\n\n    // Intercept the property descriptor to enhance functionality\n    const key = `__${name}`; // Internal backing field\n\n    Object.defineProperty(protoOrDescriptor, name, {\n      get() {\n        return this[key];\n      },\n      set(value: any) {\n        const oldValue = this[key];\n        this[key] = value;\n\n        // Trigger updates if value changes\n        if (oldValue !== value) {\n          // Update internals state\n          if (this._internals?.states) {\n            const stateName = name.toLowerCase();\n            if (value) {\n              this._internals.states.add(`--${stateName}`);\n            } else {\n              this._internals.states.delete(`--${stateName}`);\n            }\n          }\n\n          // Update ARIA attributes if specified\n          if (options.aria && this._internals) {\n            const ariaAttribute = options.aria;\n            if (value) {\n              this._internals[ariaAttribute] = 'true';\n            } else {\n              this._internals[ariaAttribute] = null;\n            }\n          }\n\n          // Request an update\n          (this as ReactiveElement).requestUpdate(name, oldValue);\n        }\n      },\n      configurable: true,\n      enumerable: true\n    });\n  };\n}\n"],"mappings":"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","names":["property"]}