@citolab/qti-components 6.3.7 → 6.4.0

package/dist/{chunk-WEDIB3NH.cjs → chunk-4UAPG3LE.cjs}

@@ -1,445 +1,5 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkBKBZWUX6cjs = require('./chunk-BKBZWUX6.cjs');var _chunkCCQXZDO6cjs = require('./chunk-CCQXZDO6.cjs');var _chunk6G76D2MIcjs = require('./chunk-6G76D2MI.cjs');var _lit = require('lit');var _decoratorsjs = require('lit/decorators.js');var _unsafehtmljs = require('lit/directives/unsafe-html.js');var _context = require('@lit/context');var w=`/* PK: Tailwind theming file for all qti-components
-  Uses tailwind components and utilities from the other files
-
-  https://play.tailwindcss.com/OFThGk8CbR
-  https://play.tailwindcss.com/CeHVrnwgXR
-  https://play.tailwindcss.com/JOgoCf81JM
-
-  We make use of the default prose stylesheet, since it is much better looking then
-  the default HTML styling.
-  https://play.tailwindcss.com/uj1vGACRJA?layout=preview
-
-  So first we ( as tailwind does ) reset ALL styling on all default elements
-  Then we add the prose stylesheet: the Interaction will / or will not have a no-prose declaration, don't know about that yet
-  Then we create tailwind components
-  Then we consume these components in our qti-webcomponents
-
-  outline: used for focus
-  ring: used for border around the elements, can be active, its an inner ring, except for
-  the dropping well, because that has to surround the drag with the inner ring
-
-  There are 6 types
-  - text    : text-entry and extended-text
-  - select  : inline-choice
-  - button  : .input-control-hidden qti-choice, qti-hotspot
-  - check   : qti-choice, qti-hotspot
-  - drag    : gap-match, match, order, associate
-  - drop    : gap-match, match, order, associate
-  - spot    : gap-select-point, graphic-order, qti-graphic-associate
-
-  trying to get the follower modifiers to work:
-
-  - sm   , for elements inside text
-  - lg,  , for large readable containers
-  - in  , inline in text
-
-  taking into account cursors, select-none for some of the elements
-*/
-
-/* FIXMEs 
-  Outline always on top, sometimes it slips under the hover background
-  Intext with inline gaps does not align nicely with existing text https://play.tailwindcss.com/cJEGhvANwM
-  modifiers can not be in components, like this example where red should be a modifier inside base https://play.tailwindcss.com/JSnnv1Vvab?file=css
-  */
-
-/* @layer base, components, utilities, variants; */
-
-/* layout, dimensions, design */
-
-/* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
-*/
-
-/*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-*,
-::before,
-::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: #e5e7eb; /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured \`sans\` font-family by default.
-5. Use the user's configured \`sans\` font-feature-settings by default.
-6. Use the user's configured \`sans\` font-variation-settings by default.
-*/
-
-html {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -moz-tab-size: 4; /* 3 */
-  -o-tab-size: 4;
-     tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
-  font-feature-settings: normal; /* 5 */
-  font-variation-settings: normal; /* 6 */
-}
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
-*/
-
-body {
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured \`mono\` font family by default.
-2. Correct the odd \`em\` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  font-weight: inherit; /* 1 */
-  line-height: inherit; /* 1 */
-  color: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button; /* 1 */
-  background-color: transparent; /* 2 */
-  background-image: none; /* 2 */
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to \`inherit\` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Reset default styling for dialogs.
-*/
-
-dialog {
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::-moz-placeholder, textarea::-moz-placeholder {
-  opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
-}
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
-}
-
-/*
-Set the default cursor for buttons.
-*/
-
-button,
-[role="button"] {
-  cursor: pointer;
-}
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-
-[hidden] {
-  display: none;
-}
-
-/** default styles for all components */
-
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkCCQXZDO6cjs = require('./chunk-CCQXZDO6.cjs');var _chunkHYQC3D4Zcjs = require('./chunk-HYQC3D4Z.cjs');var _lit = require('lit');var _decoratorsjs = require('lit/decorators.js');var _unsafehtmljs = require('lit/directives/unsafe-html.js');var w=`
+  /** default styles for all components */
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -489,7 +49,6 @@ video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
-
 ::backdrop{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -539,100 +98,106 @@ video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
-
 /** The different components, you can choose only one */
-
 /* - button  : .input-control-hidden qti-choice, qti-hotspot */
-
 /*  - select  : inline-choice */
-
 /* - check   : qti-choice, qti-hotspot */
-
 /* !important, remove for checkbox and radio the active ring, the radio and checkbox will be selected instead */
-
 /* @apply select-none; */
-
 /* - text    : text-entry and extended-text */
-
 /* - spot    : gap-select-point, graphic-order, qti-graphic-associate */
-
 /* - drag    : gap-match, match, order, associate */
-
 /* - drop    : gap-match, match, order, associate */
-
 /** End components */
-
 /* hover, every element has a hover, except disabled( which overrides hover */
-
 /* focus, every element has a focus, even drop ( for keyboard access, eventually ) */
-
 /* active, choice active class and, used on checkbox and radio where not .qti-input-choice-hidden */
-
 /* readonly, overwrites cursor, hover background, outline for focus and ring */
-
 /* disabled, make gray state */
-
 /* drag in the drop, else the drag in the drop was black and not gray */
-
 /** Modifiers */
-
 /* PK: There was no utility to reset the ring-inset
   We use this for the drop container, where we want the ring to have an outset
   So the drag, with ring-inset, snugs neatly into the drop with ring-'outset' 
   by unsetting the ring-inset */
-
 /* intext for elements which has to appear in text
   - intext    : gap-match > qti-gap, hottext > hottext, select
   */
-
 /* small for elements which has to appear in text
   - intext    : gap-match > qti-gap, hottext > hottext, select
 */
-
 /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
+/* PK: Tailwind theming file for all qti-components
+  Uses tailwind components and utilities from the other files
 
-/* QTI Interactions */
+  https://play.tailwindcss.com/OFThGk8CbR
+  https://play.tailwindcss.com/CeHVrnwgXR
+  https://play.tailwindcss.com/JOgoCf81JM
+
+  You should in you project include modern-normalize.css
+
+  Then we create tailwind components
+  Then we consume these components in our qti-webcomponents
+
+  outline: used for focus
+  ring: used for border around the elements, can be active, its an inner ring, except for
+  the dropping well, because that has to surround the drag with the inner ring
+
+  There are 6 types
+  - text    : text-entry and extended-text
+  - select  : inline-choice
+  - button  : .input-control-hidden qti-choice, qti-hotspot
+  - check   : qti-choice, qti-hotspot
+  - drag    : gap-match, match, order, associate
+  - drop    : gap-match, match, order, associate
+  - spot    : gap-select-point, graphic-order, qti-graphic-associate
+
+  trying to get the follower modifiers to work:
 
+  - sm   , for elements inside text
+  - lg,  , for large readable containers
+  - in  , inline in text
+
+  taking into account cursors, select-none for some of the elements
+*/
+/* FIXMEs 
+  Outline always on top, sometimes it slips under the hover background
+  Intext with inline gaps does not align nicely with existing text https://play.tailwindcss.com/cJEGhvANwM
+  modifiers can not be in components, like this example where red should be a modifier inside base https://play.tailwindcss.com/JSnnv1Vvab?file=css
+  */
+/* @layer base, components, utilities, variants; */
+/* layout, dimensions, design */
+/* QTI Interactions */
 .qti-underline {
   text-decoration: underline;
 }
-
 .qti-align-left {
   text-align: left;
 }
-
 .qti-align-center {
   text-align: center;
 }
-
 .qti-align-right {
   text-align: right;
 }
-
 .qti-valign-top {
   vertical-align: top;
 }
-
 .qti-valign-middle {
   vertical-align: middle;
 }
-
 .qti-valign-baseline {
   vertical-align: baseline;
 }
-
 .qti-valign-bottom {
   vertical-align: bottom;
 }
-
 .qti-fullwidth {
   width: 100%;
 }
-
 .qti-hidden {
   display: none;
 }
-
 .qti-visually-hidden {
   position: fixed !important;
   overflow: hidden;
@@ -642,12 +207,10 @@ video {
   margin: -1px;
   clip: rect(1px 1px 1px 1px);
 }
-
 .qti-bordered {
   padding: 2px;
   border: 1px solid #888;
 }
-
 .qti-well{
   cursor: pointer;
   outline: 2px solid transparent;
@@ -672,165 +235,125 @@ video {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
-
 .qti-layout-row {
   display: flow-root;
   width: 100%;
 }
-
 .qti-layout-row [class*='qti-layout-col'] {
   margin-left: 2.1276595745%;
   float: left;
 }
-
 .qti-layout-row [class*='qti-layout-col']:first-child {
   margin-left: 0;
 }
-
 .qti-layout-row .qti-layout-col12 {
   width: 100%;
 }
-
 .qti-layout-row .qti-layout-offset12 {
   margin-left: 104.2553191489%;
 }
-
 .qti-layout-row .qti-layout-offset12:first-child {
   margin-left: 102.1276595745%;
 }
-
 .qti-layout-row .qti-layout-col11 {
   width: 91.4893617021%;
 }
-
 .qti-layout-row .qti-layout-offset11 {
   margin-left: 95.7446808511%;
 }
-
 .qti-layout-row .qti-layout-offset11:first-child {
   margin-left: 93.6170212766%;
 }
-
 .qti-layout-row .qti-layout-col10 {
   width: 82.9787234043%;
 }
-
 .qti-layout-row .qti-layout-offset10 {
   margin-left: 87.2340425532%;
 }
-
 .qti-layout-row .qti-layout-offset10:first-child {
   margin-left: 85.1063829787%;
 }
-
 .qti-layout-row .qti-layout-col9 {
   width: 74.4680851064%;
 }
-
 .qti-layout-row .qti-layout-offset9 {
   margin-left: 78.7234042553%;
 }
-
 .qti-layout-row .qti-layout-offset9:first-child {
   margin-left: 76.5957446809%;
 }
-
 .qti-layout-row .qti-layout-col8 {
   width: 65.9574468085%;
 }
-
 .qti-layout-row .qti-layout-offset8 {
   margin-left: 70.2127659574%;
 }
-
 .qti-layout-row .qti-layout-offset8:first-child {
   margin-left: 68.085106383%;
 }
-
 .qti-layout-row .qti-layout-col7 {
   width: 57.4468085106%;
 }
-
 .qti-layout-row .qti-layout-offset7 {
   margin-left: 61.7021276596%;
 }
-
 .qti-layout-row .qti-layout-offset7:first-child {
   margin-left: 59.5744680851%;
 }
-
 .qti-layout-row .qti-layout-col6 {
   width: 48.9361702128%;
 }
-
 .qti-layout-row .qti-layout-offset6 {
   margin-left: 53.1914893617%;
 }
-
 .qti-layout-row .qti-layout-offset6:first-child {
   margin-left: 51.0638297872%;
 }
-
 .qti-layout-row .qti-layout-col5 {
   width: 40.4255319149%;
 }
-
 .qti-layout-row .qti-layout-offset5 {
   margin-left: 44.6808510638%;
 }
-
 .qti-layout-row .qti-layout-offset5:first-child {
   margin-left: 42.5531914894%;
 }
-
 .qti-layout-row .qti-layout-col4 {
   width: 31.914893617%;
 }
-
 .qti-layout-row .qti-layout-offset4 {
   margin-left: 36.170212766%;
 }
-
 .qti-layout-row .qti-layout-offset4:first-child {
   margin-left: 34.0425531915%;
 }
-
 .qti-layout-row .qti-layout-col3 {
   width: 23.4042553191%;
 }
-
 .qti-layout-row .qti-layout-offset3 {
   margin-left: 27.6595744681%;
 }
-
 .qti-layout-row .qti-layout-offset3:first-child {
   margin-left: 25.5319148936%;
 }
-
 .qti-layout-row .qti-layout-col2 {
   width: 14.8936170213%;
 }
-
 .qti-layout-row .qti-layout-offset2 {
   margin-left: 19.1489361702%;
 }
-
 .qti-layout-row .qti-layout-offset2:first-child {
   margin-left: 17.0212765957%;
 }
-
 .qti-layout-row .qti-layout-col1 {
   width: 6.3829787234%;
 }
-
 .qti-layout-row .qti-layout-offset1 {
   margin-left: 10.6382978723%;
 }
-
 .qti-layout-row .qti-layout-offset1:first-child {
   margin-left: 8.5106382979%;
 }
-
 /* .qti-input-width-1 {
   width: 1ch;
   min-width: 1ch;
@@ -867,13 +390,11 @@ video {
   width: 72ch;
   min-width: 72ch;
 } */
-
 qti-choice-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   gap: 0.5rem;
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -895,17 +416,14 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     /* @apply select-none; */
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -913,7 +431,6 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -926,12 +443,10 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled=
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -944,7 +459,6 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly=
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -969,13 +483,11 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice::part(cha) {
       /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
       height: 66.666667%;
       width: 66.666667%;
     }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch){
   display: flex;
   height: 1.25rem;
@@ -994,13 +506,11 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='ra
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio'][aria-checked='true']::part(cha){
   border-radius: 9999px;
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox']::part(ch){
   display: flex;
   height: 1.25rem;
@@ -1019,23 +529,19 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='ch
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox'][aria-checked='true']::part(cha){
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1043,7 +549,6 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-che
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1056,12 +561,10 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-dis
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1074,17 +577,22 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-rea
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
+qti-choice-interaction qti-simple-choice[data-correct-response='true'] {
+      /* @apply bg-green-100 text-green-600; */
+    }
+qti-choice-interaction qti-simple-choice[data-correct-response='true']::after {
+        content: '\\02714';
+        --tw-text-opacity: 1;
+        color: rgb(22 163 74 / var(--tw-text-opacity));
+      }
 qti-choice-interaction qti-simple-choice > p{
   margin: 0px;
   padding: 0px;
 }
-
 qti-text-entry-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
 qti-text-entry-interaction::part(input){
   cursor: pointer;
   outline: 2px solid transparent;
@@ -1105,22 +613,18 @@ qti-text-entry-interaction::part(input){
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-
 qti-text-entry-interaction::part(input):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-text-entry-interaction::part(input):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-extended-text-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
 qti-extended-text-interaction::part(textarea){
   cursor: pointer;
   outline: 2px solid transparent;
@@ -1141,23 +645,19 @@ qti-extended-text-interaction::part(textarea){
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-
 qti-extended-text-interaction::part(textarea):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-extended-text-interaction::part(textarea):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-gap-match-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   line-height: 2rem;
 }
-
 qti-gap-match-interaction qti-gap-text{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1194,17 +694,14 @@ qti-gap-match-interaction qti-gap-text{
     padding-right: 0.5rem;
     line-height: 1.5;
 }
-
 qti-gap-match-interaction qti-gap-text:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-gap-match-interaction qti-gap-text:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-gap-match-interaction qti-gap{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1229,27 +726,21 @@ qti-gap-match-interaction qti-gap{
     display: inline-flex;
     line-height: 1.5;
 }
-
 qti-gap-match-interaction qti-gap:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-gap-match-interaction qti-gap:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-gap-match-interaction qti-gap{
   width: 8rem;
 }
-
 /* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
-
 qti-gap-match-interaction qti-gap:empty:after {
       content: '\\0000a0'; /* when empty, put a space in it */
     }
-
 qti-gap-match-interaction qti-gap:not(:empty){
   display: inline-flex;
   width: auto;
@@ -1258,7 +749,6 @@ qti-gap-match-interaction qti-gap:not(:empty){
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-
 qti-gap-match-interaction qti-gap:not(:empty) > *{
   flex: 1 1 0%;
   --tw-rotate: 0deg;
@@ -1269,17 +759,14 @@ qti-gap-match-interaction qti-gap:not(:empty) > *{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
 qti-hotspot-interaction qti-hotspot-choice:hover{
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.3;
 }
-
 qti-hotspot-interaction qti-hotspot-choice {
 
     /* &::after {
@@ -1290,7 +777,6 @@ qti-hotspot-interaction qti-hotspot-choice {
         clip-path: inherit;
       } */
   }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle']{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1310,17 +796,14 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle']{
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
   border-radius: 9999px;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle']:hover{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle']:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1328,7 +811,6 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-checked="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1341,12 +823,10 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"]
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1359,7 +839,6 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-readonly="true"]
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect']{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1378,17 +857,14 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect']{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect']:hover{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect']:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1396,7 +872,6 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-checked="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1409,12 +884,10 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1427,17 +900,14 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-readonly="true"]{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly']:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly']:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1445,7 +915,6 @@ qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1458,12 +927,10 @@ qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1476,17 +943,14 @@ qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-readonly="true"]{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked='true']{
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
-
 qti-hottext-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1512,17 +976,14 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext{
     /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
     /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1530,7 +991,6 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1543,12 +1003,10 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1561,11 +1019,9 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext::part(ch){
   display: none !important;
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1590,13 +1046,11 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(cha) {
       /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
       height: 66.666667%;
       width: 66.666667%;
     }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch){
   display: flex;
   height: 1.25rem;
@@ -1615,13 +1069,11 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio'][aria-checked='true']::part(cha){
   border-radius: 9999px;
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox']::part(ch){
   display: flex;
   height: 1.25rem;
@@ -1640,13 +1092,11 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbo
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox'][aria-checked='true']::part(cha){
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
   display: inline-flex;
 
@@ -1662,7 +1112,6 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
 
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch){
   height: 1rem !important;
   width: 1rem !important;
@@ -1670,17 +1119,14 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch){
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1688,7 +1134,6 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked=
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1701,12 +1146,10 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1719,7 +1162,6 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-inline-choice-interaction::part(select){
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1745,27 +1187,22 @@ qti-inline-choice-interaction::part(select){
     background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
       no-repeat center right 6px;
 }
-
 qti-inline-choice-interaction::part(select):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-inline-choice-interaction::part(select):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-inline-choice-interaction::part(select) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */
   }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type{
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   padding-bottom: 1rem;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1801,24 +1238,20 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type
     padding-left: 1rem;
     padding-right: 0.75rem;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type{
   display: grid;
   grid-auto-columns: minmax(0, 1fr);
   grid-auto-flow: column;
   gap: 0.5rem;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1841,24 +1274,20 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
   --tw-ring-offset-width: 1px;
     --tw-ring-inset: unset;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
       /* @apply flex h-32  flex-col gap-2; */
       display: flex;
       height: 8rem;
       flex-direction: column;
     }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1894,21 +1323,17 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
     padding-left: 1rem;
     padding-right: 0.75rem;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice {
       flex-basis: fit-content;
     }
-
 qti-order-interaction::part(qti-simple-choice),
   qti-order-interaction qti-simple-choice{
   cursor: pointer;
@@ -1945,19 +1370,16 @@ qti-order-interaction::part(qti-simple-choice),
     padding-left: 1rem;
     padding-right: 0.75rem;
 }
-
 qti-order-interaction::part(qti-simple-choice):hover,
   qti-order-interaction qti-simple-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-order-interaction::part(qti-simple-choice):focus,
   qti-order-interaction qti-simple-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-order-interaction::part(qti-simple-choice){
   display: flex;
   width: 100%;
@@ -1965,15 +1387,12 @@ qti-order-interaction::part(qti-simple-choice){
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
 qti-order-interaction::part(drops){
   gap: 0.5rem;
 }
-
 qti-order-interaction::part(drags){
   gap: 0.5rem;
 }
-
 qti-order-interaction::part(drop-list){
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1998,17 +1417,14 @@ qti-order-interaction::part(drop-list){
     display: flex;
     min-height: 4rem;
 }
-
 qti-order-interaction::part(drop-list):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-order-interaction::part(drop-list):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-order-interaction::part(active){
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2016,7 +1432,6 @@ qti-order-interaction::part(active){
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-associate-interaction::part(qti-simple-associable-choice),
   qti-associate-interaction qti-simple-associable-choice{
   cursor: pointer;
@@ -2057,19 +1472,16 @@ qti-associate-interaction::part(qti-simple-associable-choice),
     padding-left: 1rem;
     padding-right: 0.75rem;
 }
-
 qti-associate-interaction::part(qti-simple-associable-choice):hover,
   qti-associate-interaction qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-associate-interaction::part(qti-simple-associable-choice):focus,
   qti-associate-interaction qti-simple-associable-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-associate-interaction::part(associables-container){
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -2083,7 +1495,6 @@ qti-associate-interaction::part(associables-container){
       rgb(0 0 0 / 0%) calc(50% + 1px)
     );
 }
-
 qti-associate-interaction::part(active){
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2091,7 +1502,6 @@ qti-associate-interaction::part(active){
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-associate-interaction::part(drop-list){
   cursor: pointer;
   border-radius: 0.375rem;
@@ -2117,9 +1527,7 @@ qti-associate-interaction::part(drop-list){
     height: 3rem;
     width: 33.333333%;
 }
-
 /* @apply my-2; */
-
 qti-graphic-order-interaction qti-hotspot-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -2138,17 +1546,14 @@ qti-graphic-order-interaction qti-hotspot-choice{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
 }
-
 qti-graphic-order-interaction qti-hotspot-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-graphic-order-interaction qti-hotspot-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2156,7 +1561,6 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -2169,12 +1573,10 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -2187,7 +1589,6 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 /* &::after {
         content: '';
         @apply absolute top-0 block scale-75 bg-white;
@@ -2195,7 +1596,6 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
         width: inherit;
         clip-path: inherit;
       } */
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]{
   height: 1.5rem;
   width: 1.5rem;
@@ -2208,16 +1608,13 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]{
   align-items: center;
   justify-content: center;
 }
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]::after {
       content: attr(aria-ordervalue) !important;
     }
-
 qti-graphic-associate-interaction{
   position: relative;
   display: block;
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       /* border-radius: 100%;
         background-color: green; */
@@ -2238,17 +1635,14 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       --tw-ring-opacity: 1;
       --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
     }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2256,7 +1650,6 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-ch
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -2269,12 +1662,10 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-di
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -2287,7 +1678,6 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-re
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
       /* border-radius: 0; */
       /* background-color: green; */
@@ -2308,17 +1698,14 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
       --tw-ring-opacity: 1;
       --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
     }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2326,7 +1713,6 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-ch
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -2339,12 +1725,10 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-di
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -2357,30 +1741,24 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-re
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-graphic-gap-match-interaction{
   position: relative;
 }
-
 qti-graphic-gap-match-interaction img{
   margin: 0px;
   padding: 0px;
 }
-
 qti-slider-interaction{
   display: block; /* else no screenshot will be made with html-to-image */
 }
-
 qti-slider-interaction:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-slider-interaction:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-slider-interaction[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2388,7 +1766,6 @@ qti-slider-interaction[aria-checked="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-slider-interaction[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -2401,12 +1778,10 @@ qti-slider-interaction[aria-disabled="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-slider-interaction[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-slider-interaction[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -2419,34 +1794,28 @@ qti-slider-interaction[aria-readonly="true"]{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-slider-interaction {
 
   --qti-tick-color: rgb(229 231 235 / 1);
   --qti-tick-width: 2px;
 }
-
 qti-slider-interaction::part(slider){
   margin-left: 2rem;
   margin-right: 2rem; /* so the slider stays INSIDE of the qti-slider-interaction */ padding-bottom: 1rem; padding-top: 1.25rem; /* this keeps all content in the qti-slider interaction, also for html-to-image */
 }
-
 qti-slider-interaction{
 
   --show-bounds: true;
 }
-
 qti-slider-interaction::part(bounds){
   display: flex;
   width: 100%;
   justify-content: space-between; /* the two divs with value lower and upper will now be at start and end of this bounds container */ margin-bottom: 0.5rem; /* just so it aligns with the value 'knob' */
 }
-
 qti-slider-interaction{
 
   --show-ticks: true;
 }
-
 qti-slider-interaction::part(ticks){
   margin-left: 0.125rem;
   margin-right: 0.125rem;
@@ -2456,14 +1825,12 @@ qti-slider-interaction::part(ticks){
     background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
     background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
 }
-
 qti-slider-interaction::part(rail){
   display: flex;
   align-items: center; /* so the knob is neatly centered vertically */
     /* DESIGN */
     box-sizing: border-box; /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */ height: 0.75rem; width: 100%; cursor: pointer; border-radius: 9999px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-
 qti-slider-interaction::part(knob){
   position: relative;
   height: 1.5rem;
@@ -2477,22 +1844,18 @@ qti-slider-interaction::part(knob){
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
     left: var(--value-percentage);
 }
-
 qti-slider-interaction{
 
   --show-value: true;
 }
-
 qti-slider-interaction::part(value){
   position: absolute;
   bottom: 2rem; /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ left: 0.75rem; /* should be half width of the knob if you want to center these two */ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); cursor: pointer; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center;
 }
-
 qti-select-point-interaction::part(point):hover{
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.3;
 }
-
 qti-select-point-interaction::part(point){
   cursor: pointer;
   border-radius: 0.375rem;
@@ -2512,79 +1875,67 @@ qti-select-point-interaction::part(point){
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
   border-radius: 9999px;
 }
-
 qti-select-point-interaction::part(point):hover{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
-
 qti-select-point-interaction::part(point):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-select-point-interaction::part(point) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/
   }
-
 qti-position-object-stage qti-position-object-interaction {
     /* no styles necessary, only layout styles, defined in the component */
     /* height: 40px; */
   }
-
 qti-prompt{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   display: block;
   width: 100%;
 }
-
 qti-choice-interaction.qti-choices-stacking-2{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-
 qti-choice-interaction.qti-choices-stacking-2 qti-prompt{
   grid-column: span 2 / span 2;
 }
-
 qti-choice-interaction.qti-choices-stacking-3{
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-
 qti-choice-interaction.qti-choices-stacking-3 qti-prompt{
   grid-column: span 3 / span 3;
 }
-
 qti-choice-interaction.qti-choices-stacking-4{
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-
 qti-choice-interaction.qti-choices-stacking-4 qti-prompt{
   grid-column: span 4 / span 4;
 }
-
 qti-choice-interaction.qti-choices-stacking-5{
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
-
 qti-choice-interaction.qti-choices-stacking-5 qti-prompt{
   grid-column: span 5 / span 5;
 }
-
 qti-choice-interaction.qti-orientation-horizontal {
     /* is the default layout */
   }
-
 qti-choice-interaction[orientation='horizontal'] {
     flex-direction: row;
   }
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-`;var o=class extends _lit.LitElement{constructor(){super();this.itemLocation="";this.disabled=!1;this._xml="";this.audienceContext={view:"candidate"};this.render=()=>_lit.html`${_unsafehtmljs.unsafeHTML.call(void 0, this._xml)}<slot></slot>`}update(t){t.has("disabled")&&this.assessmentItem&&(this.assessmentItem.disabled=this.disabled),super.update(t)}set xml(t){this._xml=_chunkCCQXZDO6cjs.a.call(void 0, t).customTypes().cDataToComment().customDefinition().assetsLocation(`${this.itemLocation}`).xml()}set css(t){var e;let a=new CSSStyleSheet;a.replaceSync(t),(e=this.shadowRoot)==null||e.adoptedStyleSheets.push(a)}get assessmentItem(){var t;return(t=this.shadowRoot)==null?void 0:t.querySelector("qti-assessment-item")}connectedCallback(){super.connectedCallback(),this.css=w}};_chunk6G76D2MIcjs.c.call(void 0, [_decoratorsjs.property.call(void 0, {type:String,attribute:"item-location"})],o.prototype,"itemLocation",2),_chunk6G76D2MIcjs.c.call(void 0, [_decoratorsjs.property.call(void 0, {type:Boolean,attribute:!1})],o.prototype,"disabled",2),_chunk6G76D2MIcjs.c.call(void 0, [_decoratorsjs.state.call(void 0, )],o.prototype,"_xml",2),_chunk6G76D2MIcjs.c.call(void 0, [_context.provide.call(void 0, {context:_chunkBKBZWUX6cjs.a}),_decoratorsjs.property.call(void 0, {attribute:!1})],o.prototype,"audienceContext",2),o= exports.a =_chunk6G76D2MIcjs.c.call(void 0, [_decoratorsjs.customElement.call(void 0, "qti-item")],o);exports.a = o;
+`;var o=class extends _lit.LitElement{constructor(){super();this.itemLocation="";this.disabled=!1;this._xml="";this.audienceContext={view:"candidate"};this.render=()=>_lit.html`${_unsafehtmljs.unsafeHTML.call(void 0, this._xml)}<slot></slot>`;this.addEventListener("qti-item-first-updated",t=>{this.checkAudienceContext()})}update(t){t.has("disabled")&&this.assessmentItem&&(this.assessmentItem.disabled=this.disabled),t.has("audienceContext")&&this.checkAudienceContext(),super.update(t)}checkAudienceContext(){var t,a;(t=this.shadowRoot.querySelectorAll("[view]"))==null||t.forEach(r=>{r.getAttribute("view")===this.audienceContext.view?r.classList.add("show"):r.classList.remove("show")}),(a=this.assessmentItem)==null||a.showCorrectResponse(this.audienceContext.view==="scorer")}set xml(t){this._xml=_chunkCCQXZDO6cjs.a.call(void 0, t).customTypes().cDataToComment().customDefinition().assetsLocation(`${this.itemLocation}`).xml()}set css(t){var r;let a=new CSSStyleSheet;a.replaceSync(t),(r=this.shadowRoot)==null||r.adoptedStyleSheets.push(a)}get assessmentItem(){var t;return(t=this.shadowRoot)==null?void 0:t.querySelector("qti-assessment-item")}connectedCallback(){super.connectedCallback(),this.css=w}};o.styles=_lit.css`
+    [view],
+    qti-outcome-declaration,
+    qti-response-declaration {
+      display: none;
+    }
+    [view].show {
+      display: block;
+    }
+  `,_chunkHYQC3D4Zcjs.c.call(void 0, [_decoratorsjs.property.call(void 0, {type:String,attribute:"item-location"})],o.prototype,"itemLocation",2),_chunkHYQC3D4Zcjs.c.call(void 0, [_decoratorsjs.property.call(void 0, {type:Boolean,attribute:!1})],o.prototype,"disabled",2),_chunkHYQC3D4Zcjs.c.call(void 0, [_decoratorsjs.state.call(void 0, )],o.prototype,"_xml",2),_chunkHYQC3D4Zcjs.c.call(void 0, [_decoratorsjs.property.call(void 0, {attribute:!1})],o.prototype,"audienceContext",2),o= exports.a =_chunkHYQC3D4Zcjs.c.call(void 0, [_decoratorsjs.customElement.call(void 0, "qti-item")],o);exports.a = o;