@longsightgroup/qti3-player 0.1.2 → 0.2.0

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";
 
@@ -50,6 +57,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 +85,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;
@@ -224,6 +241,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 });
@@ -243,6 +272,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) {
@@ -283,6 +316,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) {
@@ -371,7 +405,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 +455,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 +607,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 +781,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";
@@ -1692,6 +1847,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 +1946,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;
@@ -1861,8 +2068,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 +2147,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 +2279,174 @@ 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();
+    });
+    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 +2811,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 +2827,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 +2881,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 +2914,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 +2935,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 +2967,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 +3151,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 +3304,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 +3315,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 +3329,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 +3482,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 +3668,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 +4009,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 +4035,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 +4091,12 @@ const htmlContentElements = new Set([
   "em",
   "figcaption",
   "figure",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
   "hr",
   "i",
   "img",
@@ -3582,6 +4106,12 @@ const htmlContentElements = new Set([
   "p",
   "pre",
   "q",
+  "rb",
+  "rbc",
+  "rp",
+  "rt",
+  "rtc",
+  "ruby",
   "samp",
   "small",
   "span",
@@ -3599,6 +4129,8 @@ const htmlContentElements = new Set([
   "var",
 ]);
 
+const unsafeContentElements = new Set(["script", "style"]);
+
 const mathMlElements = new Set([
   "math",
   "maction",
@@ -3663,32 +4195,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 +4423,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;
@@ -4206,6 +4812,7 @@ function playerStyleElement(): HTMLStyleElement {
     }
 
     .qti3-graphic-associate-surface,
+    .qti3-graphic-gap-match-surface,
     .qti3-graphic-order-surface {
       touch-action: manipulation;
     }
@@ -4233,10 +4840,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;