@longsightgroup/qti3-player 0.1.2 → 0.2.1

package/src/index.ts

@@ -1,6 +1,8 @@
 import {
   assertQtiAttemptStateV1,
   createItemSession,
+  createCatalogSupportResolution,
+  createTextToSpeechTraversal,
   parseQtiXml,
   visibleModalFeedback,
   type QtiAssessmentItem,
@@ -13,7 +15,12 @@ import {
   type QtiInteraction,
   type QtiItemSession,
   type QtiObjectAsset,
+  type QtiPortableCustomDefinition,
+  type QtiPortableCustomStateValue,
   type QtiScoreResult,
+  type QtiCatalogSupportResolution,
+  type QtiCatalogSupportResolutionOptions,
+  type QtiTextToSpeechTraversal,
   type QtiValue,
 } from "@longsightgroup/qti3-core";
 
@@ -37,6 +44,17 @@ export interface QtiPlayerLoadOptions {
   resolveAsset?: QtiPlayerResolveAsset | undefined;
 }
 
+export interface QtiPlayerRemoveMessageParams {
+  label: string;
+}
+
+export interface QtiPlayerMessages {
+  remove: () => string;
+  removePair: (params: QtiPlayerRemoveMessageParams) => string;
+}
+
+export type QtiPlayerMessageOverrides = Partial<QtiPlayerMessages>;
+
 export interface QtiReadyEventDetail {
   item: QtiAssessmentItem;
 }
@@ -50,6 +68,15 @@ export interface QtiResponseChangeEventDetail {
   value: QtiValue;
 }
 
+export interface QtiPortableCustomMountEventDetail {
+  responseIdentifier: string;
+  interaction: QtiInteraction;
+  definition: QtiPortableCustomDefinition;
+  host: HTMLElement;
+  value: QtiValue;
+  state?: QtiPortableCustomStateValue | undefined;
+}
+
 export type QtiScoreEventDetail = QtiScoreResult;
 
 export interface QtiValidationEventDetail {
@@ -69,6 +96,7 @@ export interface QtiAssessmentItemPlayerEventDetailMap {
   "qti-ready": QtiReadyEventDetail;
   "qti-statechange": QtiStateChangeEventDetail;
   "qti-responsechange": QtiResponseChangeEventDetail;
+  "qti-portable-custom-mount": QtiPortableCustomMountEventDetail;
   "qti-score": QtiScoreEventDetail;
   "qti-validation": QtiValidationEventDetail;
   "qti-suspend": QtiSuspendEventDetail;
@@ -95,15 +123,59 @@ const HTMLElementBase: typeof HTMLElement =
   } as unknown as typeof HTMLElement);
 
 export class QtiAssessmentItemPlayer extends HTMLElementBase {
+  static get observedAttributes(): string[] {
+    return ["language-of-interface", "locale"];
+  }
+
   private documentModel?: QtiDocument;
   private session?: QtiItemSession;
   private resolveAsset: QtiPlayerResolveAsset | undefined;
   private validationMessages: QtiDiagnostic[] = [];
+  private languageOfInterfaceOverride: string | undefined;
+  private messageOverrides: QtiPlayerMessageOverrides = {};
   private sessionControl: Required<QtiPlayerSessionControl> = {
     validateResponses: true,
     showFeedback: true,
   };
 
+  get languageOfInterface(): string {
+    return (
+      this.languageOfInterfaceOverride ??
+      this.getAttribute?.("language-of-interface") ??
+      this.getAttribute?.("locale") ??
+      defaultPlayerLocale(this)
+    );
+  }
+
+  set languageOfInterface(value: string | undefined) {
+    this.languageOfInterfaceOverride = normalizedLocale(value);
+    this.rerenderIfLoaded();
+  }
+
+  get locale(): string {
+    return this.languageOfInterface;
+  }
+
+  set locale(value: string | undefined) {
+    this.languageOfInterface = value;
+  }
+
+  get messages(): QtiPlayerMessageOverrides {
+    return this.messageOverrides;
+  }
+
+  set messages(value: QtiPlayerMessageOverrides | undefined) {
+    this.messageOverrides = value ?? {};
+    this.rerenderIfLoaded();
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
+    if ((name !== "language-of-interface" && name !== "locale") || oldValue === newValue) {
+      return;
+    }
+    this.rerenderIfLoaded();
+  }
+
   async loadXml(xml: string, options: QtiPlayerLoadOptions = {}): Promise<void> {
     this.sessionControl = {
       validateResponses: options.sessionControl?.validateResponses ?? true,
@@ -224,6 +296,18 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     return state;
   }
 
+  getTextToSpeechTraversal(): QtiTextToSpeechTraversal | undefined {
+    if (!this.documentModel) return undefined;
+    return createTextToSpeechTraversal(this.documentModel);
+  }
+
+  getCatalogSupportResolution(
+    options: QtiCatalogSupportResolutionOptions = {},
+  ): QtiCatalogSupportResolution | undefined {
+    if (!this.documentModel) return undefined;
+    return createCatalogSupportResolution(this.documentModel, options);
+  }
+
   private emitStateChange(state = this.serialize()): void {
     if (!state) return;
     this.dispatchPlayerEvent("qti-statechange", { state });
@@ -236,6 +320,17 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     this.dispatchEvent(new CustomEvent<QtiAssessmentItemPlayerEventDetailMap[T]>(type, { detail }));
   }
 
+  private playerMessages(): QtiPlayerMessages {
+    return resolvePlayerMessages(this.languageOfInterface, this.messageOverrides);
+  }
+
+  private rerenderIfLoaded(): void {
+    if (!this.documentModel) return;
+    this.render();
+    this.renderValidationMessages();
+    this.updateAttemptAvailability();
+  }
+
   private render(): void {
     const documentModel = this.documentModel;
     if (!documentModel) return;
@@ -243,6 +338,10 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     this.applyDefaultStyles();
     const root = document.createElement("article");
     root.className = "qti3-player";
+    if (documentModel.item.language) {
+      root.lang = documentModel.item.language;
+      root.setAttribute("xml:lang", documentModel.item.language);
+    }
     root.append(playerStyleElement());
 
     if (documentModel.item.prompt && documentModel.item.body.length === 0) {
@@ -275,6 +374,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
   }
 
   private renderInteraction(interaction: QtiInteraction): HTMLElement {
+    const messages = this.playerMessages();
     const field = document.createElement("section");
     field.className = `qti3-interaction qti3-${interaction.type}`;
     field.classList.add(...qtiSharedClassNames(interaction.attributes.class));
@@ -283,6 +383,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
       field.dataset.responseIdentifier = interaction.responseIdentifier;
 
     const heading = document.createElement("h3");
+    copySafeAttributes(heading, interaction.promptAttributes ?? {});
     heading.textContent = interactionLabel(interaction);
     field.append(heading);
     if (interaction.responseIdentifier) {
@@ -301,7 +402,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
 
     if (interaction.type === "graphicOrder") {
-      field.append(renderGraphicOrderResponse(interaction, update, currentValue));
+      field.append(renderGraphicOrderResponse(interaction, update, currentValue, messages));
       return field;
     }
 
@@ -316,17 +417,17 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     }
 
     if (interaction.type === "graphicAssociate") {
-      field.append(renderGraphicAssociateResponse(interaction, update, currentValue));
+      field.append(renderGraphicAssociateResponse(interaction, update, currentValue, messages));
       return field;
     }
 
     if (interaction.type === "match") {
-      field.append(renderMatchResponse(interaction, update, currentValue));
+      field.append(renderMatchResponse(interaction, update, currentValue, messages));
       return field;
     }
 
     if (usesPairResponse(interaction)) {
-      field.append(renderPairResponse(interaction, update, currentValue));
+      field.append(renderPairResponse(interaction, update, currentValue, messages));
       return field;
     }
 
@@ -371,7 +472,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     }
 
     if (interaction.type === "portableCustom") {
-      field.append(renderPortableCustomResponse(interaction, update, currentValue));
+      field.append(this.renderPortableCustomResponse(interaction, update, currentValue));
       return field;
     }
 
@@ -421,6 +522,99 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     return field;
   }
 
+  private renderPortableCustomResponse(
+    interaction: QtiInteraction,
+    update: (value: QtiValue) => void,
+    currentValue: QtiValue,
+  ): HTMLElement {
+    const definition =
+      interaction.portableCustom ?? portableCustomDefinitionFromAttributes(interaction);
+    const responseIdentifier =
+      interaction.responseIdentifier ?? definition.responseIdentifier ?? "";
+    const currentState = responseIdentifier
+      ? this.currentInteractionState(responseIdentifier)
+      : undefined;
+
+    const group = document.createElement("div");
+    group.role = "group";
+    group.setAttribute("aria-label", interaction.prompt ?? "Portable custom interaction");
+
+    const host = document.createElement("div");
+    host.className = "qti3-portable-custom-host";
+    host.tabIndex = 0;
+    host.dataset.responseIdentifier = responseIdentifier;
+    host.dataset.typeIdentifier = definition.customInteractionTypeIdentifier ?? "";
+    host.dataset.module = definition.module ?? "";
+    host.dataset.qtiName = interaction.qtiName;
+    if (definition.interactionModules?.primaryConfiguration) {
+      host.dataset.primaryConfiguration = definition.interactionModules.primaryConfiguration;
+    }
+    if (definition.interactionModules?.secondaryConfiguration) {
+      host.dataset.secondaryConfiguration = definition.interactionModules.secondaryConfiguration;
+    }
+    if (currentState !== undefined) host.dataset.state = JSON.stringify(currentState);
+    host.setAttribute("role", "application");
+    host.setAttribute("aria-label", interaction.prompt ?? "Portable custom interaction host");
+    host.style.border = "1px solid CanvasText";
+    host.style.padding = "0.5rem";
+    host.style.marginBlockEnd = "0.5rem";
+
+    if (definition.interactionMarkup.length > 0) {
+      const markup = document.createElement("div");
+      markup.className = "qti3-portable-custom-markup";
+      markup.append(...this.renderContentNodes(definition.interactionMarkup));
+      host.append(markup);
+    } else {
+      host.textContent = "Portable custom interaction host";
+    }
+
+    const fallback = document.createElement("input");
+    fallback.type = "hidden";
+    fallback.className = "qti3-portable-custom-response";
+    fallback.hidden = true;
+    fallback.tabIndex = -1;
+    fallback.setAttribute("aria-hidden", "true");
+    fallback.value = scalarString(currentValue);
+
+    const handlePortableCustomEvent = (event: Event) => {
+      const state = portableCustomEventState(event);
+      const value = portableCustomEventValue(event);
+      const validity = portableCustomEventValidity(event);
+      if (state !== undefined && responseIdentifier && this.session) {
+        this.session.setInteractionState(responseIdentifier, state);
+        host.dataset.state = JSON.stringify(state);
+      }
+      if (value !== undefined) {
+        fallback.value = String(value ?? "");
+        update(value);
+      }
+      if (validity && responseIdentifier) {
+        this.setPortableCustomValidity(responseIdentifier, validity.valid, validity.message);
+        this.emitStateChange();
+      }
+      if (value === undefined && state !== undefined && !validity) this.emitStateChange();
+    };
+
+    host.addEventListener("qti3-portable-custom-response", handlePortableCustomEvent);
+    host.addEventListener("qti3-pci-response", handlePortableCustomEvent);
+    host.addEventListener("qti3-portable-custom-state", handlePortableCustomEvent);
+    host.addEventListener("qti3-portable-custom-validity", handlePortableCustomEvent);
+
+    queueMicrotask(() => {
+      this.dispatchPlayerEvent("qti-portable-custom-mount", {
+        responseIdentifier,
+        interaction,
+        definition,
+        host,
+        value: currentValue,
+        state: currentState,
+      });
+    });
+
+    group.append(host, fallback);
+    return group;
+  }
+
   private renderEmbeddedInteraction(interaction: QtiInteraction): HTMLElement {
     if (interaction.type !== "inlineChoice" && interaction.type !== "textEntry") {
       return this.renderInteraction(interaction);
@@ -480,11 +674,13 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     }
     if (node.qtiName === "qti-prompt") {
       const prompt = document.createElement("p");
-      prompt.className = "qti3-item-prompt";
+      copySafeAttributes(prompt, node.attributes);
+      prompt.classList.add("qti3-item-prompt");
       prompt.append(...this.renderContentNodes(node.children));
       return [prompt];
     }
 
+    if (unsafeContentElements.has(node.qtiName)) return [];
     const elementName = contentElementName(node.qtiName);
     if (!elementName) return this.renderContentNodes(node.children);
     const element = createContentElement(elementName);
@@ -652,6 +848,32 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     return this.session?.serialize().responses[identifier] ?? null;
   }
 
+  private currentInteractionState(identifier: string): QtiPortableCustomStateValue | undefined {
+    return this.session?.serialize().interactionStates?.[identifier];
+  }
+
+  private setPortableCustomValidity(
+    responseIdentifier: string,
+    valid: boolean,
+    message: string | undefined,
+  ): void {
+    if (valid) {
+      this.clearValidationMessage(responseIdentifier);
+      return;
+    }
+    const diagnostic: QtiDiagnostic = {
+      code: "response.portableCustom.validity",
+      severity: "error",
+      message: message?.trim() || `${responseIdentifier} is not valid.`,
+      path: responseIdentifier,
+    };
+    this.validationMessages = [
+      ...this.validationMessages.filter((entry) => entry.path !== responseIdentifier),
+      diagnostic,
+    ];
+    this.renderValidationMessages();
+  }
+
   private applyDefaultStyles(): void {
     this.style.color = "CanvasText";
     this.style.backgroundColor = "Canvas";
@@ -796,6 +1018,154 @@ declare global {
   }
 }
 
+const defaultEnglishPlayerMessages: QtiPlayerMessages = {
+  remove: () => "Remove",
+  removePair: ({ label }) => `Remove ${label}`,
+};
+
+const playerMessages = {
+  defaultEnglish: defaultEnglishPlayerMessages,
+  spanish: playerMessageCatalog("Quitar", ({ label }) => `Quitar ${label}`),
+  swedish: playerMessageCatalog("Ta bort", ({ label }) => `Ta bort ${label}`),
+  german: playerMessageCatalog("Entfernen", ({ label }) => `${label} entfernen`),
+  portuguese: playerMessageCatalog("Remover", ({ label }) => `Remover ${label}`),
+  french: playerMessageCatalog("Supprimer", ({ label }) => `Supprimer ${label}`),
+};
+
+const builtInPlayerMessageCatalogs: ReadonlyMap<string, QtiPlayerMessages> = new Map([
+  ["en", playerMessages.defaultEnglish],
+  ["es", playerMessages.spanish],
+  ["es-es", playerMessages.spanish],
+  ["es-mx", playerMessages.spanish],
+  ["sv", playerMessages.swedish],
+  ["sv-se", playerMessages.swedish],
+  ["de", playerMessages.german],
+  ["de-de", playerMessages.german],
+  ["pt", playerMessages.portuguese],
+  ["pt-br", playerMessages.portuguese],
+  ["pt-pt", playerMessages.portuguese],
+  ["fr", playerMessages.french],
+  ["fr-ca", playerMessages.french],
+  ["fr-fr", playerMessages.french],
+]);
+
+function playerMessageCatalog(
+  remove: string,
+  removePair: QtiPlayerMessages["removePair"],
+): QtiPlayerMessages {
+  return {
+    remove: () => remove,
+    removePair,
+  };
+}
+
+function resolvePlayerMessages(
+  locale: string,
+  overrides: QtiPlayerMessageOverrides,
+): QtiPlayerMessages {
+  const catalog = builtInPlayerMessageCatalog(locale);
+  return {
+    remove: overrides.remove ?? catalog?.remove ?? defaultEnglishPlayerMessages.remove,
+    removePair:
+      overrides.removePair ?? catalog?.removePair ?? defaultEnglishPlayerMessages.removePair,
+  };
+}
+
+function builtInPlayerMessageCatalog(locale: string): QtiPlayerMessages | undefined {
+  for (const candidate of localeFallbacks(locale)) {
+    const catalog = builtInPlayerMessageCatalogs.get(candidate);
+    if (catalog) return catalog;
+  }
+  return undefined;
+}
+
+function localeFallbacks(locale: string): string[] {
+  const normalized = normalizedLocale(locale)?.toLowerCase();
+  if (!normalized) return ["en"];
+  const parts = normalized.split("-");
+  const fallbacks: string[] = [];
+  for (let length = parts.length; length > 0; length -= 1) {
+    fallbacks.push(parts.slice(0, length).join("-"));
+  }
+  return fallbacks.includes("en") ? fallbacks : [...fallbacks, "en"];
+}
+
+function normalizedLocale(value: string | undefined | null): string | undefined {
+  const trimmed = value?.trim();
+  if (!trimmed) return undefined;
+  try {
+    return Intl.getCanonicalLocales(trimmed)[0] ?? trimmed;
+  } catch {
+    return trimmed;
+  }
+}
+
+function defaultPlayerLocale(host?: Element): string {
+  const elementLanguage = normalizedLocale(host?.getAttribute("lang"));
+  if (elementLanguage) return elementLanguage;
+
+  const navigatorLanguages = globalThis.navigator?.languages ?? [];
+  for (const language of navigatorLanguages) {
+    const normalized = normalizedLocale(language);
+    if (normalized) return normalized;
+  }
+  return (
+    normalizedLocale(globalThis.navigator?.language) ??
+    normalizedLocale(host?.closest("[lang]")?.getAttribute("lang")) ??
+    normalizedLocale(host?.ownerDocument?.documentElement.lang) ??
+    normalizedLocale(globalThis.document?.documentElement.lang) ??
+    "en"
+  );
+}
+
+function removeButton(label: string | null, messages: QtiPlayerMessages): HTMLButtonElement {
+  const safeLabel = label?.trim() || messages.remove();
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "qti3-icon-button qti3-remove-button";
+  button.title = messages.remove();
+  button.setAttribute("aria-label", messages.removePair({ label: safeLabel }));
+  button.append(trashIcon());
+  return button;
+}
+
+type IconPath = string | { d: string; fill?: string; stroke?: string };
+
+function inlineIcon(className: string, paths: IconPath[]): SVGSVGElement {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svg.setAttribute("width", "24");
+  svg.setAttribute("height", "24");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  svg.setAttribute("class", className);
+
+  for (const entry of paths) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    if (typeof entry === "string") {
+      path.setAttribute("d", entry);
+    } else {
+      path.setAttribute("d", entry.d);
+      if (entry.stroke) {
+        path.setAttribute("stroke", entry.stroke);
+        path.style.stroke = entry.stroke;
+      }
+      if (entry.fill) {
+        path.setAttribute("fill", entry.fill);
+        path.style.fill = entry.fill;
+      }
+    }
+    svg.append(path);
+  }
+  return svg;
+}
+
 function renderChoice(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
@@ -866,13 +1236,28 @@ function responseGroup(className?: string): HTMLElement {
 
 type MovementDirection = "up" | "down" | "left" | "right";
 
-const movementGlyphs: Record<MovementDirection, string> = {
-  up: "\u2191",
-  down: "\u2193",
-  left: "\u2190",
-  right: "\u2192",
+function trashIcon(): SVGSVGElement {
+  return inlineIcon("qti3-trash-icon", [
+    { d: "M0 0h24v24H0z", stroke: "none", fill: "none" },
+    "M4 7l16 0",
+    "M10 11l0 6",
+    "M14 11l0 6",
+    "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12",
+    "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3",
+  ]);
+}
+
+const movementIconPaths: Record<MovementDirection, string[]> = {
+  up: ["M12 5l0 14", "M18 11l-6 -6", "M6 11l6 -6"],
+  down: ["M12 5l0 14", "M18 13l-6 6", "M6 13l6 6"],
+  left: ["M5 12l14 0", "M5 12l6 6", "M5 12l6 -6"],
+  right: ["M5 12l14 0", "M13 18l6 -6", "M13 6l6 6"],
 };
 
+function movementIcon(direction: MovementDirection): SVGSVGElement {
+  return inlineIcon("qti3-movement-icon", movementIconPaths[direction]);
+}
+
 function movementButton(
   direction: MovementDirection,
   accessibleName: string,
@@ -880,10 +1265,10 @@ function movementButton(
 ): HTMLButtonElement {
   const button = document.createElement("button");
   button.type = "button";
-  button.className = "qti3-icon-button";
+  button.className = "qti3-icon-button qti3-move-button";
   button.dataset.moveDirection = direction;
-  button.textContent = movementGlyphs[direction];
   button.setAttribute("aria-label", accessibleName);
+  button.append(movementIcon(direction));
   button.addEventListener("click", onClick);
   return button;
 }
@@ -1127,6 +1512,7 @@ function renderPairResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
+  messages: QtiPlayerMessages,
 ): HTMLElement {
   const group = responseGroup();
   appendGraphicContext(group, interaction);
@@ -1191,10 +1577,7 @@ function renderPairResponse(
         item.className = "qti3-pair-chip";
         const text = document.createElement("span");
         text.textContent = `${choiceText(sources, source)} to ${choiceText(targets, target)}`;
-        const remove = document.createElement("button");
-        remove.type = "button";
-        remove.textContent = "Remove";
-        remove.setAttribute("aria-label", `Remove ${text.textContent}`);
+        const remove = removeButton(text.textContent, messages);
         remove.addEventListener("click", () => {
           const index = selectedPairs.indexOf(pair);
           if (index >= 0) selectedPairs.splice(index, 1);
@@ -1256,6 +1639,7 @@ function renderMatchResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
+  messages: QtiPlayerMessages,
 ): HTMLElement {
   const group = responseGroup();
 
@@ -1315,10 +1699,7 @@ function renderMatchResponse(
         item.className = "qti3-pair-chip";
         const text = document.createElement("span");
         text.textContent = label;
-        const remove = document.createElement("button");
-        remove.type = "button";
-        remove.textContent = "Remove";
-        remove.setAttribute("aria-label", `Remove ${label}`);
+        const remove = removeButton(label, messages);
         remove.addEventListener("click", () => {
           removePair(pair);
           syncPressed();
@@ -1453,6 +1834,7 @@ function renderGraphicOrderResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
+  messages: QtiPlayerMessages,
 ): HTMLElement {
   const group = responseGroup();
 
@@ -1628,10 +2010,7 @@ function renderGraphicOrderResponse(
         );
         down.disabled = index === currentChoices.length - 1;
 
-        const remove = document.createElement("button");
-        remove.type = "button";
-        remove.textContent = "Remove";
-        remove.setAttribute("aria-label", `Remove ${choiceLabel}`);
+        const remove = removeButton(choiceLabel, messages);
         remove.addEventListener("click", () => removeHotspot(choice.identifier));
 
         item.append(label, up, down, remove);
@@ -1682,6 +2061,7 @@ function renderGraphicAssociateResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
+  messages: QtiPlayerMessages,
 ): HTMLElement {
   const group = responseGroup();
 
@@ -1692,6 +2072,12 @@ function renderGraphicAssociateResponse(
   const maximumAssociations =
     interaction.responseCardinality === "single" ? 1 : maximumAllowedResponses(interaction);
   let selectedHotspot: QtiChoice | undefined;
+  let draggedHotspot: QtiChoice | undefined;
+  let dragPointerId: number | undefined;
+  let dragStart: { x: number; y: number } | undefined;
+  let dragStarted = false;
+  let suppressNextClick = false;
+  let previewLine: SVGLineElement | undefined;
 
   const surface = document.createElement("div");
   surface.className = "qti3-graphic-associate-surface";
@@ -1785,6 +2171,52 @@ function renderGraphicAssociateResponse(
     renderState();
     commit();
   };
+  const authoredPointFromPointer = (event: PointerEvent) => {
+    const rect = surface.getBoundingClientRect();
+    return {
+      x: Math.max(0, Math.min(width, ((event.clientX - rect.left) / rect.width) * width)),
+      y: Math.max(0, Math.min(height, ((event.clientY - rect.top) / rect.height) * height)),
+    };
+  };
+  const removePreviewLine = () => {
+    previewLine?.remove();
+    previewLine = undefined;
+  };
+  const suppressFollowingClick = () => {
+    suppressNextClick = true;
+    setTimeout(() => {
+      suppressNextClick = false;
+    }, 0);
+  };
+  const updatePreviewLine = (source: QtiChoice, event: PointerEvent) => {
+    const start = hotspotCenter(source, width, height);
+    const end = authoredPointFromPointer(event);
+    if (!previewLine) {
+      previewLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      previewLine.dataset.preview = "true";
+      connections.append(previewLine);
+    }
+    previewLine.setAttribute("x1", String(start.x));
+    previewLine.setAttribute("y1", String(start.y));
+    previewLine.setAttribute("x2", String(end.x));
+    previewLine.setAttribute("y2", String(end.y));
+  };
+  const hotspotFromPointer = (event: PointerEvent) => {
+    const element = document.elementFromPoint(event.clientX, event.clientY);
+    const button = element?.closest<HTMLButtonElement>(".qti3-graphic-associate-hotspot");
+    const identifier = button?.dataset.choiceIdentifier;
+    return choices.find((choice) => choice.identifier === identifier);
+  };
+  const finishDrag = (event: PointerEvent, source: QtiChoice) => {
+    const target = hotspotFromPointer(event);
+    removePreviewLine();
+    if (target) {
+      addPair(source, target);
+      return;
+    }
+    selectedHotspot = undefined;
+    renderState();
+  };
   const chooseHotspot = (choice: QtiChoice) => {
     if (!selectedHotspot) {
       selectedHotspot = choice;
@@ -1840,10 +2272,7 @@ function renderGraphicAssociateResponse(
         item.className = "qti3-pair-chip";
         const text = document.createElement("span");
         text.textContent = pairLabel;
-        const remove = document.createElement("button");
-        remove.type = "button";
-        remove.textContent = "Remove";
-        remove.setAttribute("aria-label", `Remove ${pairLabel}`);
+        const remove = removeButton(pairLabel, messages);
         remove.addEventListener("click", () => removePair(pair));
         item.append(text, remove);
         return item;
@@ -1861,8 +2290,60 @@ function renderGraphicAssociateResponse(
     button.setAttribute("aria-pressed", "false");
     button.setAttribute("aria-label", hotspotAccessibleLabel(choice, index));
     button.style.position = "absolute";
+    button.style.touchAction = "none";
     placeHotspotButton(button, choice, width, height);
-    button.addEventListener("click", () => chooseHotspot(choice));
+    button.addEventListener("click", (event) => {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        event.preventDefault();
+        return;
+      }
+      chooseHotspot(choice);
+    });
+    button.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
+      draggedHotspot = choice;
+      dragPointerId = event.pointerId;
+      dragStart = { x: event.clientX, y: event.clientY };
+      dragStarted = false;
+      button.setPointerCapture(event.pointerId);
+    });
+    button.addEventListener("pointermove", (event) => {
+      if (dragPointerId !== event.pointerId || !draggedHotspot || !dragStart) return;
+      const moved = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
+      if (!dragStarted && moved < 4) return;
+      if (!dragStarted) {
+        dragStarted = true;
+        suppressFollowingClick();
+        selectedHotspot = draggedHotspot;
+        renderState();
+      }
+      updatePreviewLine(draggedHotspot, event);
+      event.preventDefault();
+    });
+    button.addEventListener("pointerup", (event) => {
+      if (dragPointerId !== event.pointerId || !draggedHotspot) return;
+      const source = draggedHotspot;
+      draggedHotspot = undefined;
+      dragPointerId = undefined;
+      dragStart = undefined;
+      button.releasePointerCapture(event.pointerId);
+      if (!dragStarted) return;
+      dragStarted = false;
+      suppressFollowingClick();
+      finishDrag(event, source);
+      event.preventDefault();
+    });
+    button.addEventListener("pointercancel", (event) => {
+      if (dragPointerId !== event.pointerId) return;
+      draggedHotspot = undefined;
+      dragPointerId = undefined;
+      dragStart = undefined;
+      dragStarted = false;
+      removePreviewLine();
+      selectedHotspot = undefined;
+      renderState();
+    });
     button.addEventListener("keydown", (event) => {
       if (event.key === "ArrowRight" || event.key === "ArrowDown") {
         event.preventDefault();
@@ -1888,6 +2369,14 @@ function renderGapMatchResponse(
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
 ): HTMLElement {
+  if (
+    interaction.type === "graphicGapMatch" &&
+    interaction.object &&
+    interaction.choices.some((choice) => choice.role === "hotspot")
+  ) {
+    return renderGraphicGapMatchResponse(interaction, update, currentValue);
+  }
+
   const group = responseGroup();
   appendGraphicContext(group, interaction);
 
@@ -2012,6 +2501,175 @@ function renderGapMatchResponse(
   return group;
 }
 
+function renderGraphicGapMatchResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = responseGroup();
+  const width = objectWidth(interaction);
+  const height = objectHeight(interaction);
+  const sources = sourceChoices(interaction);
+  const gaps = targetChoices(interaction).filter((choice) => choice.role === "hotspot");
+  const assignments = new Map<string, QtiChoice>();
+  let selectedSource: QtiChoice | undefined;
+  let draggedSource: string | undefined;
+
+  for (const pair of valueToStrings(currentValue)) {
+    const [sourceIdentifier, gapIdentifier] = pair.split(/\s+/);
+    const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+    if (source && gapIdentifier) assignments.set(gapIdentifier, source);
+  }
+
+  const surface = document.createElement("div");
+  surface.className = "qti3-graphic-context qti3-graphic-gap-match-surface";
+  surface.role = "group";
+  surface.setAttribute("aria-label", `${readableType(interaction.type)} target image`);
+  surface.style.position = "relative";
+  surface.style.inlineSize = `${width}px`;
+  surface.style.aspectRatio = `${width} / ${height}`;
+  surface.style.maxInlineSize = "100%";
+  surface.style.border = "1px solid CanvasText";
+  surface.style.background = "Canvas";
+  surface.style.overflow = "visible";
+  surface.style.setProperty(
+    "--qti3-graphic-gap-label-block-size",
+    `${graphicGapLabelBlockSize(sources)}rem`,
+  );
+
+  if (interaction.object?.data && objectIsImage(interaction.object)) {
+    const image = document.createElement("img");
+    image.src = interaction.object.data;
+    image.alt = interaction.object.text || `${readableType(interaction.type)} image`;
+    image.style.position = "absolute";
+    image.style.inset = "0";
+    image.style.inlineSize = "100%";
+    image.style.blockSize = "100%";
+    image.style.objectFit = "contain";
+    image.style.pointerEvents = "none";
+    surface.append(image);
+  }
+
+  const sourceRegion = tokenRegion(`${readableType(interaction.type)} choices`);
+  sourceRegion.classList.add("qti3-graphic-gap-source-region");
+  const choicesWidth = positivePixelValue(interaction.attributes["data-choices-container-width"]);
+  if (choicesWidth !== undefined) sourceRegion.style.maxInlineSize = `${choicesWidth}px`;
+
+  const summary = document.createElement("p");
+  summary.className = "qti3-selection-summary";
+  summary.setAttribute("aria-live", "polite");
+
+  const commit = () => {
+    update(
+      [...assignments.entries()].map(
+        ([gapIdentifier, source]) => `${source.identifier} ${gapIdentifier}`,
+      ),
+    );
+  };
+  const syncSources = () => {
+    for (const button of sourceRegion.querySelectorAll<HTMLButtonElement>("button")) {
+      button.setAttribute(
+        "aria-pressed",
+        button.dataset.choiceIdentifier === selectedSource?.identifier ? "true" : "false",
+      );
+    }
+  };
+  const clearSourceIfSingleUse = (source: QtiChoice, keepGapIdentifier: string) => {
+    if (parseUnlimitedMaximum(source.attributes["match-max"]) !== 1) return;
+    for (const [gapIdentifier, assigned] of assignments.entries()) {
+      if (gapIdentifier !== keepGapIdentifier && assigned.identifier === source.identifier) {
+        assignments.delete(gapIdentifier);
+      }
+    }
+  };
+  const assign = (gap: QtiChoice, sourceIdentifier: string | undefined) => {
+    const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+    if (!source) return;
+    clearSourceIfSingleUse(source, gap.identifier);
+    assignments.set(gap.identifier, source);
+    selectedSource = undefined;
+    syncSources();
+    renderTargets();
+    commit();
+  };
+  const targetLabel = (gap: QtiChoice, index: number) =>
+    gap.attributes["aria-label"] || gap.attributes["hotspot-label"] || `Target ${index + 1}`;
+  const renderTargetButton = (gap: QtiChoice, index: number): HTMLButtonElement => {
+    const assigned = assignments.get(gap.identifier);
+    const label = targetLabel(gap, index);
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "qti3-hotspot-button qti3-graphic-gap-hotspot";
+    button.dataset.gapIdentifier = gap.identifier;
+    button.dataset.selected = assigned ? "true" : "false";
+    button.setAttribute(
+      "aria-label",
+      assigned ? `${label}, assigned ${assigned.text}` : `${label}, empty`,
+    );
+    button.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      button.classList.add("qti3-drop-target");
+    });
+    button.addEventListener("dragleave", () => button.classList.remove("qti3-drop-target"));
+    button.addEventListener("drop", (event) => {
+      event.preventDefault();
+      button.classList.remove("qti3-drop-target");
+      assign(gap, event.dataTransfer?.getData("text/plain") || draggedSource);
+    });
+    button.addEventListener("click", () => assign(gap, selectedSource?.identifier));
+    button.addEventListener("keydown", (event) => {
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      if (!assignments.has(gap.identifier)) return;
+      event.preventDefault();
+      assignments.delete(gap.identifier);
+      renderTargets();
+      commit();
+    });
+    button.style.position = "absolute";
+    placeHotspotButton(button, gap, width, height);
+    if (assigned) {
+      const assignedLabel = document.createElement("span");
+      assignedLabel.className = "qti3-graphic-gap-label";
+      assignedLabel.textContent = assigned.text;
+      button.append(assignedLabel);
+    }
+    return button;
+  };
+  const renderTargets = () => {
+    surface.querySelectorAll(".qti3-graphic-gap-hotspot").forEach((target) => target.remove());
+    for (const [index, gap] of gaps.entries()) {
+      surface.append(renderTargetButton(gap, index));
+    }
+    summary.textContent =
+      assignments.size > 0
+        ? `${assignments.size} ${assignments.size === 1 ? "label" : "labels"} placed.`
+        : "No labels placed.";
+  };
+
+  for (const source of sources) {
+    const button = tokenButton(source);
+    button.draggable = true;
+    button.addEventListener("dragstart", (event) => {
+      draggedSource = source.identifier;
+      event.dataTransfer?.setData("text/plain", source.identifier);
+      event.dataTransfer?.setDragImage(button, 8, 8);
+    });
+    button.addEventListener("dragend", () => {
+      draggedSource = undefined;
+      syncSources();
+    });
+    button.addEventListener("click", () => {
+      selectedSource = source;
+      syncSources();
+    });
+    sourceRegion.append(button);
+  }
+
+  renderTargets();
+  group.append(surface, sourceRegion, summary);
+  return group;
+}
+
 function renderSelect(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
@@ -2376,10 +3034,9 @@ function renderPositionObjectResponse(
   const height = objectAssetHeight(stageObject, 300);
   const movableWidth = objectAssetWidth(movableObject, Math.max(32, Math.round(width * 0.12)));
   const movableHeight = objectAssetHeight(movableObject, Math.max(32, Math.round(height * 0.12)));
-  let point = parsePointValue(currentValue) ?? {
-    x: Math.round(width / 2),
-    y: Math.round(height / 2),
-  };
+  const parsedPoint = parsePointValue(currentValue);
+  let point = parsedPoint ?? { x: 0, y: 0 };
+  let isPlaced = Boolean(parsedPoint);
 
   const stage = document.createElement("div");
   stage.className = "qti3-position-object-stage";
@@ -2393,8 +3050,9 @@ function renderPositionObjectResponse(
   stage.style.border = "1px solid CanvasText";
   stage.style.background = "Canvas";
   stage.style.color = "CanvasText";
-  stage.style.overflow = "hidden";
+  stage.style.overflow = "visible";
   stage.style.touchAction = "none";
+  stage.style.marginBlockEnd = `${Math.ceil(movableHeight + 12)}px`;
 
   if (stageObject?.data && objectIsImage(stageObject)) {
     const image = document.createElement("img");
@@ -2446,10 +3104,24 @@ function renderPositionObjectResponse(
     point.y = Math.max(0, Math.min(height, point.y));
   };
   const commit = () => {
+    if (!isPlaced) return;
     update(pointToString(point));
   };
   const syncMarker = () => {
+    if (!isPlaced) {
+      marker.dataset.placed = "false";
+      marker.style.insetInlineStart = `${Math.round(movableWidth / 2)}px`;
+      marker.style.insetBlockStart = `calc(100% + ${Math.round(movableHeight / 2 + 8)}px)`;
+      coordinate.value = "";
+      coordinate.textContent = "Object not placed";
+      stage.setAttribute(
+        "aria-label",
+        `${readableType(interaction.type)} placement stage, object not placed`,
+      );
+      return;
+    }
     clamp();
+    marker.dataset.placed = "true";
     marker.style.insetInlineStart = `${percent(point.x, width)}%`;
     marker.style.insetBlockStart = `${percent(point.y, height)}%`;
     coordinate.value = pointToString(point);
@@ -2465,9 +3137,16 @@ function renderPositionObjectResponse(
       x: Math.round(((event.clientX - rect.left) / rect.width) * width),
       y: Math.round(((event.clientY - rect.top) / rect.height) * height),
     };
+    isPlaced = true;
     clamp();
   };
+  const ensureKeyboardPoint = () => {
+    if (isPlaced) return;
+    point = { x: 0, y: 0 };
+    isPlaced = true;
+  };
   const moveBy = (dx: number, dy: number, emit = true) => {
+    ensureKeyboardPoint();
     point.x += dx;
     point.y += dy;
     syncMarker();
@@ -2479,22 +3158,30 @@ function renderPositionObjectResponse(
     else if (event.key === "ArrowRight") moveBy(step, 0, false);
     else if (event.key === "ArrowUp") moveBy(0, -step, false);
     else if (event.key === "ArrowDown") moveBy(0, step, false);
-    else if (event.key === "Enter" || event.key === " ") commit();
-    else return;
+    else if (event.key === "Enter" || event.key === " ") {
+      ensureKeyboardPoint();
+      syncMarker();
+      commit();
+    } else return;
     event.preventDefault();
   };
 
   let dragging = false;
+  let dragMoved = false;
   marker.addEventListener("pointerdown", (event) => {
     dragging = true;
+    dragMoved = false;
     marker.setPointerCapture(event.pointerId);
     marker.style.cursor = "grabbing";
-    pointFromPointer(event);
-    syncMarker();
+    if (isPlaced) {
+      pointFromPointer(event);
+      syncMarker();
+    }
     event.preventDefault();
   });
   marker.addEventListener("pointermove", (event) => {
     if (!dragging) return;
+    dragMoved = true;
     pointFromPointer(event);
     syncMarker();
   });
@@ -2503,9 +3190,11 @@ function renderPositionObjectResponse(
     dragging = false;
     marker.releasePointerCapture(event.pointerId);
     marker.style.cursor = "grab";
-    pointFromPointer(event);
-    syncMarker();
-    commit();
+    if (dragMoved || isPlaced) {
+      pointFromPointer(event);
+      syncMarker();
+      commit();
+    }
   });
   marker.addEventListener("pointercancel", () => {
     dragging = false;
@@ -2685,52 +3374,6 @@ function renderDrawingResponse(
   return group;
 }
 
-function renderPortableCustomResponse(
-  interaction: QtiInteraction,
-  update: (value: QtiValue) => void,
-  currentValue: QtiValue,
-): HTMLElement {
-  const group = document.createElement("div");
-  group.role = "group";
-  group.setAttribute("aria-label", interaction.prompt ?? "Portable custom interaction");
-
-  const host = document.createElement("div");
-  host.className = "qti3-portable-custom-host";
-  host.tabIndex = 0;
-  host.dataset.responseIdentifier = interaction.responseIdentifier ?? "";
-  host.dataset.typeIdentifier = interaction.attributes["custom-interaction-type-identifier"] ?? "";
-  host.dataset.module = interaction.attributes.module ?? "";
-  host.dataset.qtiName = interaction.qtiName;
-  host.setAttribute("role", "application");
-  host.setAttribute("aria-label", interaction.prompt ?? "Portable custom interaction host");
-  host.textContent = "Portable custom interaction host";
-  host.style.border = "1px solid CanvasText";
-  host.style.padding = "0.5rem";
-  host.style.marginBlockEnd = "0.5rem";
-
-  const fallback = document.createElement("input");
-  fallback.value = scalarString(currentValue);
-  fallback.setAttribute("aria-label", `${interaction.prompt ?? "Portable custom"} response`);
-  fallback.addEventListener("input", () => update(fallback.value));
-  fallback.addEventListener("change", () => update(fallback.value));
-
-  host.addEventListener("qti3-portable-custom-response", (event) => {
-    const value = portableCustomEventValue(event);
-    if (value === undefined) return;
-    fallback.value = String(value ?? "");
-    update(value);
-  });
-  host.addEventListener("qti3-pci-response", (event) => {
-    const value = portableCustomEventValue(event);
-    if (value === undefined) return;
-    fallback.value = String(value ?? "");
-    update(value);
-  });
-
-  group.append(host, fallback);
-  return group;
-}
-
 function renderHotspotResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
@@ -2884,6 +3527,7 @@ function configureMediaElement(
     const sourceElement = document.createElement("source");
     sourceElement.src = source.src;
     if (source.type) sourceElement.type = source.type;
+    copySafeMediaChildAttributes(sourceElement, source.attributes, sourceAttributeNames);
     media.append(sourceElement);
   }
   for (const track of object.tracks) {
@@ -2894,6 +3538,7 @@ function configureMediaElement(
     if (track.srclang) trackElement.srclang = track.srclang;
     if (track.label) trackElement.label = track.label;
     if (track.default) trackElement.default = true;
+    copySafeMediaChildAttributes(trackElement, track.attributes, trackAttributeNames);
     media.append(trackElement);
   }
 
@@ -2907,6 +3552,30 @@ function copyMediaDataAttributes(element: HTMLElement, attributes: Record<string
   }
 }
 
+const sourceAttributeNames = new Set(["src", "srcset", "type"]);
+const trackAttributeNames = new Set(["default", "kind", "label", "src", "srclang"]);
+
+function copySafeMediaChildAttributes(
+  element: HTMLElement,
+  attributes: Record<string, string>,
+  controlledNames: Set<string>,
+): void {
+  for (const [name, value] of Object.entries(attributes)) {
+    const normalizedName = name.toLowerCase();
+    if (controlledNames.has(normalizedName)) continue;
+    if (
+      normalizedName === "class" ||
+      normalizedName === "id" ||
+      normalizedName === "title" ||
+      normalizedName === "media" ||
+      normalizedName === "sizes" ||
+      normalizedName.startsWith("data-")
+    ) {
+      element.setAttribute(name, value);
+    }
+  }
+}
+
 function mediaElementType(object: QtiObjectAsset): "audio" | "video" | undefined {
   const types = [object.type, ...object.sources.map((source) => source.type)].filter(
     (value): value is string => Boolean(value),
@@ -3036,6 +3705,10 @@ function choiceText(choices: QtiChoice[], identifier: string | undefined): strin
 
 function sourceChoices(interaction: QtiInteraction): QtiChoice[] {
   const choices = choicesOrFallback(interaction);
+  if (interaction.type === "gapMatch" || interaction.type === "graphicGapMatch") {
+    const gapChoices = choices.filter((choice) => choice.role === "gapChoice");
+    return gapChoices.length > 0 ? gapChoices : choices;
+  }
   const sourceRoles = new Set(["associableChoice", "matchSource", "gapChoice", "hotspot"]);
   const sources = choices.filter((choice) => sourceRoles.has(choice.role));
   return sources.length > 0 ? sources : choices;
@@ -3218,6 +3891,20 @@ function dimension(value: string | undefined, fallback: number): number {
   return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
 }
 
+function positivePixelValue(value: string | undefined): number | undefined {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
+}
+
+function graphicGapLabelBlockSize(sources: QtiChoice[]): number {
+  const maxLength = Math.max(
+    0,
+    ...sources.map((source) => (source.text || source.identifier).trim().length),
+  );
+  const estimatedLines = Math.max(1, Math.ceil(maxLength / 22));
+  return Number((estimatedLines * 0.95 + 0.9).toFixed(2));
+}
+
 function placeHotspotButton(
   button: HTMLButtonElement,
   choice: QtiChoice,
@@ -3545,6 +4232,25 @@ function polylineElement(points: DrawingPoint[]): SVGPolylineElement {
   return line;
 }
 
+function portableCustomDefinitionFromAttributes(
+  interaction: QtiInteraction,
+): QtiPortableCustomDefinition {
+  return {
+    responseIdentifier: interaction.responseIdentifier,
+    customInteractionTypeIdentifier: interaction.attributes["custom-interaction-type-identifier"],
+    module: interaction.attributes.module,
+    interactionMarkup: [],
+    templateVariables: [],
+    contextVariables: [],
+    stylesheets: [],
+    dataAttributes: Object.fromEntries(
+      Object.entries(interaction.attributes).filter(([name]) => name.startsWith("data-")),
+    ),
+    attributes: interaction.attributes,
+    source: interaction.source,
+  };
+}
+
 function portableCustomEventValue(event: Event): QtiValue | undefined {
   if (!("detail" in event)) return undefined;
   const detail = event.detail as { value?: QtiValue; response?: QtiValue } | QtiValue | undefined;
@@ -3552,14 +4258,49 @@ function portableCustomEventValue(event: Event): QtiValue | undefined {
   if (typeof detail === "object" && detail !== null && !Array.isArray(detail)) {
     if ("value" in detail) return detail.value ?? null;
     if ("response" in detail) return detail.response ?? null;
+    if ("state" in detail || "valid" in detail) return undefined;
   }
   return detail as QtiValue;
 }
 
+function portableCustomEventState(event: Event): QtiPortableCustomStateValue | undefined {
+  if (!("detail" in event)) return undefined;
+  const detail = event.detail as { state?: unknown } | undefined;
+  if (typeof detail !== "object" || detail === null || !("state" in detail)) return undefined;
+  return isPortableCustomStateValue(detail.state) ? detail.state : undefined;
+}
+
+function portableCustomEventValidity(
+  event: Event,
+): { valid: boolean; message?: string | undefined } | undefined {
+  if (!("detail" in event)) return undefined;
+  const detail = event.detail as { valid?: unknown; message?: unknown } | undefined;
+  if (typeof detail !== "object" || detail === null || typeof detail.valid !== "boolean") {
+    return undefined;
+  }
+  return {
+    valid: detail.valid,
+    message: typeof detail.message === "string" ? detail.message : undefined,
+  };
+}
+
+function isPortableCustomStateValue(value: unknown): value is QtiPortableCustomStateValue {
+  if (value === null) return true;
+  if (typeof value === "string" || typeof value === "boolean") return true;
+  if (typeof value === "number") return Number.isFinite(value);
+  if (Array.isArray(value)) return value.every(isPortableCustomStateValue);
+  if (typeof value === "object") {
+    return Object.values(value as Record<string, unknown>).every(isPortableCustomStateValue);
+  }
+  return false;
+}
+
 const htmlContentElements = new Set([
   "a",
   "abbr",
   "b",
+  "bdi",
+  "bdo",
   "blockquote",
   "br",
   "caption",
@@ -3573,6 +4314,12 @@ const htmlContentElements = new Set([
   "em",
   "figcaption",
   "figure",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
   "hr",
   "i",
   "img",
@@ -3582,6 +4329,12 @@ const htmlContentElements = new Set([
   "p",
   "pre",
   "q",
+  "rb",
+  "rbc",
+  "rp",
+  "rt",
+  "rtc",
+  "ruby",
   "samp",
   "small",
   "span",
@@ -3599,6 +4352,8 @@ const htmlContentElements = new Set([
   "var",
 ]);
 
+const unsafeContentElements = new Set(["script", "style"]);
+
 const mathMlElements = new Set([
   "math",
   "maction",
@@ -3663,32 +4418,89 @@ function copySafeAttributes(element: Element, attributes: Record<string, string>
   for (const [name, value] of Object.entries(attributes)) {
     if (!isSafeContentAttribute(name, value)) continue;
     element.setAttribute(name, value);
+    if (name === "xml:lang" && !Object.hasOwn(attributes, "lang")) {
+      element.setAttribute("lang", value);
+    }
   }
+  applySharedAccessibilityVocabulary(element, attributes);
+}
+
+function applySharedAccessibilityVocabulary(
+  element: Element,
+  attributes: Record<string, string>,
+): void {
+  for (const [name, value] of Object.entries(attributes)) {
+    const ariaName = qtiAriaAttributeName(name);
+    if (!ariaName || hasAttributeName(attributes, ariaName)) continue;
+    element.setAttribute(ariaName, value);
+  }
+
+  const suppressTts = attributeValue(attributes, "data-qti-suppress-tts");
+  if (
+    suppressesScreenReaderSpeech(suppressTts) &&
+    !hasAttributeName(attributes, "aria-hidden") &&
+    !hasAttributeName(attributes, "data-qti-aria-hidden")
+  ) {
+    element.setAttribute("aria-hidden", "true");
+  }
+}
+
+function qtiAriaAttributeName(name: string): string | undefined {
+  const normalizedName = name.toLowerCase();
+  const prefix = "data-qti-aria-";
+  if (!normalizedName.startsWith(prefix)) return undefined;
+  const suffix = normalizedName.slice(prefix.length);
+  if (!/^[a-z0-9][a-z0-9-]*$/.test(suffix)) return undefined;
+  return `aria-${suffix}`;
+}
+
+function attributeValue(attributes: Record<string, string>, name: string): string | undefined {
+  const normalizedName = name.toLowerCase();
+  const entry = Object.entries(attributes).find(
+    ([attributeName]) => attributeName.toLowerCase() === normalizedName,
+  );
+  return entry?.[1];
+}
+
+function hasAttributeName(attributes: Record<string, string>, name: string): boolean {
+  return attributeValue(attributes, name) !== undefined;
+}
+
+function suppressesScreenReaderSpeech(value: string | undefined): boolean {
+  if (!value) return false;
+  const tokens = value
+    .toLowerCase()
+    .split(/[\s,]+/)
+    .filter(Boolean);
+  return tokens.includes("all") || tokens.includes("screen-reader");
 }
 
 function isSafeContentAttribute(name: string, value: string): boolean {
-  if (name.startsWith("on")) return false;
-  if (name === "style") return false;
-  if (name === "href" || name === "src" || name === "data") {
+  const normalizedName = name.toLowerCase();
+  if (normalizedName.startsWith("on")) return false;
+  if (normalizedName === "style") return false;
+  if (normalizedName === "href" || normalizedName === "src" || normalizedName === "data") {
     return isSafeUrl(value);
   }
   return (
-    name === "alt" ||
-    name === "aria-label" ||
-    name === "aria-describedby" ||
-    name === "class" ||
-    name === "colspan" ||
-    name === "height" ||
-    name === "id" ||
-    name === "lang" ||
-    name === "role" ||
-    name === "rowspan" ||
-    name === "scope" ||
-    name === "title" ||
-    name === "type" ||
-    name === "width" ||
-    mathMlAttributeNames.has(name) ||
-    name.startsWith("data-")
+    normalizedName === "alt" ||
+    normalizedName === "class" ||
+    normalizedName === "colspan" ||
+    normalizedName === "dir" ||
+    normalizedName === "headers" ||
+    normalizedName === "height" ||
+    normalizedName === "id" ||
+    normalizedName === "lang" ||
+    normalizedName === "role" ||
+    normalizedName === "rowspan" ||
+    normalizedName === "scope" ||
+    normalizedName === "title" ||
+    normalizedName === "type" ||
+    normalizedName === "width" ||
+    normalizedName === "xml:lang" ||
+    mathMlAttributeNames.has(normalizedName) ||
+    normalizedName.startsWith("aria-") ||
+    normalizedName.startsWith("data-")
   );
 }
 
@@ -3834,6 +4646,23 @@ function playerStyleElement(): HTMLStyleElement {
       margin-block: 0;
     }
 
+    .qti3-player .qti-hidden {
+      display: none !important;
+    }
+
+    .qti3-player .qti-visually-hidden {
+      position: absolute !important;
+      overflow: hidden !important;
+      clip: rect(1px, 1px, 1px, 1px) !important;
+      clip-path: inset(50%) !important;
+      inline-size: 1px !important;
+      block-size: 1px !important;
+      margin: -1px !important;
+      padding: 0 !important;
+      border: 0 !important;
+      white-space: nowrap !important;
+    }
+
     .qti3-embedded-interaction {
       display: inline-flex;
       gap: 0.35rem;
@@ -4058,6 +4887,37 @@ function playerStyleElement(): HTMLStyleElement {
       line-height: 1;
     }
 
+    .qti3-remove-button {
+      border: 1px solid currentColor;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+    }
+
+    .qti3-remove-button:hover {
+      background: color-mix(in srgb, currentColor 14%, transparent);
+    }
+
+    .qti3-trash-icon {
+      inline-size: 1.125rem;
+      block-size: 1.125rem;
+    }
+
+    .qti3-movement-icon {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+
+    .qti3-trash-icon path,
+    .qti3-movement-icon path {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+    }
+
     .qti3-token[aria-pressed="true"],
     .qti3-pair-chip {
       background: Highlight;
@@ -4206,6 +5066,7 @@ function playerStyleElement(): HTMLStyleElement {
     }
 
     .qti3-graphic-associate-surface,
+    .qti3-graphic-gap-match-surface,
     .qti3-graphic-order-surface {
       touch-action: manipulation;
     }
@@ -4233,10 +5094,60 @@ function playerStyleElement(): HTMLStyleElement {
     }
 
     .qti3-graphic-associate-hotspot,
+    .qti3-graphic-gap-hotspot,
     .qti3-graphic-order-hotspot {
       z-index: 2;
     }
 
+    .qti3-graphic-gap-match-surface {
+      margin-block-end: calc(var(--qti3-graphic-gap-label-block-size, 2rem) + 0.75rem);
+    }
+
+    .qti3-graphic-gap-hotspot {
+      display: grid;
+      place-items: center;
+      padding: 0;
+      overflow: visible;
+      border-style: dashed;
+      background: rgb(255 255 255 / 0.08);
+      color: CanvasText;
+    }
+
+    .qti3-graphic-gap-hotspot[data-selected="true"] {
+      border-style: solid;
+      background: color-mix(in srgb, Highlight 18%, Canvas);
+    }
+
+    .qti3-graphic-gap-label {
+      position: absolute;
+      inset-block-start: calc(100% + 0.2rem);
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+      box-sizing: border-box;
+      inline-size: max-content;
+      max-inline-size: min(12rem, calc(100vw - 2rem));
+      min-inline-size: 0;
+      padding: 0.25rem 0.4rem;
+      border: 1px solid CanvasText;
+      border-radius: 0.25rem;
+      background: Canvas;
+      color: CanvasText;
+      font-size: 0.75rem;
+      font-weight: 700;
+      line-height: 1.15;
+      overflow-wrap: anywhere;
+      pointer-events: none;
+      box-shadow: 0 1px 2px rgb(0 0 0 / 0.16);
+      text-align: center;
+      white-space: normal;
+    }
+
+    @supports not (background: color-mix(in srgb, Highlight 18%, Canvas)) {
+      .qti3-graphic-gap-hotspot[data-selected="true"] {
+        background: Canvas;
+      }
+    }
+
     .qti3-graphic-order-hotspot {
       display: grid;
       place-items: center;