@citolab/qti-components 7.27.2 → 7.27.3

package/dist/{chunk-KY3II5OX.js → chunk-CSYOTHK2.js}

@@ -1,49 +1,52 @@
 import {
   o as o2
-} from "./chunk-DG5TP35K.js";
+} from "./chunk-DGIXWHK3.js";
 import {
+  A,
   E,
   Interaction,
   M,
   ScoringHelper,
   T,
+  b,
   c,
   configContext,
   e2 as e,
   e3 as e2,
   f,
+  h,
   i,
   i2,
   i3,
   itemContext,
-  m,
   n,
   o,
   p,
   qtiContext,
   r,
   removeDoubleSlashes,
-  s,
   t2 as t,
+  u,
   v,
-  w,
-  watch,
-  x
-} from "./chunk-TORB5UN2.js";
+  watch
+} from "./chunk-A7HX4462.js";
 import {
   __decorateClass
 } from "./chunk-QXBXORM3.js";
 
+// ../interactions/core/src/elements/qti-associable-hotspot/qti-associable-hotspot.styles.ts
+var qti_associable_hotspot_styles_default = i`
+  :host {
+    display: flex;
+    user-select: none;
+    position: absolute;
+  }
+`;
+
 // ../interactions/core/src/elements/qti-associable-hotspot/qti-associable-hotspot.ts
 var QtiAssociableHotspot = class extends i2 {
   static {
-    this.styles = i`
-    :host {
-      display: flex;
-      user-select: none;
-      position: absolute;
-    }
-  `;
+    this.styles = qti_associable_hotspot_styles_default;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -56,10 +59,18 @@ var QtiAssociableHotspot = class extends i2 {
     );
   }
   render() {
-    return x` <slot name="drags"></slot> `;
+    return T` <slot name="drags"></slot> `;
   }
 };
 
+// ../interactions/core/src/elements/qti-gap/qti-gap.styles.ts
+var qti_gap_styles_default = i`
+  :host {
+    display: flex;
+    user-select: none;
+  }
+`;
+
 // ../interactions/core/src/elements/qti-gap/qti-gap.ts
 var QtiGap = class extends i2 {
   constructor() {
@@ -67,21 +78,24 @@ var QtiGap = class extends i2 {
     this.tabindex = 0;
   }
   static {
-    this.styles = i`
-    :host {
-      display: flex;
-      user-select: none;
-    }
-  `;
+    this.styles = qti_gap_styles_default;
   }
   render() {
-    return x` <slot name="drags"></slot>`;
+    return T` <slot name="drags"></slot>`;
   }
 };
 __decorateClass([
   n({ type: Number, reflect: true })
 ], QtiGap.prototype, "tabindex", 2);
 
+// ../interactions/core/src/elements/qti-gap-img/qti-gap-img.styles.ts
+var qti_gap_img_styles_default = i`
+  :host {
+    display: flex;
+    user-select: none;
+  }
+`;
+
 // ../interactions/core/src/elements/qti-gap-img/qti-gap-img.ts
 var QtiGapImg = class extends i2 {
   constructor() {
@@ -89,12 +103,7 @@ var QtiGapImg = class extends i2 {
     this.tabindex = 0;
   }
   static {
-    this.styles = i`
-    :host {
-      display: flex;
-      user-select: none;
-    }
-  `;
+    this.styles = qti_gap_img_styles_default;
   }
   connectedCallback() {
     this.setAttribute("slot", "drags");
@@ -174,7 +183,7 @@ function ActiveElementMixin(Base, type) {
       );
     }
     render() {
-      return x`<slot></slot>`;
+      return T`<slot></slot>`;
     }
   }
   __decorateClass([
@@ -205,6 +214,14 @@ function ActiveElementMixin(Base, type) {
   return QtiChoice;
 }
 
+// ../interactions/core/src/elements/qti-gap-text/qti-gap-text.styles.ts
+var qti_gap_text_styles_default = i`
+  :host {
+    display: inline-flex;
+    user-select: none;
+  }
+`;
+
 // ../interactions/core/src/elements/qti-gap-text/qti-gap-text.ts
 var QtiGapText = class extends ActiveElementMixin(i2, "qti-gap-text") {
   constructor() {
@@ -212,35 +229,33 @@ var QtiGapText = class extends ActiveElementMixin(i2, "qti-gap-text") {
     this.tabindex = 0;
   }
   static {
-    this.styles = i`
-    :host {
-      display: inline-flex;
-      user-select: none;
-    }
-  `;
+    this.styles = qti_gap_text_styles_default;
   }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("slot", "drags");
   }
   render() {
-    return x`<slot></slot>`;
+    return T`<slot></slot>`;
   }
 };
 __decorateClass([
   n({ type: Number, reflect: true })
 ], QtiGapText.prototype, "tabindex", 2);
 
+// ../interactions/core/src/elements/qti-hotspot-choice/qti-hotspot-choice.styles.ts
+var qti_hotspot_choice_styles_default = i`
+  :host {
+    display: flex;
+    user-select: none;
+    position: absolute;
+  }
+`;
+
 // ../interactions/core/src/elements/qti-hotspot-choice/qti-hotspot-choice.ts
 var QtiHotspotChoice = class extends ActiveElementMixin(i2, "qti-hotspot-choice") {
   static {
-    this.styles = i`
-    :host {
-      display: flex;
-      user-select: none;
-      position: absolute;
-    }
-  `;
+    this.styles = qti_hotspot_choice_styles_default;
   }
 };
 __decorateClass([
@@ -250,18 +265,21 @@ __decorateClass([
   n({ attribute: "aria-ordercorrectvalue", type: Number, reflect: true })
 ], QtiHotspotChoice.prototype, "orderCorrect", 2);
 
+// ../interactions/core/src/elements/qti-hottext/qti-hottext.styles.ts
+var qti_hottext_styles_default = i`
+  :host {
+    display: flex;
+    user-select: none;
+  }
+`;
+
 // ../interactions/core/src/elements/qti-hottext/qti-hottext.ts
 var QtiHottext = class extends ActiveElementMixin(i2, "qti-hottext") {
   static {
-    this.styles = i`
-    :host {
-      display: flex;
-      user-select: none;
-    }
-  `;
+    this.styles = qti_hottext_styles_default;
   }
   render() {
-    return x`<div part="ch"><div part="cha"></div></div>
+    return T`<div part="ch"><div part="cha"></div></div>
       <slot></slot> `;
   }
 };
@@ -299,7 +317,7 @@ var QtiInlineChoice = class extends ActiveElementMixin(i2, "qti-inline-choice")
     this.removeEventListener("click", this.#onSelectInlineChoice);
   }
   render() {
-    return x` <slot></slot> `;
+    return T` <slot></slot> `;
   }
   #onSelectInlineChoice() {
     this.dispatchEvent(
@@ -316,10 +334,20 @@ __decorateClass([
   n({ type: String })
 ], QtiInlineChoice.prototype, "identifier", 2);
 
+// ../interactions/core/src/elements/qti-prompt/qti-prompt.styles.ts
+var qti_prompt_styles_default = i`
+  :host {
+    display: block;
+  }
+`;
+
 // ../interactions/core/src/elements/qti-prompt/qti-prompt.ts
 var QtiPrompt = class extends i2 {
+  static {
+    this.styles = qti_prompt_styles_default;
+  }
   render() {
-    return x`<slot></slot>`;
+    return T`<slot></slot>`;
   }
   connectedCallback() {
     const inInteraction = this.parentElement.tagName.endsWith("INTERACTION");
@@ -329,6 +357,21 @@ var QtiPrompt = class extends i2 {
   }
 };
 
+// ../interactions/core/src/elements/qti-simple-associable-choice/qti-simple-associable-choice.styles.ts
+var qti_simple_associable_choice_styles_default = i`
+  :host {
+    display: flex;
+    user-select: none;
+  }
+  slot {
+    width: 100%;
+    display: block;
+  }
+  slot[name='qti-simple-associable-choice'] {
+    width: auto;
+  }
+`;
+
 // ../interactions/core/src/elements/qti-simple-associable-choice/qti-simple-associable-choice.ts
 var QtiSimpleAssociableChoice = class extends ActiveElementMixin(i2, "qti-simple-associable-choice") {
   constructor() {
@@ -338,19 +381,7 @@ var QtiSimpleAssociableChoice = class extends ActiveElementMixin(i2, "qti-simple
     this.fixed = false;
   }
   static {
-    this.styles = i`
-    :host {
-      display: flex;
-      user-select: none;
-    }
-    slot {
-      width: 100%;
-      display: block;
-    }
-    slot[name='qti-simple-associable-choice'] {
-      width: auto;
-    }
-  `;
+    this.styles = qti_simple_associable_choice_styles_default;
   }
   // pk: This needs some explanation
   // in the associate interaction there is a special slot for these qti-simple-associable-choices
@@ -365,7 +396,7 @@ var QtiSimpleAssociableChoice = class extends ActiveElementMixin(i2, "qti-simple
   // So we have a slot for whenever another qti-simple-associable-choice is dropped in here.
   // And we have slot for content like in this associate interaction
   render() {
-    return x`
+    return T`
       <slot part="slot"></slot>
       <slot part="dropslot" name="qti-simple-associable-choice"></slot>
     `;
@@ -429,10 +460,10 @@ var QtiSimpleChoice = class extends ActiveElementMixin(i2, "qti-simple-choice")
     return this["internals"].states.has("--checked");
   }
   render() {
-    return x`<div part="ch">
+    return T`<div part="ch">
         <div part="cha"></div>
       </div>
-      ${this.marker ? x`<div id="label">${this.marker}</div>` : E}
+      ${this.marker ? T`<div id="label">${this.marker}</div>` : A}
       <slot part="slot"></slot>`;
   }
 };
@@ -2488,9 +2519,9 @@ var DragDropCoreMixin = (superClass, draggablesSelector, droppablesSelector, dra
     updateClonePosition(clientX, clientY) {
       if (!this.dragState.dragClone) return;
       const { startOffset } = this.dragState;
-      const x2 = clientX - startOffset.x;
+      const x = clientX - startOffset.x;
       const y = clientY - startOffset.y;
-      this.dragState.dragClone.style.left = `${x2}px`;
+      this.dragState.dragClone.style.left = `${x}px`;
       this.dragState.dragClone.style.top = `${y}px`;
     }
     activateAllDroppables() {
@@ -3452,11 +3483,11 @@ var QtiAssociateInteraction = class extends DragDropSlottedSortableMixin(Slotted
     }) ?? [];
   }
   render() {
-    return x` <slot name="prompt"></slot>
+    return T` <slot name="prompt"></slot>
       <slot name="qti-simple-associable-choice"></slot>
       <div part="drop-container">
         ${this._childrenMap.length > 0 && Array.from(Array(Math.ceil(this._childrenMap.length / 2)).keys()).map(
-      (_, index) => x`<div part="associables-container">
+      (_, index) => T`<div part="associables-container">
               <div name="left${index}" part="drop-list" class="dl" identifier="droplist${index}_left"></div>
               <div name="right${index}" part="drop-list" class="dl" identifier="droplist${index}_right"></div>
             </div>`
@@ -3818,7 +3849,7 @@ var VocabularyMixin = (superClass, _selector) => {
       return choiceElements.map((choice, index) => {
         const order = Number(choice.style.order);
         return { el: choice, order: Number.isFinite(order) ? order : index + 1, index };
-      }).sort((a, b) => a.order - b.order || a.index - b.index).map((choice) => choice.el);
+      }).sort((a, b2) => a.order - b2.order || a.index - b2.index).map((choice) => choice.el);
     }
     #getActiveLabelType() {
       return this.#classes.filter((c3) => this.#allLabels.includes(c3)).pop() ?? null;
@@ -3962,7 +3993,7 @@ var QtiChoiceInteraction = class extends VocabularyMixin(ChoicesMixin(Interactio
     this.style.setProperty("--item-count", choices.length.toString());
   }
   render() {
-    return x`
+    return T`
       <slot part="prompt" name="prompt"></slot>
       <slot part="slot" @slotchange=${this.#handleSlotChange}></slot>
       <div part="message" role="alert" id="validation-message"></div>
@@ -4404,7 +4435,7 @@ var QtiCustomInteraction = class extends Interaction {
     super.disconnectedCallback();
   }
   render() {
-    return x`<iframe
+    return T`<iframe
         width=${this.getAttribute("width")}
         height=${this.getAttribute("height")}
         frameborder="0"
@@ -4412,7 +4443,7 @@ var QtiCustomInteraction = class extends Interaction {
         id="pciContainer"
       >
       </iframe>
-      ${this._errorMessage && x`<div style="color:red">
+      ${this._errorMessage && T`<div style="color:red">
         <h1>Error</h1>
         ${this._errorMessage}
       </div>`}`;
@@ -4494,7 +4525,7 @@ var QtiEndAttemptInteraction = class extends i2 {
     this.styles = qti_end_attempt_interaction_styles_default;
   }
   render() {
-    return x`<button ?disabled=${this.disabled} part="button" @click=${this.endAttempt}>${this.title}</button>`;
+    return T`<button ?disabled=${this.disabled} part="button" @click=${this.endAttempt}>${this.title}</button>`;
   }
   endAttempt(_) {
     this.dispatchEvent(
@@ -4599,7 +4630,7 @@ var QtiExtendedTextInteraction = class extends Interaction {
     return isValid;
   }
   render() {
-    return x`<slot name="prompt"></slot
+    return T`<slot name="prompt"></slot
       ><textarea
         part="textarea"
         name="${this.responseIdentifier}"
@@ -4709,7 +4740,7 @@ var QtiGapMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedB
     this.styles = qti_gap_match_interaction_styles_default;
   }
   render() {
-    return x`<slot name="prompt"> </slot>
+    return T`<slot name="prompt"> </slot>
       <slot part="drags" name="drags"></slot>
       <slot part="drops"></slot>
       <div role="alert" part="message" id="validation-message"></div>`;
@@ -4720,15 +4751,15 @@ var QtiGapMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedB
       let matches = [];
       const response = Array.isArray(responseVariable.correctResponse) ? responseVariable.correctResponse : [responseVariable.correctResponse];
       if (response) {
-        matches = response.map((x2) => {
-          const split = x2.split(" ");
+        matches = response.map((x) => {
+          const split = x.split(" ");
           return { text: split[0], gap: split[1] };
         });
       }
       const gaps = this.querySelectorAll("qti-gap");
       gaps.forEach((gap) => {
         const identifier = gap.getAttribute("identifier");
-        const textIdentifier = matches.find((x2) => x2.gap === identifier)?.text;
+        const textIdentifier = matches.find((x) => x.gap === identifier)?.text;
         const text = this.querySelector(`qti-gap-text[identifier="${textIdentifier}"]`)?.textContent.trim();
         if (textIdentifier && text) {
           if (!gap.nextElementSibling?.classList.contains("correct-option")) {
@@ -4759,8 +4790,8 @@ var QtiGapMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedB
     const correctResponse = Array.isArray(responseVariable.correctResponse) ? responseVariable.correctResponse : [responseVariable.correctResponse];
     const matches = [];
     if (correctResponse) {
-      correctResponse.forEach((x2) => {
-        const split = x2.split(" ");
+      correctResponse.forEach((x) => {
+        const split = x.split(" ");
         matches.push({ source: split[0], target: split[1] });
       });
     }
@@ -4775,7 +4806,7 @@ var QtiGapMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedB
     const targetChoices = Array.from(this.querySelectorAll("qti-gap"));
     targetChoices.forEach((targetChoice) => {
       const targetId = targetChoice.getAttribute("identifier");
-      const targetMatches = matches.filter((m2) => m2.target === targetId);
+      const targetMatches = matches.filter((m) => m.target === targetId);
       const selectedChoices = targetChoice.querySelectorAll(`qti-gap-text`);
       selectedChoices.forEach((selectedChoice) => {
         selectedChoice.internals.states.delete("candidate-correct");
@@ -4783,7 +4814,7 @@ var QtiGapMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedB
         if (!show) {
           return;
         }
-        const isCorrect = targetMatches.find((m2) => m2.source === selectedChoice.identifier)?.source !== void 0;
+        const isCorrect = targetMatches.find((m) => m.source === selectedChoice.identifier)?.source !== void 0;
         if (isCorrect) {
           selectedChoice.internals.states.add("candidate-correct");
         } else {
@@ -4794,56 +4825,56 @@ var QtiGapMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedB
   }
 };
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/node/directives/repeat.js
-var u = (e5, s2, t2) => {
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/node/directives/repeat.js
+var u2 = (e5, s, t2) => {
   const r2 = /* @__PURE__ */ new Map();
-  for (let l = s2; l <= t2; l++) r2.set(e5[l], l);
+  for (let l = s; l <= t2; l++) r2.set(e5[l], l);
   return r2;
 };
 var c2 = e2(class extends i3 {
   constructor(e5) {
     if (super(e5), e5.type !== t.CHILD) throw Error("repeat() can only be used in text expressions");
   }
-  dt(e5, s2, t2) {
+  dt(e5, s, t2) {
     let r2;
-    void 0 === t2 ? t2 = s2 : void 0 !== s2 && (r2 = s2);
+    void 0 === t2 ? t2 = s : void 0 !== s && (r2 = s);
     const l = [], o6 = [];
     let i5 = 0;
-    for (const s3 of e5) l[i5] = r2 ? r2(s3, i5) : i5, o6[i5] = t2(s3, i5), i5++;
+    for (const s2 of e5) l[i5] = r2 ? r2(s2, i5) : i5, o6[i5] = t2(s2, i5), i5++;
     return { values: o6, keys: l };
   }
-  render(e5, s2, t2) {
-    return this.dt(e5, s2, t2).values;
+  render(e5, s, t2) {
+    return this.dt(e5, s, t2).values;
   }
-  update(s2, [t2, r2, c3]) {
-    const d = p(s2), { values: p2, keys: a } = this.dt(t2, r2, c3);
+  update(s, [t2, r2, c3]) {
+    const d = M(s), { values: p2, keys: a } = this.dt(t2, r2, c3);
     if (!Array.isArray(d)) return this.ut = a, p2;
-    const h2 = this.ut ??= [], v2 = [];
-    let m2, y, x2 = 0, j = d.length - 1, k = 0, w2 = p2.length - 1;
-    for (; x2 <= j && k <= w2; ) if (null === d[x2]) x2++;
+    const h3 = this.ut ??= [], v2 = [];
+    let m, y, x = 0, j = d.length - 1, k = 0, w = p2.length - 1;
+    for (; x <= j && k <= w; ) if (null === d[x]) x++;
     else if (null === d[j]) j--;
-    else if (h2[x2] === a[k]) v2[k] = v(d[x2], p2[k]), x2++, k++;
-    else if (h2[j] === a[w2]) v2[w2] = v(d[j], p2[w2]), j--, w2--;
-    else if (h2[x2] === a[w2]) v2[w2] = v(d[x2], p2[w2]), s(s2, v2[w2 + 1], d[x2]), x2++, w2--;
-    else if (h2[j] === a[k]) v2[k] = v(d[j], p2[k]), s(s2, d[x2], d[j]), j--, k++;
-    else if (void 0 === m2 && (m2 = u(a, k, w2), y = u(h2, x2, j)), m2.has(h2[x2])) if (m2.has(h2[j])) {
+    else if (h3[x] === a[k]) v2[k] = u(d[x], p2[k]), x++, k++;
+    else if (h3[j] === a[w]) v2[w] = u(d[j], p2[w]), j--, w--;
+    else if (h3[x] === a[w]) v2[w] = u(d[x], p2[w]), v(s, v2[w + 1], d[x]), x++, w--;
+    else if (h3[j] === a[k]) v2[k] = u(d[j], p2[k]), v(s, d[x], d[j]), j--, k++;
+    else if (void 0 === m && (m = u2(a, k, w), y = u2(h3, x, j)), m.has(h3[x])) if (m.has(h3[j])) {
       const e5 = y.get(a[k]), t3 = void 0 !== e5 ? d[e5] : null;
       if (null === t3) {
-        const e6 = s(s2, d[x2]);
-        v(e6, p2[k]), v2[k] = e6;
-      } else v2[k] = v(t3, p2[k]), s(s2, d[x2], t3), d[e5] = null;
+        const e6 = v(s, d[x]);
+        u(e6, p2[k]), v2[k] = e6;
+      } else v2[k] = u(t3, p2[k]), v(s, d[x], t3), d[e5] = null;
       k++;
-    } else M(d[j]), j--;
-    else M(d[x2]), x2++;
-    for (; k <= w2; ) {
-      const e5 = s(s2, v2[w2 + 1]);
-      v(e5, p2[k]), v2[k++] = e5;
+    } else h(d[j]), j--;
+    else h(d[x]), x++;
+    for (; k <= w; ) {
+      const e5 = v(s, v2[w + 1]);
+      u(e5, p2[k]), v2[k++] = e5;
     }
-    for (; x2 <= j; ) {
-      const e5 = d[x2++];
-      null !== e5 && M(e5);
+    for (; x <= j; ) {
+      const e5 = d[x++];
+      null !== e5 && h(e5);
     }
-    return this.ut = a, m(s2, v2), w;
+    return this.ut = a, p(s, v2), E;
   }
 });
 
@@ -5018,7 +5049,7 @@ var QtiGraphicAssociateInteraction = class extends Interaction {
     this._correctLines = correctResponses;
   }
   render() {
-    return x`<slot name="prompt"></slot>
+    return T`<slot name="prompt"></slot>
       <line-container>
         <svg
           width=${o2(this.grImage[0]?.width)}
@@ -5028,7 +5059,7 @@ var QtiGraphicAssociateInteraction = class extends Interaction {
           ${c2(
       this.#getResponseArray(),
       (line) => line,
-      (line, index) => T`
+      (line, index) => b`
               <line
                 part="line"
                 x1=${parseInt(this.querySelector(`[identifier=${line.split(" ")[0]}]`).style.left)}
@@ -5048,7 +5079,7 @@ var QtiGraphicAssociateInteraction = class extends Interaction {
           ${c2(
       this._correctLines || [],
       (line) => line,
-      (line, _index) => T`
+      (line, _index) => b`
               <line
                 part="correct-line"
                 x1=${parseInt(this.querySelector(`[identifier=${line.split(" ")[0]}]`).style.left)}
@@ -5061,7 +5092,7 @@ var QtiGraphicAssociateInteraction = class extends Interaction {
               />
             `
     )}
-          ${this.#startPoint && T`<line
+          ${this.#startPoint && b`<line
             part="point"
             x1=${this.startCoord.x}
             y1=${this.startCoord.y}
@@ -5080,7 +5111,7 @@ var QtiGraphicAssociateInteraction = class extends Interaction {
     const hotspot = e5.target;
     const coords = hotspot.getAttribute("coords");
     const shape = hotspot.getAttribute("shape");
-    const coordsNumber = coords.split(",").map((s2) => parseInt(s2));
+    const coordsNumber = coords.split(",").map((s) => parseInt(s));
     positionShapes(shape, coordsNumber, img, hotspot);
   }
   firstUpdated() {
@@ -5210,7 +5241,7 @@ var QtiGraphicGapMatchInteraction = class extends DragDropSlottedSortableMixin(S
     this.styles = qti_graphic_gap_match_interaction_styles_default;
   }
   render() {
-    return x` <slot name="prompt"></slot>
+    return T` <slot name="prompt"></slot>
       <slot part="image"></slot>
       <slot part="drags" name="drags" class="hover-border"></slot>
       <div role="alert" part="message" id="validation-message"></div>`;
@@ -5222,7 +5253,7 @@ var QtiGraphicGapMatchInteraction = class extends DragDropSlottedSortableMixin(S
     const hotspot = e5.target;
     const coords = hotspot.getAttribute("coords");
     const shape = hotspot.getAttribute("shape");
-    const coordsNumber = coords.split(",").map((s2) => parseInt(s2));
+    const coordsNumber = coords.split(",").map((s) => parseInt(s));
     switch (shape) {
       case "circle":
         {
@@ -5279,7 +5310,7 @@ var QtiGraphicOrderInteraction = class extends ChoicesMixin(Interaction, "qti-ho
     this.styles = qti_graphic_order_interaction_styles_default;
   }
   render() {
-    return x`
+    return T`
       <slot name="prompt"></slot>
       <slot></slot>
       <div role="alert" part="message" id="validation-message"></div>
@@ -5332,7 +5363,7 @@ var QtiGraphicOrderInteraction = class extends ChoicesMixin(Interaction, "qti-ho
     const hotspot = e5.target;
     const coords = hotspot.getAttribute("coords");
     const shape = hotspot.getAttribute("shape");
-    const coordsNumber = coords.split(",").map((s2) => parseInt(s2));
+    const coordsNumber = coords.split(",").map((s) => parseInt(s));
     positionShapes(shape, coordsNumber, img, hotspot);
   }
   connectedCallback() {
@@ -5370,7 +5401,7 @@ var QtiHotspotInteraction = class extends ChoicesMixin(Interaction, "qti-hotspot
     this.styles = qti_hotspot_interaction_styles_default;
   }
   render() {
-    return x`
+    return T`
       <slot name="prompt"></slot>
       <slot></slot>
     `;
@@ -5397,7 +5428,7 @@ var QtiHotspotInteraction = class extends ChoicesMixin(Interaction, "qti-hotspot
     const hotspot = e5.target;
     const coords = hotspot.getAttribute("coords");
     const shape = hotspot.getAttribute("shape");
-    const coordsNumber = coords.split(",").map((s2) => parseInt(s2));
+    const coordsNumber = coords.split(",").map((s) => parseInt(s));
     const loadedImg = await this.#getImageLoadPromise(img);
     positionShapes(shape, coordsNumber, loadedImg, hotspot);
   }
@@ -5419,7 +5450,7 @@ var QtiHottextInteraction = class extends ChoicesMixin(Interaction, "qti-hottext
   constructor() {
     super(...arguments);
     this.class = "";
-    this.render = () => x`<slot></slot>
+    this.render = () => T`<slot></slot>
       <div part="message" role="alert" id="validation-message"></div>`;
   }
   static {
@@ -5459,19 +5490,19 @@ __decorateClass([
   n({ type: String, reflect: true })
 ], QtiHottextInteraction.prototype, "class", 2);
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/node/directives/unsafe-html.js
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/node/directives/unsafe-html.js
 var e3 = class extends i3 {
   constructor(i5) {
-    if (super(i5), this.it = E, i5.type !== t.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(i5), this.it = A, i5.type !== t.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(r2) {
-    if (r2 === E || null == r2) return this._t = void 0, this.it = r2;
-    if (r2 === w) return r2;
+    if (r2 === A || null == r2) return this._t = void 0, this.it = r2;
+    if (r2 === E) return r2;
     if ("string" != typeof r2) throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (r2 === this.it) return this._t;
     this.it = r2;
-    const s2 = [r2];
-    return s2.raw = s2, this._t = { _$litType$: this.constructor.resultType, strings: s2, values: [] };
+    const s = [r2];
+    return s.raw = s, this._t = { _$litType$: this.constructor.resultType, strings: s, values: [] };
   }
 };
 e3.directiveName = "unsafeHTML", e3.resultType = 1;
@@ -5617,7 +5648,7 @@ var QtiInlineChoiceInteraction = class extends Interaction {
   }
   render() {
     const selected = this.#selectedOption();
-    return x`
+    return T`
       <button
         part="trigger"
         type="button"
@@ -5993,8 +6024,8 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
     const correctResponse = Array.isArray(responseVariable.correctResponse) ? responseVariable.correctResponse : [responseVariable.correctResponse];
     const matches = [];
     if (correctResponse) {
-      correctResponse.forEach((x2) => {
-        const split = x2.split(" ");
+      correctResponse.forEach((x) => {
+        const split = x.split(" ");
         matches.push({ source: split[0], target: split[1] });
       });
     }
@@ -6012,7 +6043,7 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
         this.querySelectorAll(".correct-option").forEach((el) => el.remove());
         this.targetChoices.forEach((targetChoice) => {
           const targetId = targetChoice.getAttribute("identifier");
-          const match = matches.find((m2) => m2.target === targetId);
+          const match = matches.find((m) => m.target === targetId);
           if (match?.source) {
             const sourceChoice = this.querySelector(`qti-simple-associable-choice[identifier="${match.source}"]`);
             const text = sourceChoice?.textContent?.trim();
@@ -6047,7 +6078,7 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
     const matches = this.#getMatches(responseVariable);
     this.targetChoices.forEach((targetChoice) => {
       const targetId = targetChoice.getAttribute("identifier");
-      const targetMatches = matches.filter((m2) => m2.target === targetId);
+      const targetMatches = matches.filter((m) => m.target === targetId);
       const selectedChoices = targetChoice.querySelectorAll(`qti-simple-associable-choice`);
       selectedChoices.forEach((selectedChoice) => {
         selectedChoice.internals.states.delete("candidate-correct");
@@ -6055,7 +6086,7 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
         if (!show) {
           return;
         }
-        const isCorrect = targetMatches.find((m2) => m2.source === selectedChoice.identifier)?.source !== void 0;
+        const isCorrect = targetMatches.find((m) => m.source === selectedChoice.identifier)?.source !== void 0;
         if (isCorrect) {
           selectedChoice.internals.states.add("candidate-correct");
         } else {
@@ -6067,19 +6098,19 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
   render() {
     const isTabular = this.class.split(" ").includes("qti-match-tabular");
     const hasCorrectResponse = this.correctOptions !== null;
-    return x`
+    return T`
       <slot name="prompt"></slot>
       <slot ?hidden=${isTabular}></slot>
 
-      ${isTabular ? x`
+      ${isTabular ? T`
             <table part="table">
               <tr part="r-header">
                 <td></td>
-                ${this.targetChoices.map((col) => x`<th part="r-header">${o3(col.innerHTML)}</th>`)}
+                ${this.targetChoices.map((col) => T`<th part="r-header">${o3(col.innerHTML)}</th>`)}
               </tr>
 
               ${this.sourceChoices.map(
-      (row) => x`<tr part="row">
+      (row) => T`<tr part="row">
                     <td part="c-header">${o3(row.innerHTML)}</td>
                     ${this.targetChoices.map((col) => {
         const rowId = row.getAttribute("identifier");
@@ -6093,7 +6124,7 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
         );
         const part = type === "radio" ? `rb ${checked ? "rb-checked" : ""} ${hasCorrectResponse ? isCorrect ? "rb-correct" : "rb-incorrect" : ""}` : `cb ${checked ? "cb-checked" : ""} ${hasCorrectResponse ? isCorrect ? "cb-correct" : "cb-incorrect" : ""}`;
         const disable = this.correctOptions?.length > 0 ? true : row.matchMax === 1 ? false : row.matchMax !== 0 && selectedInRowCount >= row.matchMax && !checked;
-        return x`<td part="input-cell">
+        return T`<td part="input-cell">
                         <div
                           class="input-container"
                           style="position: relative; width: 24px; height: 24px; margin: 0 auto;"
@@ -6107,7 +6138,7 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
                             @change=${(e5) => this.handleRadioChange(e5)}
                             @click=${(e5) => row.matchMax === 1 ? this.handleRadioClick(e5) : null}
                           />
-                          ${type === "checkbox" && checked ? x`
+                          ${type === "checkbox" && checked ? T`
                                 <svg
                                   part="checkmark"
                                   viewBox="0 0 24 24"
@@ -6122,7 +6153,7 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
                   </tr>`
     )}
             </table>
-          ` : E}
+          ` : A}
 
       <div role="alert" part="message" id="validation-message"></div>
     `;
@@ -6182,7 +6213,7 @@ var QtiMediaInteraction = class extends Interaction {
     };
   }
   render() {
-    return x` <slot name="prompt"></slot>
+    return T` <slot name="prompt"></slot>
       <slot></slot>`;
   }
   constructor() {
@@ -6309,12 +6340,12 @@ var QtiOrderInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
     if (this.nrChoices < choices.length) {
       this.nrChoices = choices.length;
     }
-    return x` <slot name="prompt"> </slot>
+    return T` <slot name="prompt"> </slot>
       <div part="container">
         <slot part="drags"> </slot>
         <div part="drops">
           ${[...Array(this.nrChoices)].map(
-      (_, i5) => x`<drop-list role="region" part="drop-list" identifier="droplist${i5}"></drop-list>`
+      (_, i5) => T`<drop-list role="region" part="drop-list" identifier="droplist${i5}"></drop-list>`
     )}
         </div>
       </div>`;
@@ -8123,9 +8154,9 @@ var QtiPortableCustomInteraction = class extends Interaction {
   }
   #previousState;
   render() {
-    return x`
+    return T`
       <slot></slot>
-      ${this._errorMessage ? x`<div style="color:red">
+      ${this._errorMessage ? T`<div style="color:red">
             <h1>Error</h1>
             ${this._errorMessage}
           </div>` : ""}
@@ -8188,7 +8219,7 @@ var QtiPositionObjectInteraction = class extends i2 {
     this.styles = qti_position_object_interaction_styles_default;
   }
   render() {
-    return x`<slot></slot>`;
+    return T`<slot></slot>`;
   }
 };
 
@@ -8206,7 +8237,7 @@ var QtiPositionObjectStage = class extends i2 {
     this.styles = qti_position_object_stage_styles_default;
   }
   render() {
-    return x`<slot></slot>`;
+    return T`<slot></slot>`;
   }
   constructor() {
     super();
@@ -8245,7 +8276,7 @@ var QtiPositionObjectStage = class extends i2 {
   }
 };
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/node/directives/style-map.js
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/node/directives/style-map.js
 var n2 = "important";
 var i4 = " !" + n2;
 var o4 = e2(class extends i3 {
@@ -8253,24 +8284,24 @@ var o4 = e2(class extends i3 {
     if (super(t2), t2.type !== t.ATTRIBUTE || "style" !== t2.name || t2.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
   }
   render(t2) {
-    return Object.keys(t2).reduce(((e5, r2) => {
-      const s2 = t2[r2];
-      return null == s2 ? e5 : e5 + `${r2 = r2.includes("-") ? r2 : r2.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s2};`;
-    }), "");
+    return Object.keys(t2).reduce((e5, r2) => {
+      const s = t2[r2];
+      return null == s ? e5 : e5 + `${r2 = r2.includes("-") ? r2 : r2.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
+    }, "");
   }
   update(e5, [r2]) {
-    const { style: s2 } = e5.element;
+    const { style: s } = e5.element;
     if (void 0 === this.ft) return this.ft = new Set(Object.keys(r2)), this.render(r2);
-    for (const t2 of this.ft) null == r2[t2] && (this.ft.delete(t2), t2.includes("-") ? s2.removeProperty(t2) : s2[t2] = null);
+    for (const t2 of this.ft) null == r2[t2] && (this.ft.delete(t2), t2.includes("-") ? s.removeProperty(t2) : s[t2] = null);
     for (const t2 in r2) {
       const e6 = r2[t2];
       if (null != e6) {
         this.ft.add(t2);
         const r3 = "string" == typeof e6 && e6.endsWith(i4);
-        t2.includes("-") || r3 ? s2.setProperty(t2, r3 ? e6.slice(0, -11) : e6, r3 ? n2 : "") : s2[t2] = e6;
+        t2.includes("-") || r3 ? s.setProperty(t2, r3 ? e6.slice(0, -11) : e6, r3 ? n2 : "") : s[t2] = e6;
       }
     }
-    return w;
+    return E;
   }
 });
 
@@ -8318,9 +8349,9 @@ var QtiSelectPointInteraction = class extends Interaction {
       }
       this.#calculateScale();
       const rect = this.#imgElement.getBoundingClientRect();
-      const x2 = (event.clientX - rect.left) * this.#scaleX;
+      const x = (event.clientX - rect.left) * this.#scaleX;
       const y = (event.clientY - rect.top) * this.#scaleY;
-      const newPoint = `${x2.toFixed()} ${y.toFixed()}`;
+      const newPoint = `${x.toFixed()} ${y.toFixed()}`;
       if (this.maxChoices === 1) {
         this.response = [newPoint];
       } else {
@@ -8351,8 +8382,8 @@ var QtiSelectPointInteraction = class extends Interaction {
   #onResize;
   get responsePoints() {
     return (this.response || []).filter((point) => point).map((point) => {
-      const [x2, y] = point.split(" ").map(Number);
-      return { x: x2, y };
+      const [x, y] = point.split(" ").map(Number);
+      return { x, y };
     });
   }
   toggleCandidateCorrection(show) {
@@ -8422,14 +8453,14 @@ var QtiSelectPointInteraction = class extends Interaction {
     }
   }
   render() {
-    return x` <slot name="prompt"></slot>
+    return T` <slot name="prompt"></slot>
       <point-container>
         ${c2(
       (this.response || []).filter((point) => point),
       (point) => point,
       (point, index) => {
-        const [x2, y] = point.split(" ").map(Number);
-        const leftPercentage = x2 / (this.#imageWidthOriginal || 1) * 100;
+        const [x, y] = point.split(" ").map(Number);
+        const leftPercentage = x / (this.#imageWidthOriginal || 1) * 100;
         const topPercentage = y / (this.#imageHeightOriginal || 1) * 100;
         const baseSize = 16;
         const widthPercentage = baseSize / (this.#imageWidthOriginal || 1) * 100;
@@ -8440,7 +8471,7 @@ var QtiSelectPointInteraction = class extends Interaction {
         } else if (this._responseCorrection[index] === false) {
           correctionPart = " incorrect";
         }
-        return x`
+        return T`
               <button
                 part="point${correctionPart}"
                 style=${o4({
@@ -8472,7 +8503,7 @@ var QtiSelectPointInteraction = class extends Interaction {
         ${c2(
       this._correctAreas?.filter((area) => area) || [],
       (area) => area,
-      (area, i5) => x`<div
+      (area, i5) => T`<div
               style=${o4({
         position: "absolute",
         pointerEvents: "none",
@@ -8683,7 +8714,7 @@ var QtiSliderInteraction = class extends Interaction {
     this.requestUpdate();
   }
   render() {
-    return x`
+    return T`
       <slot name="prompt"></slot>
       <div id="slider" part="slider">
         <div id="bounds" part="bounds">
@@ -8698,7 +8729,7 @@ var QtiSliderInteraction = class extends Interaction {
             <div id="value" part="value">${this.response}</div>
           </div>
 
-          ${this.#correctResponseNumber !== null ? x`
+          ${this.#correctResponseNumber !== null ? T`
                 <div id="knob-correct" part="knob-correct">
                   <div id="value" part="value">${this.#correctResponseNumber}</div>
                 </div>
@@ -8756,24 +8787,24 @@ __decorateClass([
   n({ type: Number, attribute: "step" })
 ], QtiSliderInteraction.prototype, "step", 2);
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/node/directives/ref.js
-var e4 = () => new h();
-var h = class {
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/node/directives/ref.js
+var e4 = () => new h2();
+var h2 = class {
 };
 var o5 = /* @__PURE__ */ new WeakMap();
 var n3 = e2(class extends f {
   render(i5) {
-    return E;
+    return A;
   }
-  update(i5, [s2]) {
-    const e5 = s2 !== this.G;
-    return e5 && void 0 !== this.G && this.rt(void 0), (e5 || this.lt !== this.ct) && (this.G = s2, this.ht = i5.options?.host, this.rt(this.ct = i5.element)), E;
+  update(i5, [s]) {
+    const e5 = s !== this.G;
+    return e5 && void 0 !== this.G && this.rt(void 0), (e5 || this.lt !== this.ct) && (this.G = s, this.ht = i5.options?.host, this.rt(this.ct = i5.element)), A;
   }
   rt(t2) {
     if (this.isConnected || (t2 = void 0), "function" == typeof this.G) {
       const i5 = this.ht ?? globalThis;
-      let s2 = o5.get(i5);
-      void 0 === s2 && (s2 = /* @__PURE__ */ new WeakMap(), o5.set(i5, s2)), void 0 !== s2.get(this.G) && this.G.call(this.ht, void 0), s2.set(this.G, t2), void 0 !== t2 && this.G.call(this.ht, t2);
+      let s = o5.get(i5);
+      void 0 === s && (s = /* @__PURE__ */ new WeakMap(), o5.set(i5, s)), void 0 !== s.get(this.G) && this.G.call(this.ht, void 0), s.set(this.G, t2), void 0 !== t2 && this.G.call(this.ht, t2);
     } else this.G.value = t2;
   }
   get lt() {
@@ -8980,7 +9011,7 @@ var QtiTextEntryInteraction = class extends Interaction {
     }
   }
   render() {
-    return x`
+    return T`
       <input
         part="input"
         name="${this.responseIdentifier}"
@@ -9000,7 +9031,7 @@ var QtiTextEntryInteraction = class extends Interaction {
         ?disabled="${this.disabled}"
         ?readonly="${this.readonly}"
       />
-      ${this._correctResponse ? x`<div part="correct">${this._correctResponse}</div>` : E}
+      ${this._correctResponse ? T`<div part="correct">${this._correctResponse}</div>` : A}
     `;
   }
   // ${this._correctResponse ? html`<div popover part="correct">${this._correctResponse}</div>` : nothing}
@@ -9097,7 +9128,7 @@ var QtiUploadInteraction = class extends Interaction {
     };
   }
   render() {
-    return x`
+    return T`
       <div>
         <slot name="prompt"></slot>
         <input type="file" @change="${this.#onFileChange}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" />
@@ -9276,7 +9307,7 @@ var QtiPortableCustomInteractionTest = class extends QtiPortableCustomInteractio
    * @param y The y coordinate
    * @returns Promise that resolves when the click is performed
    */
-  async iFrameMouseClick(x2, y) {
+  async iFrameMouseClick(x, y) {
     return new Promise((resolve) => {
       const messageId = `click-${Date.now()}`;
       const messageHandler = (event) => {
@@ -9287,7 +9318,7 @@ var QtiPortableCustomInteractionTest = class extends QtiPortableCustomInteractio
         }
       };
       window.addEventListener("message", messageHandler);
-      this.sendMessageToIframe("simulateClick", { x: x2, y, messageId });
+      this.sendMessageToIframe("simulateClick", { x, y, messageId });
       setTimeout(() => {
         window.removeEventListener("message", messageHandler);
         resolve();
@@ -9718,4 +9749,4 @@ lit-html/node/directives/ref.js:
    * SPDX-License-Identifier: BSD-3-Clause
    *)
 */
-//# sourceMappingURL=chunk-KY3II5OX.js.map
+//# sourceMappingURL=chunk-CSYOTHK2.js.map