@citolab/qti-components 6.0.3 → 6.0.4-1

package/dist/{chunk-MYPYIYN5.js → chunk-K2XJ4SA2.js}

@@ -1,4 +1,4 @@
-import{a as s,b as h}from"./chunk-DLLHO3W2.js";import{c as r}from"./chunk-NMCIOGD2.js";import{css as u,html as m,LitElement as y}from"lit";import{property as p}from"lit/decorators.js";var l=(d,g)=>{class t extends d{constructor(){super(...arguments);this.scale=1;this.ro=new ResizeObserver(a=>{for(let e of a)this.fitToParent(e.contentRect.width)})}connectedCallback(){super.connectedCallback(),this.ro.observe(this),this.fitToParent()}set scales(a){let e=this._scales;this.requestUpdate("prop",e),this.fitToParent()}get scales(){return this._scales}fitToParent(a=this.clientWidth){let e=this.shadowRoot.querySelector(g);if(e){let c=a/e.clientWidth;this.scale=c;let f=-e.clientHeight*(1-c)+"px",b=-e.clientWidth*(1-c)+"px";requestAnimationFrame(()=>{e.style.transform=`scale(${this.scale})`,e.style.margin=`0 ${b} ${f} 0`})}}}return r([p({type:Number,reflect:!0})],t.prototype,"scale",2),r([p({type:Boolean,attribute:!1})],t.prototype,"scales",1),t};import{property as w}from"lit/decorators.js";import{unsafeHTML as q}from"lit/directives/unsafe-html.js";import{ContextProvider as k}from"@lit-labs/context";var v=`/* PK: Tailwind theming file for all qti-components
+import{a as w,b as h}from"./chunk-DLLHO3W2.js";import{c as o}from"./chunk-NMCIOGD2.js";import{css as x,html as y,LitElement as m}from"lit";import{property as l}from"lit/decorators.js";var p=(d,g)=>{class t extends d{constructor(){super(...arguments);this.scale=1;this.ro=new ResizeObserver(a=>{for(let e of a)this.fitToParent(e.contentRect.width)})}connectedCallback(){super.connectedCallback(),this.ro.observe(this),this.fitToParent()}set scales(a){let e=this._scales;this.requestUpdate("prop",e),this.fitToParent()}get scales(){return this._scales}fitToParent(a=this.clientWidth){let e=this.shadowRoot.querySelector(g);if(e){let c=a/e.clientWidth;this.scale=c;let v=-e.clientHeight*(1-c)+"px",b=-e.clientWidth*(1-c)+"px";requestAnimationFrame(()=>{e.style.transform=`scale(${this.scale})`,e.style.margin=`0 ${b} ${v} 0`})}}}return o([l({type:Number,reflect:!0})],t.prototype,"scale",2),o([l({type:Boolean,attribute:!1})],t.prototype,"scales",1),t};import{customElement as q,property as s}from"lit/decorators.js";import{unsafeHTML as k}from"lit/directives/unsafe-html.js";import{ContextProvider as C}from"@lit-labs/context";var f=`/* PK: Tailwind theming file for all qti-components
   Uses tailwind components and utilities from the other files
 
   https://play.tailwindcss.com/OFThGk8CbR
@@ -42,11 +42,13 @@ import{a as s,b as h}from"./chunk-DLLHO3W2.js";import{c as r}from"./chunk-NMCIOG
   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, variants, states, utilities;
+/* @layer base, components, utilities, variants; */
+
+/* layout, dimensions, design */
 
 /** default styles for all components */
 
-*, ::before, ::after{
+*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -96,7 +98,7 @@ import{a as s,b as h}from"./chunk-DLLHO3W2.js";import{c as r}from"./chunk-NMCIOG
   --tw-backdrop-sepia:  ;
 }
 
-::backdrop{
+::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -146,6 +148,57 @@ import{a as s,b as h}from"./chunk-DLLHO3W2.js";import{c as r}from"./chunk-NMCIOG
   --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 */
+
+/* - 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; */
+
+/* QTI Interactions */
+
 .qti-underline {
   text-decoration: underline;
 }
@@ -211,87 +264,216 @@ import{a as s,b as h}from"./chunk-DLLHO3W2.js";import{c as r}from"./chunk-NMCIOG
   box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
 }
 
-/** The different components, you can choose only one */
+.qti-layout-row {
+  display: flow-root;
+  width: 100%;
+}
 
-/* - button  : .input-control-hidden qti-choice, qti-hotspot */
+.qti-layout-row [class*='qti-layout-col'] {
+  margin-left: 2.1276595745%;
+  float: left;
+}
 
-/*  - select  : inline-choice */
+.qti-layout-row [class*='qti-layout-col']:first-child {
+  margin-left: 0;
+}
 
-/* - check   : qti-choice, qti-hotspot */
+.qti-layout-row .qti-layout-col12 {
+  width: 100%;
+}
 
-/* !important, remove for checkbox and radio the active ring, the radio and checkbox will be selected instead */
+.qti-layout-row .qti-layout-offset12 {
+  margin-left: 104.2553191489%;
+}
 
-/* - text    : text-entry and extended-text */
+.qti-layout-row .qti-layout-offset12:first-child {
+  margin-left: 102.1276595745%;
+}
 
-/* - spot    : gap-select-point, graphic-order, qti-graphic-associate */
+.qti-layout-row .qti-layout-col11 {
+  width: 91.4893617021%;
+}
 
-/* - drag    : gap-match, match, order, associate */
+.qti-layout-row .qti-layout-offset11 {
+  margin-left: 95.7446808511%;
+}
 
-/* - drop    : gap-match, match, order, associate */
+.qti-layout-row .qti-layout-offset11:first-child {
+  margin-left: 93.6170212766%;
+}
 
-/** End components */
+.qti-layout-row .qti-layout-col10 {
+  width: 82.9787234043%;
+}
 
-/** Modifiers */
+.qti-layout-row .qti-layout-offset10 {
+  margin-left: 87.2340425532%;
+}
 
-/* intext for elements which has to appear in text
-  - intext    : gap-match > qti-gap, hottext > hottext, select
-  */
+.qti-layout-row .qti-layout-offset10:first-child {
+  margin-left: 85.1063829787%;
+}
 
-/* small for elements which has to appear in text
-  - intext    : gap-match > qti-gap, hottext > hottext, select
-*/
+.qti-layout-row .qti-layout-col9 {
+  width: 74.4680851064%;
+}
 
-/* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
+.qti-layout-row .qti-layout-offset9 {
+  margin-left: 78.7234042553%;
+}
 
-/* hover, every element has a hover, except disabled( which overrides hover */
+.qti-layout-row .qti-layout-offset9:first-child {
+  margin-left: 76.5957446809%;
+}
 
-/* focus, every element has a focus, even drop ( for keyboard access, eventually ) */
+.qti-layout-row .qti-layout-col8 {
+  width: 65.9574468085%;
+}
 
-/* active, choice active class and, used on checkbox and radio where not .qti-input-choice-hidden */
+.qti-layout-row .qti-layout-offset8 {
+  margin-left: 70.2127659574%;
+}
 
-/* readonly, overwrites cursor, hover background, outline for focus and ring */
+.qti-layout-row .qti-layout-offset8:first-child {
+  margin-left: 68.085106383%;
+}
 
-/* disabled, make gray state */
+.qti-layout-row .qti-layout-col7 {
+  width: 57.4468085106%;
+}
 
-/* drag in the drop, else the drag in the drop was black and not gray */
+.qti-layout-row .qti-layout-offset7 {
+  margin-left: 61.7021276596%;
+}
 
-/* 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 */
+.qti-layout-row .qti-layout-offset7:first-child {
+  margin-left: 59.5744680851%;
+}
 
-qti-choice-interaction{
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  display: grid;
-  gap: 0.5rem;
+.qti-layout-row .qti-layout-col6 {
+  width: 48.9361702128%;
 }
 
-qti-choice-interaction.qti-choices-stacking-2{
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.qti-layout-row .qti-layout-offset6 {
+  margin-left: 53.1914893617%;
 }
 
-qti-choice-interaction.qti-choices-stacking-3{
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+.qti-layout-row .qti-layout-offset6:first-child {
+  margin-left: 51.0638297872%;
 }
 
-qti-choice-interaction.qti-choices-stacking-4{
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+.qti-layout-row .qti-layout-col5 {
+  width: 40.4255319149%;
 }
 
-qti-choice-interaction.qti-choices-stacking-5{
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+.qti-layout-row .qti-layout-offset5 {
+  margin-left: 44.6808510638%;
 }
 
-qti-choice-interaction.qti-orientation-horizontal{
-  display: flex;
+.qti-layout-row .qti-layout-offset5:first-child {
+  margin-left: 42.5531914894%;
 }
 
-qti-choice-interaction[orientation='horizontal']{
-  display: flex;
+.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-choice-interaction.qti-input-control-hidden qti-simple-choice{
+.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;
+}
+
+.qti-input-width-2 {
+  width: 2ch;
+  min-width: 2ch;
+}
+
+.qti-input-width-3 {
+  width: 3ch;
+  min-width: 3ch;
+}
+
+.qti-input-width-4 {
+  width: 4ch;
+  min-width: 4ch;
+}
+
+.qti-input-width-6 {
+  width: 6ch;
+  min-width: 6ch;
+}
+
+.qti-input-width-10 {
+  width: 10ch;
+  min-width: 10ch;
+}
+
+.qti-input-width-15 {
+  width: 15ch;
+  min-width: 15ch;
+}
+
+.qti-input-width-20 {
+  width: 20ch;
+  min-width: 20ch;
+}
+
+.qti-input-width-72 {
+  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;
   --tw-text-opacity: 1;
@@ -317,25 +499,25 @@ 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);
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice:hover{
+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{
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="true"]{
+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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"]{
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] {
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -348,12 +530,12 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled=
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] > *{
+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"]{
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly="true"] {
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -366,7 +548,7 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly=
   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{
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -403,7 +585,7 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice::part(ch
       width: 66.666667%;
     }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch){
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch) {
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -422,13 +604,13 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='ra
   --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){
+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(239 68 68 / var(--tw-bg-opacity));
+  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){
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox']::part(ch) {
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -451,25 +633,25 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='ch
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' 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{
+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{
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-checked="true"]{
+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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --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"]{
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"] {
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -482,12 +664,12 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-dis
   --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"] > *{
+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"]{
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-readonly="true"] {
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -500,12 +682,12 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-rea
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-text-entry-interaction{
+qti-text-entry-interaction {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-text-entry-interaction::part(input){
+qti-text-entry-interaction::part(input) {
   cursor: pointer;
   color: rgb(17 24 39 / var(--tw-text-opacity));
   outline: 2px solid transparent;
@@ -526,22 +708,22 @@ qti-text-entry-interaction::part(input){
   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{
+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{
+qti-text-entry-interaction::part(input):focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-extended-text-interaction{
+qti-extended-text-interaction {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-extended-text-interaction::part(textarea){
+qti-extended-text-interaction::part(textarea) {
   cursor: pointer;
   color: rgb(17 24 39 / var(--tw-text-opacity));
   outline: 2px solid transparent;
@@ -562,23 +744,23 @@ qti-extended-text-interaction::part(textarea){
   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{
+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{
+qti-extended-text-interaction::part(textarea):focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-gap-match-interaction{
+qti-gap-match-interaction {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   line-height: 2rem;
 }
 
-qti-gap-match-interaction qti-gap-text{
+qti-gap-match-interaction qti-gap-text {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -618,17 +800,17 @@ qti-gap-match-interaction qti-gap-text{
     line-height: 1.5;
 }
 
-qti-gap-match-interaction qti-gap-text:hover{
+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{
+qti-gap-match-interaction qti-gap-text:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-gap-match-interaction qti-gap{
+qti-gap-match-interaction qti-gap {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -655,17 +837,17 @@ qti-gap-match-interaction qti-gap{
     line-height: 1.5;
 }
 
-qti-gap-match-interaction qti-gap:hover{
+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{
+qti-gap-match-interaction qti-gap:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-gap-match-interaction qti-gap{
+qti-gap-match-interaction qti-gap {
   width: 8rem;
 }
 
@@ -675,7 +857,7 @@ 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){
+qti-gap-match-interaction qti-gap:not(:empty) {
   display: inline-flex;
   width: auto;
   padding: 0px;
@@ -684,7 +866,7 @@ qti-gap-match-interaction qti-gap:not(:empty){
   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) > *{
+qti-gap-match-interaction qti-gap:not(:empty) > * {
   flex: 1 1 0%;
   --tw-rotate: 0deg;
   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));
@@ -695,41 +877,228 @@ qti-gap-match-interaction qti-gap:not(:empty) > *{
   --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }
 
-qti-hotspot-interaction{
+qti-hotspot-interaction {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-hotspot-interaction qti-hotspot-choice:hover{
+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[aria-checked='true']{
+qti-hotspot-interaction qti-hotspot-choice {
+
+    /* &::after {
+        content: '';
+        @apply absolute top-0 block origin-center bg-white;
+        height: 95%;
+        width: 95%;
+        clip-path: inherit;
+      } */
+  }
+
+qti-hotspot-interaction qti-hotspot-choice[shape='circle'] {
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-inset: inset;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  padding: 0px;
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --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;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice::after {
-      content: '';
-      position: absolute;
-      top: 0px;
-      display: block;
-      transform-origin: center;
-      --tw-bg-opacity: 1;
-      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-      height: 95%;
-      width: 95%;
-      -webkit-clip-path: inherit;
-              clip-path: inherit;
-    }
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --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);
+  --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-hottext-interaction{
+qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-readonly="true"] {
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --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);
+  outline-width: 0px;
+  --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(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;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-inset: inset;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  padding: 0px;
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --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;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --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);
+  --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;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --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);
+  outline-width: 0px;
+  --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(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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --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;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --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);
+  --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;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --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);
+  outline-width: 0px;
+  --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(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{
+qti-hottext-interaction.qti-input-control-hidden qti-hottext {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -759,25 +1128,25 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext{
     /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext:hover{
+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{
+qti-hottext-interaction.qti-input-control-hidden qti-hottext:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"]{
+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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"]{
+qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] {
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -790,12 +1159,12 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] > *{
+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"]{
+qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true"] {
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -808,11 +1177,11 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true
   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){
+qti-hottext-interaction.qti-input-control-hidden qti-hottext::part(ch) {
   display: none !important;
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -849,7 +1218,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(cha) {
       width: 66.666667%;
     }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch){
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch) {
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -868,13 +1237,13 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']
   --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){
+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(239 68 68 / var(--tw-bg-opacity));
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox']::part(ch){
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox']::part(ch) {
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -897,7 +1266,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbo
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' 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{
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext {
   display: inline-flex;
 
     /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
@@ -913,7 +1282,7 @@ 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){
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch) {
   height: 1rem !important;
   width: 1rem !important;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
@@ -921,25 +1290,25 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch){
   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{
+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{
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked="true"]{
+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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"]{
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] {
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -952,12 +1321,12 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] > *{
+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"]{
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly="true"] {
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -970,7 +1339,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-inline-choice-interaction::part(select){
+qti-inline-choice-interaction::part(select) {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -998,25 +1367,25 @@ qti-inline-choice-interaction::part(select){
       no-repeat center right 6px;
 }
 
-qti-inline-choice-interaction::part(select):hover{
+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{
+qti-inline-choice-interaction::part(select):focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-inline-choice-interaction[aria-checked="true"]::part(select){
+qti-inline-choice-interaction[aria-checked="true"]::part(select) {
   --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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-inline-choice-interaction[aria-disabled="true"]::part(select){
+qti-inline-choice-interaction[aria-disabled="true"]::part(select) {
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1029,12 +1398,12 @@ qti-inline-choice-interaction[aria-disabled="true"]::part(select){
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-inline-choice-interaction::part(select)[aria-disabled="true"] > *{
+qti-inline-choice-interaction::part(select)[aria-disabled="true"] > * {
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
 
-qti-inline-choice-interaction[aria-readonly="true"]::part(select){
+qti-inline-choice-interaction[aria-readonly="true"]::part(select) {
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1047,14 +1416,14 @@ qti-inline-choice-interaction[aria-readonly="true"]::part(select){
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type{
+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{
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1093,24 +1462,24 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type
     padding-right: 0.75rem;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover{
+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{
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type{
+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{
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1135,23 +1504,24 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
     --tw-ring-inset: unset;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover{
+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{
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice{
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
+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{
+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;
   --tw-text-opacity: 1;
@@ -1170,10 +1540,6 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
           user-select: none;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 1rem;
-  padding-right: 0.5rem;
   font-weight: 600;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1188,20 +1554,28 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
     background-repeat: repeat-y;
     background-position: left 2px;
     background-size: 14px 8px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    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{
+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{
+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: #fca5a5;
+  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{
+  qti-order-interaction qti-simple-choice {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1241,18 +1615,18 @@ qti-order-interaction::part(qti-simple-choice),
 }
 
 qti-order-interaction::part(qti-simple-choice):hover,
-  qti-order-interaction 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{
+  qti-order-interaction qti-simple-choice:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-order-interaction::part(qti-simple-choice){
+qti-order-interaction::part(qti-simple-choice) {
   display: flex;
   width: 100%;
   align-items: center;
@@ -1260,15 +1634,15 @@ qti-order-interaction::part(qti-simple-choice){
   text-overflow: ellipsis;
 }
 
-qti-order-interaction::part(drops){
+qti-order-interaction::part(drops) {
   gap: 0.5rem;
 }
 
-qti-order-interaction::part(drags){
+qti-order-interaction::part(drags) {
   gap: 0.5rem;
 }
 
-qti-order-interaction::part(drop-list){
+qti-order-interaction::part(drop-list) {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1295,26 +1669,26 @@ qti-order-interaction::part(drop-list){
     min-height: 4rem;
 }
 
-qti-order-interaction::part(drop-list):hover{
+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{
+qti-order-interaction::part(drop-list):focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-order-interaction::part(active){
+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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --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{
+  qti-associate-interaction qti-simple-associable-choice {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1358,18 +1732,18 @@ qti-associate-interaction::part(qti-simple-associable-choice),
 }
 
 qti-associate-interaction::part(qti-simple-associable-choice):hover,
-  qti-associate-interaction 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{
+  qti-associate-interaction qti-simple-associable-choice:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-associate-interaction::part(associables-container){
+qti-associate-interaction::part(associables-container) {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   display: flex;
@@ -1383,15 +1757,15 @@ qti-associate-interaction::part(associables-container){
     );
 }
 
-qti-associate-interaction::part(active){
+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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-associate-interaction::part(drop-list){
+qti-associate-interaction::part(drop-list) {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1421,7 +1795,7 @@ qti-associate-interaction::part(drop-list){
 
 /* @apply my-2; */
 
-qti-graphic-order-interaction qti-hotspot-choice{
+qti-graphic-order-interaction qti-hotspot-choice {
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1431,9 +1805,8 @@ qti-graphic-order-interaction qti-hotspot-choice{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   --tw-ring-inset: inset;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-  height: 1.5rem !important;
-  width: 1.5rem !important;
-  border-radius: 9999px !important;
+  height: 100%;
+  width: 100%;
   background-color: transparent;
   padding: 0px;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1443,25 +1816,25 @@ qti-graphic-order-interaction qti-hotspot-choice{
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
 }
 
-qti-graphic-order-interaction qti-hotspot-choice:hover{
+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{
+qti-graphic-order-interaction qti-hotspot-choice:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"]{
+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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"]{
+qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] {
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1474,12 +1847,12 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"]{
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] > *{
+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"]{
+qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"] {
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1492,24 +1865,39 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-graphic-order-interaction qti-hotspot-choice {
-    /* &::after {
-      content: '';
-      @apply absolute top-0 block scale-75 bg-white;
-      height: inherit;
-      width: inherit;
-      clip-path: inherit;
-    } */
-  }
+/* &::after {
+        content: '';
+        @apply absolute top-0 block scale-75 bg-white;
+        height: inherit;
+        width: inherit;
+        clip-path: inherit;
+      } */
+
+qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue] {
+  height: 1.5rem;
+  width: 1.5rem;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  display: flex;
+  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{
+qti-graphic-associate-interaction {
   position: relative;
   display: block;
 }
 
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       /* border-radius: 100%;
-      background-color: green; */
+        background-color: green; */
       cursor: pointer;
       border-radius: 0.375rem;
       --tw-text-opacity: 1;
@@ -1519,9 +1907,8 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
       --tw-ring-inset: inset;
       --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-      height: 1.5rem !important;
-      width: 1.5rem !important;
-      border-radius: 9999px !important;
+      height: 100%;
+      width: 100%;
       background-color: transparent;
       padding: 0px;
       --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1531,25 +1918,25 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
     }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:hover{
+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{
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-checked="true"]{
+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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"]{
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] {
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1562,12 +1949,12 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-di
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] > *{
+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"]{
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-readonly="true"] {
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1592,9 +1979,8 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
       --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
       --tw-ring-inset: inset;
       --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-      height: 1.5rem !important;
-      width: 1.5rem !important;
-      border-radius: 9999px !important;
+      height: 100%;
+      width: 100%;
       background-color: transparent;
       padding: 0px;
       --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1604,25 +1990,25 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
       --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
     }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:hover{
+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{
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:focus {
   outline-width: 2px;
-  outline-color: #fca5a5;
+  outline-color: #93c5fd;
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-checked="true"]{
+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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"]{
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] {
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1635,12 +2021,12 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-di
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] > *{
+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"]{
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-readonly="true"] {
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1653,22 +2039,22 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-re
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-graphic-gap-match-interaction{
+qti-graphic-gap-match-interaction {
   position: relative;
 }
 
-qti-graphic-gap-match-interaction img{
+qti-graphic-gap-match-interaction img {
   margin: 0px;
   padding: 0px;
 }
 
-qti-slider-interaction{
+qti-slider-interaction {
   position: relative;
   width: 100%;
   display: block;
 }
 
-qti-slider-interaction::part(knob){
+qti-slider-interaction::part(knob) {
   position: absolute;
   height: 1rem;
   width: 1rem;
@@ -1678,10 +2064,10 @@ qti-slider-interaction::part(knob){
   cursor: pointer;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-qti-slider-interaction::part(rail){
+qti-slider-interaction::part(rail) {
   height: 1rem;
     background-position: 0 center;
     --qti-border-color: #ff0000;
@@ -1692,31 +2078,121 @@ qti-slider-interaction::part(rail){
     background-size: calc(calc(100% - var(--qti-border-width)) / ((var(--max) - var(--min)) / var(--step))) 50%;
 }
 
-/* qti-match-interaction {
-  &.qti-match-tabular {
-    qti-simple-match-set:first-of-type {
-      display: flex;
-      margin-left: 4rem;
-      font-weight: bold;
-      gap: 2rem;
-    }
+qti-select-point-interaction::part(point):hover {
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.3;
+}
 
-    qti-simple-match-set:last-of-type {
-      display: flex;
-      flex-direction: column;
-      gap: 0.2rem;
+qti-select-point-interaction::part(point) {
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-inset: inset;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  height: 1.5rem;
+  width: 1.5rem;
+  background-color: transparent;
+  padding: 0px;
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
+  border-radius: 9999px;
+}
 
-      qti-simple-associable-choice {
-        display: unset !important;
-      }
+qti-select-point-interaction::part(point):hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
 
-      qti-simple-associable-choice > * {
-        display: block !important;
-      }
-    }
+qti-select-point-interaction::part(point):focus {
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-select-point-interaction[aria-checked="true"]::part(point) {
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-select-point-interaction[aria-disabled="true"]::part(point) {
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --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);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-select-point-interaction::part(point)[aria-disabled="true"] > * {
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-select-point-interaction[aria-readonly="true"]::part(point) {
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --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);
+  outline-width: 0px;
+  --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(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-position-object-stage qti-position-object-interaction {
+    /* no styles necessary, only layout styles, defined in the component */
+    /* height: 40px; */
   }
-} */
-`;var o=class extends l(y,"qti-assessment-item"){constructor(){super(...arguments);this.disabled=!1;this.readonly=!1;this.provider=new k(this,h,{log:t=>console.log(`[my-app] ${t}`),view:"candidate"});this.processResponse=()=>{var t;return(t=this._item)==null?void 0:t.processResponse()};this.showCorrectResponse=()=>{var t;return(t=this._item)==null?void 0:t.showCorrectResponse()};this.validateResponses=()=>this._item?this._item.validateResponses():!1;this.resetInteractions=()=>{var t;return(t=this._item)==null?void 0:t.resetInteractions()};this.render=()=>m`${q(this._xml)}`}handleDisabledChange(t,i){var n,a;i&&((n=this._item)==null||n.setAttribute("disabled","")),!i&&((a=this._item)==null||a.removeAttribute("disabled"))}handleReadonlyChange(t,i){var n,a;i&&((n=this._item)==null||n.setAttribute("readonly","")),!i&&((a=this._item)==null||a.removeAttribute("readonly"))}handleResponsesChange(t,i){this._item&&(this._item.responses=i)}set qtiContext(t){this.provider.value.view=t.view,this.provider.updateObservers()}get _item(){var t;return(t=this.shadowRoot)==null?void 0:t.querySelector("qti-assessment-item")}set xml(t){let i=this._xml;this._xml=t,this.requestUpdate("xml",i),requestAnimationFrame(()=>{var n;(n=this._item)==null||n.classList.add("qti-theme-raised")})}get xml(){return this._xml}connectedCallback(){super.connectedCallback();let t=new CSSStyleSheet;t.replaceSync(v),this.shadowRoot.adoptedStyleSheets.push(t)}};o.styles=u`
+
+qti-choice-interaction.qti-choices-stacking-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+qti-choice-interaction.qti-choices-stacking-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+qti-choice-interaction.qti-choices-stacking-4 {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+qti-choice-interaction.qti-choices-stacking-5 {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+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 r=class extends p(m,"qti-assessment-item"){constructor(){super(...arguments);this.disabled=!1;this.readonly=!1;this.provider=new C(this,h,{log:t=>console.log(`[my-app] ${t}`),view:"candidate"});this.processResponse=()=>{var t;return(t=this._item)==null?void 0:t.processResponse()};this.showCorrectResponse=()=>{var t;return(t=this._item)==null?void 0:t.showCorrectResponse()};this.validateResponses=()=>this._item?this._item.validateResponses():!1;this.resetInteractions=()=>{var t;return(t=this._item)==null?void 0:t.resetInteractions()};this.render=()=>y`${k(this._xml)}`}handleDisabledChange(t,i){var n,a;i&&((n=this._item)==null||n.setAttribute("disabled","")),!i&&((a=this._item)==null||a.removeAttribute("disabled"))}handleReadonlyChange(t,i){var n,a;i&&((n=this._item)==null||n.setAttribute("readonly","")),!i&&((a=this._item)==null||a.removeAttribute("readonly"))}handleResponsesChange(t,i){this._item&&(this._item.responses=i)}set qtiContext(t){this.provider.value.view=t.view,this.provider.updateObservers()}get _item(){var t;return(t=this.shadowRoot)==null?void 0:t.querySelector("qti-assessment-item")}set xml(t){let i=this._xml;this._xml=t,this.requestUpdate("xml",i),requestAnimationFrame(()=>{var n;(n=this._item)==null||n.classList.add("qti-theme-raised")})}get xml(){return this._xml}connectedCallback(){super.connectedCallback();let t=new CSSStyleSheet;t.replaceSync(f),this.shadowRoot.adoptedStyleSheets.push(t)}};r.styles=x`
     :host {
       display: block; /* necessary to calculate scaling position */
       width: 100%;
@@ -1732,4 +2208,4 @@ qti-slider-interaction::part(rail){
       width: 800px;
       transform-origin: 0 0;
     }
-  `,r([w({type:Boolean})],o.prototype,"disabled",2),r([s("disabled",{waitUntilFirstUpdate:!0})],o.prototype,"handleDisabledChange",1),r([w({type:Boolean})],o.prototype,"readonly",2),r([s("readonly",{waitUntilFirstUpdate:!0})],o.prototype,"handleReadonlyChange",1),r([w({type:Object,attribute:!1})],o.prototype,"responses",2),r([s("responses",{waitUntilFirstUpdate:!0})],o.prototype,"handleResponsesChange",1),r([w({type:String})],o.prototype,"xml",1);customElements.define("qti-item",o);export{o as a};
+  `,o([s({type:Boolean})],r.prototype,"disabled",2),o([w("disabled",{waitUntilFirstUpdate:!0})],r.prototype,"handleDisabledChange",1),o([s({type:Boolean})],r.prototype,"readonly",2),o([w("readonly",{waitUntilFirstUpdate:!0})],r.prototype,"handleReadonlyChange",1),o([s({type:Object,attribute:!1})],r.prototype,"responses",2),o([w("responses",{waitUntilFirstUpdate:!0})],r.prototype,"handleResponsesChange",1),o([s({type:String})],r.prototype,"xml",1),r=o([q("qti-item")],r);export{r as a};