From c37aa0796104a1cb8a785384fcbb929a630ed2b9 Mon Sep 17 00:00:00 2001
From: patrick <patrick.deklein@cito.nl>
Date: Mon, 6 Nov 2023 15:07:09 +0100
Subject: [PATCH] added snapshot testing

---
 .github/workflows/storybook-tests.yml         |   22 +
 .nvmrc                                        |    1 +
 .storybook/test-runner.ts                     |   16 +
 .test-runner-jest.config.js                   |   14 +
 .../qti-feedback.stories.ts.snap              |  511 ++++++++
 .../qti-associate-interaction.stories.ts.snap |   63 +
 .../qti-choice-interaction.stories.ts.snap    |  315 +++++
 ...ti-end-attempt-interaction.stories.ts.snap |   18 +
 ...-extended-text-interaction.stories.ts.snap |   21 +
 .../qti-gap-match-interaction.stories.ts.snap |  169 +++
 ...phic-associate-interaction.stories.ts.snap |   46 +
 ...phic-gap-match-interaction.stories.ts.snap |   95 ++
 ...-graphic-order-interaction.stories.ts.snap |   58 +
 .../qti-hotspot-interaction.stories.ts.snap   |  366 ++++++
 .../qti-hottext-interaction.stories.ts.snap   |  124 ++
 ...-inline-choice-interaction.stories.ts.snap |   76 ++
 .../qti-match-interaction.stories.ts.snap     |  322 +++++
 .../qti-media-interaction.stories.ts.snap     |   25 +
 .../qti-order-interaction.stories.ts.snap     |   45 +
 ...ortable-custom-interaction.stories.ts.snap |   18 +
 ...osition-object-interaction.stories.ts.snap |   19 +
 ...i-select-point-interaction.stories.ts.snap |   17 +
 .../qti-slider-interaction.stories.ts.snap    |   18 +
 ...qti-text-entry-interaction.stories.ts.snap |  149 +++
 .../__snapshots__/qti-member.stories.ts.snap  |   99 ++
 .../qti-printed-variable.stories.ts.snap      |   57 +
 .../qti-lookup-outcome-value.stories.ts.snap  |   57 +
 .../qti-set-outcome-value.stories.ts.snap     |   29 +
 .../qti-stylesheet.stories.ts.snap            |  120 ++
 .../__snapshots__/item.stories.ts.snap        |  104 ++
 .../__snapshots__/qti-styles.stories.ts.snap  |  148 +++
 .../interactions.stories.ts.snap              | 1133 +++++++++++++++++
 .../qti-components.stories.ts.snap            |  550 ++++++++
 .../qti-layout-styles.stories.ts.snap         |  349 +++++
 34 files changed, 5174 insertions(+)
 create mode 100644 .github/workflows/storybook-tests.yml
 create mode 100644 .nvmrc
 create mode 100644 .storybook/test-runner.ts
 create mode 100644 .test-runner-jest.config.js
 create mode 100644 src/lib/qti-components/qti-feedback/__snapshots__/qti-feedback.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-associate-interaction/__snapshots__/qti-associate-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-choice-interaction/__snapshots__/qti-choice-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-end-attempt-interaction/__snapshots__/qti-end-attempt-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-extended-text-interaction/__snapshots__/qti-extended-text-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-gap-match-interaction/__snapshots__/qti-gap-match-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-graphic-associate-interaction/__snapshots__/qti-graphic-associate-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-graphic-gap-match-interaction/__snapshots__/qti-graphic-gap-match-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-graphic-order-interaction/__snapshots__/qti-graphic-order-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-hotspot-interaction/__snapshots__/qti-hotspot-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-hottext-interaction/__snapshots__/qti-hottext-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-inline-choice-interaction/__snapshots__/qti-inline-choice-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-match-interaction/__snapshots__/qti-match-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-media-interaction/__snapshots__/qti-media-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-order-interaction/__snapshots__/qti-order-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-portable-custom-interaction/__snapshots__/qti-portable-custom-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-position-object-interaction/__snapshots__/qti-position-object-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-select-point-interaction/__snapshots__/qti-select-point-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-slider-interaction/__snapshots__/qti-slider-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-interaction/qti-text-entry-interaction/__snapshots__/qti-text-entry-interaction.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-response-processing/qti-expression/qti-member/__snapshots__/qti-member.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-response-processing/qti-expression/qti-printed-variable/__snapshots__/qti-printed-variable.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-response-processing/qti-rule/qti-lookup-outcome-value/__snapshots__/qti-lookup-outcome-value.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-response-processing/qti-rule/qti-set-outcome-value/__snapshots__/qti-set-outcome-value.stories.ts.snap
 create mode 100644 src/lib/qti-components/qti-stylesheet/__snapshots__/qti-stylesheet.stories.ts.snap
 create mode 100644 src/stories/__snapshots__/item.stories.ts.snap
 create mode 100644 src/styles/qti/__snapshots__/qti-styles.stories.ts.snap
 create mode 100644 src/styles/stories/__snapshots__/interactions.stories.ts.snap
 create mode 100644 src/styles/stories/__snapshots__/qti-components.stories.ts.snap
 create mode 100644 src/styles/stories/__snapshots__/qti-layout-styles.stories.ts.snap

diff --git a/.github/workflows/storybook-tests.yml b/.github/workflows/storybook-tests.yml
new file mode 100644
index 00000000..49d23f0e
--- /dev/null
+++ b/.github/workflows/storybook-tests.yml
@@ -0,0 +1,22 @@
+# .github/workflows/storybook-tests.yml
+
+name: Storybook Tests
+on: deployment_status
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run Storybook tests
+        run: yarn test-storybook
+        env:
+          TARGET_URL: '${{ github.event.deployment_status.target_url }}'
\ No newline at end of file
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..95c758ca
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v18.12.1
\ No newline at end of file
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
new file mode 100644
index 00000000..503f1af4
--- /dev/null
+++ b/.storybook/test-runner.ts
@@ -0,0 +1,16 @@
+// .storybook/test-runner.ts
+
+// pk: https://storybook.js.org/docs/web-components/writing-tests/snapshot-testing
+
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  async postRender(page, context) {
+    // the #storybook-root element wraps each story
+    const elementHandler = await page.$('#storybook-root');
+    const innerHTML = await elementHandler?.innerHTML();
+    expect(innerHTML).toMatchSnapshot();
+  }
+};
+
+export default config;
diff --git a/.test-runner-jest.config.js b/.test-runner-jest.config.js
new file mode 100644
index 00000000..d38aa012
--- /dev/null
+++ b/.test-runner-jest.config.js
@@ -0,0 +1,14 @@
+// ./test-runner-jest.config.js
+
+
+// PK: https://storybook.js.org/docs/web-components/writing-tests/snapshot-testing
+
+const path = require('path');
+
+module.exports = {
+    resolveSnapshotPath: (testPath, snapshotExtension) =>
+        path.join(process.cwd(), '__snapshots__', path.basename(testPath) + snapshotExtension),
+    resolveTestPath: (snapshotFilePath, snapshotExtension) =>
+        path.join(process.env.TEST_ROOT, path.basename(snapshotFilePath, snapshotExtension)),
+    testPathForConsistencyCheck: path.join(process.env.TEST_ROOT, 'example.test.js'),
+};
\ No newline at end of file
diff --git a/src/lib/qti-components/qti-feedback/__snapshots__/qti-feedback.stories.ts.snap b/src/lib/qti-components/qti-feedback/__snapshots__/qti-feedback.stories.ts.snap
new file mode 100644
index 00000000..3c9f8ef7
--- /dev/null
+++ b/src/lib/qti-components/qti-feedback/__snapshots__/qti-feedback.stories.ts.snap
@@ -0,0 +1,511 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-feedback inline smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item identifier="blah">
+    <qti-response-declaration identifier="RESPONSE"
+                              cardinality="single"
+                              base-type="identifier"
+    >
+      <qti-correct-response>
+      </qti-correct-response>
+    </qti-response-declaration>
+    <qti-outcome-declaration identifier="FEEDBACK"
+                             cardinality="single"
+                             base-type="identifier"
+    >
+    </qti-outcome-declaration>
+    <qti-outcome-declaration identifier="SCORE"
+                             cardinality="single"
+                             base-type="float"
+                             normal-maximum="10.0"
+    >
+      <qti-default-value>
+        <qti-value>
+          0
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-outcome-declaration identifier="MAXSCORE"
+                             cardinality="single"
+                             base-type="float"
+    >
+      <qti-default-value>
+        <qti-value>
+          10.0
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-item-body>
+      <qti-choice-interaction response-identifier="RESPONSE"
+                              shuffle="false"
+                              max-choices="1"
+      >
+        <qti-prompt slot="prompt">
+          Sigmund Freud and Carl Jung both belong to the psychoanalytic school of psychology.
+        </qti-prompt>
+        <qti-simple-choice identifier="true"
+                           fixed="true"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          True
+          <qti-feedback-inline outcome-identifier="FEEDBACK"
+                               identifier="true"
+                               show-hide="show"
+          >
+            That's correct
+          </qti-feedback-inline>
+        </qti-simple-choice>
+        <qti-simple-choice identifier="false"
+                           fixed="true"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          False
+          <qti-feedback-inline outcome-identifier="FEEDBACK"
+                               identifier="false"
+                               show-hide="show"
+          >
+            That's not correct
+          </qti-feedback-inline>
+        </qti-simple-choice>
+      </qti-choice-interaction>
+    </qti-item-body>
+    <qti-response-processing>
+      <qti-set-outcome-value identifier="FEEDBACK">
+        <qti-variable identifier="RESPONSE">
+        </qti-variable>
+      </qti-set-outcome-value>
+      <qti-response-condition>
+        <qti-response-if>
+          <qti-match>
+            <qti-variable identifier="RESPONSE">
+            </qti-variable>
+            <qti-correct identifier="RESPONSE">
+            </qti-correct>
+          </qti-match>
+          <qti-set-outcome-value identifier="SCORE">
+            <qti-variable identifier="MAXSCORE">
+            </qti-variable>
+          </qti-set-outcome-value>
+        </qti-response-if>
+      </qti-response-condition>
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
+
+exports[`lib/qti-components/qti-feedback kringloop smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item identifier="kringloop1">
+    <qti-response-declaration identifier="RESPONSE"
+                              cardinality="single"
+                              base-type="float"
+    >
+      <qti-correct-response interpretation="562 kilo">
+      </qti-correct-response>
+    </qti-response-declaration>
+    <qti-outcome-declaration identifier="SCORE"
+                             cardinality="single"
+                             base-type="float"
+    >
+      <qti-default-value>
+        <qti-value>
+          0
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-outcome-declaration identifier="FEEDBACK"
+                             cardinality="single"
+                             base-type="identifier"
+    >
+    </qti-outcome-declaration>
+    <qti-item-body xml:lang="nl-NL">
+      <div class="qti-layout-row">
+        <div class="qti-layout-col12">
+          <p>
+            <strong>
+              Hoeveel kilo afval werd er 2021 in Nederland per persoon weggegooid?
+            </strong>
+          </p>
+          <div>
+            <qti-slider-interaction response-identifier="RESPONSE"
+                                    lower-bound="0"
+                                    step="100"
+                                    upper-bound="1000"
+                                    tabindex="0"
+                                    role="slider"
+                                    aria-valuenow="0"
+                                    style="--min: 0; --step: 1; --max: 1000; --value-percentage: 0%;"
+            >
+            </qti-slider-interaction>
+            <qti-feedback-block id="feedbackblock-correct-exact"
+                                identifier="correct-exact"
+                                outcome-identifier="FEEDBACK"
+                                show-hide="show"
+            >
+              Helemaal goed! Dat is net zoveel als het gewicht van een groot paard! 🐎
+            </qti-feedback-block>
+            <qti-feedback-block id="feedbackblock-correct"
+                                identifier="correct"
+                                outcome-identifier="FEEDBACK"
+                                show-hide="show"
+            >
+              Bijna! We rekenen het goed! 562 kilo 😮 Dat is net zoveel als het gewicht van een groot paard!🐎
+            </qti-feedback-block>
+            <qti-feedback-block id="feedbackblock-incorrect-less"
+                                identifier="incorrect-less"
+                                outcome-identifier="FEEDBACK"
+                                show-hide="show"
+            >
+              Helaas het is nog meer! 562 kilo 😮! Dat is net zoveel als het gewicht van een groot paard 🐎
+            </qti-feedback-block>
+            <qti-feedback-block id="feedbackblock-incorrect-more"
+                                identifier="incorrect-more"
+                                outcome-identifier="FEEDBACK"
+                                show-hide="show"
+            >
+              Dat is niet goed, gelukkig is het minder, maar toch 562 kilo! Dat is net zoveel als het gewicht van een
+                groot paard!🐎
+            </qti-feedback-block>
+          </div>
+        </div>
+      </div>
+    </qti-item-body>
+    <qti-response-processing>
+      <qti-response-condition>
+        <qti-response-if>
+          <qti-and>
+            <qti-gte>
+              <qti-variable identifier="RESPONSE">
+              </qti-variable>
+              <qti-base-value base-type="float">
+                500
+              </qti-base-value>
+            </qti-gte>
+            <qti-lte>
+              <qti-variable identifier="RESPONSE">
+              </qti-variable>
+              <qti-base-value base-type="float">
+                600
+              </qti-base-value>
+            </qti-lte>
+          </qti-and>
+          <qti-set-outcome-value identifier="SCORE">
+            <qti-base-value base-type="float">
+              1
+            </qti-base-value>
+          </qti-set-outcome-value>
+          <qti-response-condition>
+            <qti-response-if>
+              <qti-equal>
+                <qti-variable identifier="RESPONSE">
+                </qti-variable>
+                <qti-correct identifier="RESPONSE">
+                </qti-correct>
+              </qti-equal>
+              <qti-set-outcome-value identifier="FEEDBACK">
+                <qti-base-value base-type="identifier">
+                  correct-exact
+                </qti-base-value>
+              </qti-set-outcome-value>
+            </qti-response-if>
+            <qti-response-else>
+              <qti-set-outcome-value identifier="FEEDBACK">
+                <qti-base-value base-type="string">
+                  correct
+                </qti-base-value>
+              </qti-set-outcome-value>
+            </qti-response-else>
+          </qti-response-condition>
+        </qti-response-if>
+        <qti-response-else>
+          <qti-set-outcome-value identifier="SCORE">
+            <qti-base-value base-type="float">
+              0
+            </qti-base-value>
+          </qti-set-outcome-value>
+          <qti-response-condition>
+            <qti-response-if>
+              <qti-lt>
+                <qti-variable identifier="RESPONSE">
+                </qti-variable>
+                <qti-base-value base-type="float">
+                  500
+                </qti-base-value>
+              </qti-lt>
+              <qti-set-outcome-value identifier="FEEDBACK">
+                <qti-base-value base-type="string">
+                  incorrect-less
+                </qti-base-value>
+              </qti-set-outcome-value>
+            </qti-response-if>
+            <qti-response-else>
+              <qti-set-outcome-value identifier="FEEDBACK">
+                <qti-base-value base-type="string">
+                  incorrect-more
+                </qti-base-value>
+              </qti-set-outcome-value>
+            </qti-response-else>
+          </qti-response-condition>
+        </qti-response-else>
+      </qti-response-condition>
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
+
+exports[`lib/qti-components/qti-feedback modal smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item identifier="blah">
+    <qti-response-declaration identifier="RESPONSE"
+                              cardinality="single"
+                              base-type="identifier"
+    >
+      <qti-correct-response>
+      </qti-correct-response>
+    </qti-response-declaration>
+    <qti-outcome-declaration identifier="FEEDBACK"
+                             cardinality="single"
+                             base-type="identifier"
+    >
+    </qti-outcome-declaration>
+    <qti-outcome-declaration identifier="SCORE"
+                             cardinality="single"
+                             base-type="float"
+                             normal-maximum="10.0"
+    >
+      <qti-default-value>
+        <qti-value>
+          0
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-outcome-declaration identifier="MAXSCORE"
+                             cardinality="single"
+                             base-type="float"
+    >
+      <qti-default-value>
+        <qti-value>
+          10.0
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-item-body>
+      <qti-choice-interaction response-identifier="RESPONSE"
+                              shuffle="false"
+                              max-choices="1"
+      >
+        <qti-prompt slot="prompt">
+          Sigmund Freud and Carl Jung both belong to the psychoanalytic school of psychology.
+        </qti-prompt>
+        <qti-simple-choice identifier="true"
+                           fixed="true"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          True
+        </qti-simple-choice>
+        <qti-simple-choice identifier="false"
+                           fixed="true"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          False
+        </qti-simple-choice>
+      </qti-choice-interaction>
+    </qti-item-body>
+    <qti-response-processing>
+      <qti-set-outcome-value identifier="FEEDBACK">
+        <qti-variable identifier="RESPONSE">
+        </qti-variable>
+      </qti-set-outcome-value>
+      <qti-response-condition>
+        <qti-response-if>
+          <qti-match>
+            <qti-variable identifier="RESPONSE">
+            </qti-variable>
+            <qti-correct identifier="RESPONSE">
+            </qti-correct>
+          </qti-match>
+          <qti-set-outcome-value identifier="SCORE">
+            <qti-variable identifier="MAXSCORE">
+            </qti-variable>
+          </qti-set-outcome-value>
+        </qti-response-if>
+      </qti-response-condition>
+    </qti-response-processing>
+    <qti-modal-feedback outcome-identifier="FEEDBACK"
+                        show-hide="show"
+                        identifier="true"
+    >
+      <qti-content-body>
+        correct
+      </qti-content-body>
+    </qti-modal-feedback>
+    <qti-modal-feedback outcome-identifier="FEEDBACK"
+                        show-hide="show"
+                        identifier="false"
+    >
+      <qti-content-body>
+        incorrect
+      </qti-content-body>
+    </qti-modal-feedback>
+  </qti-assessment-item>
+</div>
+`;
+
+exports[`lib/qti-components/qti-feedback woordmars smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item 2
+                       identifier="blah"
+  >
+    <qti-response-declaration identifier="RESPONSE"
+                              cardinality="single"
+                              base-type="identifier"
+    >
+      <qti-correct-response>
+      </qti-correct-response>
+    </qti-response-declaration>
+    <qti-outcome-declaration identifier="SCORE"
+                             cardinality="single"
+                             base-type="float"
+    >
+    </qti-outcome-declaration>
+    <qti-outcome-declaration identifier="FEEDBACK"
+                             cardinality="single"
+                             base-type="identifier"
+    >
+    </qti-outcome-declaration>
+    <qti-item-body>
+      <qti-choice-interaction class="qti-input-control-hidden"
+                              response-identifier="RESPONSE"
+                              max-choices="1"
+      >
+        <qti-prompt slot="prompt">
+          Wat betekent stuk?
+        </qti-prompt>
+        <qti-simple-choice identifier="A"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          Een deel
+          <qti-feedback-inline outcome-identifier="FEEDBACK"
+                               identifier="A"
+                               show-hide="show"
+          >
+            goed
+          </qti-feedback-inline>
+          <qti-feedback-inline outcome-identifier="FEEDBACK"
+                               identifier="B"
+                               show-hide="show"
+          >
+            goed
+          </qti-feedback-inline>
+          <qti-feedback-inline outcome-identifier="FEEDBACK"
+                               identifier="C"
+                               show-hide="show"
+          >
+            goed
+          </qti-feedback-inline>
+          <qti-feedback-inline outcome-identifier="FEEDBACK"
+                               identifier="D"
+                               show-hide="show"
+          >
+            goed
+          </qti-feedback-inline>
+        </qti-simple-choice>
+        <qti-simple-choice identifier="B"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          Een gat
+          <qti-feedback-inline outcome-identifier="FEEDBACK"
+                               identifier="B"
+                               show-hide="show"
+          >
+            fout
+          </qti-feedback-inline>
+        </qti-simple-choice>
+        <qti-simple-choice identifier="C"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          Een krant
+          <qti-feedback-inline outcome-identifier="FEEDBACK"
+                               identifier="C"
+                               show-hide="show"
+          >
+            fout
+          </qti-feedback-inline>
+        </qti-simple-choice>
+        <qti-simple-choice identifier="D"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          Een steen
+          <qti-feedback-inline outcome-identifier="FEEDBACK"
+                               identifier="D"
+                               show-hide="show"
+          >
+            fout
+          </qti-feedback-inline>
+        </qti-simple-choice>
+      </qti-choice-interaction>
+    </qti-item-body>
+    <qti-response-processing>
+      <qti-set-outcome-value identifier="FEEDBACK">
+        <qti-variable identifier="RESPONSE">
+        </qti-variable>
+      </qti-set-outcome-value>
+      <qti-response-condition>
+        <qti-response-if>
+          <qti-match>
+            <qti-variable identifier="RESPONSE">
+            </qti-variable>
+            <qti-correct identifier="RESPONSE">
+            </qti-correct>
+          </qti-match>
+          <qti-set-outcome-value identifier="SCORE">
+            <qti-base-value base-type="float">
+              1
+            </qti-base-value>
+          </qti-set-outcome-value>
+        </qti-response-if>
+        <qti-response-else>
+          <qti-set-outcome-value identifier="SCORE">
+            <qti-base-value base-type="float">
+              0
+            </qti-base-value>
+          </qti-set-outcome-value>
+        </qti-response-else>
+      </qti-response-condition>
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-associate-interaction/__snapshots__/qti-associate-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-associate-interaction/__snapshots__/qti-associate-interaction.stories.ts.snap
new file mode 100644
index 00000000..4a66a1f5
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-associate-interaction/__snapshots__/qti-associate-interaction.stories.ts.snap
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-associate-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-associate-interaction class
+                             min-associations="1"
+                             max-associations="1"
+  >
+    <qti-prompt>
+      Hidden in this list of characters from famous Shakespeare plays are three pairs of rivals. Can you match each
+        character to his adversary?
+    </qti-prompt>
+    <qti-simple-associable-choice identifier="A"
+                                  match-max="1"
+                                  qti-draggable="true"
+                                  slot="qti-simple-associable-choice"
+                                  part="qti-simple-associable-choice"
+    >
+      Antonio
+    </qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="C"
+                                  match-max="1"
+                                  qti-draggable="true"
+                                  slot="qti-simple-associable-choice"
+                                  part="qti-simple-associable-choice"
+    >
+      Capulet
+    </qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="D"
+                                  match-max="1"
+                                  qti-draggable="true"
+                                  slot="qti-simple-associable-choice"
+                                  part="qti-simple-associable-choice"
+    >
+      Demetrius
+    </qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="L"
+                                  match-max="1"
+                                  qti-draggable="true"
+                                  slot="qti-simple-associable-choice"
+                                  part="qti-simple-associable-choice"
+    >
+      Lysander
+    </qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="M"
+                                  match-max="1"
+                                  qti-draggable="true"
+                                  slot="qti-simple-associable-choice"
+                                  part="qti-simple-associable-choice"
+    >
+      Montague
+    </qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="P"
+                                  match-max="1"
+                                  qti-draggable="true"
+                                  slot="qti-simple-associable-choice"
+                                  part="qti-simple-associable-choice"
+    >
+      Prospero
+    </qti-simple-associable-choice>
+  </qti-associate-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-choice-interaction/__snapshots__/qti-choice-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-choice-interaction/__snapshots__/qti-choice-interaction.stories.ts.snap
new file mode 100644
index 00000000..cbb10332
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-choice-interaction/__snapshots__/qti-choice-interaction.stories.ts.snap
@@ -0,0 +1,315 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-choice-interaction ContentEditable smoke-test 1`] = `
+<div id="root-inner">
+  <div contenteditable="true">
+    <qti-choice-interaction response-identifier="RESPONSE">
+      <qti-prompt slot="prompt">
+        Can you start editting one of these simplechoices
+      </qti-prompt>
+      <qti-simple-choice identifier="choice-1"
+                         role="radio"
+                         tabindex="0"
+                         aria-disabled="false"
+                         aria-readonly="false"
+                         aria-checked="false"
+      >
+        I think you can use WorkFlow.
+      </qti-simple-choice>
+      <qti-simple-choice identifier="choice-2"
+                         role="radio"
+                         tabindex="0"
+                         aria-disabled="false"
+                         aria-readonly="false"
+                         aria-checked="false"
+      >
+        <br>
+      </qti-simple-choice>
+      <qti-simple-choice identifier="choice-3"
+                         role="radio"
+                         tabindex="0"
+                         aria-disabled="false"
+                         aria-readonly="false"
+                         aria-checked="false"
+      >
+        No you should use Workload Rage.
+      </qti-simple-choice>
+      <qti-simple-choice identifier="choice-4"
+                         role="radio"
+                         tabindex="0"
+                         aria-disabled="false"
+                         aria-readonly="false"
+                         aria-checked="false"
+      >
+        <br>
+      </qti-simple-choice>
+    </qti-choice-interaction>
+  </div>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-choice-interaction CorrectResponse play-test 1`] = `
+<div id="root-inner">
+  <qti-choice-interaction data-testid="qti-choice-interaction"
+                          data-max-selections-message="Too little selections made"
+                          data-min-selections-message="Too much selections made"
+                          response-identifier
+                          class="qti-input-control-hidden qti-choices-stacking-2"
+                          min-choices="1"
+                          max-choices="2"
+                          orientation="vertical"
+  >
+    <qti-prompt slot="prompt">
+      <p>
+        Which of the following features are
+        <strong>
+          new
+        </strong>
+        to QTI 3?
+      </p>
+      <p>
+        Pick 1 choice.
+      </p>
+    </qti-prompt>
+    <qti-simple-choice data-testid="choice-0"
+                       identifier="choice-0"
+                       role="checkbox"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+                       data-correct-response="false"
+    >
+      I think you can use WorkFlow.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-1"
+                       identifier="choice-1"
+                       role="checkbox"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+                       data-correct-response="true"
+    >
+      You should use FlowChart
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-2"
+                       identifier="choice-2"
+                       role="checkbox"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+                       data-correct-response="true"
+    >
+      No you should use Workload Rage.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-3"
+                       identifier="choice-3"
+                       role="checkbox"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+                       data-correct-response="false"
+    >
+      I would recommend Chart Up.
+    </qti-simple-choice>
+  </qti-choice-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-choice-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-choice-interaction data-testid="qti-choice-interaction"
+                          data-max-selections-message="Too little selections made"
+                          data-min-selections-message="Too much selections made"
+                          response-identifier
+  >
+    <qti-prompt slot="prompt">
+      <p>
+        Which of the following features are
+        <strong>
+          new
+        </strong>
+        to QTI 3?
+      </p>
+      <p>
+        Pick 1 choice.
+      </p>
+    </qti-prompt>
+    <qti-simple-choice data-testid="choice-0"
+                       identifier="choice-0"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      I think you can use WorkFlow.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-1"
+                       identifier="choice-1"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      You should use FlowChart
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-2"
+                       identifier="choice-2"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      No you should use Workload Rage.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-3"
+                       identifier="choice-3"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      I would recommend Chart Up.
+    </qti-simple-choice>
+  </qti-choice-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-choice-interaction Multiple smoke-test 1`] = `
+<div id="root-inner">
+  <qti-choice-interaction data-testid="qti-choice-interaction"
+                          data-max-selections-message="Too little selections made"
+                          data-min-selections-message="Too much selections made"
+                          response-identifier
+                          class="qti-choices-stacking-2"
+                          min-choices="1"
+                          max-choices="2"
+                          orientation="vertical"
+  >
+    <qti-prompt slot="prompt">
+      <p>
+        Which of the following features are
+        <strong>
+          new
+        </strong>
+        to QTI 3?
+      </p>
+      <p>
+        Pick 1 choice.
+      </p>
+    </qti-prompt>
+    <qti-simple-choice data-testid="choice-0"
+                       identifier="choice-0"
+                       role="checkbox"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      I think you can use WorkFlow.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-1"
+                       identifier="choice-1"
+                       role="checkbox"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      You should use FlowChart
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-2"
+                       identifier="choice-2"
+                       role="checkbox"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      No you should use Workload Rage.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-3"
+                       identifier="choice-3"
+                       role="checkbox"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      I would recommend Chart Up.
+    </qti-simple-choice>
+  </qti-choice-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-choice-interaction Simple smoke-test 1`] = `
+<div id="root-inner">
+  <qti-choice-interaction data-testid="qti-choice-interaction"
+                          data-max-selections-message="Too little selections made"
+                          data-min-selections-message="Too much selections made"
+                          response-identifier
+                          class="qti-input-control-hidden qti-choices-stacking-2"
+                          orientation="vertical"
+  >
+    <qti-prompt slot="prompt">
+      <p>
+        Which of the following features are
+        <strong>
+          new
+        </strong>
+        to QTI 3?
+      </p>
+      <p>
+        Pick 1 choice.
+      </p>
+    </qti-prompt>
+    <qti-simple-choice data-testid="choice-0"
+                       identifier="choice-0"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      I think you can use WorkFlow.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-1"
+                       identifier="choice-1"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      You should use FlowChart
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-2"
+                       identifier="choice-2"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      No you should use Workload Rage.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-3"
+                       identifier="choice-3"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      I would recommend Chart Up.
+    </qti-simple-choice>
+  </qti-choice-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-end-attempt-interaction/__snapshots__/qti-end-attempt-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-end-attempt-interaction/__snapshots__/qti-end-attempt-interaction.stories.ts.snap
new file mode 100644
index 00000000..7380f69f
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-end-attempt-interaction/__snapshots__/qti-end-attempt-interaction.stories.ts.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-end-attempt-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item>
+    <qti-item-body>
+      <qti-printed-variable class="qti-well"
+                            identifier="numAttempts"
+      >
+      </qti-printed-variable>
+      <qti-end-attempt-interaction title="test num attempts">
+      </qti-end-attempt-interaction>
+    </qti-item-body>
+    <qti-response-processing>
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-extended-text-interaction/__snapshots__/qti-extended-text-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-extended-text-interaction/__snapshots__/qti-extended-text-interaction.stories.ts.snap
new file mode 100644
index 00000000..12ed6e1a
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-extended-text-interaction/__snapshots__/qti-extended-text-interaction.stories.ts.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-extended-text-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-extended-text-interaction response-identifier
+                                 class
+  >
+  </qti-extended-text-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-extended-text-interaction PatternMask smoke-test 1`] = `
+<div id="root-inner">
+  <qti-extended-text-interaction response-identifier
+                                 class
+                                 pattern-mask="[A-Za-z]{3}"
+                                 data-patternmask-message="Alleen maar 3 letters toegestaan"
+  >
+  </qti-extended-text-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-gap-match-interaction/__snapshots__/qti-gap-match-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-gap-match-interaction/__snapshots__/qti-gap-match-interaction.stories.ts.snap
new file mode 100644
index 00000000..a7677b72
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-gap-match-interaction/__snapshots__/qti-gap-match-interaction.stories.ts.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-gap-match-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-gap-match-interaction min-associations="1"
+                             max-associations="1"
+  >
+    <qti-gap-text identifier="W"
+                  match-max="1"
+                  qti-draggable="true"
+                  slot="qti-gap-text"
+                  tabindex="0"
+    >
+      winter
+    </qti-gap-text>
+    <qti-gap-text identifier="Sp"
+                  match-max="1"
+                  qti-draggable="true"
+                  slot="qti-gap-text"
+                  tabindex="0"
+    >
+      spring
+    </qti-gap-text>
+    <qti-gap-text identifier="Su"
+                  match-max="1"
+                  qti-draggable="true"
+                  slot="qti-gap-text"
+                  tabindex="0"
+    >
+      summer
+    </qti-gap-text>
+    <qti-gap-text identifier="A"
+                  match-max="1"
+                  qti-draggable="true"
+                  slot="qti-gap-text"
+                  tabindex="0"
+    >
+      autumn
+    </qti-gap-text>
+    <blockquote>
+      <p>
+        Now is the
+        <qti-gap identifier="G1"
+                 dropzone="move"
+                 tabindex="0"
+        >
+        </qti-gap>
+        of our discontent
+        <br>
+        Made glorious
+        <qti-gap identifier="G2"
+                 dropzone="move"
+                 tabindex="0"
+        >
+        </qti-gap>
+        by this sun of York;
+        <br>
+        And all the clouds that lour'd upon our house
+        <br>
+        In the deep bosom of the ocean buried.
+      </p>
+    </blockquote>
+  </qti-gap-match-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-gap-match-interaction Example smoke-test 1`] = `
+<div id="root-inner">
+  <button>
+    processResponse
+  </button>
+  <button>
+    set correct response
+  </button>
+  <qti-assessment-item identifier="gap-match-item">
+    <qti-response-declaration base-type="directedPair"
+                              cardinality="multiple"
+                              identifier="RESPONSE"
+    >
+      <qti-correct-response>
+      </qti-correct-response>
+      <qti-mapping default-value="-1"
+                   lower-bound="0"
+      >
+        <qti-map-entry map-key="W G1"
+                       mapped-value="1"
+        >
+        </qti-map-entry>
+        <qti-map-entry map-key="Su G2"
+                       mapped-value="2"
+        >
+        </qti-map-entry>
+      </qti-mapping>
+    </qti-response-declaration>
+    <qti-outcome-declaration basetype="float"
+                             cardinality="single"
+                             identifier="SCORE"
+    >
+    </qti-outcome-declaration>
+    <qti-item-body>
+      <qti-gap-match-interaction class="qti-choices-top"
+                                 response-identifier="RESPONSE"
+                                 shuffle="false"
+                                 min-associations="1"
+                                 max-associations="1"
+      >
+        <qti-gap-text data-testid="choice-1"
+                      identifier="W"
+                      match-max="1"
+                      qti-draggable="true"
+                      slot="qti-gap-text"
+                      tabindex="0"
+        >
+          winter
+        </qti-gap-text>
+        <qti-gap-text identifier="Sp"
+                      match-max="1"
+                      qti-draggable="true"
+                      slot="qti-gap-text"
+                      tabindex="0"
+        >
+          spring
+        </qti-gap-text>
+        <qti-gap-text identifier="Su"
+                      match-max="1"
+                      qti-draggable="true"
+                      slot="qti-gap-text"
+                      tabindex="0"
+        >
+          summer
+        </qti-gap-text>
+        <qti-gap-text identifier="A"
+                      match-max="1"
+                      qti-draggable="true"
+                      slot="qti-gap-text"
+                      tabindex="0"
+        >
+          autumn
+        </qti-gap-text>
+        <blockquote>
+          <p>
+            Now is the
+            <qti-gap identifier="G1"
+                     dropzone="move"
+                     tabindex="0"
+            >
+            </qti-gap>
+            of our discontent
+            <br>
+            Made glorious
+            <qti-gap identifier="G2"
+                     dropzone="move"
+                     tabindex="0"
+            >
+            </qti-gap>
+            by this sun of York;
+            <br>
+            And all the clouds that lour'd upon our house
+            <br>
+            In the deep bosom of the ocean buried.
+          </p>
+        </blockquote>
+      </qti-gap-match-interaction>
+    </qti-item-body>
+    <qti-response-processing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/map_response">
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-graphic-associate-interaction/__snapshots__/qti-graphic-associate-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-graphic-associate-interaction/__snapshots__/qti-graphic-associate-interaction.stories.ts.snap
new file mode 100644
index 00000000..7e976dcc
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-graphic-associate-interaction/__snapshots__/qti-graphic-associate-interaction.stories.ts.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-graphic-associate-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-graphic-associate-interaction response-identifier="RESPONSE"
+                                     max-associations="3"
+  >
+    <qti-prompt slot="prompt">
+      Mark the airline's new routes on the airport map:
+    </qti-prompt>
+    <img src="qti-graphic-associate-interaction/uk.png"
+         alt="Map of United Kingdom airports"
+         width="206"
+         height="280"
+    >
+    <qti-associable-hotspot shape="circle"
+                            coords="78,102,8"
+                            identifier="A"
+                            match-max="3"
+                            style="left: 78px; top: 102px; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot shape="circle"
+                            coords="117,171,8"
+                            identifier="B"
+                            match-max="3"
+                            style="left: 117px; top: 171px; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot shape="circle"
+                            coords="166,227,8"
+                            identifier="C"
+                            match-max="3"
+                            style="left: 166px; top: 227px; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot shape="circle"
+                            coords="100,102,8"
+                            identifier="D"
+                            match-max="3"
+                            style="left: 100px; top: 102px; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-associable-hotspot>
+  </qti-graphic-associate-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-graphic-gap-match-interaction/__snapshots__/qti-graphic-gap-match-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-graphic-gap-match-interaction/__snapshots__/qti-graphic-gap-match-interaction.stories.ts.snap
new file mode 100644
index 00000000..430e9a5a
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-graphic-gap-match-interaction/__snapshots__/qti-graphic-gap-match-interaction.stories.ts.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-graphic-gap-match-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-graphic-gap-match-interaction class="qti-choices-top qti-selections-dark"
+                                     response-identifier="RESPONSE"
+                                     shuffle="false"
+                                     min-associations="0"
+                                     max-associations="4"
+                                     data-choices-container-width="376"
+  >
+    <img alt="timeline from 1939 to 1991"
+         src="qti-graphic-gap-match-interaction/timeline-558.png"
+         height="326"
+         width="558"
+    >
+    <qti-gap-img identifier="DraggerA"
+                 match-max="1"
+                 qti-draggable="true"
+                 slot="qti-gap-img"
+    >
+      <img src="qti-graphic-gap-match-interaction/a-cw.png"
+           alt="Choice A, The Cold War Ends"
+           height="63"
+           width="78"
+      >
+    </qti-gap-img>
+    <qti-gap-img identifier="DraggerB"
+                 match-max="1"
+                 qti-draggable="true"
+                 slot="qti-gap-img"
+    >
+      <img src="qti-graphic-gap-match-interaction/b-ww2.png"
+           alt="Choice B, World War 2 Ends"
+           height="63"
+           width="78"
+      >
+    </qti-gap-img>
+    <qti-gap-img identifier="DraggerC"
+                 match-max="1"
+                 qti-draggable="true"
+                 slot="qti-gap-img"
+    >
+      <img src="qti-graphic-gap-match-interaction/c-vietnam.png"
+           alt="Choice C, Vietnam Conflict Ends"
+           height="63"
+           width="78"
+      >
+    </qti-gap-img>
+    <qti-gap-img identifier="DraggerD"
+                 match-max="1"
+                 qti-draggable="true"
+                 slot="qti-gap-img"
+    >
+      <img src="qti-graphic-gap-match-interaction/d-bay.png"
+           alt="Choice D, Bay of Pigs"
+           height="63"
+           width="78"
+      >
+    </qti-gap-img>
+    <qti-associable-hotspot coords="55,256,133,319"
+                            identifier="A"
+                            match-max="1"
+                            shape="rect"
+                            dropzone="move"
+                            style="left: 55px; top: 256px; width: 78px; height: 63px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot coords="190,256,268,319"
+                            identifier="B"
+                            match-max="1"
+                            shape="rect"
+                            dropzone="move"
+                            style="left: 190px; top: 256px; width: 78px; height: 63px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot coords="309,256,387,319"
+                            identifier="C"
+                            match-max="1"
+                            shape="rect"
+                            dropzone="move"
+                            style="left: 309px; top: 256px; width: 78px; height: 63px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot coords="450,256,528,319"
+                            identifier="D"
+                            match-max="1"
+                            shape="rect"
+                            dropzone="move"
+                            style="left: 450px; top: 256px; width: 78px; height: 63px;"
+    >
+    </qti-associable-hotspot>
+  </qti-graphic-gap-match-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-graphic-order-interaction/__snapshots__/qti-graphic-order-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-graphic-order-interaction/__snapshots__/qti-graphic-order-interaction.stories.ts.snap
new file mode 100644
index 00000000..906a2883
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-graphic-order-interaction/__snapshots__/qti-graphic-order-interaction.stories.ts.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-graphic-order-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-graphic-order-interaction max-choices="0"
+                                 response-identifier="RESPONSE1"
+  >
+    <img src="qti-graphic-order-interaction/uk.png"
+         height="280"
+         width="206"
+    >
+    <qti-hotspot-choice coords="78,102,8"
+                        identifier="A"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 33.9806%; top: 32.5451%; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice coords="117,171,8"
+                        identifier="B"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 52.9126%; top: 57.1879%; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice coords="166,227,8"
+                        identifier="C"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 76.699%; top: 77.1879%; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice coords="100,102,8"
+                        identifier="D"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 44.6602%; top: 32.5451%; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+  </qti-graphic-order-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-hotspot-interaction/__snapshots__/qti-hotspot-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-hotspot-interaction/__snapshots__/qti-hotspot-interaction.stories.ts.snap
new file mode 100644
index 00000000..0e0c204f
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-hotspot-interaction/__snapshots__/qti-hotspot-interaction.stories.ts.snap
@@ -0,0 +1,366 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-hotspot-interaction Circle smoke-test 1`] = `
+<div id="root-inner">
+  <qti-hotspot-interaction max-choices="0"
+                           response-identifier="RESPONSE1"
+  >
+    <img src="qti-hotspot-interaction/uk.png"
+         height="280"
+         width="206"
+    >
+    <qti-hotspot-choice coords="77,115,10"
+                        identifier="A"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 32.5243%; top: 36.2171%; height: 19.4175px; width: 19.4175px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice coords="118,184,10"
+                        identifier="B"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 52.4272%; top: 60.8599%; height: 19.4175px; width: 19.4175px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice coords="150,235,10"
+                        identifier="C"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 67.9612%; top: 79.0742%; height: 19.4175px; width: 19.4175px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice coords="96,114,10"
+                        identifier="D"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 41.7476%; top: 35.8599%; height: 19.4175px; width: 19.4175px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+  </qti-hotspot-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-hotspot-interaction Poly smoke-test 1`] = `
+<div id="root-inner">
+  <qti-hotspot-interaction response-identifier="RESPONSE"
+                           min-choices="1"
+                           max-choices="16"
+  >
+    <img src="/qti-hotspot-interaction/VH5BG1e_v2.png"
+         width="602"
+         height="452"
+    >
+    <qti-hotspot-choice identifier="A"
+                        coords="288,219,251,183,215,147,179,110,142,74,129,89,117,105,106,122,97,140,145,160,192,180,240,200,288,219"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 16.113%; top: 16.3717%; width: 31.7276%; height: 32.0796%; clip-path: polygon(100% 100%, 81% 75%, 62% 50%, 43% 25%, 24% 0%, 17% 10%, 10% 21%, 5% 33%, 0% 46%, 25% 59%, 50% 73%, 75% 87%, 100% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="B"
+                        coords="306,227,354,247,402,267,450,286,498,306,504,287,509,268,512,248,513,227,461,227,409,227,358,227,306,227"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.8306%; top: 50.2212%; width: 34.3854%; height: 17.4779%; clip-path: polygon(0% 0%, 23% 25%, 46% 51%, 70% 75%, 93% 100%, 96% 76%, 98% 52%, 100% 27%, 100% 0%, 75% 0%, 50% 0%, 25% 0%, 0% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="C"
+                        coords="304,230,341,267,378,304,415,341,451,378,465,362,477,346,487,328,496,310,448,290,400,270,352,250,304,230"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.4983%; top: 50.885%; width: 31.8937%; height: 32.7434%; clip-path: polygon(0% 0%, 19% 25%, 39% 50%, 58% 75%, 77% 100%, 84% 89%, 90% 78%, 95% 66%, 100% 54%, 75% 41%, 50% 27%, 25% 14%, 0% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="D"
+                        coords="306,223,358,223,409,223,461,223,513,223,511,202,508,182,503,163,496,144,449,164,401,183,354,203,306,223"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.8306%; top: 31.8584%; width: 34.3854%; height: 17.4779%; clip-path: polygon(0% 100%, 25% 100%, 50% 100%, 75% 100%, 100% 100%, 99% 73%, 98% 48%, 95% 24%, 92% 0%, 69% 25%, 46% 49%, 23% 75%, 0% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="E"
+                        coords="290,233,254,270,217,307,180,344,143,380,158,394,175,406,192,417,211,426,231,378,251,330,270,281,290,233"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 23.7542%; top: 51.5487%; width: 24.4186%; height: 42.6991%; clip-path: polygon(100% 0%, 76% 19%, 50% 38%, 25% 58%, 0% 76%, 10% 83%, 22% 90%, 33% 95%, 46% 100%, 60% 75%, 73% 50%, 86% 25%, 100% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="F"
+                        coords="302,233,322,281,341,330,361,378,381,426,400,417,417,406,434,394,449,380,412,344,375,307,338,270,302,233"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.1661%; top: 51.5487%; width: 24.4186%; height: 42.6991%; clip-path: polygon(0% 0%, 14% 25%, 27% 50%, 40% 75%, 54% 100%, 67% 95%, 78% 90%, 90% 83%, 100% 76%, 75% 58%, 50% 38%, 24% 19%, 0% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="G"
+                        coords="294,235,274,283,254,331,234,379,214,427,233,434,253,439,273,442,294,443,294,391,294,339,294,287,294,235"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 35.5482%; top: 51.9912%; width: 13.289%; height: 46.0177%; clip-path: polygon(100% 0%, 75% 23%, 50% 46%, 25% 69%, 0% 92%, 24% 96%, 49% 98%, 74% 100%, 100% 100%, 100% 75%, 100% 50%, 100% 25%, 100% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="H"
+                        coords="298,235,298,287,298,339,298,391,298,443,319,442,339,439,359,434,378,427,358,379,338,331,318,283,298,235"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 49.5017%; top: 51.9912%; width: 13.289%; height: 46.0177%; clip-path: polygon(0% 0%, 0% 25%, 0% 50%, 0% 75%, 0% 100%, 26% 100%, 51% 98%, 76% 96%, 100% 92%, 75% 69%, 50% 46%, 25% 23%, 0% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="I"
+                        coords="286,227,234,227,183,227,131,227,79,227,80,248,83,268,88,287,94,306,142,286,190,267,238,247,286,227"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 13.1229%; top: 50.2212%; width: 34.3854%; height: 17.4779%; clip-path: polygon(100% 0%, 75% 0%, 50% 0%, 25% 0%, 0% 0%, 0% 27%, 2% 52%, 4% 76%, 7% 100%, 30% 75%, 54% 51%, 77% 25%, 100% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="J"
+                        coords="286,223,238,203,191,183,143,164,96,144,89,163,84,182,81,202,79,223,131,223,183,223,234,223,286,223"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 13.1229%; top: 31.8584%; width: 34.3854%; height: 17.4779%; clip-path: polygon(100% 100%, 77% 75%, 54% 49%, 31% 25%, 8% 0%, 5% 24%, 2% 48%, 1% 73%, 0% 100%, 25% 100%, 50% 100%, 75% 100%, 100% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="K"
+                        coords="294,10,273,11,253,14,234,19,215,25,235,73,255,120,274,168,294,215,294,164,294,112,294,61,294,10"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 35.7143%; top: 2.21239%; width: 13.1229%; height: 45.354%; clip-path: polygon(100% 0%, 73% 0%, 48% 2%, 24% 4%, 0% 7%, 25% 31%, 51% 54%, 75% 77%, 100% 100%, 100% 75%, 100% 50%, 100% 25%, 100% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="L"
+                        coords="495,140,486,122,475,105,463,89,450,74,413,110,377,147,341,183,304,219,352,200,400,180,447,160,495,140"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.4983%; top: 16.3717%; width: 31.7276%; height: 32.0796%; clip-path: polygon(100% 46%, 95% 33%, 90% 21%, 83% 10%, 76% 0%, 57% 25%, 38% 50%, 19% 75%, 0% 100%, 25% 87%, 50% 73%, 75% 59%, 100% 46%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="M"
+                        coords="302,216,338,180,374,144,411,107,447,71,432,58,416,46,399,35,380,27,361,74,341,122,321,169,302,216"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.1661%; top: 5.97345%; width: 24.0864%; height: 41.8142%; clip-path: polygon(0% 100%, 25% 81%, 50% 62%, 75% 42%, 100% 23%, 90% 16%, 79% 10%, 67% 4%, 54% 0%, 41% 25%, 27% 50%, 13% 75%, 0% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="N"
+                        coords="298,215,318,168,337,120,357,73,377,25,358,19,339,14,319,11,298,10,298,61,298,112,298,164,298,215"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 49.5017%; top: 2.21239%; width: 13.1229%; height: 45.354%; clip-path: polygon(0% 100%, 25% 77%, 49% 54%, 75% 31%, 100% 7%, 76% 4%, 52% 2%, 27% 0%, 0% 0%, 0% 25%, 0% 50%, 0% 75%, 0% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="O"
+                        coords="290,216,271,169,251,122,231,74,212,27,193,35,176,46,160,58,145,71,181,107,218,144,254,180,290,216"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 24.0864%; top: 5.97345%; width: 24.0864%; height: 41.8142%; clip-path: polygon(100% 100%, 87% 75%, 73% 50%, 59% 25%, 46% 0%, 33% 4%, 21% 10%, 10% 16%, 0% 23%, 25% 42%, 50% 62%, 75% 81%, 100% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="P"
+                        coords="288,230,240,250,192,270,144,290,96,310,105,328,115,346,127,362,141,378,177,341,214,304,251,267,288,230"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 15.9468%; top: 50.885%; width: 31.8937%; height: 32.7434%; clip-path: polygon(100% 0%, 75% 14%, 50% 27%, 25% 41%, 0% 54%, 5% 66%, 10% 78%, 16% 89%, 23% 100%, 42% 75%, 61% 50%, 81% 25%, 100% 0%);"
+    >
+    </qti-hotspot-choice>
+  </qti-hotspot-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-hotspot-interaction Rect smoke-test 1`] = `
+<div id="root-inner">
+  <qti-hotspot-interaction response-identifier="RESPONSE3"
+                           max-choices="0"
+                           min-choices="0"
+  >
+    <qti-prompt>
+      <strong>
+        Cliquer sur le nom des organes où passent les aliments.
+      </strong>
+    </qti-prompt>
+    <img src="/qti-hotspot-interaction/hotspot.PNG"
+         width="688"
+         height="558"
+    >
+    <qti-hotspot-choice identifier="hotspot_1"
+                        shape="rect"
+                        coords="484,68,655,112"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 70.3488%; top: 12.1864%; width: 24.8547%; height: 7.8853%;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="hotspot_2"
+                        shape="rect"
+                        coords="18,67,190,112"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 2.61628%; top: 12.0072%; width: 25%; height: 8.06452%;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="hotspot_3"
+                        shape="rect"
+                        coords="19,178,191,221"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 2.76163%; top: 31.8996%; width: 25%; height: 7.70609%;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="hotspot_4"
+                        shape="rect"
+                        coords="19,281,191,327"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 2.76163%; top: 50.3584%; width: 25%; height: 8.24373%;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="hotspot_5"
+                        shape="rect"
+                        coords="18,380,191,426"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 2.61628%; top: 68.1004%; width: 25.1453%; height: 8.24373%;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="hotspot_6"
+                        shape="rect"
+                        coords="482,144,656,191"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 70.0581%; top: 25.8065%; width: 25.2907%; height: 8.42294%;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="hotspot_7"
+                        shape="rect"
+                        coords="483,224,657,269"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 70.2035%; top: 40.1434%; width: 25.2907%; height: 8.06452%;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="hotspot_8"
+                        shape="rect"
+                        coords="482,303,657,348"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 70.0581%; top: 54.3011%; width: 25.436%; height: 8.06452%;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="hotspot_9"
+                        shape="rect"
+                        coords="484,380,656,425"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 70.3488%; top: 68.1004%; width: 25%; height: 8.06452%;"
+    >
+    </qti-hotspot-choice>
+  </qti-hotspot-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-hottext-interaction/__snapshots__/qti-hottext-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-hottext-interaction/__snapshots__/qti-hottext-interaction.stories.ts.snap
new file mode 100644
index 00000000..b6be3f2d
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-hottext-interaction/__snapshots__/qti-hottext-interaction.stories.ts.snap
@@ -0,0 +1,124 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-hottext-interaction Button smoke-test 1`] = `
+<div id="root-inner">
+  <qti-hottext-interaction response-identifier="RESPONSE"
+                           class="qti-input-control-hidden"
+                           max-choices
+                           qti-hottext-interaction
+  >
+    <p>
+      Sponsors of the Olympic Games
+      <qti-hottext identifier="A"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        who bought
+      </qti-hottext>
+      advertising time on United States television
+      <qti-hottext identifier="B"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        includes
+      </qti-hottext>
+      <qti-hottext identifier="C"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        at least
+      </qti-hottext>
+      a dozen international firms
+      <qti-hottext identifier="D"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        whose
+      </qti-hottext>
+      names are familiar to American consumers.
+      <qti-hottext identifier="E"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        No error.
+      </qti-hottext>
+    </p>
+  </qti-hottext-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-hottext-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-hottext-interaction response-identifier="RESPONSE"
+                           max-choices
+                           qti-hottext-interaction
+  >
+    <p>
+      Sponsors of the Olympic Games
+      <qti-hottext identifier="A"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        who bought
+      </qti-hottext>
+      advertising time on United States television
+      <qti-hottext identifier="B"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        includes
+      </qti-hottext>
+      <qti-hottext identifier="C"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        at least
+      </qti-hottext>
+      a dozen international firms
+      <qti-hottext identifier="D"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        whose
+      </qti-hottext>
+      names are familiar to American consumers.
+      <qti-hottext identifier="E"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        No error.
+      </qti-hottext>
+    </p>
+  </qti-hottext-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-inline-choice-interaction/__snapshots__/qti-inline-choice-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-inline-choice-interaction/__snapshots__/qti-inline-choice-interaction.stories.ts.snap
new file mode 100644
index 00000000..d07796b3
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-inline-choice-interaction/__snapshots__/qti-inline-choice-interaction.stories.ts.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-inline-choice-interaction DataPrompt smoke-test 1`] = `
+<div id="root-inner">
+  <qti-inline-choice-interaction response-identifier="RESPONSE"
+                                 class
+                                 shuffle
+                                 data-prompt="Select the correct answer"
+  >
+    <qti-inline-choice identifier="G">
+      Gloucester
+    </qti-inline-choice>
+    <qti-inline-choice identifier="L">
+      Lancaster
+    </qti-inline-choice>
+    <qti-inline-choice identifier="Y">
+      York
+    </qti-inline-choice>
+  </qti-inline-choice-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-inline-choice-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-inline-choice-interaction response-identifier="RESPONSE"
+                                 class
+                                 shuffle
+  >
+    <qti-inline-choice identifier="G">
+      Gloucester
+    </qti-inline-choice>
+    <qti-inline-choice identifier="L">
+      Lancaster
+    </qti-inline-choice>
+    <qti-inline-choice identifier="Y">
+      York
+    </qti-inline-choice>
+  </qti-inline-choice-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-inline-choice-interaction Item smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item identifier="inline-choice">
+    <qti-item-body>
+      <p>
+        Identify the missing word in this famous quote from Shakespeare's Richard III.
+      </p>
+      <blockquote>
+        <p>
+          Now is the winter of our discontent
+          <br>
+          Made glorious summer by this sun of
+          <qti-inline-choice-interaction response-identifier="RESPONSE"
+                                         class
+                                         shuffle
+          >
+            <qti-inline-choice identifier="G">
+              Gloucester
+            </qti-inline-choice>
+            <qti-inline-choice identifier="L">
+              Lancaster
+            </qti-inline-choice>
+            <qti-inline-choice identifier="Y">
+              York
+            </qti-inline-choice>
+          </qti-inline-choice-interaction>
+          And all the clouds that lour'd upon our house
+          <br>
+          In the deep bosom of the ocean buried.
+        </p>
+      </blockquote>
+    </qti-item-body>
+  </qti-assessment-item>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-match-interaction/__snapshots__/qti-match-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-match-interaction/__snapshots__/qti-match-interaction.stories.ts.snap
new file mode 100644
index 00000000..1c7cf4cd
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-match-interaction/__snapshots__/qti-match-interaction.stories.ts.snap
@@ -0,0 +1,322 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-match-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-match-interaction class="qti-choices-top"
+                         max-associations="4"
+                         response-identifier="RESPONSE"
+                         min-associations="1"
+  >
+    <qti-simple-match-set>
+      <qti-simple-associable-choice identifier="C"
+                                    match-max="1"
+                                    qti-draggable="true"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+      >
+        Capulet
+      </qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="D"
+                                    match-max="1"
+                                    qti-draggable="true"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+      >
+        Demetrius
+      </qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="L"
+                                    match-max="1"
+                                    qti-draggable="true"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+      >
+        Lysander
+      </qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="P"
+                                    match-max="1"
+                                    qti-draggable="true"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+      >
+        Prospero
+      </qti-simple-associable-choice>
+    </qti-simple-match-set>
+    <qti-simple-match-set>
+      <qti-simple-associable-choice identifier="M"
+                                    match-max="2"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+                                    dropzone="move"
+      >
+        A Midsummer-Night's
+      </qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="R"
+                                    match-max="2"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+                                    dropzone="move"
+      >
+        Romeo and Juliet
+      </qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="T"
+                                    match-max="2"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+                                    dropzone="move"
+      >
+        The Tempest
+      </qti-simple-associable-choice>
+    </qti-simple-match-set>
+  </qti-match-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-match-interaction Images smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+                       xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"
+                       xsi:schemalocation="http://www.imsglobal.org/xsd/imsqtiasi_v3p0 https://purl.imsglobal.org/spec/qti/v3p0/schema/xsd/imsqti_asiv3p0_v1p0.xsd"
+                       identifier="match"
+                       title="Characters and Plays"
+                       adaptive="false"
+                       time-dependent="false"
+  >
+    <qti-response-declaration identifier="RESPONSE"
+                              cardinality="multiple"
+                              base-type="directedPair"
+    >
+      <qti-correct-response>
+      </qti-correct-response>
+      <qti-mapping default-value="0">
+        <qti-map-entry map-key="C R"
+                       mapped-value="1"
+        >
+        </qti-map-entry>
+        <qti-map-entry map-key="D M"
+                       mapped-value="0.5"
+        >
+        </qti-map-entry>
+        <qti-map-entry map-key="L M"
+                       mapped-value="0.5"
+        >
+        </qti-map-entry>
+        <qti-map-entry map-key="P T"
+                       mapped-value="1"
+        >
+        </qti-map-entry>
+      </qti-mapping>
+    </qti-response-declaration>
+    <qti-outcome-declaration identifier="SCORE"
+                             cardinality="single"
+                             base-type="float"
+    >
+    </qti-outcome-declaration>
+    <qti-item-body>
+      <qti-match-interaction class="qti-match-tabular"
+                             max-associations="4"
+                             response-identifier="RSP-C"
+                             min-associations="1"
+      >
+        <qti-simple-match-set>
+          <qti-simple-associable-choice identifier="PROD1"
+                                        match-max="1"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            <img alt
+                 src="./images/Biologische kipfilet.png"
+            >
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="PROD2"
+                                        match-max="1"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            <img alt
+                 src="./images/Verantwoorde wilde zalmfilets.png"
+            >
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="PROD3"
+                                        match-max="1"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            <img alt
+                 src="./images/Duurzamer geproduceerde melk.png"
+            >
+          </qti-simple-associable-choice>
+        </qti-simple-match-set>
+        <qti-simple-match-set>
+          <qti-simple-associable-choice identifier="BINA"
+                                        match-max="2"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            <img alt
+                 src="./images/asc.png"
+            >
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="BINB"
+                                        match-max="2"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            <img alt
+                 src="./images/EU-Biologisch.png"
+            >
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="BINC"
+                                        match-max="2"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            <img alt
+                 src="./images/Rainforest Alliance.png"
+            >
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="BIND"
+                                        match-max="2"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            <img alt
+                 src="./images/MSC.png"
+            >
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="BINE"
+                                        match-max="2"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            <img alt
+                 src="./images/Planet proof.png"
+            >
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="BINF"
+                                        match-max="2"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            <img alt
+                 src="./images/Fartrade.png"
+            >
+          </qti-simple-associable-choice>
+        </qti-simple-match-set>
+      </qti-match-interaction>
+    </qti-item-body>
+    <qti-response-processing template="https://purl.imsglobal.org/spec/qti/v3p0/rptemplates/map_response.xml">
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-match-interaction Tabular smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+                       xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"
+                       xsi:schemalocation="http://www.imsglobal.org/xsd/imsqtiasi_v3p0 https://purl.imsglobal.org/spec/qti/v3p0/schema/xsd/imsqti_asiv3p0_v1p0.xsd"
+                       identifier="match"
+                       title="Characters and Plays"
+                       adaptive="false"
+                       time-dependent="false"
+  >
+    <qti-response-declaration identifier="RESPONSE"
+                              cardinality="multiple"
+                              base-type="directedPair"
+    >
+      <qti-correct-response>
+      </qti-correct-response>
+      <qti-mapping default-value="0">
+        <qti-map-entry map-key="C R"
+                       mapped-value="1"
+        >
+        </qti-map-entry>
+        <qti-map-entry map-key="D M"
+                       mapped-value="0.5"
+        >
+        </qti-map-entry>
+        <qti-map-entry map-key="L M"
+                       mapped-value="0.5"
+        >
+        </qti-map-entry>
+        <qti-map-entry map-key="P T"
+                       mapped-value="1"
+        >
+        </qti-map-entry>
+      </qti-mapping>
+    </qti-response-declaration>
+    <qti-outcome-declaration identifier="SCORE"
+                             cardinality="single"
+                             base-type="float"
+    >
+    </qti-outcome-declaration>
+    <qti-item-body>
+      <qti-match-interaction class="qti-match-tabular"
+                             response-identifier="RESPONSE"
+                             shuffle="true"
+                             max-associations="4"
+                             min-associations="1"
+      >
+        <qti-prompt slot="prompt">
+          Match the following characters to the Shakespeare play they appeared in:
+        </qti-prompt>
+        <qti-simple-match-set>
+          <qti-simple-associable-choice identifier="C"
+                                        match-max="1"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            Capulet
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="D"
+                                        match-max="1"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            Demetrius
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="L"
+                                        match-max="1"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            Lysander
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="P"
+                                        match-max="1"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            Prospero
+          </qti-simple-associable-choice>
+        </qti-simple-match-set>
+        <qti-simple-match-set>
+          <qti-simple-associable-choice identifier="M"
+                                        match-max="4"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            A Midsummer-Night's Dream
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="R"
+                                        match-max="4"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            Romeo and Juliet
+          </qti-simple-associable-choice>
+          <qti-simple-associable-choice identifier="T"
+                                        match-max="4"
+                                        slot="qti-simple-associable-choice"
+                                        part="qti-simple-associable-choice"
+          >
+            The Tempest
+          </qti-simple-associable-choice>
+        </qti-simple-match-set>
+      </qti-match-interaction>
+    </qti-item-body>
+    <qti-response-processing template="https://purl.imsglobal.org/spec/qti/v3p0/rptemplates/map_response.xml">
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-media-interaction/__snapshots__/qti-media-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-media-interaction/__snapshots__/qti-media-interaction.stories.ts.snap
new file mode 100644
index 00000000..de24c812
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-media-interaction/__snapshots__/qti-media-interaction.stories.ts.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-media-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-media-interaction autostart="false"
+                         response-identifier="RESPONSE"
+                         loop
+                         min-plays
+                         max-plays
+  >
+    <qti-prompt>
+      Play this video.
+    </qti-prompt>
+    <video width="320"
+           height="240"
+           controls
+    >
+      <source src="qti-media-interaction/earth.mp4"
+              type="video/mp4"
+      >
+      Your browser does not support the video tag
+    </video>
+  </qti-media-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-order-interaction/__snapshots__/qti-order-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-order-interaction/__snapshots__/qti-order-interaction.stories.ts.snap
new file mode 100644
index 00000000..dacd82da
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-order-interaction/__snapshots__/qti-order-interaction.stories.ts.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-order-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-order-interaction response-identifier="RESPONSE"
+                         min-associations="1"
+                         max-associations="1"
+  >
+    <qti-prompt slot="prompt">
+      The following F1 drivers finished on the podium in the first ever Grand Prix of Bahrain. Can you rearrange them
+        into the correct finishing order?
+    </qti-prompt>
+    <qti-simple-choice identifier="DriverA"
+                       qti-draggable="true"
+                       part="qti-simple-choice"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      Rubens
+    </qti-simple-choice>
+    <qti-simple-choice identifier="DriverB"
+                       qti-draggable="true"
+                       part="qti-simple-choice"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      Jenson
+    </qti-simple-choice>
+    <qti-simple-choice identifier="DriverC"
+                       qti-draggable="true"
+                       part="qti-simple-choice"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      Michael
+    </qti-simple-choice>
+  </qti-order-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-portable-custom-interaction/__snapshots__/qti-portable-custom-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-portable-custom-interaction/__snapshots__/qti-portable-custom-interaction.stories.ts.snap
new file mode 100644
index 00000000..c58e5ac5
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-portable-custom-interaction/__snapshots__/qti-portable-custom-interaction.stories.ts.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-portable-custom-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-portable-custom-interaction response-identifier="RESPONSE"
+                                   module="pci-getallen"
+                                   custom-interaction-type-identifier="getallenFormule"
+                                   data-button-text="Berekenen"
+                                   data-sum1="$1 * 12 + 3"
+                                   data-sum2="$1 * 4 + 53"
+                                   data-table-size="4"
+                                   base-url="./qti-portable-custom-interaction/"
+  >
+    <qti-interaction-markup>
+    </qti-interaction-markup>
+  </qti-portable-custom-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-position-object-interaction/__snapshots__/qti-position-object-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-position-object-interaction/__snapshots__/qti-position-object-interaction.stories.ts.snap
new file mode 100644
index 00000000..98a5eea2
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-position-object-interaction/__snapshots__/qti-position-object-interaction.stories.ts.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-position-object-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-position-object-stage>
+    <img src="https://qti-convert.web.app/images/uk.png"
+         width="206"
+         height="280"
+    >
+    <qti-position-object-interaction response-identifier="RESPONSE"
+                                     max-choices="3"
+    >
+      <img src="https://qti-convert.web.app/images/airport.png"
+           alt="Drop Zone"
+      >
+    </qti-position-object-interaction>
+  </qti-position-object-stage>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-select-point-interaction/__snapshots__/qti-select-point-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-select-point-interaction/__snapshots__/qti-select-point-interaction.stories.ts.snap
new file mode 100644
index 00000000..0905b726
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-select-point-interaction/__snapshots__/qti-select-point-interaction.stories.ts.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-select-point-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-select-point-interaction max-choices="1"
+                                response-identifier="RESPONSE1"
+  >
+    <qti-prompt slot="prompt">
+      Mark Edinburgh on this map of the United Kingdom.
+    </qti-prompt>
+    <img src="qti-select-point-interaction/uk.png"
+         height="280"
+         width="206"
+    >
+  </qti-select-point-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-slider-interaction/__snapshots__/qti-slider-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-slider-interaction/__snapshots__/qti-slider-interaction.stories.ts.snap
new file mode 100644
index 00000000..c606fc54
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-slider-interaction/__snapshots__/qti-slider-interaction.stories.ts.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-slider-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-slider-interaction response-identifier="RESPONSE"
+                          lower-bound="0"
+                          upper-bound="10"
+                          tabindex="0"
+                          role="slider"
+                          aria-valuenow="0"
+                          style="--min: 0; --max: 10; --step: 1; --value-percentage: 0%;"
+  >
+    <qti-prompt>
+      In total, what percentage of the UK population do you think were eventually classified as having no religion?
+    </qti-prompt>
+  </qti-slider-interaction>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-interaction/qti-text-entry-interaction/__snapshots__/qti-text-entry-interaction.stories.ts.snap b/src/lib/qti-components/qti-interaction/qti-text-entry-interaction/__snapshots__/qti-text-entry-interaction.stories.ts.snap
new file mode 100644
index 00000000..de1edc9b
--- /dev/null
+++ b/src/lib/qti-components/qti-interaction/qti-text-entry-interaction/__snapshots__/qti-text-entry-interaction.stories.ts.snap
@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-interaction/qti-text-entry-interaction Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-text-entry-interaction placeholder-text="totaal"
+                              response-identifier="RESPONSE"
+                              class="text-entry-interaction ,qti-input-width-1,qti-input-width-2,qti-input-width-3,qti-input-width-4,qti-input-width-6,qti-input-width-10,qti-input-width-15,qti-input-width-20,qti-input-width-72"
+                              expected-length
+                              pattern-mask
+                              data-patternmask-message
+  >
+  </qti-text-entry-interaction>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-text-entry-interaction Formula smoke-test 1`] = `
+<div id="root-inner">
+  <p>
+    Hoeveel kilo CO2 wordt jaarlijks bespaard door 8 zonnepanelen?
+  </p>
+  <ul>
+    <li>
+      Levensduur zonnepaneel 25 jaar
+    </li>
+    <li>
+      CO2 uitstoot voor de productie van 1 zonnepaneel is 500 kilo
+    </li>
+    <li>
+      1 zonnepaneel voorkomt 120 kilo CO2 uitstoot per jaar
+    </li>
+  </ul>
+  <p>
+    Reken uit:
+  </p>
+  <p>
+    CO2 uitstoot voor productie van de zonnepanelen per jaar is 8 x
+    <qti-text-entry-interaction class="qti-input-width-3"
+                                response-identifier="RESPONSE"
+    >
+    </qti-text-entry-interaction>
+    /
+    <qti-text-entry-interaction class="qti-input-width-3"
+                                response-identifier="RESPONSE"
+    >
+    </qti-text-entry-interaction>
+    =
+    <qti-text-entry-interaction class="qti-input-width-3"
+                                response-identifier="RESPONSE"
+    >
+    </qti-text-entry-interaction>
+    kilo
+  </p>
+  <p>
+    CO2 uitstoot die wordt bespaard per jaar is 8 x
+    <qti-text-entry-interaction class="qti-input-width-3"
+                                response-identifier="RESPONSE"
+    >
+    </qti-text-entry-interaction>
+    -
+    <qti-text-entry-interaction class="qti-input-width-3"
+                                response-identifier="RESPONSE"
+    >
+    </qti-text-entry-interaction>
+    =
+    <qti-text-entry-interaction class="qti-input-width-3"
+                                response-identifier="RESPONSE"
+    >
+    </qti-text-entry-interaction>
+    kilo
+  </p>
+</div>
+`;
+
+exports[`lib/qti-components/qti-interaction/qti-text-entry-interaction Sizes smoke-test 1`] = `
+<div id="root-inner">
+  <p>
+    qti-input-width-1 :
+    <qti-text-entry-interaction class="qti-input-width-1"
+                                expected-length="15"
+                                response-identifier="RESPONSE1"
+    >
+    </qti-text-entry-interaction>
+  </p>
+  <p>
+    qti-input-width-2 :
+    <qti-text-entry-interaction class="qti-input-width-2"
+                                expected-length="15"
+                                response-identifier="RESPONSE2"
+    >
+    </qti-text-entry-interaction>
+  </p>
+  <p>
+    qti-input-width-3 :
+    <qti-text-entry-interaction class="qti-input-width-3"
+                                expected-length="15"
+                                response-identifier="RESPONSE3"
+    >
+    </qti-text-entry-interaction>
+  </p>
+  <p>
+    qti-input-width-4 :
+    <qti-text-entry-interaction class="qti-input-width-4"
+                                expected-length="15"
+                                response-identifier="RESPONSE4"
+    >
+    </qti-text-entry-interaction>
+  </p>
+  <p>
+    qti-input-width-6 :
+    <qti-text-entry-interaction class="qti-input-width-6"
+                                expected-length="15"
+                                response-identifier="RESPONSE5"
+    >
+    </qti-text-entry-interaction>
+  </p>
+  <p>
+    qti-input-width-10:
+    <qti-text-entry-interaction class="qti-input-width-10"
+                                expected-length="15"
+                                response-identifier="RESPONSE6"
+    >
+    </qti-text-entry-interaction>
+  </p>
+  <p>
+    qti-input-width-15:
+    <qti-text-entry-interaction class="qti-input-width-15"
+                                expected-length="15"
+                                response-identifier="RESPONSE7"
+    >
+    </qti-text-entry-interaction>
+  </p>
+  <p>
+    qti-input-width-20:
+    <qti-text-entry-interaction class="qti-input-width-20"
+                                expected-length="20"
+                                response-identifier="RESPONSE8"
+    >
+    </qti-text-entry-interaction>
+  </p>
+  <p>
+    qti-input-width-72:
+    <qti-text-entry-interaction class="qti-input-width-72"
+                                expected-length="72"
+                                response-identifier="RESPONSE9"
+    >
+    </qti-text-entry-interaction>
+  </p>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-response-processing/qti-expression/qti-member/__snapshots__/qti-member.stories.ts.snap b/src/lib/qti-components/qti-response-processing/qti-expression/qti-member/__snapshots__/qti-member.stories.ts.snap
new file mode 100644
index 00000000..59ed3ea0
--- /dev/null
+++ b/src/lib/qti-components/qti-response-processing/qti-expression/qti-member/__snapshots__/qti-member.stories.ts.snap
@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-response-processing/qti-expression/qti-member AssessmentCorrect smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item data-testid="qti-assessment-item">
+    <qti-outcome-declaration base-type="string"
+                             cardinality="multiple"
+                             identifier="BODY"
+    >
+      <qti-default-value>
+        <qti-value>
+          part1
+        </qti-value>
+        <qti-value>
+          part2
+        </qti-value>
+        <qti-value>
+          part3
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-response-processing>
+      <qti-response-condition>
+        <qti-response-if>
+          <qti-member data-testid="qti-member">
+            <qti-base-value base-type="string">
+              part2
+            </qti-base-value>
+            <qti-variable identifier="BODY">
+            </qti-variable>
+          </qti-member>
+          <qti-set-outcome-value>
+            <qti-base-value base-type="string">
+              WOOHOO
+            </qti-base-value>
+          </qti-set-outcome-value>
+        </qti-response-if>
+      </qti-response-condition>
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
+
+exports[`lib/qti-components/qti-response-processing/qti-expression/qti-member MemberCorrect smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item>
+    <qti-outcome-declaration base-type="string"
+                             cardinality="multiple"
+                             identifier="BODY"
+    >
+      <qti-default-value>
+        <qti-value>
+          part1
+        </qti-value>
+        <qti-value>
+          part2
+        </qti-value>
+        <qti-value>
+          part3
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-member data-testid="qti-member">
+      <qti-base-value base-type="string">
+        part2
+      </qti-base-value>
+      <qti-variable identifier="BODY">
+      </qti-variable>
+    </qti-member>
+  </qti-assessment-item>
+</div>
+`;
+
+exports[`lib/qti-components/qti-response-processing/qti-expression/qti-member MemberFail play-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item data-testid="qti-assessment">
+    <qti-outcome-declaration base-type="duration"
+                             cardinality="single"
+                             identifier="BODY"
+    >
+      <qti-default-value>
+        <qti-value>
+          part1
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-response-processing>
+      <qti-member data-testid="qti-member">
+        <qti-base-value base-type="float">
+        </qti-base-value>
+        <qti-variable identifier="BODY">
+        </qti-variable>
+        <qti-variable identifier="SUB-BODY">
+        </qti-variable>
+      </qti-member>
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-response-processing/qti-expression/qti-printed-variable/__snapshots__/qti-printed-variable.stories.ts.snap b/src/lib/qti-components/qti-response-processing/qti-expression/qti-printed-variable/__snapshots__/qti-printed-variable.stories.ts.snap
new file mode 100644
index 00000000..60fb43a1
--- /dev/null
+++ b/src/lib/qti-components/qti-response-processing/qti-expression/qti-printed-variable/__snapshots__/qti-printed-variable.stories.ts.snap
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-response-processing/qti-expression/qti-printed-variable Multiple play-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item data-testid="qti-assessment-item">
+    <qti-outcome-declaration base-type="string"
+                             cardinality="multiple"
+                             identifier="OUTCOME"
+    >
+      <qti-default-value>
+        <qti-value>
+          MULTIPLE
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-item-body>
+      <qti-printed-variable identifier="OUTCOME">
+      </qti-printed-variable>
+    </qti-item-body>
+    <qti-response-processing>
+      <qti-set-outcome-value identifier="OUTCOME">
+        <qti-base-value base-type="identifier">
+          UITSTOOT
+        </qti-base-value>
+      </qti-set-outcome-value>
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
+
+exports[`lib/qti-components/qti-response-processing/qti-expression/qti-printed-variable Single play-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item data-testid="qti-assessment-item">
+    <qti-outcome-declaration base-type="string"
+                             cardinality="single"
+                             identifier="OUTCOME"
+    >
+      <qti-default-value>
+        <qti-value>
+          SINGLE
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-item-body>
+      <qti-printed-variable identifier="OUTCOME">
+      </qti-printed-variable>
+    </qti-item-body>
+    <qti-response-processing>
+      <qti-set-outcome-value identifier="OUTCOME">
+        <qti-base-value base-type="identifier">
+          UITSTOOT
+        </qti-base-value>
+      </qti-set-outcome-value>
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-response-processing/qti-rule/qti-lookup-outcome-value/__snapshots__/qti-lookup-outcome-value.stories.ts.snap b/src/lib/qti-components/qti-response-processing/qti-rule/qti-lookup-outcome-value/__snapshots__/qti-lookup-outcome-value.stories.ts.snap
new file mode 100644
index 00000000..d4b42b74
--- /dev/null
+++ b/src/lib/qti-components/qti-response-processing/qti-rule/qti-lookup-outcome-value/__snapshots__/qti-lookup-outcome-value.stories.ts.snap
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-response-processing/qti-rule/qti-lookup-outcome-value Default play-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item xmlns="http://www.w3.org/1999/xhtml"
+                       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+                       title="32c2sb"
+                       identifier="ITM-32c2sb"
+                       time-dependent="false"
+                       xsi:schemalocation="http://www.imsglobal.org/xsd/imsqtiasi_v3p0 https://purl.imsglobal.org/spec/qti/v3p0/schema/xsd/imsqti_asiv3p0_v1p0.xsd"
+  >
+    <qti-outcome-declaration identifier="RAW_SCORE"
+                             cardinality="single"
+                             base-type="integer"
+    >
+      <qti-default-value>
+        <qti-value>
+          0
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-outcome-declaration identifier="SCORE"
+                             cardinality="single"
+                             base-type="float"
+    >
+      <qti-interpolation-table>
+        <qti-interpolation-table-entry include-boundary="false"
+                                       source-value="3"
+                                       target-value="2"
+        >
+        </qti-interpolation-table-entry>
+        <qti-interpolation-table-entry include-boundary="false"
+                                       source-value="2"
+                                       target-value="1"
+        >
+        </qti-interpolation-table-entry>
+        <qti-interpolation-table-entry include-boundary="false"
+                                       source-value="1"
+                                       target-value="0"
+        >
+        </qti-interpolation-table-entry>
+        <qti-interpolation-table-entry include-boundary="false"
+                                       source-value="0"
+                                       target-value="0"
+        >
+        </qti-interpolation-table-entry>
+      </qti-interpolation-table>
+    </qti-outcome-declaration>
+    <qti-response-processing>
+      <qti-lookup-outcome-value identifier="SCORE">
+        <qti-variable identifier="RAW_SCORE">
+        </qti-variable>
+      </qti-lookup-outcome-value>
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-response-processing/qti-rule/qti-set-outcome-value/__snapshots__/qti-set-outcome-value.stories.ts.snap b/src/lib/qti-components/qti-response-processing/qti-rule/qti-set-outcome-value/__snapshots__/qti-set-outcome-value.stories.ts.snap
new file mode 100644
index 00000000..ed46bc99
--- /dev/null
+++ b/src/lib/qti-components/qti-response-processing/qti-rule/qti-set-outcome-value/__snapshots__/qti-set-outcome-value.stories.ts.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-response-processing/qti-rule/qti-set-outcome-value MemberFail play-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item data-testid="qti-assessment-item">
+    <qti-outcome-declaration base-type="identifier"
+                             cardinality="multiple"
+                             identifier="BODY"
+    >
+      <qti-default-value>
+        <qti-value>
+          part1
+        </qti-value>
+      </qti-default-value>
+    </qti-outcome-declaration>
+    <qti-response-processing>
+      <qti-set-outcome-value identifier="BODY">
+        <qti-multiple>
+          <qti-variable identifier="BODY">
+          </qti-variable>
+          <qti-base-value base-type="identifier">
+            part2
+          </qti-base-value>
+        </qti-multiple>
+      </qti-set-outcome-value>
+    </qti-response-processing>
+  </qti-assessment-item>
+</div>
+`;
diff --git a/src/lib/qti-components/qti-stylesheet/__snapshots__/qti-stylesheet.stories.ts.snap b/src/lib/qti-components/qti-stylesheet/__snapshots__/qti-stylesheet.stories.ts.snap
new file mode 100644
index 00000000..b9dfeafa
--- /dev/null
+++ b/src/lib/qti-components/qti-stylesheet/__snapshots__/qti-stylesheet.stories.ts.snap
@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lib/qti-components/qti-stylesheet Default smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item>
+    <qti-stylesheet href="/qti-stylesheet/linked.css"
+                    type="text/css"
+    >
+    </qti-stylesheet>
+    <qti-item-body>
+      <qti-choice-interaction class="qti-orientation-horizontal qti-input-control-hidden"
+                              max-choices="1"
+                              shuffle="false"
+      >
+        <qti-simple-choice identifier="A">
+          Boer
+        </qti-simple-choice>
+        <qti-simple-choice identifier="B">
+          Doek
+        </qti-simple-choice>
+        <qti-simple-choice identifier="C">
+          Voet
+        </qti-simple-choice>
+      </qti-choice-interaction>
+    </qti-item-body>
+    <link rel="stylesheet"
+          type="text/css"
+          media="screen"
+          href="/qti-stylesheet/linked.css"
+    >
+    <style media="screen">
+    </style>
+  </qti-assessment-item>
+</div>
+`;
+
+exports[`lib/qti-components/qti-stylesheet Inline smoke-test 1`] = `
+<div id="root-inner">
+  <qti-assessment-item>
+    <qti-stylesheet type="text/css">
+      qti-assessment-item {
+  display: flex;
+  flex-orientation: column;
+}
+
+qti-assessment-item qti-simple-choice {
+  position: relative !important;
+  margin: 20px !important;
+  background: #ff0000;
+  color: rgb(63, 63, 63) !important;
+  font-size: 40px !important;
+  font-weight: bold !important;
+  line-height: 1.3em !important;
+  border: 2px dashed rgb(172, 172, 172) !important;
+  border-radius: 0px !important;
+  font-weight: 800 !important;
+  font-family: 'Arial', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+qti-assessment-item button:active {
+  transform: translate(0px, 5px);
+  border-bottom: 10px solid;
+}
+
+qti-assessment-item qti-simple-choice[aria-checked='true'] {
+  background-color: white !important;
+  color: #ff0000 !important;
+  /* animation: zoom 0.2s ease-in; */
+}
+    </qti-stylesheet>
+    <qti-item-body>
+      <qti-choice-interaction class="qti-orientation-horizontal qti-input-control-hidden"
+                              max-choices="1"
+                              shuffle="false"
+      >
+        <qti-simple-choice identifier="A">
+          Boer
+        </qti-simple-choice>
+        <qti-simple-choice identifier="B">
+          Doek
+        </qti-simple-choice>
+        <qti-simple-choice identifier="C">
+          Voet
+        </qti-simple-choice>
+      </qti-choice-interaction>
+    </qti-item-body>
+    <style media="screen">
+      qti-assessment-item {
+  display: flex;
+  flex-orientation: column;
+}
+
+qti-assessment-item qti-simple-choice {
+  position: relative !important;
+  margin: 20px !important;
+  background: #ff0000;
+  color: rgb(63, 63, 63) !important;
+  font-size: 40px !important;
+  font-weight: bold !important;
+  line-height: 1.3em !important;
+  border: 2px dashed rgb(172, 172, 172) !important;
+  border-radius: 0px !important;
+  font-weight: 800 !important;
+  font-family: 'Arial', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+qti-assessment-item button:active {
+  transform: translate(0px, 5px);
+  border-bottom: 10px solid;
+}
+
+qti-assessment-item qti-simple-choice[aria-checked='true'] {
+  background-color: white !important;
+  color: #ff0000 !important;
+  /* animation: zoom 0.2s ease-in; */
+}
+    </style>
+  </qti-assessment-item>
+</div>
+`;
diff --git a/src/stories/__snapshots__/item.stories.ts.snap b/src/stories/__snapshots__/item.stories.ts.snap
new file mode 100644
index 00000000..193caf56
--- /dev/null
+++ b/src/stories/__snapshots__/item.stories.ts.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`items Items smoke-test 1`] = `
+<div id="root-inner">
+  <div>
+    <qti-assessment-item xmlns="http://www.w3.org/1999/xhtml"
+                         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+                         xsi:schemalocation="http://www.imsglobal.org/xsd/imsqtiasi_v3p0 https://purl.imsglobal.org/spec/qti/v3p0/schema/xsd/imsqti_asiv3p0_v1p0.xsd"
+                         title="32llxx"
+                         identifier="ITM-32llxx"
+                         time-dependent="false"
+                         label="32llxx"
+    >
+      <qti-stylesheet href="http://localhost:6006/api/biologie/depitems/..%2Fcss%2Fcito_itemstyle.css"
+                      type="text/css"
+      >
+      </qti-stylesheet>
+      <qti-stylesheet href="http://localhost:6006/api/biologie/depitems/..%2Fcss%2Fcito_userstyle.css"
+                      type="text/css"
+      >
+      </qti-stylesheet>
+      <qti-stylesheet href="http://localhost:6006/api/biologie/depitems/..%2Fcss%2Fcito_generated.css"
+                      type="text/css"
+      >
+      </qti-stylesheet>
+      <qti-item-body class="defaultBody">
+        <div class="content">
+          <div class="qti-layout-row">
+            <div class="qti-layout-col12">
+              <p>
+                <strong>
+                  Let op!
+                </strong>
+              </p>
+              <p>
+                Dit centraal examen bevat één of meer onvolkomenheden.
+              </p>
+              <table class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_1">
+                <colgroup>
+                  <col class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_2">
+                  <col class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_3">
+                </colgroup>
+                <tbody>
+                  <tr>
+                    <td class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_4">
+                      <p class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_5">
+                        <strong>
+                          Vraagnummer
+                        </strong>
+                      </p>
+                    </td>
+                    <td class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_6">
+                      <p class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_7">
+                        <strong>
+                          Aard van de onvolkomenheid
+                        </strong>
+                      </p>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_8">
+                      <p class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_9">
+                        18
+                      </p>
+                    </td>
+                    <td class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_10">
+                      <p class="cito_genclass_Infoscherm_onvolkomenheden_2022_-_examenvariant_1_11">
+                        Uitwendig behoort tot KB deel van de syllabus. Besloten is om hiervoor te compenseren.
+                      </p>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <p>
+              </p>
+            </div>
+          </div>
+        </div>
+      </qti-item-body>
+      <link rel="stylesheet"
+            type="text/css"
+            media="screen"
+            href="http://localhost:6006/api/biologie/depitems/..%2Fcss%2Fcito_itemstyle.css"
+      >
+      <style media="screen">
+      </style>
+      <link rel="stylesheet"
+            type="text/css"
+            media="screen"
+            href="http://localhost:6006/api/biologie/depitems/..%2Fcss%2Fcito_userstyle.css"
+      >
+      <style media="screen">
+      </style>
+      <link rel="stylesheet"
+            type="text/css"
+            media="screen"
+            href="http://localhost:6006/api/biologie/depitems/..%2Fcss%2Fcito_generated.css"
+      >
+      <style media="screen">
+      </style>
+    </qti-assessment-item>
+  </div>
+</div>
+`;
diff --git a/src/styles/qti/__snapshots__/qti-styles.stories.ts.snap b/src/styles/qti/__snapshots__/qti-styles.stories.ts.snap
new file mode 100644
index 00000000..65024997
--- /dev/null
+++ b/src/styles/qti/__snapshots__/qti-styles.stories.ts.snap
@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`styles/utilities QtiUtilities smoke-test 1`] = `
+<div id="root-inner">
+  <qti-item-body>
+    <h4>
+      Underline an Element
+    </h4>
+    <p>
+      Look at the
+      <span class="qti-underline">
+        underlined text
+      </span>
+      in this sentence.
+    </p>
+    <h4>
+      Horizontal Alignment - Left, Center, Right
+      <span class="muted">
+        - table border added for effect
+      </span>
+    </h4>
+    <table class="qti-fullwidth qti-bordered">
+      <tbody>
+        <tr>
+          <td class="qti-align-left">
+            I am left-aligned text in a table cell.
+          </td>
+        </tr>
+        <tr>
+          <td class="qti-align-center">
+            I am center-aligned text in a table cell.
+          </td>
+        </tr>
+        <tr>
+          <td class="qti-align-right">
+            I am right-aligned text in a table cell.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>
+      Vertical Alignment - Top, Middle, Baseline, Bottom
+      <span class="muted">
+        - 4x28 images and paragraph borders added for effect
+      </span>
+    </h4>
+    <p class="qti-bordered">
+      <img class="qti-valign-top"
+           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAcCAYAAABGdB6IAAAAFUlEQVR42mNkYPhfz4AEGEcFhosAAM7zKeUTvPB1AAAAAElFTkSuQmCC"
+           hspace="4"
+           vspace="0"
+           width="4"
+           height="28"
+      >
+      I am top-valigned.
+    </p>
+    <p class="qti-bordered">
+      <img class="qti-valign-middle"
+           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAcCAYAAABGdB6IAAAAFUlEQVR42mNkYPhfz4AEGEcFhosAAM7zKeUTvPB1AAAAAElFTkSuQmCC"
+           hspace="4"
+           vspace="0"
+           width="4"
+           height="28"
+      >
+      I am middle-valigned.
+    </p>
+    <p class="qti-bordered">
+      <img class="qti-valign-baseline"
+           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAcCAYAAABGdB6IAAAAFUlEQVR42mNkYPhfz4AEGEcFhosAAM7zKeUTvPB1AAAAAElFTkSuQmCC"
+           hspace="4"
+           vspace="0"
+           width="4"
+           height="28"
+      >
+      I am baseline-valigned.
+    </p>
+    <p class="qti-bordered">
+      <img class="qti-valign-bottom"
+           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAcCAYAAABGdB6IAAAAFUlEQVR42mNkYPhfz4AEGEcFhosAAM7zKeUTvPB1AAAAAElFTkSuQmCC"
+           hspace="4"
+           vspace="0"
+           width="4"
+           height="28"
+      >
+      I am bottom-valigned.
+    </p>
+    <h4>
+      Make an Element Fullwidth (width=100%)
+      <span class="muted">
+        - table border added for effect
+      </span>
+    </h4>
+    <table class="qti-fullwidth qti-bordered">
+      <tbody>
+        <tr>
+          <td class="qti-align-left">
+            I am left-aligned
+          </td>
+        </tr>
+        <tr>
+          <td class="qti-align-center">
+            I am center-aligned
+          </td>
+        </tr>
+        <tr>
+          <td class="qti-align-right">
+            I am right-aligned
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>
+      Add an Element Border
+      <span class="muted">
+        - second paragraph is bordered
+      </span>
+    </h4>
+    <div>
+      <p>
+        Ho hum. I am a non-bordered paragraph.
+      </p>
+      <p class="qti-bordered">
+        Look at me! I am a bordered paragraph.
+      </p>
+      <p>
+        I am yet another non-bordered paragraph.
+      </p>
+    </div>
+    <h4>
+      Place an element in a Well
+      <span class="muted">
+        - second paragraph is in a well
+      </span>
+    </h4>
+    <div>
+      <p>
+        Ho hum. I am a non-bordered paragraph.
+      </p>
+      <p class="qti-well">
+        Look at me! I am in a well!
+      </p>
+      <p>
+        I am yet another non-bordered paragraph.
+      </p>
+    </div>
+  </qti-item-body>
+</div>
+`;
diff --git a/src/styles/stories/__snapshots__/interactions.stories.ts.snap b/src/styles/stories/__snapshots__/interactions.stories.ts.snap
new file mode 100644
index 00000000..15a40fad
--- /dev/null
+++ b/src/styles/stories/__snapshots__/interactions.stories.ts.snap
@@ -0,0 +1,1133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`styles/themes Choice smoke-test 1`] = `
+<div id="root-inner">
+  <qti-choice-interaction data-testid="qti-choice-interaction"
+                          data-max-selections-message="Too little selections made"
+                          data-min-selections-message="Too much selections made"
+                          response-identifier
+  >
+    <qti-prompt slot="prompt">
+      <p>
+        Which of the following features are
+        <strong>
+          new
+        </strong>
+        to QTI 3?
+      </p>
+      <p>
+        Pick 1 choice.
+      </p>
+    </qti-prompt>
+    <qti-simple-choice data-testid="choice-0"
+                       identifier="choice-0"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      I think you can use WorkFlow.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-1"
+                       identifier="choice-1"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      You should use FlowChart
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-2"
+                       identifier="choice-2"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      No you should use Workload Rage.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-3"
+                       identifier="choice-3"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      I would recommend Chart Up.
+    </qti-simple-choice>
+  </qti-choice-interaction>
+</div>
+`;
+
+exports[`styles/themes Interactions smoke-test 1`] = `
+<div id="root-inner">
+  <div style="display:flex; gap:0.5rem">
+    <qti-gap-match-interaction min-associations="1"
+                               max-associations="1"
+    >
+      <qti-gap-text identifier="W"
+                    match-max="1"
+                    qti-draggable="true"
+                    slot="qti-gap-text"
+                    tabindex="0"
+      >
+        winter
+      </qti-gap-text>
+      <qti-gap-text identifier="Sp"
+                    match-max="1"
+                    qti-draggable="true"
+                    slot="qti-gap-text"
+                    tabindex="0"
+      >
+        spring
+      </qti-gap-text>
+      <qti-gap-text identifier="Su"
+                    match-max="1"
+                    qti-draggable="true"
+                    slot="qti-gap-text"
+                    tabindex="0"
+      >
+        summer
+      </qti-gap-text>
+      <qti-gap-text identifier="A"
+                    match-max="1"
+                    qti-draggable="true"
+                    slot="qti-gap-text"
+                    tabindex="0"
+      >
+        autumn
+      </qti-gap-text>
+      <blockquote>
+        <p>
+          Now is the
+          <qti-gap identifier="G1"
+                   dropzone="move"
+                   tabindex="0"
+          >
+          </qti-gap>
+          of our discontent
+          <br>
+          Made glorious
+          <qti-gap identifier="G2"
+                   dropzone="move"
+                   tabindex="0"
+          >
+          </qti-gap>
+          by this sun of York;
+          <br>
+          And all the clouds that lour'd upon our house
+          <br>
+          In the deep bosom of the ocean buried.
+        </p>
+      </blockquote>
+    </qti-gap-match-interaction>
+    <qti-match-interaction class="qti-choices-top"
+                           max-associations="4"
+                           response-identifier="RESPONSE"
+                           min-associations="1"
+    >
+      <qti-simple-match-set>
+        <qti-simple-associable-choice identifier="C"
+                                      match-max="1"
+                                      qti-draggable="true"
+                                      slot="qti-simple-associable-choice"
+                                      part="qti-simple-associable-choice"
+        >
+          Capulet
+        </qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="D"
+                                      match-max="1"
+                                      qti-draggable="true"
+                                      slot="qti-simple-associable-choice"
+                                      part="qti-simple-associable-choice"
+        >
+          Demetrius
+        </qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="L"
+                                      match-max="1"
+                                      qti-draggable="true"
+                                      slot="qti-simple-associable-choice"
+                                      part="qti-simple-associable-choice"
+        >
+          Lysander
+        </qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="P"
+                                      match-max="1"
+                                      qti-draggable="true"
+                                      slot="qti-simple-associable-choice"
+                                      part="qti-simple-associable-choice"
+        >
+          Prospero
+        </qti-simple-associable-choice>
+      </qti-simple-match-set>
+      <qti-simple-match-set>
+        <qti-simple-associable-choice identifier="M"
+                                      match-max="2"
+                                      slot="qti-simple-associable-choice"
+                                      part="qti-simple-associable-choice"
+                                      dropzone="move"
+        >
+          A Midsummer-Night's
+        </qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="R"
+                                      match-max="2"
+                                      slot="qti-simple-associable-choice"
+                                      part="qti-simple-associable-choice"
+                                      dropzone="move"
+        >
+          Romeo and Juliet
+        </qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="T"
+                                      match-max="2"
+                                      slot="qti-simple-associable-choice"
+                                      part="qti-simple-associable-choice"
+                                      dropzone="move"
+        >
+          The Tempest
+        </qti-simple-associable-choice>
+      </qti-simple-match-set>
+    </qti-match-interaction>
+  </div>
+  <div style="display:flex; gap:0.5rem">
+    <qti-order-interaction response-identifier="RESPONSE"
+                           min-associations="1"
+                           max-associations="1"
+    >
+      <qti-prompt slot="prompt">
+        The following F1 drivers finished on the podium in the first ever Grand Prix of Bahrain. Can you rearrange them
+        into the correct finishing order?
+      </qti-prompt>
+      <qti-simple-choice identifier="DriverA"
+                         qti-draggable="true"
+                         part="qti-simple-choice"
+                         tabindex="0"
+                         aria-disabled="false"
+                         aria-readonly="false"
+                         aria-checked="false"
+      >
+        Rubens
+      </qti-simple-choice>
+      <qti-simple-choice identifier="DriverB"
+                         qti-draggable="true"
+                         part="qti-simple-choice"
+                         tabindex="0"
+                         aria-disabled="false"
+                         aria-readonly="false"
+                         aria-checked="false"
+      >
+        Jenson
+      </qti-simple-choice>
+      <qti-simple-choice identifier="DriverC"
+                         qti-draggable="true"
+                         part="qti-simple-choice"
+                         tabindex="0"
+                         aria-disabled="false"
+                         aria-readonly="false"
+                         aria-checked="false"
+      >
+        Michael
+      </qti-simple-choice>
+    </qti-order-interaction>
+    <qti-associate-interaction class
+                               min-associations="1"
+                               max-associations="1"
+    >
+      <qti-prompt slot="prompt">
+        Hidden in this list of characters from famous Shakespeare plays are three pairs of rivals. Can you match each
+        character to his adversary?
+      </qti-prompt>
+      <qti-simple-associable-choice identifier="A"
+                                    match-max="1"
+                                    qti-draggable="true"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+      >
+        Antonio
+      </qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="C"
+                                    match-max="1"
+                                    qti-draggable="true"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+      >
+        Capulet
+      </qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="D"
+                                    match-max="1"
+                                    qti-draggable="true"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+      >
+        Demetrius
+      </qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="L"
+                                    match-max="1"
+                                    qti-draggable="true"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+      >
+        Lysander
+      </qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="M"
+                                    match-max="1"
+                                    qti-draggable="true"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+      >
+        Montague
+      </qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="P"
+                                    match-max="1"
+                                    qti-draggable="true"
+                                    slot="qti-simple-associable-choice"
+                                    part="qti-simple-associable-choice"
+      >
+        Prospero
+      </qti-simple-associable-choice>
+    </qti-associate-interaction>
+  </div>
+  <h2>
+    qti-graphic-gap-match-interaction
+  </h2>
+  <qti-graphic-gap-match-interaction class="qti-choices-top qti-selections-dark"
+                                     response-identifier="RESPONSE"
+                                     shuffle="false"
+                                     min-associations="0"
+                                     max-associations="4"
+                                     data-choices-container-width="376"
+  >
+    <img alt="timeline from 1939 to 1991"
+         src="qti-graphic-gap-match-interaction/timeline-558.png"
+         height="326"
+         width="558"
+    >
+    <qti-gap-img identifier="DraggerA"
+                 match-max="1"
+                 qti-draggable="true"
+                 slot="qti-gap-img"
+    >
+      <img src="qti-graphic-gap-match-interaction/a-cw.png"
+           alt="Choice A, The Cold War Ends"
+           height="63"
+           width="78"
+      >
+    </qti-gap-img>
+    <qti-gap-img identifier="DraggerB"
+                 match-max="1"
+                 qti-draggable="true"
+                 slot="qti-gap-img"
+    >
+      <img src="qti-graphic-gap-match-interaction/b-ww2.png"
+           alt="Choice B, World War 2 Ends"
+           height="63"
+           width="78"
+      >
+    </qti-gap-img>
+    <qti-gap-img identifier="DraggerC"
+                 match-max="1"
+                 qti-draggable="true"
+                 slot="qti-gap-img"
+    >
+      <img src="qti-graphic-gap-match-interaction/c-vietnam.png"
+           alt="Choice C, Vietnam Conflict Ends"
+           height="63"
+           width="78"
+      >
+    </qti-gap-img>
+    <qti-gap-img identifier="DraggerD"
+                 match-max="1"
+                 qti-draggable="true"
+                 slot="qti-gap-img"
+    >
+      <img src="qti-graphic-gap-match-interaction/d-bay.png"
+           alt="Choice D, Bay of Pigs"
+           height="63"
+           width="78"
+      >
+    </qti-gap-img>
+    <qti-associable-hotspot coords="55,256,133,319"
+                            identifier="A"
+                            match-max="1"
+                            shape="rect"
+                            dropzone="move"
+                            style="left: 55px; top: 256px; width: 78px; height: 63px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot coords="190,256,268,319"
+                            identifier="B"
+                            match-max="1"
+                            shape="rect"
+                            dropzone="move"
+                            style="left: 190px; top: 256px; width: 78px; height: 63px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot coords="309,256,387,319"
+                            identifier="C"
+                            match-max="1"
+                            shape="rect"
+                            dropzone="move"
+                            style="left: 309px; top: 256px; width: 78px; height: 63px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot coords="450,256,528,319"
+                            identifier="D"
+                            match-max="1"
+                            shape="rect"
+                            dropzone="move"
+                            style="left: 450px; top: 256px; width: 78px; height: 63px;"
+    >
+    </qti-associable-hotspot>
+  </qti-graphic-gap-match-interaction>
+  <h2>
+    choice-interaction
+  </h2>
+  <qti-layout-row>
+    <qti-layout-col6>
+      <qti-choice-interaction data-testid="qti-choice-interaction"
+                              data-max-selections-message="Too little selections made"
+                              data-min-selections-message="Too much selections made"
+                              response-identifier
+      >
+        <qti-prompt slot="prompt">
+          <p>
+            Which of the following features are
+            <strong>
+              new
+            </strong>
+            to QTI 3?
+          </p>
+          <p>
+            Pick 1 choice.
+          </p>
+        </qti-prompt>
+        <qti-simple-choice data-testid="choice-0"
+                           identifier="choice-0"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          I think you can use WorkFlow.
+        </qti-simple-choice>
+        <qti-simple-choice data-testid="choice-1"
+                           identifier="choice-1"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          You should use FlowChart
+        </qti-simple-choice>
+        <qti-simple-choice data-testid="choice-2"
+                           identifier="choice-2"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          No you should use Workload Rage.
+        </qti-simple-choice>
+        <qti-simple-choice data-testid="choice-3"
+                           identifier="choice-3"
+                           role="radio"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          I would recommend Chart Up.
+        </qti-simple-choice>
+      </qti-choice-interaction>
+    </qti-layout-col6>
+    <qti-layout-col6>
+      <qti-choice-interaction data-testid="qti-choice-interaction"
+                              data-max-selections-message="Too little selections made"
+                              data-min-selections-message="Too much selections made"
+                              response-identifier
+                              max-choices="2"
+                              disabled
+      >
+        <qti-prompt slot="prompt">
+          <p>
+            Which of the following features are
+            <strong>
+              new
+            </strong>
+            to QTI 3?
+          </p>
+          <p>
+            Pick 1 choice.
+          </p>
+        </qti-prompt>
+        <qti-simple-choice data-testid="choice-0"
+                           identifier="choice-0"
+                           role="checkbox"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          I think you can use WorkFlow.
+        </qti-simple-choice>
+        <qti-simple-choice data-testid="choice-1"
+                           identifier="choice-1"
+                           role="checkbox"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          You should use FlowChart
+        </qti-simple-choice>
+        <qti-simple-choice data-testid="choice-2"
+                           identifier="choice-2"
+                           role="checkbox"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          No you should use Workload Rage.
+        </qti-simple-choice>
+        <qti-simple-choice data-testid="choice-3"
+                           identifier="choice-3"
+                           role="checkbox"
+                           tabindex="0"
+                           aria-disabled="false"
+                           aria-readonly="false"
+                           aria-checked="false"
+        >
+          I would recommend Chart Up.
+        </qti-simple-choice>
+      </qti-choice-interaction>
+    </qti-layout-col6>
+  </qti-layout-row>
+  <qti-choice-interaction data-testid="qti-choice-interaction"
+                          data-max-selections-message="Too little selections made"
+                          data-min-selections-message="Too much selections made"
+                          response-identifier
+                          class="qti-input-control-hidden qti-choices-stacking-2"
+                          orientation="vertical"
+  >
+    <qti-prompt slot="prompt">
+      <p>
+        Which of the following features are
+        <strong>
+          new
+        </strong>
+        to QTI 3?
+      </p>
+      <p>
+        Pick 1 choice.
+      </p>
+    </qti-prompt>
+    <qti-simple-choice data-testid="choice-0"
+                       identifier="choice-0"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      I think you can use WorkFlow.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-1"
+                       identifier="choice-1"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      You should use FlowChart
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-2"
+                       identifier="choice-2"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      No you should use Workload Rage.
+    </qti-simple-choice>
+    <qti-simple-choice data-testid="choice-3"
+                       identifier="choice-3"
+                       role="radio"
+                       tabindex="0"
+                       aria-disabled="false"
+                       aria-readonly="false"
+                       aria-checked="false"
+    >
+      I would recommend Chart Up.
+    </qti-simple-choice>
+  </qti-choice-interaction>
+  <h2>
+    text-entry-interaction
+  </h2>
+  <qti-text-entry-interaction placeholder-text="totaal"
+                              response-identifier="RESPONSE"
+                              class="text-entry-interaction ,qti-input-width-1,qti-input-width-2,qti-input-width-3,qti-input-width-4,qti-input-width-6,qti-input-width-10,qti-input-width-15,qti-input-width-20,qti-input-width-72"
+                              expected-length
+                              pattern-mask
+                              data-patternmask-message
+  >
+  </qti-text-entry-interaction>
+  <h2>
+    extended-text-interaction
+  </h2>
+  <qti-extended-text-interaction response-identifier
+                                 class
+  >
+  </qti-extended-text-interaction>
+  <h2>
+    qti-hotspot-interaction
+  </h2>
+  <qti-hotspot-interaction response-identifier="RESPONSE"
+                           min-choices="1"
+                           max-choices="16"
+  >
+    <img src="/qti-hotspot-interaction/VH5BG1e_v2.png"
+         width="602"
+         height="452"
+    >
+    <qti-hotspot-choice identifier="A"
+                        coords="288,219,251,183,215,147,179,110,142,74,129,89,117,105,106,122,97,140,145,160,192,180,240,200,288,219"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 16.113%; top: 16.3717%; width: 31.7276%; height: 32.0796%; clip-path: polygon(100% 100%, 81% 75%, 62% 50%, 43% 25%, 24% 0%, 17% 10%, 10% 21%, 5% 33%, 0% 46%, 25% 59%, 50% 73%, 75% 87%, 100% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="B"
+                        coords="306,227,354,247,402,267,450,286,498,306,504,287,509,268,512,248,513,227,461,227,409,227,358,227,306,227"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.8306%; top: 50.2212%; width: 34.3854%; height: 17.4779%; clip-path: polygon(0% 0%, 23% 25%, 46% 51%, 70% 75%, 93% 100%, 96% 76%, 98% 52%, 100% 27%, 100% 0%, 75% 0%, 50% 0%, 25% 0%, 0% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="C"
+                        coords="304,230,341,267,378,304,415,341,451,378,465,362,477,346,487,328,496,310,448,290,400,270,352,250,304,230"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.4983%; top: 50.885%; width: 31.8937%; height: 32.7434%; clip-path: polygon(0% 0%, 19% 25%, 39% 50%, 58% 75%, 77% 100%, 84% 89%, 90% 78%, 95% 66%, 100% 54%, 75% 41%, 50% 27%, 25% 14%, 0% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="D"
+                        coords="306,223,358,223,409,223,461,223,513,223,511,202,508,182,503,163,496,144,449,164,401,183,354,203,306,223"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.8306%; top: 31.8584%; width: 34.3854%; height: 17.4779%; clip-path: polygon(0% 100%, 25% 100%, 50% 100%, 75% 100%, 100% 100%, 99% 73%, 98% 48%, 95% 24%, 92% 0%, 69% 25%, 46% 49%, 23% 75%, 0% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="E"
+                        coords="290,233,254,270,217,307,180,344,143,380,158,394,175,406,192,417,211,426,231,378,251,330,270,281,290,233"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 23.7542%; top: 51.5487%; width: 24.4186%; height: 42.6991%; clip-path: polygon(100% 0%, 76% 19%, 50% 38%, 25% 58%, 0% 76%, 10% 83%, 22% 90%, 33% 95%, 46% 100%, 60% 75%, 73% 50%, 86% 25%, 100% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="F"
+                        coords="302,233,322,281,341,330,361,378,381,426,400,417,417,406,434,394,449,380,412,344,375,307,338,270,302,233"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.1661%; top: 51.5487%; width: 24.4186%; height: 42.6991%; clip-path: polygon(0% 0%, 14% 25%, 27% 50%, 40% 75%, 54% 100%, 67% 95%, 78% 90%, 90% 83%, 100% 76%, 75% 58%, 50% 38%, 24% 19%, 0% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="G"
+                        coords="294,235,274,283,254,331,234,379,214,427,233,434,253,439,273,442,294,443,294,391,294,339,294,287,294,235"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 35.5482%; top: 51.9912%; width: 13.289%; height: 46.0177%; clip-path: polygon(100% 0%, 75% 23%, 50% 46%, 25% 69%, 0% 92%, 24% 96%, 49% 98%, 74% 100%, 100% 100%, 100% 75%, 100% 50%, 100% 25%, 100% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="H"
+                        coords="298,235,298,287,298,339,298,391,298,443,319,442,339,439,359,434,378,427,358,379,338,331,318,283,298,235"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 49.5017%; top: 51.9912%; width: 13.289%; height: 46.0177%; clip-path: polygon(0% 0%, 0% 25%, 0% 50%, 0% 75%, 0% 100%, 26% 100%, 51% 98%, 76% 96%, 100% 92%, 75% 69%, 50% 46%, 25% 23%, 0% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="I"
+                        coords="286,227,234,227,183,227,131,227,79,227,80,248,83,268,88,287,94,306,142,286,190,267,238,247,286,227"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 13.1229%; top: 50.2212%; width: 34.3854%; height: 17.4779%; clip-path: polygon(100% 0%, 75% 0%, 50% 0%, 25% 0%, 0% 0%, 0% 27%, 2% 52%, 4% 76%, 7% 100%, 30% 75%, 54% 51%, 77% 25%, 100% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="J"
+                        coords="286,223,238,203,191,183,143,164,96,144,89,163,84,182,81,202,79,223,131,223,183,223,234,223,286,223"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 13.1229%; top: 31.8584%; width: 34.3854%; height: 17.4779%; clip-path: polygon(100% 100%, 77% 75%, 54% 49%, 31% 25%, 8% 0%, 5% 24%, 2% 48%, 1% 73%, 0% 100%, 25% 100%, 50% 100%, 75% 100%, 100% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="K"
+                        coords="294,10,273,11,253,14,234,19,215,25,235,73,255,120,274,168,294,215,294,164,294,112,294,61,294,10"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 35.7143%; top: 2.21239%; width: 13.1229%; height: 45.354%; clip-path: polygon(100% 0%, 73% 0%, 48% 2%, 24% 4%, 0% 7%, 25% 31%, 51% 54%, 75% 77%, 100% 100%, 100% 75%, 100% 50%, 100% 25%, 100% 0%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="L"
+                        coords="495,140,486,122,475,105,463,89,450,74,413,110,377,147,341,183,304,219,352,200,400,180,447,160,495,140"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.4983%; top: 16.3717%; width: 31.7276%; height: 32.0796%; clip-path: polygon(100% 46%, 95% 33%, 90% 21%, 83% 10%, 76% 0%, 57% 25%, 38% 50%, 19% 75%, 0% 100%, 25% 87%, 50% 73%, 75% 59%, 100% 46%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="M"
+                        coords="302,216,338,180,374,144,411,107,447,71,432,58,416,46,399,35,380,27,361,74,341,122,321,169,302,216"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 50.1661%; top: 5.97345%; width: 24.0864%; height: 41.8142%; clip-path: polygon(0% 100%, 25% 81%, 50% 62%, 75% 42%, 100% 23%, 90% 16%, 79% 10%, 67% 4%, 54% 0%, 41% 25%, 27% 50%, 13% 75%, 0% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="N"
+                        coords="298,215,318,168,337,120,357,73,377,25,358,19,339,14,319,11,298,10,298,61,298,112,298,164,298,215"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 49.5017%; top: 2.21239%; width: 13.1229%; height: 45.354%; clip-path: polygon(0% 100%, 25% 77%, 49% 54%, 75% 31%, 100% 7%, 76% 4%, 52% 2%, 27% 0%, 0% 0%, 0% 25%, 0% 50%, 0% 75%, 0% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="O"
+                        coords="290,216,271,169,251,122,231,74,212,27,193,35,176,46,160,58,145,71,181,107,218,144,254,180,290,216"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 24.0864%; top: 5.97345%; width: 24.0864%; height: 41.8142%; clip-path: polygon(100% 100%, 87% 75%, 73% 50%, 59% 25%, 46% 0%, 33% 4%, 21% 10%, 10% 16%, 0% 23%, 25% 42%, 50% 62%, 75% 81%, 100% 100%);"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice identifier="P"
+                        coords="288,230,240,250,192,270,144,290,96,310,105,328,115,346,127,362,141,378,177,341,214,304,251,267,288,230"
+                        shape="poly"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 15.9468%; top: 50.885%; width: 31.8937%; height: 32.7434%; clip-path: polygon(100% 0%, 75% 14%, 50% 27%, 25% 41%, 0% 54%, 5% 66%, 10% 78%, 16% 89%, 23% 100%, 42% 75%, 61% 50%, 81% 25%, 100% 0%);"
+    >
+    </qti-hotspot-choice>
+  </qti-hotspot-interaction>
+  <h2>
+    qti-hottext-interaction
+  </h2>
+  <qti-hottext-interaction response-identifier="RESPONSE"
+                           max-choices="1"
+                           qti-hottext-interaction
+  >
+    <p>
+      Sponsors of the Olympic Games
+      <qti-hottext identifier="A"
+                   role="radio"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        who bought
+      </qti-hottext>
+      advertising time on United States television
+      <qti-hottext identifier="B"
+                   role="radio"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        includes
+      </qti-hottext>
+      <qti-hottext identifier="C"
+                   role="radio"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        at least
+      </qti-hottext>
+      a dozen international firms
+      <qti-hottext identifier="D"
+                   role="radio"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        whose
+      </qti-hottext>
+      names are familiar to American consumers.
+      <qti-hottext identifier="E"
+                   role="radio"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        No error.
+      </qti-hottext>
+    </p>
+  </qti-hottext-interaction>
+  <qti-hottext-interaction response-identifier="RESPONSE"
+                           max-choices="2"
+                           qti-hottext-interaction
+  >
+    <p>
+      Sponsors of the Olympic Games
+      <qti-hottext identifier="A"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        who bought
+      </qti-hottext>
+      advertising time on United States television
+      <qti-hottext identifier="B"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        includes
+      </qti-hottext>
+      <qti-hottext identifier="C"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        at least
+      </qti-hottext>
+      a dozen international firms
+      <qti-hottext identifier="D"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        whose
+      </qti-hottext>
+      names are familiar to American consumers.
+      <qti-hottext identifier="E"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        No error.
+      </qti-hottext>
+    </p>
+  </qti-hottext-interaction>
+  <qti-hottext-interaction response-identifier="RESPONSE"
+                           class="qti-input-control-hidden"
+                           max-choices
+                           qti-hottext-interaction
+  >
+    <p>
+      Sponsors of the Olympic Games
+      <qti-hottext identifier="A"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        who bought
+      </qti-hottext>
+      advertising time on United States television
+      <qti-hottext identifier="B"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        includes
+      </qti-hottext>
+      <qti-hottext identifier="C"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        at least
+      </qti-hottext>
+      a dozen international firms
+      <qti-hottext identifier="D"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        whose
+      </qti-hottext>
+      names are familiar to American consumers.
+      <qti-hottext identifier="E"
+                   role="checkbox"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+                   aria-checked="false"
+      >
+        No error.
+      </qti-hottext>
+    </p>
+  </qti-hottext-interaction>
+  <h2>
+    qti-inline-choice-interaction
+  </h2>
+  <qti-inline-choice-interaction response-identifier="RESPONSE"
+                                 class
+                                 shuffle
+  >
+    <qti-inline-choice identifier="G">
+      Gloucester
+    </qti-inline-choice>
+    <qti-inline-choice identifier="L">
+      Lancaster
+    </qti-inline-choice>
+    <qti-inline-choice identifier="Y">
+      York
+    </qti-inline-choice>
+  </qti-inline-choice-interaction>
+  <h2>
+    qti-graphic-order-interaction
+  </h2>
+  <qti-graphic-order-interaction max-choices="0"
+                                 response-identifier="RESPONSE1"
+  >
+    <img src="qti-graphic-order-interaction/uk.png"
+         height="280"
+         width="206"
+    >
+    <qti-hotspot-choice coords="78,102,8"
+                        identifier="A"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 33.9806%; top: 32.5451%; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice coords="117,171,8"
+                        identifier="B"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 52.9126%; top: 57.1879%; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice coords="166,227,8"
+                        identifier="C"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 76.699%; top: 77.1879%; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+    <qti-hotspot-choice coords="100,102,8"
+                        identifier="D"
+                        shape="circle"
+                        role="checkbox"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        aria-checked="false"
+                        style="left: 44.6602%; top: 32.5451%; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-hotspot-choice>
+  </qti-graphic-order-interaction>
+  <h2>
+    qti-graphic-associate-interaction
+  </h2>
+  <qti-graphic-associate-interaction response-identifier="RESPONSE"
+                                     max-associations="3"
+  >
+    <qti-prompt slot="prompt">
+      Mark the airline's new routes on the airport map:
+    </qti-prompt>
+    <img src="qti-graphic-associate-interaction/uk.png"
+         alt="Map of United Kingdom airports"
+         width="206"
+         height="280"
+    >
+    <qti-associable-hotspot shape="circle"
+                            coords="78,102,8"
+                            identifier="A"
+                            match-max="3"
+                            style="left: 78px; top: 102px; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot shape="circle"
+                            coords="117,171,8"
+                            identifier="B"
+                            match-max="3"
+                            style="left: 117px; top: 171px; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot shape="circle"
+                            coords="166,227,8"
+                            identifier="C"
+                            match-max="3"
+                            style="left: 166px; top: 227px; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-associable-hotspot>
+    <qti-associable-hotspot shape="circle"
+                            coords="100,102,8"
+                            identifier="D"
+                            match-max="3"
+                            style="left: 100px; top: 102px; height: 15.534px; width: 15.534px; border-radius: 9999px;"
+    >
+    </qti-associable-hotspot>
+  </qti-graphic-associate-interaction>
+  <h2>
+    qti-media-interaction
+  </h2>
+  <qti-media-interaction autostart="false"
+                         response-identifier="RESPONSE"
+                         loop
+                         min-plays
+                         max-plays
+  >
+    <qti-prompt slot="prompt">
+      Play this video.
+    </qti-prompt>
+    <video width="320"
+           height="240"
+           controls
+    >
+      <source src="qti-media-interaction/earth.mp4"
+              type="video/mp4"
+      >
+      Your browser does not support the video tag
+    </video>
+  </qti-media-interaction>
+  <h2>
+    qti-position-object-interaction
+  </h2>
+  <qti-position-object-stage>
+    <img src="https://qti-convert.web.app/images/uk.png"
+         width="206"
+         height="280"
+    >
+    <qti-position-object-interaction response-identifier="RESPONSE"
+                                     max-choices="3"
+    >
+      <img src="https://qti-convert.web.app/images/airport.png"
+           alt="Drop Zone"
+      >
+    </qti-position-object-interaction>
+  </qti-position-object-stage>
+  <h2>
+    qti-select-point-interaction
+  </h2>
+  <qti-select-point-interaction max-choices="1"
+                                response-identifier="RESPONSE1"
+  >
+    <qti-prompt slot="prompt">
+      Mark Edinburgh on this map of the United Kingdom.
+    </qti-prompt>
+    <img src="qti-select-point-interaction/uk.png"
+         height="280"
+         width="206"
+    >
+  </qti-select-point-interaction>
+  <h2>
+    qti-slider-interaction
+  </h2>
+  <qti-slider-interaction response-identifier="RESPONSE"
+                          lower-bound="0"
+                          upper-bound="10"
+                          tabindex="0"
+                          role="slider"
+                          aria-valuenow="0"
+                          style="--min: 0; --max: 10; --step: 1; --value-percentage: 0%;"
+  >
+    <qti-prompt slot="prompt">
+      In total, what percentage of the UK population do you think were eventually classified as having no religion?
+    </qti-prompt>
+  </qti-slider-interaction>
+</div>
+`;
diff --git a/src/styles/stories/__snapshots__/qti-components.stories.ts.snap b/src/styles/stories/__snapshots__/qti-components.stories.ts.snap
new file mode 100644
index 00000000..02524d93
--- /dev/null
+++ b/src/styles/stories/__snapshots__/qti-components.stories.ts.snap
@@ -0,0 +1,550 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`styles/themes Components smoke-test 1`] = `
+<div id="root-inner">
+  <div class="grid grid-cols-6 gap-4 p-4">
+    <div class="text-xs">
+      button
+    </div>
+    <div class="text-xs">
+      hover
+    </div>
+    <div class="text-xs">
+      focus
+    </div>
+    <div class="text-xs">
+      active
+    </div>
+    <div class="text-xs">
+      active+focus
+    </div>
+    <div class="text-xs">
+      disabled
+    </div>
+    <button-component role="radio"
+                      aria-checked="false"
+                      class="check "
+    >
+      check
+    </button-component>
+    <button-component role="radio"
+                      aria-checked="false"
+                      class="check hov "
+    >
+      check
+    </button-component>
+    <button-component role="radio"
+                      aria-checked="false"
+                      class="check foc "
+    >
+      check
+    </button-component>
+    <button-component role="radio"
+                      aria-checked="true"
+                      class="check act "
+    >
+      check
+    </button-component>
+    <button-component role="radio"
+                      aria-checked="true"
+                      class="check foc act "
+    >
+      check
+    </button-component>
+    <button-component role="radio"
+                      aria-checked="false"
+                      class="check dis "
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="false"
+                      class="check "
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="false"
+                      class="check hov "
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="false"
+                      class="check foc "
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="true"
+                      class="check act "
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="true"
+                      class="check foc act "
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="false"
+                      class="check dis "
+    >
+      check
+    </button-component>
+    <div class="button ">
+      button
+    </div>
+    <div class="button  hov ">
+      button
+    </div>
+    <div class="button  foc ">
+      button
+    </div>
+    <div class="button  act ">
+      button
+    </div>
+    <div class="button  foc act ">
+      button
+    </div>
+    <div class="button  dis ">
+      button
+    </div>
+    <div class="spot ">
+    </div>
+    <div class="spot  hov ">
+    </div>
+    <div class="spot  foc ">
+    </div>
+    <div class="spot  act ">
+    </div>
+    <div class="spot  foc act ">
+    </div>
+    <div class="spot  dis ">
+    </div>
+    <div class="drag ">
+      drag
+    </div>
+    <div class="drag hov ">
+      drag
+    </div>
+    <div class="drag foc ">
+      drag
+    </div>
+    <div class="drag act ">
+      drag
+    </div>
+    <div class="drag foc act ">
+      drag
+    </div>
+    <div class="drag dis ">
+      drag
+    </div>
+    <div class="drop ">
+    </div>
+    <div class="drop hov ">
+    </div>
+    <div class="drop foc ">
+    </div>
+    <div class="drop act ">
+    </div>
+    <div class="drop foc act ">
+    </div>
+    <div class="drop dis ">
+    </div>
+    <div class="drop ">
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop hov ">
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop foc ">
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop act ">
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop foc act ">
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop dis ">
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop ">
+      With text
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop hov ">
+      With text
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop foc ">
+      With text
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop act ">
+      With text
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop foc act ">
+      With text
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <div class="drop dis ">
+      With text
+      <div class="drag ">
+        drag
+      </div>
+    </div>
+    <input type="text"
+           value="Button text"
+           class="text "
+    >
+    <input type="text"
+           value="Button text"
+           class="text hov "
+    >
+    <input type="text"
+           value="Button text"
+           class="text foc "
+    >
+    <input type="text"
+           value="Button text"
+           class="text act "
+    >
+    <input type="text"
+           value="Button text"
+           class="text foc act "
+    >
+    <input type="text"
+           value="Button text"
+           class="text dis "
+    >
+    <select class="select ">
+      <option>
+        Button text
+      </option>
+    </select>
+    <select class="select hov ">
+      <option>
+        Button text
+      </option>
+    </select>
+    <select class="select foc ">
+      <option>
+        Button text
+      </option>
+    </select>
+    <select class="select act ">
+      <option>
+        Button text
+      </option>
+    </select>
+    <select class="select foc act ">
+      <option>
+        Button text
+      </option>
+    </select>
+    <select class="select dis ">
+      <option>
+        Button text
+      </option>
+    </select>
+  </div>
+  <div class="grid grid-cols-6 gap-4 p-4">
+    <div class="text-xs">
+      button
+    </div>
+    <div class="text-xs">
+      hover
+    </div>
+    <div class="text-xs">
+      focus
+    </div>
+    <div class="text-xs">
+      active
+    </div>
+    <div class="text-xs">
+      active+focus
+    </div>
+    <div class="text-xs">
+      disabled
+    </div>
+    <button-component role="radio"
+                      aria-checked="false"
+                      class="check sm"
+    >
+      check
+    </button-component>
+    <button-component role="radio"
+                      aria-checked="false"
+                      class="check hov sm"
+    >
+      check
+    </button-component>
+    <button-component role="radio"
+                      aria-checked="false"
+                      class="check foc sm"
+    >
+      check
+    </button-component>
+    <button-component role="radio"
+                      aria-checked="true"
+                      class="check act sm"
+    >
+      check
+    </button-component>
+    <button-component role="radio"
+                      aria-checked="true"
+                      class="check foc act sm"
+    >
+      check
+    </button-component>
+    <button-component role="radio"
+                      aria-checked="false"
+                      class="check dis sm"
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="false"
+                      class="check sm"
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="false"
+                      class="check hov sm"
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="false"
+                      class="check foc sm"
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="true"
+                      class="check act sm"
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="true"
+                      class="check foc act sm"
+    >
+      check
+    </button-component>
+    <button-component role="checkbox"
+                      aria-checked="false"
+                      class="check dis sm"
+    >
+      check
+    </button-component>
+    <div class="button sm">
+      button
+    </div>
+    <div class="button sm hov ">
+      button
+    </div>
+    <div class="button sm foc ">
+      button
+    </div>
+    <div class="button sm act ">
+      button
+    </div>
+    <div class="button sm foc act ">
+      button
+    </div>
+    <div class="button sm dis ">
+      button
+    </div>
+    <div class="spot sm">
+    </div>
+    <div class="spot sm hov ">
+    </div>
+    <div class="spot sm foc ">
+    </div>
+    <div class="spot sm act ">
+    </div>
+    <div class="spot sm foc act ">
+    </div>
+    <div class="spot sm dis ">
+    </div>
+    <div class="drag sm">
+      drag
+    </div>
+    <div class="drag hov sm">
+      drag
+    </div>
+    <div class="drag foc sm">
+      drag
+    </div>
+    <div class="drag act sm">
+      drag
+    </div>
+    <div class="drag foc act sm">
+      drag
+    </div>
+    <div class="drag dis sm">
+      drag
+    </div>
+    <div class="drop sm">
+    </div>
+    <div class="drop hov sm">
+    </div>
+    <div class="drop foc sm">
+    </div>
+    <div class="drop act sm">
+    </div>
+    <div class="drop foc act sm">
+    </div>
+    <div class="drop dis sm">
+    </div>
+    <div class="drop sm">
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop hov sm">
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop foc sm">
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop act sm">
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop foc act sm">
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop dis sm">
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop sm">
+      With text
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop hov sm">
+      With text
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop foc sm">
+      With text
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop act sm">
+      With text
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop foc act sm">
+      With text
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <div class="drop dis sm">
+      With text
+      <div class="drag sm">
+        drag
+      </div>
+    </div>
+    <input type="text"
+           value="Button text"
+           class="text sm"
+    >
+    <input type="text"
+           value="Button text"
+           class="text hov sm"
+    >
+    <input type="text"
+           value="Button text"
+           class="text foc sm"
+    >
+    <input type="text"
+           value="Button text"
+           class="text act sm"
+    >
+    <input type="text"
+           value="Button text"
+           class="text foc act sm"
+    >
+    <input type="text"
+           value="Button text"
+           class="text dis sm"
+    >
+    <select class="select sm">
+      <option>
+        Button text
+      </option>
+    </select>
+    <select class="select hov sm">
+      <option>
+        Button text
+      </option>
+    </select>
+    <select class="select foc sm">
+      <option>
+        Button text
+      </option>
+    </select>
+    <select class="select act sm">
+      <option>
+        Button text
+      </option>
+    </select>
+    <select class="select foc act sm">
+      <option>
+        Button text
+      </option>
+    </select>
+    <select class="select dis sm">
+      <option>
+        Button text
+      </option>
+    </select>
+  </div>
+</div>
+`;
diff --git a/src/styles/stories/__snapshots__/qti-layout-styles.stories.ts.snap b/src/styles/stories/__snapshots__/qti-layout-styles.stories.ts.snap
new file mode 100644
index 00000000..47bd41bf
--- /dev/null
+++ b/src/styles/stories/__snapshots__/qti-layout-styles.stories.ts.snap
@@ -0,0 +1,349 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`styles/layout FixedContainer smoke-test 1`] = `
+<div id="root-inner">
+  <div class="container">
+    <h3 style="margin-top:0;">
+      Fixed Container, qti-layout-row, qti-layout-col
+    </h3>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col3">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col3">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col3">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col3">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col4">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col4">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col4">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col5">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col7">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col6">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col6">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col12">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy
+        dog. The quick brown fox jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <br>
+    <h3>
+      Fixed Container, qti-layout-row, qti-layout-col, qti-layout-offset
+    </h3>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col6 qti-layout-offset3">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy
+        dog. The quick brown fox jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col4 qti-layout-offset2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col4">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col2 qti-layout-offset1">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col4 qti-layout-offset1">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2 qti-layout-offset1">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+  </div>
+</div>
+`;
+
+exports[`styles/layout FluidContainer smoke-test 1`] = `
+<div id="root-inner">
+  <div class="container-fluid">
+    <h3 style="margin-top:0;">
+      Fluid Container, qti-layout-row, qti-layout-col
+    </h3>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col1">
+        The quick brown fox jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col3">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col3">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col3">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col3">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col4">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col4">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col4">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col5">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col7">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col6">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col6">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col12">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy
+        dog. The quick brown fox jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <br>
+    <h3>
+      Fluid Container, qti-layout-row, qti-layout-col, qti-layout-offset
+    </h3>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col6 qti-layout-offset3">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy
+        dog. The quick brown fox jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col4 qti-layout-offset2">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col4">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+    <div class="qti-layout-row">
+      <div class="qti-layout-col2 qti-layout-offset1">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col4 qti-layout-offset1">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+      <div class="qti-layout-col2 qti-layout-offset1">
+        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
+        jumped over the lazy dog.
+      </div>
+    </div>
+    <hr>
+  </div>
+</div>
+`;