@longsightgroup/qti3-player 0.1.1 → 0.1.2

package/src/index.ts

@@ -0,0 +1,4396 @@
+import {
+  assertQtiAttemptStateV1,
+  createItemSession,
+  parseQtiXml,
+  visibleModalFeedback,
+  type QtiAssessmentItem,
+  type QtiAttemptStatus,
+  type QtiAttemptStateV1,
+  type QtiChoice,
+  type QtiContentNode,
+  type QtiDiagnostic,
+  type QtiDocument,
+  type QtiInteraction,
+  type QtiItemSession,
+  type QtiObjectAsset,
+  type QtiScoreResult,
+  type QtiValue,
+} from "@longsightgroup/qti3-core";
+
+export interface QtiPlayerSessionControl {
+  validateResponses?: boolean | undefined;
+  showFeedback?: boolean | undefined;
+}
+
+export interface QtiScoreAttemptOptions {
+  validateResponses?: boolean | undefined;
+}
+
+export type QtiPlayerFetchXml = (url: string) => Promise<string>;
+export type QtiPlayerResolveAsset = (url: string) => string;
+
+export interface QtiPlayerLoadOptions {
+  state?: QtiAttemptStateV1 | undefined;
+  status?: QtiAttemptStatus | undefined;
+  sessionControl?: QtiPlayerSessionControl | undefined;
+  fetchXml?: QtiPlayerFetchXml | undefined;
+  resolveAsset?: QtiPlayerResolveAsset | undefined;
+}
+
+export interface QtiReadyEventDetail {
+  item: QtiAssessmentItem;
+}
+
+export interface QtiStateChangeEventDetail {
+  state: QtiAttemptStateV1;
+}
+
+export interface QtiResponseChangeEventDetail {
+  responseIdentifier: string;
+  value: QtiValue;
+}
+
+export type QtiScoreEventDetail = QtiScoreResult;
+
+export interface QtiValidationEventDetail {
+  validationMessages: QtiDiagnostic[];
+  state: QtiAttemptStateV1;
+}
+
+export interface QtiSuspendEventDetail {
+  state: QtiAttemptStateV1;
+}
+
+export interface QtiEndAttemptEventDetail {
+  state: QtiAttemptStateV1;
+}
+
+export interface QtiAssessmentItemPlayerEventDetailMap {
+  "qti-ready": QtiReadyEventDetail;
+  "qti-statechange": QtiStateChangeEventDetail;
+  "qti-responsechange": QtiResponseChangeEventDetail;
+  "qti-score": QtiScoreEventDetail;
+  "qti-validation": QtiValidationEventDetail;
+  "qti-suspend": QtiSuspendEventDetail;
+  "qti-endattempt": QtiEndAttemptEventDetail;
+}
+
+export type QtiAssessmentItemPlayerEventName = keyof QtiAssessmentItemPlayerEventDetailMap;
+
+export type QtiAssessmentItemPlayerEvent<
+  T extends QtiAssessmentItemPlayerEventName = QtiAssessmentItemPlayerEventName,
+> = CustomEvent<QtiAssessmentItemPlayerEventDetailMap[T]>;
+
+export type QtiAssessmentItemPlayerCustomEventMap = {
+  [T in QtiAssessmentItemPlayerEventName]: CustomEvent<QtiAssessmentItemPlayerEventDetailMap[T]>;
+};
+
+const HTMLElementBase: typeof HTMLElement =
+  globalThis.HTMLElement ??
+  (class {
+    replaceChildren(): void {}
+    dispatchEvent(): boolean {
+      return true;
+    }
+  } as unknown as typeof HTMLElement);
+
+export class QtiAssessmentItemPlayer extends HTMLElementBase {
+  private documentModel?: QtiDocument;
+  private session?: QtiItemSession;
+  private resolveAsset: QtiPlayerResolveAsset | undefined;
+  private validationMessages: QtiDiagnostic[] = [];
+  private sessionControl: Required<QtiPlayerSessionControl> = {
+    validateResponses: true,
+    showFeedback: true,
+  };
+
+  async loadXml(xml: string, options: QtiPlayerLoadOptions = {}): Promise<void> {
+    this.sessionControl = {
+      validateResponses: options.sessionControl?.validateResponses ?? true,
+      showFeedback: options.sessionControl?.showFeedback ?? true,
+    };
+    this.resolveAsset = options.resolveAsset;
+    const result = parseQtiXml(xml);
+    this.dispatchEvent(
+      new CustomEvent("qti-diagnostics", { detail: { diagnostics: result.diagnostics } }),
+    );
+    if (!result.document) {
+      this.replaceChildren(errorView("Unable to parse QTI item."));
+      return;
+    }
+
+    this.documentModel = result.document;
+    this.session = createItemSession(result.document, options.state);
+    this.validationMessages = cloneDiagnostics(options.state?.validationMessages ?? []);
+    if (options.status) this.session.setStatus(options.status);
+    this.render();
+    this.renderValidationMessages();
+    this.updateAttemptAvailability();
+    this.dispatchPlayerEvent("qti-ready", { item: result.document.item });
+    this.emitStateChange();
+  }
+
+  async loadUrl(url: string, options: QtiPlayerLoadOptions = {}): Promise<void> {
+    const fetchXml = options.fetchXml ?? defaultFetchXml;
+    await this.loadXml(await fetchXml(url), options);
+  }
+
+  scoreAttempt(options: QtiScoreAttemptOptions = {}): QtiScoreResult | undefined {
+    const session = this.session;
+    if (!session) return undefined;
+    const shouldValidateResponses =
+      options.validateResponses ?? this.sessionControl.validateResponses;
+    const validationMessages = shouldValidateResponses ? this.validateResponses() : [];
+    if (validationMessages.length > 0) {
+      this.validationMessages = cloneDiagnostics(validationMessages);
+      this.renderValidationMessages();
+      const state = this.serialize();
+      if (!state) return undefined;
+      this.dispatchPlayerEvent("qti-validation", {
+        validationMessages: cloneDiagnostics(this.validationMessages),
+        state,
+      });
+      this.emitStateChange(state);
+      return undefined;
+    }
+    this.validationMessages = [];
+    this.renderValidationMessages();
+    const result = session.score();
+    this.dispatchPlayerEvent("qti-score", result);
+    this.updateDynamicBodyState();
+    this.updateAttemptAvailability();
+    if (this.sessionControl.showFeedback) this.renderFeedback(result.outcomes);
+    this.emitStateChange(result.state);
+    return result;
+  }
+
+  reset(): void {
+    if (!this.documentModel) return;
+    this.session = createItemSession(this.documentModel);
+    this.validationMessages = [];
+    this.render();
+    this.updateAttemptAvailability();
+    this.dispatchEvent(new CustomEvent("qti-reset", { detail: { state: this.serialize() } }));
+    this.emitStateChange();
+  }
+
+  restore(state: QtiAttemptStateV1): void {
+    if (!this.documentModel) {
+      throw new Error("Cannot restore QTI state before loading an item.");
+    }
+    assertQtiAttemptStateV1(state);
+    if (state.itemIdentifier !== this.documentModel.item.identifier) {
+      throw new Error(
+        `Cannot restore state for ${state.itemIdentifier} into ${this.documentModel.item.identifier}.`,
+      );
+    }
+    this.session = createItemSession(this.documentModel, state);
+    this.validationMessages = cloneDiagnostics(state.validationMessages);
+    this.render();
+    this.renderValidationMessages();
+    this.updateAttemptAvailability();
+    this.dispatchEvent(new CustomEvent("qti-restore", { detail: { state: this.serialize() } }));
+    this.emitStateChange();
+  }
+
+  suspend(): void {
+    if (!this.session) return;
+    this.session.setStatus("suspended");
+    const state = this.serialize();
+    if (!state) return;
+    this.dispatchPlayerEvent("qti-suspend", { state });
+    this.emitStateChange(state);
+  }
+
+  endAttempt(options: QtiScoreAttemptOptions = {}): void {
+    const result = this.scoreAttempt(options);
+    if (!result) return;
+    if (
+      !this.documentModel?.item.adaptive ||
+      result.state.outcomes.completionStatus === "completed"
+    ) {
+      this.session?.setStatus("completed");
+    }
+    this.updateAttemptAvailability();
+    const state = this.serialize();
+    if (!state) return;
+    this.dispatchPlayerEvent("qti-endattempt", { state });
+    this.emitStateChange(state);
+  }
+
+  serialize(): QtiAttemptStateV1 | undefined {
+    const state = this.session?.serialize();
+    if (state) state.validationMessages = cloneDiagnostics(this.validationMessages);
+    return state;
+  }
+
+  private emitStateChange(state = this.serialize()): void {
+    if (!state) return;
+    this.dispatchPlayerEvent("qti-statechange", { state });
+  }
+
+  private dispatchPlayerEvent<T extends QtiAssessmentItemPlayerEventName>(
+    type: T,
+    detail: QtiAssessmentItemPlayerEventDetailMap[T],
+  ): void {
+    this.dispatchEvent(new CustomEvent<QtiAssessmentItemPlayerEventDetailMap[T]>(type, { detail }));
+  }
+
+  private render(): void {
+    const documentModel = this.documentModel;
+    if (!documentModel) return;
+
+    this.applyDefaultStyles();
+    const root = document.createElement("article");
+    root.className = "qti3-player";
+    root.append(playerStyleElement());
+
+    if (documentModel.item.prompt && documentModel.item.body.length === 0) {
+      const prompt = document.createElement("p");
+      prompt.className = "qti3-item-prompt";
+      prompt.textContent = documentModel.item.prompt;
+      root.append(prompt);
+    }
+
+    if (documentModel.item.body.length > 0) {
+      const body = document.createElement("div");
+      body.className = "qti3-item-body";
+      body.append(...this.renderContentNodes(documentModel.item.body));
+      root.append(body);
+    } else {
+      for (const interaction of documentModel.item.interactions) {
+        root.append(this.renderInteraction(interaction));
+      }
+    }
+
+    const feedback = document.createElement("section");
+    feedback.className = "qti3-feedback";
+    feedback.role = "status";
+    feedback.setAttribute("aria-live", "polite");
+    feedback.hidden = true;
+    root.append(feedback);
+
+    this.resolveRenderedAssets(root);
+    this.replaceChildren(root);
+  }
+
+  private renderInteraction(interaction: QtiInteraction): HTMLElement {
+    const field = document.createElement("section");
+    field.className = `qti3-interaction qti3-${interaction.type}`;
+    field.classList.add(...qtiSharedClassNames(interaction.attributes.class));
+    field.dataset.interactionType = interaction.type;
+    if (interaction.responseIdentifier)
+      field.dataset.responseIdentifier = interaction.responseIdentifier;
+
+    const heading = document.createElement("h3");
+    heading.textContent = interactionLabel(interaction);
+    field.append(heading);
+    if (interaction.responseIdentifier) {
+      field.append(validationMessageElement(interaction.responseIdentifier));
+    }
+
+    const responseIdentifier = interaction.responseIdentifier;
+    const update = (value: QtiValue) => {
+      if (this.attemptIsCompleted()) return;
+      if (!responseIdentifier || !this.session) return;
+      this.session.respond(responseIdentifier, value);
+      this.clearValidationMessage(responseIdentifier);
+      this.dispatchPlayerEvent("qti-responsechange", { responseIdentifier, value });
+      this.emitStateChange();
+    };
+    const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
+
+    if (interaction.type === "graphicOrder") {
+      field.append(renderGraphicOrderResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (usesOrderedResponse(interaction)) {
+      field.append(renderOrderedResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "gapMatch" || interaction.type === "graphicGapMatch") {
+      field.append(renderGapMatchResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "graphicAssociate") {
+      field.append(renderGraphicAssociateResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "match") {
+      field.append(renderMatchResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (usesPairResponse(interaction)) {
+      field.append(renderPairResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "hotspot" && interaction.object) {
+      field.append(renderHotspotResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "hottext") {
+      field.append(renderHottextResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (usesChoiceSet(interaction)) {
+      field.append(renderChoice(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "inlineChoice") {
+      field.append(renderSelect(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "extendedText") {
+      field.append(renderTextResponse(interaction, update, "extended", currentValue));
+      return field;
+    }
+
+    if (interaction.type === "selectPoint") {
+      field.append(renderSelectPointResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "positionObject") {
+      field.append(renderPositionObjectResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "drawing") {
+      field.append(renderDrawingResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "portableCustom") {
+      field.append(renderPortableCustomResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "textEntry") {
+      field.append(renderTextResponse(interaction, update, "entry", currentValue));
+      return field;
+    }
+
+    if (interaction.type === "slider") {
+      field.append(renderSliderResponse(interaction, update, currentValue));
+      return field;
+    }
+
+    if (interaction.type === "upload") {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.setAttribute("aria-label", heading.textContent ?? "Upload response");
+      input.addEventListener("change", () => update(input.files?.[0]?.name ?? ""));
+      field.append(input);
+      return field;
+    }
+
+    if (interaction.type === "endAttempt") {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = interaction.attributes.title ?? "End attempt";
+      button.addEventListener("click", () => {
+        if (responseIdentifier) update(true);
+        this.endAttempt();
+      });
+      field.append(button);
+      return field;
+    }
+
+    if (interaction.type === "media") {
+      field.append(
+        renderObjectAsset(interaction, {
+          currentValue,
+          update,
+          isCompleted: () => this.attemptIsCompleted(),
+        }),
+      );
+      return field;
+    }
+
+    field.append(renderSelect(interaction, update, currentValue));
+    return field;
+  }
+
+  private renderEmbeddedInteraction(interaction: QtiInteraction): HTMLElement {
+    if (interaction.type !== "inlineChoice" && interaction.type !== "textEntry") {
+      return this.renderInteraction(interaction);
+    }
+
+    const wrapper = document.createElement("span");
+    wrapper.className = `qti3-interaction qti3-${interaction.type} qti3-embedded-interaction`;
+    wrapper.dataset.interactionType = interaction.type;
+    if (interaction.responseIdentifier)
+      wrapper.dataset.responseIdentifier = interaction.responseIdentifier;
+
+    const responseIdentifier = interaction.responseIdentifier;
+    const update = (value: QtiValue) => {
+      if (this.attemptIsCompleted()) return;
+      if (!responseIdentifier || !this.session) return;
+      this.session.respond(responseIdentifier, value);
+      this.clearValidationMessage(responseIdentifier);
+      this.dispatchPlayerEvent("qti-responsechange", { responseIdentifier, value });
+      this.emitStateChange();
+    };
+    const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
+
+    if (interaction.responseIdentifier) {
+      wrapper.append(inlineValidationMessageElement(interaction.responseIdentifier));
+    }
+    wrapper.append(
+      interaction.type === "inlineChoice"
+        ? renderSelect(interaction, update, currentValue)
+        : renderInlineTextEntry(interaction, update, currentValue),
+    );
+    return wrapper;
+  }
+
+  private renderContentNodes(nodes: QtiContentNode[]): Node[] {
+    return nodes.flatMap((node) => this.renderContentNode(node));
+  }
+
+  private renderContentNode(node: QtiContentNode): Node[] {
+    if (node.kind === "text") return [document.createTextNode(node.text)];
+    if (node.kind === "interaction") {
+      const interaction = this.documentModel?.item.interactions[node.interactionIndex];
+      return interaction ? [this.renderEmbeddedInteraction(interaction)] : [];
+    }
+    if (node.kind === "printedVariable")
+      return [this.renderPrintedVariable(node.identifier, node.format)];
+    if (node.kind === "feedback") return this.renderFeedbackContent(node);
+    if (node.qtiName === "qti-template-block" || node.qtiName === "qti-template-inline") {
+      return [this.renderTemplateContent(node)];
+    }
+    if (node.qtiName === "qti-position-object-stage") {
+      return this.renderContentNodes(
+        node.children.filter(
+          (child) =>
+            !("qtiName" in child) || (child.qtiName !== "object" && child.qtiName !== "img"),
+        ),
+      );
+    }
+    if (node.qtiName === "qti-prompt") {
+      const prompt = document.createElement("p");
+      prompt.className = "qti3-item-prompt";
+      prompt.append(...this.renderContentNodes(node.children));
+      return [prompt];
+    }
+
+    const elementName = contentElementName(node.qtiName);
+    if (!elementName) return this.renderContentNodes(node.children);
+    const element = createContentElement(elementName);
+    copySafeAttributes(element, node.attributes);
+    const mathTemplateValue = this.mathTemplateValue(node);
+    if (mathTemplateValue === undefined) {
+      element.append(...this.renderContentNodes(node.children));
+    } else {
+      element.textContent = mathTemplateValue;
+    }
+    return [element];
+  }
+
+  private renderTemplateContent(node: Extract<QtiContentNode, { kind: "element" }>): HTMLElement {
+    const element = document.createElement(node.qtiName === "qti-template-block" ? "div" : "span");
+    copySafeAttributes(element, node.attributes);
+    element.classList.add(
+      node.qtiName === "qti-template-block" ? "qti3-template-block" : "qti3-template-inline",
+    );
+    element.dataset.templateIdentifier = node.attributes["template-identifier"] ?? "";
+    element.dataset.templateValueIdentifier = node.attributes.identifier ?? "";
+    element.dataset.showHide = node.attributes["show-hide"] === "hide" ? "hide" : "show";
+    element.hidden = !this.isTemplateContentVisible(element);
+    element.append(...this.renderContentNodes(node.children));
+    return element;
+  }
+
+  private renderPrintedVariable(identifier: string, format: string | undefined): HTMLElement {
+    const output = document.createElement("output");
+    output.className = "qti3-printed-variable";
+    output.dataset.identifier = identifier;
+    if (format) output.dataset.format = format;
+    output.value = formatPrintedValue(this.currentVariableValue(identifier), format);
+    output.textContent = output.value;
+    return output;
+  }
+
+  private renderFeedbackContent(node: Extract<QtiContentNode, { kind: "feedback" }>): Node[] {
+    const element = document.createElement(node.feedbackType === "block" ? "section" : "span");
+    element.className = `qti3-feedback-${node.feedbackType}`;
+    element.dataset.feedbackIdentifier = node.identifier;
+    element.dataset.outcomeIdentifier = node.outcomeIdentifier;
+    element.dataset.showHide = node.showHide;
+    element.hidden = !this.isFeedbackVisible(node);
+    element.append(...this.renderContentNodes(node.children));
+    return [element];
+  }
+
+  private updateDynamicBodyState(): void {
+    for (const output of this.querySelectorAll<HTMLOutputElement>(".qti3-printed-variable")) {
+      const identifier = output.dataset.identifier;
+      if (!identifier) continue;
+      output.value = formatPrintedValue(
+        this.currentVariableValue(identifier),
+        output.dataset.format,
+      );
+      output.textContent = output.value;
+    }
+
+    for (const element of this.querySelectorAll<HTMLElement>(
+      ".qti3-feedback-block, .qti3-feedback-inline",
+    )) {
+      const identifier = element.dataset.feedbackIdentifier;
+      const outcomeIdentifier = element.dataset.outcomeIdentifier;
+      if (!identifier || !outcomeIdentifier) continue;
+      const value = this.currentVariableValue(outcomeIdentifier);
+      const hasIdentifier = Array.isArray(value)
+        ? value.map(String).includes(identifier)
+        : String(value ?? "") === identifier;
+      element.hidden = element.dataset.showHide === "hide" ? hasIdentifier : !hasIdentifier;
+    }
+
+    for (const element of this.querySelectorAll<HTMLElement>(
+      ".qti3-template-block, .qti3-template-inline",
+    )) {
+      element.hidden = !this.isTemplateContentVisible(element);
+    }
+  }
+
+  private updateAttemptAvailability(): void {
+    const completed = this.attemptIsCompleted();
+    this.dataset.status = this.session?.serialize().status ?? "unloaded";
+    const article = this.querySelector<HTMLElement>(".qti3-player");
+    if (article) article.dataset.status = this.dataset.status;
+
+    for (const control of this.querySelectorAll<
+      HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+    >(
+      ".qti3-interaction button, .qti3-interaction input, .qti3-interaction select, .qti3-interaction textarea",
+    )) {
+      control.disabled = completed;
+    }
+
+    for (const element of this.querySelectorAll<HTMLElement>(
+      ".qti3-interaction [tabindex]:not(button):not(input):not(select):not(textarea)",
+    )) {
+      if (completed) {
+        element.dataset.previousTabIndex = element.getAttribute("tabindex") ?? "0";
+        element.tabIndex = -1;
+        element.setAttribute("aria-disabled", "true");
+      } else {
+        const previous = element.dataset.previousTabIndex;
+        if (previous !== undefined) {
+          element.tabIndex = Number(previous);
+          delete element.dataset.previousTabIndex;
+        }
+        element.removeAttribute("aria-disabled");
+      }
+    }
+  }
+
+  private attemptIsCompleted(): boolean {
+    return this.session?.serialize().status === "completed";
+  }
+
+  private isFeedbackVisible(node: Extract<QtiContentNode, { kind: "feedback" }>): boolean {
+    const value = this.currentVariableValue(node.outcomeIdentifier);
+    const hasIdentifier = Array.isArray(value)
+      ? value.map(String).includes(node.identifier)
+      : String(value ?? "") === node.identifier;
+    return node.showHide === "show" ? hasIdentifier : !hasIdentifier;
+  }
+
+  private isTemplateContentVisible(element: HTMLElement): boolean {
+    const templateIdentifier = element.dataset.templateIdentifier;
+    const identifier = element.dataset.templateValueIdentifier;
+    if (!templateIdentifier || !identifier) return true;
+    const value = this.currentTemplateValue(templateIdentifier);
+    const hasIdentifier = Array.isArray(value)
+      ? value.map(String).includes(identifier)
+      : String(value ?? "") === identifier;
+    return element.dataset.showHide === "hide" ? !hasIdentifier : hasIdentifier;
+  }
+
+  private currentVariableValue(identifier: string): QtiValue {
+    const state = this.session?.serialize();
+    return (
+      state?.outcomes[identifier] ??
+      state?.templateValues?.[identifier] ??
+      state?.responses[identifier] ??
+      null
+    );
+  }
+
+  private currentTemplateValue(identifier: string): QtiValue {
+    return this.session?.serialize().templateValues?.[identifier] ?? null;
+  }
+
+  private mathTemplateValue(
+    node: Extract<QtiContentNode, { kind: "element" }>,
+  ): string | undefined {
+    if (node.qtiName !== "mi" && node.qtiName !== "mo") return undefined;
+    const identifier = contentNodeText(node).trim();
+    if (!identifier) return undefined;
+    const declaration = this.documentModel?.item.templateDeclarations.find(
+      (template) =>
+        template.identifier === identifier && template.attributes["math-variable"] === "true",
+    );
+    if (!declaration) return undefined;
+    const value = this.currentTemplateValue(identifier);
+    return value === null ? "" : String(value);
+  }
+
+  private currentResponseValue(identifier: string): QtiValue {
+    return this.session?.serialize().responses[identifier] ?? null;
+  }
+
+  private applyDefaultStyles(): void {
+    this.style.color = "CanvasText";
+    this.style.backgroundColor = "Canvas";
+    this.style.colorScheme = "light dark";
+  }
+
+  private resolveRenderedAssets(root: HTMLElement): void {
+    if (!this.resolveAsset) return;
+    for (const element of root.querySelectorAll("[src], [href], [data]")) {
+      for (const attribute of ["src", "href", "data"]) {
+        const value = element.getAttribute(attribute);
+        if (!value || !isResolvableAssetUrl(value)) continue;
+        element.setAttribute(attribute, this.resolveAsset(value));
+      }
+    }
+  }
+
+  private validateResponses(): QtiDiagnostic[] {
+    const state = this.session?.serialize();
+    if (!state || !this.documentModel) return [];
+    const interactionsByResponse = new Map(
+      this.documentModel.item.interactions
+        .filter((interaction) => interaction.responseIdentifier)
+        .map((interaction) => [interaction.responseIdentifier!, interaction]),
+    );
+    const diagnostics: QtiDiagnostic[] = [];
+    for (const declaration of this.documentModel.item.responseDeclarations) {
+      const interaction = interactionsByResponse.get(declaration.identifier);
+      if (declaration.correctResponse === null && interaction?.type !== "media") continue;
+      const minimum = minimumRequiredResponses(interaction);
+      const count =
+        interaction?.type === "media"
+          ? mediaPlayCount(state.responses[declaration.identifier] ?? null)
+          : responseCount(state.responses[declaration.identifier] ?? null);
+      const maximum = maximumAllowedResponses(interaction);
+      if (count < minimum) {
+        diagnostics.push({
+          code: "response.required",
+          severity: "error",
+          message:
+            interaction?.attributes["data-min-selections-message"] ??
+            (interaction?.type === "media"
+              ? `${declaration.identifier} requires at least ${minimum} play${minimum === 1 ? "" : "s"}.`
+              : minimum === 1
+                ? `${declaration.identifier} requires a response.`
+                : `${declaration.identifier} requires at least ${minimum} responses.`),
+          path: declaration.identifier,
+        });
+      }
+      if (maximum !== undefined && count > maximum) {
+        diagnostics.push({
+          code: "response.maximum",
+          severity: "error",
+          message:
+            interaction?.attributes["data-max-selections-message"] ??
+            (interaction?.type === "media"
+              ? `${declaration.identifier} allows at most ${maximum} play${maximum === 1 ? "" : "s"}.`
+              : `${declaration.identifier} allows at most ${maximum} response${maximum === 1 ? "" : "s"}.`),
+          path: declaration.identifier,
+        });
+      }
+      if (interaction) {
+        diagnostics.push(
+          ...matchMaxDiagnostics(
+            declaration.identifier,
+            interaction,
+            state.responses[declaration.identifier] ?? null,
+          ),
+        );
+      }
+    }
+    return diagnostics;
+  }
+
+  private renderValidationMessages(): void {
+    const messagesByIdentifier = new Map(
+      this.validationMessages
+        .filter((message) => message.path)
+        .map((message) => [message.path!, message]),
+    );
+    for (const section of this.querySelectorAll<HTMLElement>("[data-response-identifier]")) {
+      const responseIdentifier = section.dataset.responseIdentifier;
+      if (!responseIdentifier) continue;
+      const message = messagesByIdentifier.get(responseIdentifier);
+      const messageElement = section.querySelector<HTMLElement>(
+        `[data-validation-for="${responseIdentifier}"]`,
+      );
+      const controls = section.querySelectorAll<HTMLElement>("input, select, textarea, button");
+      if (message && messageElement) {
+        messageElement.textContent = message.message;
+        messageElement.hidden = false;
+        for (const control of controls) {
+          control.setAttribute("aria-invalid", "true");
+          control.setAttribute("aria-describedby", messageElement.id);
+        }
+      } else if (messageElement) {
+        messageElement.textContent = "";
+        messageElement.hidden = true;
+        for (const control of controls) {
+          control.removeAttribute("aria-invalid");
+          control.removeAttribute("aria-describedby");
+        }
+      }
+    }
+  }
+
+  private clearValidationMessage(responseIdentifier: string): void {
+    const before = this.validationMessages.length;
+    this.validationMessages = this.validationMessages.filter(
+      (message) => message.path !== responseIdentifier,
+    );
+    if (this.validationMessages.length !== before) this.renderValidationMessages();
+  }
+
+  private renderFeedback(outcomes: Record<string, QtiValue>): void {
+    const documentModel = this.documentModel;
+    const feedback = this.querySelector<HTMLElement>(".qti3-feedback");
+    if (!documentModel || !feedback) return;
+
+    const visibleFeedback = visibleModalFeedback(documentModel.item, outcomes);
+    feedback.replaceChildren(
+      ...visibleFeedback.map((item) => {
+        const element = document.createElement("p");
+        element.dataset.feedbackIdentifier = item.identifier;
+        element.textContent = item.text;
+        return element;
+      }),
+    );
+    feedback.hidden = visibleFeedback.length === 0;
+  }
+}
+
+export function defineQtiAssessmentItemPlayer(): void {
+  if (globalThis.customElements && !customElements.get("qti-assessment-item-player")) {
+    customElements.define("qti-assessment-item-player", QtiAssessmentItemPlayer);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "qti-assessment-item-player": QtiAssessmentItemPlayer;
+  }
+}
+
+function renderChoice(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = responseGroup("qti3-choice-group");
+
+  const multiple =
+    interaction.responseCardinality === "multiple" || interaction.responseCardinality === "ordered";
+  const selected = new Set(valueToStrings(currentValue));
+  const list = document.createElement("div");
+  list.className = "qti3-choice-list";
+  list.role = "group";
+  list.setAttribute("aria-label", `${readableType(interaction.type)} options`);
+  const syncSelected = () => {
+    for (const label of list.querySelectorAll<HTMLElement>(".qti3-choice-option")) {
+      const identifier = label.dataset.choiceIdentifier ?? "";
+      label.dataset.selected = selected.has(identifier) ? "true" : "false";
+    }
+  };
+  for (const [index, choice] of choicesOrFallback(interaction).entries()) {
+    const label = document.createElement("label");
+    label.className = "qti3-choice-option";
+    label.dataset.choiceIdentifier = choice.identifier;
+    const input = document.createElement("input");
+    input.type = multiple ? "checkbox" : "radio";
+    input.name = interaction.responseIdentifier ?? interaction.type;
+    input.value = choice.identifier;
+    input.checked = selected.has(choice.identifier);
+    input.addEventListener("change", () => {
+      if (multiple) {
+        if (input.checked) selected.add(choice.identifier);
+        else selected.delete(choice.identifier);
+        update([...selected]);
+      } else {
+        selected.clear();
+        selected.add(choice.identifier);
+        syncSelected();
+        update(input.value);
+      }
+      syncSelected();
+    });
+    const visibleLabel = choicePresentationLabel(interaction, index);
+    const optionParts: HTMLElement[] = [input];
+    if (visibleLabel) {
+      const labelText = document.createElement("span");
+      labelText.className = "qti3-choice-label";
+      labelText.textContent = visibleLabel;
+      optionParts.push(labelText);
+    }
+    const text = document.createElement("span");
+    text.className = "qti3-choice-text";
+    text.textContent = choice.text;
+    optionParts.push(text);
+    label.append(...optionParts);
+    list.append(label);
+  }
+  syncSelected();
+  group.append(list);
+  return group;
+}
+
+function responseGroup(className?: string): HTMLElement {
+  const group = document.createElement("div");
+  group.className = ["qti3-response-group", className].filter(Boolean).join(" ");
+  return group;
+}
+
+type MovementDirection = "up" | "down" | "left" | "right";
+
+const movementGlyphs: Record<MovementDirection, string> = {
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192",
+};
+
+function movementButton(
+  direction: MovementDirection,
+  accessibleName: string,
+  onClick: () => void,
+): HTMLButtonElement {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "qti3-icon-button";
+  button.dataset.moveDirection = direction;
+  button.textContent = movementGlyphs[direction];
+  button.setAttribute("aria-label", accessibleName);
+  button.addEventListener("click", onClick);
+  return button;
+}
+
+function movementLabel(target: string, direction: MovementDirection): string {
+  return `Move ${target} ${direction}`;
+}
+
+function renderHottextResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = document.createElement("div");
+  group.className = "qti3-hottext-group";
+  group.role = "group";
+  group.setAttribute("aria-label", "Hottext options");
+
+  const selected = new Set(valueToStrings(currentValue));
+  const multiple =
+    interaction.responseCardinality === "multiple" || interaction.responseCardinality === "ordered";
+  const passage = document.createElement("p");
+  passage.className = "qti3-hottext-passage";
+
+  const syncSelected = () => {
+    for (const button of passage.querySelectorAll<HTMLButtonElement>(".qti3-hottext-token")) {
+      const identifier = button.dataset.choiceIdentifier ?? "";
+      const isSelected = selected.has(identifier);
+      button.dataset.selected = isSelected ? "true" : "false";
+      button.setAttribute("aria-pressed", String(isSelected));
+    }
+  };
+
+  const segments =
+    interaction.hottextSegments && interaction.hottextSegments.length > 0
+      ? interaction.hottextSegments
+      : choicesOrFallback(interaction).map((choice) => ({
+          kind: "hottext" as const,
+          identifier: choice.identifier,
+          text: choice.text,
+          attributes: choice.attributes,
+          source: choice.source,
+        }));
+
+  const content: Array<Node | string> = [];
+  for (const [segmentIndex, segment] of segments.entries()) {
+    if (segment.kind === "text") {
+      content.push(document.createTextNode(normalizeInlineSegmentText(segment.text)));
+      continue;
+    }
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "qti3-hottext-token";
+    button.dataset.choiceIdentifier = segment.identifier;
+    button.textContent = segment.text;
+    button.addEventListener("click", () => {
+      if (multiple) {
+        if (selected.has(segment.identifier)) selected.delete(segment.identifier);
+        else selected.add(segment.identifier);
+        update([...selected]);
+      } else {
+        selected.clear();
+        selected.add(segment.identifier);
+        update(segment.identifier);
+      }
+      syncSelected();
+    });
+    appendInlineControl(content, button, segments[segmentIndex + 1]);
+  }
+
+  passage.append(...content);
+  syncSelected();
+  group.append(passage);
+  return group;
+}
+
+function choicePresentationLabel(interaction: QtiInteraction, index: number): string {
+  const classNames = new Set((interaction.attributes.class ?? "").split(/\s+/).filter(Boolean));
+  if (classNames.has("qti-labels-none")) return "";
+
+  const labels = classNames.has("qti-labels-decimal")
+    ? Array.from({ length: 26 }, (_, item) => `${item + 1}`)
+    : classNames.has("qti-labels-lower-alpha")
+      ? "abcdefghijklmnopqrstuvwxyz".split("")
+      : "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+  const suffix = classNames.has("qti-labels-suffix-none")
+    ? ""
+    : classNames.has("qti-labels-suffix-parenthesis")
+      ? ")"
+      : ".";
+  return `${labels[index] ?? `${index + 1}`}${suffix}`;
+}
+
+function usesChoiceSet(interaction: QtiInteraction): boolean {
+  if (interaction.type === "choice" || interaction.type === "hotspot") {
+    return true;
+  }
+  return (
+    interaction.responseCardinality === "multiple" && interaction.responseBaseType === "identifier"
+  );
+}
+
+function usesOrderedResponse(interaction: QtiInteraction): boolean {
+  return (
+    interaction.responseCardinality === "ordered" ||
+    interaction.type === "order" ||
+    interaction.type === "graphicOrder"
+  );
+}
+
+function usesPairResponse(interaction: QtiInteraction): boolean {
+  return (
+    interaction.responseBaseType === "pair" ||
+    interaction.responseBaseType === "directedPair" ||
+    interaction.type === "associate" ||
+    interaction.type === "graphicAssociate" ||
+    interaction.type === "match" ||
+    interaction.type === "gapMatch" ||
+    interaction.type === "graphicGapMatch"
+  );
+}
+
+function renderOrderedResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = responseGroup();
+  appendGraphicContext(group, interaction);
+
+  const choices = choicesOrFallback(interaction).filter((choice) => choice.role !== "gap");
+  const ordered = orderChoicesFromValue(choices, currentValue);
+  const list = document.createElement("ol");
+  list.className = "qti3-reorder-list";
+  list.setAttribute("aria-label", `${readableType(interaction.type)} current order`);
+  let draggedIdentifier: string | undefined;
+  let pointerDraggedIdentifier: string | undefined;
+
+  const commit = () => update(ordered.map((choice) => choice.identifier));
+  const moveChoice = (from: number, to: number) => {
+    if (from === to || from < 0 || from >= ordered.length || to < 0 || to >= ordered.length) return;
+    const [choice] = ordered.splice(from, 1);
+    if (!choice) return;
+    ordered.splice(to, 0, choice);
+    renderList();
+    commit();
+    list
+      .querySelector<HTMLButtonElement>(`[data-choice-identifier="${choice.identifier}"]`)
+      ?.focus();
+  };
+  const renderList = () => {
+    list.replaceChildren(
+      ...ordered.map((choice, index) => {
+        const item = document.createElement("li");
+        item.className = "qti3-reorder-item";
+        item.draggable = true;
+        item.dataset.choiceIdentifier = choice.identifier;
+        item.addEventListener("pointerdown", (event) => {
+          if (event.button !== 0 || (event.target as Element).closest("button")) return;
+          pointerDraggedIdentifier = choice.identifier;
+          try {
+            item.setPointerCapture(event.pointerId);
+          } catch {
+            // Synthetic pointer events and some browser drag paths do not create a capturable pointer.
+          }
+        });
+        item.addEventListener("pointerup", (event) => {
+          if (!pointerDraggedIdentifier) return;
+          const target = document
+            .elementFromPoint(event.clientX, event.clientY)
+            ?.closest<HTMLElement>(".qti3-reorder-item");
+          const targetIdentifier = target?.dataset.choiceIdentifier;
+          pointerDraggedIdentifier = undefined;
+          if (!targetIdentifier) return;
+          const from = ordered.findIndex((entry) => entry.identifier === choice.identifier);
+          const to = ordered.findIndex((entry) => entry.identifier === targetIdentifier);
+          moveChoice(from, to);
+        });
+        item.addEventListener("pointercancel", () => {
+          pointerDraggedIdentifier = undefined;
+        });
+        item.addEventListener("dragstart", (event) => {
+          draggedIdentifier = choice.identifier;
+          event.dataTransfer?.setData("text/plain", choice.identifier);
+          event.dataTransfer?.setDragImage(item, 12, 12);
+        });
+        item.addEventListener("dragover", (event) => {
+          event.preventDefault();
+          item.classList.add("qti3-drop-target");
+        });
+        item.addEventListener("dragleave", () => item.classList.remove("qti3-drop-target"));
+        item.addEventListener("drop", (event) => {
+          event.preventDefault();
+          item.classList.remove("qti3-drop-target");
+          const dragged = event.dataTransfer?.getData("text/plain") || draggedIdentifier;
+          const from = ordered.findIndex((entry) => entry.identifier === dragged);
+          moveChoice(from, index);
+        });
+
+        const handle = document.createElement("button");
+        handle.type = "button";
+        handle.className = "qti3-token qti3-reorder-handle";
+        handle.dataset.choiceIdentifier = choice.identifier;
+        handle.setAttribute(
+          "aria-label",
+          `${choice.text}, position ${index + 1} of ${ordered.length}`,
+        );
+        handle.textContent = choice.text;
+        handle.addEventListener("keydown", (event) => {
+          if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            moveChoice(index, index - 1);
+          } else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+            event.preventDefault();
+            moveChoice(index, index + 1);
+          }
+        });
+
+        const up = movementButton("up", movementLabel(choice.text, "up"), () =>
+          moveChoice(index, index - 1),
+        );
+        up.disabled = index === 0;
+
+        const down = movementButton("down", movementLabel(choice.text, "down"), () =>
+          moveChoice(index, index + 1),
+        );
+        down.disabled = index === ordered.length - 1;
+
+        item.append(handle, up, down);
+        return item;
+      }),
+    );
+  };
+  renderList();
+  group.append(list);
+  return group;
+}
+
+function renderPairResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = responseGroup();
+  appendGraphicContext(group, interaction);
+
+  const sources = sourceChoices(interaction);
+  const targets = targetChoices(interaction);
+  const selectedPairs: string[] = valueToStrings(currentValue);
+  let selectedSource: QtiChoice | undefined;
+  let selectedTarget: QtiChoice | undefined;
+  const labels = pairRegionLabels(interaction);
+
+  const sourceRegion = tokenRegion(`${readableType(interaction.type)} sources`, labels.source);
+  const targetRegion = tokenRegion(`${readableType(interaction.type)} targets`, labels.target);
+  const selector = document.createElement("div");
+  selector.className = "qti3-pair-selector";
+  const pairList = document.createElement("ul");
+  pairList.className = "qti3-pair-list";
+  pairList.setAttribute("aria-label", `${readableType(interaction.type)} selected pairs`);
+  let draggedSource: string | undefined;
+
+  const commit = () => {
+    if (interaction.responseCardinality === "single") update(selectedPairs[0] ?? null);
+    else update([...selectedPairs]);
+  };
+  const syncPressed = () => {
+    for (const button of sourceRegion.querySelectorAll<HTMLButtonElement>("button")) {
+      button.setAttribute(
+        "aria-pressed",
+        button.dataset.choiceIdentifier === selectedSource?.identifier ? "true" : "false",
+      );
+    }
+    for (const button of targetRegion.querySelectorAll<HTMLButtonElement>("button")) {
+      button.setAttribute(
+        "aria-pressed",
+        button.dataset.choiceIdentifier === selectedTarget?.identifier ? "true" : "false",
+      );
+    }
+  };
+  const addSelectedPair = () => {
+    if (!selectedSource || !selectedTarget) return;
+    const pair = `${selectedSource.identifier} ${selectedTarget.identifier}`;
+    if (!selectedPairs.includes(pair)) selectedPairs.push(pair);
+    selectedSource = undefined;
+    selectedTarget = undefined;
+    syncPressed();
+    renderPairs();
+    commit();
+  };
+  const addPair = (sourceIdentifier: string | undefined, targetIdentifier: string): void => {
+    const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+    const target = targets.find((choice) => choice.identifier === targetIdentifier);
+    if (!source || !target) return;
+    selectedSource = source;
+    selectedTarget = target;
+    addSelectedPair();
+  };
+  const renderPairs = () => {
+    pairList.replaceChildren(
+      ...selectedPairs.map((pair) => {
+        const [source, target] = pair.split(" ");
+        const item = document.createElement("li");
+        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}`);
+        remove.addEventListener("click", () => {
+          const index = selectedPairs.indexOf(pair);
+          if (index >= 0) selectedPairs.splice(index, 1);
+          renderPairs();
+          commit();
+        });
+        item.append(text, remove);
+        return item;
+      }),
+    );
+  };
+
+  for (const choice of sources) {
+    const button = tokenButton(choice);
+    button.draggable = true;
+    button.addEventListener("dragstart", (event) => {
+      draggedSource = choice.identifier;
+      event.dataTransfer?.setData("text/plain", choice.identifier);
+      event.dataTransfer?.setDragImage(button, 8, 8);
+    });
+    button.addEventListener("dragend", () => {
+      draggedSource = undefined;
+      syncPressed();
+    });
+    button.addEventListener("click", () => {
+      selectedSource = choice;
+      syncPressed();
+      addSelectedPair();
+    });
+    sourceRegion.append(button);
+  }
+  for (const choice of targets) {
+    const button = tokenButton(choice);
+    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");
+      addPair(event.dataTransfer?.getData("text/plain") || draggedSource, choice.identifier);
+    });
+    button.addEventListener("click", () => {
+      selectedTarget = choice;
+      syncPressed();
+      addSelectedPair();
+    });
+    targetRegion.append(button);
+  }
+
+  selector.append(sourceRegion, targetRegion);
+  renderPairs();
+  group.append(selector, pairList);
+  return group;
+}
+
+function renderMatchResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = responseGroup();
+
+  const sources = sourceChoices(interaction);
+  const targets = targetChoices(interaction);
+  const selectedPairs: string[] = valueToStrings(currentValue);
+  let selectedSource: QtiChoice | undefined;
+  let selectedTarget: QtiChoice | undefined;
+  let draggedSource: string | undefined;
+
+  const selector = document.createElement("div");
+  selector.className = "qti3-match-selector";
+  const sourceRegion = tokenRegion("Match sources");
+  sourceRegion.classList.add("qti3-match-source-bank");
+  const targetRegion = tokenRegion("Match targets");
+  targetRegion.classList.add("qti3-match-target-bank");
+  const pairList = document.createElement("ul");
+  pairList.className = "qti3-pair-list";
+  pairList.setAttribute("aria-label", "Match selected pairs");
+
+  const commit = () => {
+    if (interaction.responseCardinality === "single") update(selectedPairs[0] ?? null);
+    else update([...selectedPairs]);
+  };
+  const removePair = (pair: string) => {
+    const index = selectedPairs.indexOf(pair);
+    if (index >= 0) selectedPairs.splice(index, 1);
+  };
+  const syncPressed = () => {
+    for (const button of sourceRegion.querySelectorAll<HTMLButtonElement>("button")) {
+      const identifier = button.dataset.choiceIdentifier ?? "";
+      button.setAttribute(
+        "aria-pressed",
+        identifier === selectedSource?.identifier ||
+          selectedPairs.some((pair) => pair.startsWith(`${identifier} `))
+          ? "true"
+          : "false",
+      );
+    }
+    for (const button of targetRegion.querySelectorAll<HTMLButtonElement>("button")) {
+      const identifier = button.dataset.choiceIdentifier ?? "";
+      button.setAttribute(
+        "aria-pressed",
+        identifier === selectedTarget?.identifier ||
+          selectedPairs.some((pair) => pair.endsWith(` ${identifier}`))
+          ? "true"
+          : "false",
+      );
+    }
+  };
+  const renderPairs = () => {
+    pairList.replaceChildren(
+      ...selectedPairs.map((pair) => {
+        const [source, target] = pair.split(" ");
+        const label = `${choiceText(sources, source)} to ${choiceText(targets, target)}`;
+        const item = document.createElement("li");
+        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}`);
+        remove.addEventListener("click", () => {
+          removePair(pair);
+          syncPressed();
+          renderPairs();
+          commit();
+        });
+        item.append(text, remove);
+        return item;
+      }),
+    );
+  };
+  const clearSelection = () => {
+    selectedSource = undefined;
+    selectedTarget = undefined;
+  };
+  const removePairsForSource = (source: QtiChoice) => {
+    for (const existing of selectedPairs.filter((pair) =>
+      pair.startsWith(`${source.identifier} `),
+    )) {
+      removePair(existing);
+    }
+  };
+  const removePairsForTarget = (target: QtiChoice) => {
+    for (const existing of selectedPairs.filter((pair) => pair.endsWith(` ${target.identifier}`))) {
+      removePair(existing);
+    }
+  };
+  const togglePair = (source: QtiChoice, target: QtiChoice) => {
+    const pair = `${source.identifier} ${target.identifier}`;
+    if (selectedPairs.includes(pair)) {
+      removePair(pair);
+    } else {
+      if (interaction.responseCardinality === "single") selectedPairs.splice(0);
+      if (parseUnlimitedMaximum(source.attributes["match-max"]) === 1) {
+        removePairsForSource(source);
+      }
+      if (parseUnlimitedMaximum(target.attributes["match-max"]) === 1) {
+        removePairsForTarget(target);
+      }
+      selectedPairs.push(pair);
+    }
+    clearSelection();
+    syncPressed();
+    renderPairs();
+    commit();
+  };
+  const addSelectedPair = () => {
+    if (!selectedSource || !selectedTarget) return;
+    togglePair(selectedSource, selectedTarget);
+  };
+  const addPair = (sourceIdentifier: string | undefined, targetIdentifier: string): void => {
+    const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+    const target = targets.find((choice) => choice.identifier === targetIdentifier);
+    if (!source || !target) return;
+    togglePair(source, target);
+  };
+
+  for (const source of sources) {
+    const button = tokenButton(source);
+    button.classList.add("qti3-match-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;
+      syncPressed();
+    });
+    button.addEventListener("click", () => {
+      selectedSource = source;
+      syncPressed();
+      addSelectedPair();
+    });
+    button.addEventListener("keydown", (event) => {
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      event.preventDefault();
+      removePairsForSource(source);
+      clearSelection();
+      syncPressed();
+      renderPairs();
+      commit();
+    });
+    sourceRegion.append(button);
+  }
+
+  for (const target of targets) {
+    const button = tokenButton(target);
+    button.classList.add("qti3-match-target");
+    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");
+      addPair(event.dataTransfer?.getData("text/plain") || draggedSource, target.identifier);
+    });
+    button.addEventListener("click", () => {
+      selectedTarget = target;
+      syncPressed();
+      addSelectedPair();
+    });
+    button.addEventListener("keydown", (event) => {
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      event.preventDefault();
+      removePairsForTarget(target);
+      clearSelection();
+      syncPressed();
+      renderPairs();
+      commit();
+    });
+    targetRegion.append(button);
+  }
+
+  selector.append(sourceRegion, targetRegion);
+  syncPressed();
+  renderPairs();
+  group.append(selector, pairList);
+  return group;
+}
+
+function pairRegionLabels(interaction: QtiInteraction): { source: string; target: string } {
+  if (interaction.type === "associate") return { source: "First concept", target: "Pair with" };
+  if (interaction.type === "match") return { source: "Prompt", target: "Match" };
+  return { source: "Source", target: "Target" };
+}
+
+function renderGraphicOrderResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = responseGroup();
+
+  const width = objectWidth(interaction);
+  const height = objectHeight(interaction);
+  const choices = choicesOrFallback(interaction).filter((choice) => choice.role === "hotspot");
+  const orderedIdentifiers = valueToStrings(currentValue).filter((identifier) =>
+    choices.some((choice) => choice.identifier === identifier),
+  );
+
+  const surface = document.createElement("div");
+  surface.className = "qti3-graphic-order-surface";
+  surface.role = "group";
+  surface.setAttribute("aria-label", `${readableType(interaction.type)} hotspots`);
+  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 = "hidden";
+
+  const object = interaction.object;
+  if (object?.data && objectIsImage(object)) {
+    const image = document.createElement("img");
+    image.src = object.data;
+    image.alt = object.text || `${readableType(interaction.type)} image`;
+    image.style.inlineSize = "100%";
+    image.style.blockSize = "100%";
+    image.style.objectFit = "contain";
+    surface.append(image);
+  }
+
+  const sequenceLines = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  sequenceLines.classList.add("qti3-graphic-sequence-lines");
+  sequenceLines.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  sequenceLines.setAttribute("aria-hidden", "true");
+  const markerId = `qti3-arrow-${Math.random().toString(36).slice(2)}`;
+  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+  marker.setAttribute("id", markerId);
+  marker.setAttribute("viewBox", "0 0 10 10");
+  marker.setAttribute("refX", "8");
+  marker.setAttribute("refY", "5");
+  marker.setAttribute("markerWidth", "5");
+  marker.setAttribute("markerHeight", "5");
+  marker.setAttribute("orient", "auto-start-reverse");
+  const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  arrow.setAttribute("d", "M 0 0 L 10 5 L 0 10 z");
+  marker.append(arrow);
+  defs.append(marker);
+  sequenceLines.append(defs);
+  surface.append(sequenceLines);
+
+  const summary = document.createElement("p");
+  summary.className = "qti3-selection-summary";
+  summary.setAttribute("aria-live", "polite");
+  const list = document.createElement("ol");
+  list.className = "qti3-graphic-order-list";
+  list.setAttribute("aria-label", `${readableType(interaction.type)} selected order`);
+
+  const orderedChoices = () =>
+    orderedIdentifiers
+      .map((identifier) => choices.find((choice) => choice.identifier === identifier))
+      .filter((choice): choice is QtiChoice => Boolean(choice));
+  const commit = () => update([...orderedIdentifiers]);
+  const focusHotspot = (identifier: string) => {
+    surface.querySelector<HTMLButtonElement>(`[data-choice-identifier="${identifier}"]`)?.focus();
+  };
+  const focusRelativeHotspot = (choice: QtiChoice, delta: number) => {
+    const index = choices.findIndex((entry) => entry.identifier === choice.identifier);
+    const next = choices[(index + delta + choices.length) % choices.length];
+    if (next) focusHotspot(next.identifier);
+  };
+  const chooseHotspot = (choice: QtiChoice) => {
+    const existingIndex = orderedIdentifiers.indexOf(choice.identifier);
+    if (existingIndex >= 0) orderedIdentifiers.splice(existingIndex, 1);
+    orderedIdentifiers.push(choice.identifier);
+    renderState();
+    commit();
+    focusHotspot(choice.identifier);
+  };
+  const removeHotspot = (identifier: string) => {
+    const index = orderedIdentifiers.indexOf(identifier);
+    if (index < 0) return;
+    orderedIdentifiers.splice(index, 1);
+    renderState();
+    commit();
+    focusHotspot(identifier);
+  };
+  const moveHotspot = (identifier: string, delta: number) => {
+    const index = orderedIdentifiers.indexOf(identifier);
+    const targetIndex = index + delta;
+    if (index < 0 || targetIndex < 0 || targetIndex >= orderedIdentifiers.length) return;
+    const [entry] = orderedIdentifiers.splice(index, 1);
+    if (!entry) return;
+    orderedIdentifiers.splice(targetIndex, 0, entry);
+    renderState();
+    commit();
+    list.querySelector<HTMLButtonElement>(`[data-choice-identifier="${identifier}"]`)?.focus();
+  };
+  const renderState = () => {
+    for (const line of sequenceLines.querySelectorAll("line")) line.remove();
+    const currentChoices = orderedChoices();
+    for (let index = 0; index < currentChoices.length - 1; index += 1) {
+      const current = currentChoices[index];
+      const next = currentChoices[index + 1];
+      if (!current || !next) continue;
+      const start = hotspotCenter(current, width, height);
+      const end = hotspotCenter(next, width, height);
+      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      line.setAttribute("x1", String(start.x));
+      line.setAttribute("y1", String(start.y));
+      line.setAttribute("x2", String(end.x));
+      line.setAttribute("y2", String(end.y));
+      line.setAttribute("marker-end", `url(#${markerId})`);
+      sequenceLines.append(line);
+    }
+
+    for (const button of surface.querySelectorAll<HTMLButtonElement>(".qti3-hotspot-button")) {
+      const identifier = button.dataset.choiceIdentifier ?? "";
+      const index = orderedIdentifiers.indexOf(identifier);
+      const isSelected = index >= 0;
+      button.dataset.selected = isSelected ? "true" : "false";
+      button.setAttribute("aria-pressed", isSelected ? "true" : "false");
+      button.dataset.order = isSelected ? String(index + 1) : "";
+      const badge = button.querySelector<HTMLElement>(".qti3-graphic-order-number");
+      if (badge) badge.textContent = isSelected ? String(index + 1) : "";
+    }
+
+    summary.textContent =
+      orderedIdentifiers.length > 0
+        ? `${orderedIdentifiers.length} ${orderedIdentifiers.length === 1 ? "region" : "regions"} ordered.`
+        : "No regions ordered";
+
+    list.replaceChildren(
+      ...currentChoices.map((choice, index) => {
+        const item = document.createElement("li");
+        item.className = "qti3-graphic-order-item";
+        item.dataset.choiceIdentifier = choice.identifier;
+        const choiceLabel = hotspotDisplayLabel(choice, choices);
+
+        const label = document.createElement("button");
+        label.type = "button";
+        label.className = "qti3-token";
+        label.dataset.choiceIdentifier = choice.identifier;
+        label.textContent = `${index + 1}. ${choiceLabel}`;
+        label.setAttribute(
+          "aria-label",
+          `${choiceLabel}, position ${index + 1} of ${currentChoices.length}`,
+        );
+        label.addEventListener("click", () => focusHotspot(choice.identifier));
+        label.addEventListener("keydown", (event) => {
+          if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            moveHotspot(choice.identifier, -1);
+          } else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+            event.preventDefault();
+            moveHotspot(choice.identifier, 1);
+          } else if (event.key === "Delete" || event.key === "Backspace") {
+            event.preventDefault();
+            removeHotspot(choice.identifier);
+          }
+        });
+
+        const up = movementButton("up", movementLabel(choiceLabel, "up"), () =>
+          moveHotspot(choice.identifier, -1),
+        );
+        up.disabled = index === 0;
+
+        const down = movementButton("down", movementLabel(choiceLabel, "down"), () =>
+          moveHotspot(choice.identifier, 1),
+        );
+        down.disabled = index === currentChoices.length - 1;
+
+        const remove = document.createElement("button");
+        remove.type = "button";
+        remove.textContent = "Remove";
+        remove.setAttribute("aria-label", `Remove ${choiceLabel}`);
+        remove.addEventListener("click", () => removeHotspot(choice.identifier));
+
+        item.append(label, up, down, remove);
+        return item;
+      }),
+    );
+  };
+
+  for (const [index, choice] of choices.entries()) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "qti3-hotspot-button qti3-graphic-order-hotspot";
+    button.dataset.choiceIdentifier = choice.identifier;
+    button.title = hotspotAccessibleLabel(choice, index);
+    button.setAttribute("aria-label", hotspotAccessibleLabel(choice, index));
+    button.setAttribute("aria-pressed", "false");
+    button.style.position = "absolute";
+    placeHotspotButton(button, choice, width, height);
+    const text = document.createElement("span");
+    text.className = "qti3-hotspot-label";
+    text.textContent = hotspotDisplayLabel(choice, choices);
+    const order = document.createElement("span");
+    order.className = "qti3-graphic-order-number";
+    order.setAttribute("aria-hidden", "true");
+    button.append(text, order);
+    button.addEventListener("click", () => chooseHotspot(choice));
+    button.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        event.preventDefault();
+        focusRelativeHotspot(choice, 1);
+      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        event.preventDefault();
+        focusRelativeHotspot(choice, -1);
+      } else if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        removeHotspot(choice.identifier);
+      }
+    });
+    surface.append(button);
+  }
+
+  renderState();
+  group.append(surface, summary, list);
+  return group;
+}
+
+function renderGraphicAssociateResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = responseGroup();
+
+  const width = objectWidth(interaction);
+  const height = objectHeight(interaction);
+  const choices = choicesOrFallback(interaction).filter((choice) => choice.role === "hotspot");
+  const selectedPairs = valueToStrings(currentValue);
+  const maximumAssociations =
+    interaction.responseCardinality === "single" ? 1 : maximumAllowedResponses(interaction);
+  let selectedHotspot: QtiChoice | undefined;
+
+  const surface = document.createElement("div");
+  surface.className = "qti3-graphic-associate-surface";
+  surface.role = "group";
+  surface.setAttribute("aria-label", `${readableType(interaction.type)} hotspots`);
+  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 = "hidden";
+
+  const object = interaction.object;
+  if (object?.data && objectIsImage(object)) {
+    const image = document.createElement("img");
+    image.src = object.data;
+    image.alt = object.text || `${readableType(interaction.type)} image`;
+    image.style.inlineSize = "100%";
+    image.style.blockSize = "100%";
+    image.style.objectFit = "contain";
+    surface.append(image);
+  }
+
+  const connections = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  connections.classList.add("qti3-graphic-associate-lines");
+  connections.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  connections.setAttribute("aria-hidden", "true");
+  surface.append(connections);
+
+  const summary = document.createElement("p");
+  summary.className = "qti3-selection-summary";
+  summary.setAttribute("aria-live", "polite");
+  const pairList = document.createElement("ul");
+  pairList.className = "qti3-pair-list";
+  pairList.setAttribute("aria-label", `${readableType(interaction.type)} selected pairs`);
+
+  const commit = () => {
+    if (interaction.responseCardinality === "single") update(selectedPairs[0] ?? null);
+    else update([...selectedPairs]);
+  };
+  const removePair = (pair: string) => {
+    const index = selectedPairs.indexOf(pair);
+    if (index < 0) return;
+    selectedPairs.splice(index, 1);
+    renderState();
+    commit();
+  };
+  const removePairsForHotspot = (identifier: string) => {
+    let removed = false;
+    for (let index = selectedPairs.length - 1; index >= 0; index -= 1) {
+      const [source, target] = selectedPairs[index]?.split(" ") ?? [];
+      if (source === identifier || target === identifier) {
+        selectedPairs.splice(index, 1);
+        removed = true;
+      }
+    }
+    if (!removed) return;
+    renderState();
+    commit();
+  };
+  const addPair = (source: QtiChoice, target: QtiChoice) => {
+    if (source.identifier === target.identifier) {
+      selectedHotspot = undefined;
+      renderState();
+      return;
+    }
+    const pair = `${source.identifier} ${target.identifier}`;
+    if (!selectedPairs.includes(pair)) {
+      if (interaction.responseCardinality === "single") selectedPairs.splice(0);
+      if (
+        maximumAssociations !== undefined &&
+        selectedPairs.length >= maximumAssociations &&
+        interaction.responseCardinality !== "single"
+      ) {
+        selectedHotspot = undefined;
+        renderState();
+        return;
+      }
+      if (
+        exceedsHotspotMatchMax(source, selectedPairs) ||
+        exceedsHotspotMatchMax(target, selectedPairs)
+      ) {
+        selectedHotspot = undefined;
+        renderState();
+        return;
+      }
+      selectedPairs.push(pair);
+    }
+    selectedHotspot = undefined;
+    renderState();
+    commit();
+  };
+  const chooseHotspot = (choice: QtiChoice) => {
+    if (!selectedHotspot) {
+      selectedHotspot = choice;
+      renderState();
+      return;
+    }
+    addPair(selectedHotspot, choice);
+  };
+  const focusRelativeHotspot = (choice: QtiChoice, delta: number) => {
+    const index = choices.findIndex((entry) => entry.identifier === choice.identifier);
+    const next = choices[(index + delta + choices.length) % choices.length];
+    if (!next) return;
+    surface
+      .querySelector<HTMLButtonElement>(`[data-choice-identifier="${next.identifier}"]`)
+      ?.focus();
+  };
+  const renderState = () => {
+    connections.replaceChildren(
+      ...selectedPairs.flatMap((pair) => {
+        const [sourceIdentifier, targetIdentifier] = pair.split(" ");
+        const source = choices.find((choice) => choice.identifier === sourceIdentifier);
+        const target = choices.find((choice) => choice.identifier === targetIdentifier);
+        if (!source || !target) return [];
+        const start = hotspotCenter(source, width, height);
+        const end = hotspotCenter(target, width, height);
+        const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+        line.setAttribute("x1", String(start.x));
+        line.setAttribute("y1", String(start.y));
+        line.setAttribute("x2", String(end.x));
+        line.setAttribute("y2", String(end.y));
+        return [line];
+      }),
+    );
+    for (const button of surface.querySelectorAll<HTMLButtonElement>(".qti3-hotspot-button")) {
+      const identifier = button.dataset.choiceIdentifier ?? "";
+      const isActive = identifier === selectedHotspot?.identifier;
+      const isPaired = selectedPairs.some((pair) => pair.split(" ").includes(identifier));
+      button.setAttribute("aria-pressed", isActive ? "true" : "false");
+      button.dataset.selected = isActive || isPaired ? "true" : "false";
+    }
+    summary.textContent = selectedHotspot
+      ? `${hotspotDisplayLabel(selectedHotspot, choices)} selected. Choose another hotspot.`
+      : selectedPairs.length > 0
+        ? `${selectedPairs.length} ${selectedPairs.length === 1 ? "association" : "associations"} made.`
+        : "No associations made";
+    pairList.replaceChildren(
+      ...selectedPairs.map((pair) => {
+        const [source, target] = pair.split(" ");
+        const sourceChoice = choices.find((choice) => choice.identifier === source);
+        const targetChoice = choices.find((choice) => choice.identifier === target);
+        const pairLabel = `${sourceChoice ? hotspotDisplayLabel(sourceChoice, choices) : source} to ${targetChoice ? hotspotDisplayLabel(targetChoice, choices) : target}`;
+        const item = document.createElement("li");
+        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}`);
+        remove.addEventListener("click", () => removePair(pair));
+        item.append(text, remove);
+        return item;
+      }),
+    );
+  };
+
+  for (const [index, choice] of choices.entries()) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "qti3-hotspot-button qti3-graphic-associate-hotspot";
+    button.dataset.choiceIdentifier = choice.identifier;
+    button.textContent = hotspotDisplayLabel(choice, choices);
+    button.title = hotspotAccessibleLabel(choice, index);
+    button.setAttribute("aria-pressed", "false");
+    button.setAttribute("aria-label", hotspotAccessibleLabel(choice, index));
+    button.style.position = "absolute";
+    placeHotspotButton(button, choice, width, height);
+    button.addEventListener("click", () => chooseHotspot(choice));
+    button.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        event.preventDefault();
+        focusRelativeHotspot(choice, 1);
+      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        event.preventDefault();
+        focusRelativeHotspot(choice, -1);
+      } else if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        removePairsForHotspot(choice.identifier);
+      }
+    });
+    surface.append(button);
+  }
+
+  renderState();
+  group.append(surface, summary, pairList);
+  return group;
+}
+
+function renderGapMatchResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = responseGroup();
+  appendGraphicContext(group, interaction);
+
+  const sources = sourceChoices(interaction);
+  const gaps = targetChoices(interaction);
+  const assignments = new Map<string, QtiChoice>();
+  let selectedSource: QtiChoice | undefined;
+  let draggedSource: string | undefined;
+
+  const sourceRegion = tokenRegion(`${readableType(interaction.type)} choices`);
+  const gapRegion = document.createElement("div");
+  gapRegion.className = "qti3-gap-region qti3-gap-passage";
+  gapRegion.role = "group";
+  gapRegion.setAttribute("aria-label", `${readableType(interaction.type)} targets`);
+  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 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 assign = (gap: QtiChoice, sourceIdentifier: string | undefined) => {
+    const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+    if (!source) return;
+    assignments.set(gap.identifier, source);
+    selectedSource = undefined;
+    syncSources();
+    renderGaps();
+    commit();
+  };
+  const gapControl = (gap: QtiChoice, index: number) => {
+    const assigned = assignments.get(gap.identifier);
+    const gapLabel = `Gap ${index + 1}`;
+    const target = document.createElement("span");
+    target.className = "qti3-gap-target";
+    target.dataset.gapIdentifier = gap.identifier;
+    target.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      target.classList.add("qti3-drop-target");
+    });
+    target.addEventListener("dragleave", () => target.classList.remove("qti3-drop-target"));
+    target.addEventListener("drop", (event) => {
+      event.preventDefault();
+      target.classList.remove("qti3-drop-target");
+      assign(gap, event.dataTransfer?.getData("text/plain") || draggedSource);
+    });
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "qti3-gap-button";
+    button.textContent = assigned ? assigned.text : "";
+    button.setAttribute(
+      "aria-label",
+      assigned ? `${gapLabel}, assigned ${assigned.text}` : `${gapLabel}, empty`,
+    );
+    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);
+      renderGaps();
+      commit();
+    });
+    target.append(button);
+    return target;
+  };
+  const renderGaps = () => {
+    const segments = interaction.gapMatchSegments ?? [];
+    const hasInlineGaps = segments.some((segment) => segment.kind === "gap");
+    if (!hasInlineGaps) {
+      gapRegion.replaceChildren(...gaps.map((gap, index) => gapControl(gap, index)));
+      return;
+    }
+
+    const content: Array<Node | string> = [];
+    for (const [segmentIndex, segment] of segments.entries()) {
+      if (segment.kind === "text") {
+        content.push(document.createTextNode(normalizeInlineSegmentText(segment.text)));
+        continue;
+      }
+
+      const gapIndex = gaps.findIndex((gap) => gap.identifier === segment.identifier);
+      const gap = gaps[gapIndex];
+      if (gap) {
+        appendInlineControl(content, gapControl(gap, gapIndex), segments[segmentIndex + 1]);
+      }
+    }
+    gapRegion.replaceChildren(...content);
+  };
+
+  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);
+    });
+    button.addEventListener("click", () => {
+      selectedSource = source;
+      syncSources();
+    });
+    sourceRegion.append(button);
+  }
+
+  renderGaps();
+  group.append(sourceRegion, gapRegion);
+  return group;
+}
+
+function renderSelect(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const select = document.createElement("select");
+  select.className = "qti3-inline-select";
+  select.setAttribute("aria-label", interactionLabel(interaction));
+  appendOptions(select, choicesOrFallback(interaction));
+  const [selected] = valueToStrings(currentValue);
+  if (selected) select.value = selected;
+  select.addEventListener("change", () => update(select.value === "" ? null : select.value));
+  return select;
+}
+
+function appendInlineControl(
+  content: Array<Node | string>,
+  control: HTMLElement,
+  nextSegment: { kind: string; text?: string } | undefined,
+): void {
+  const previous = content.at(-1);
+  if (previous instanceof Text && !/\s$/.test(previous.data)) {
+    content.push(document.createTextNode(" "));
+  }
+  content.push(control);
+
+  const nextText =
+    nextSegment?.kind === "text" ? normalizeInlineSegmentText(nextSegment.text) : undefined;
+  if (nextText && !/^\s|^[,.;:!?]/.test(nextText)) {
+    content.push(document.createTextNode(" "));
+  }
+}
+
+function normalizeInlineSegmentText(value: string | undefined): string {
+  return (value ?? "").replace(/\s+([,.;:!?])/g, "$1");
+}
+
+function interactionLabel(interaction: QtiInteraction): string {
+  return interaction.prompt ?? interaction.contextText ?? readableType(interaction.type);
+}
+
+function qtiSharedClassNames(value: string | undefined): string[] {
+  return (value ?? "").split(/\s+/).filter((className) => className.startsWith("qti-"));
+}
+
+function renderTextResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  mode: "entry" | "extended",
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = document.createElement("div");
+  group.className = "qti3-text-response";
+  const expectedLength = Number(interaction.attributes["expected-length"] ?? 0);
+  const expectedLines = Number(interaction.attributes["expected-lines"] ?? 0);
+  const control =
+    mode === "extended" ? document.createElement("textarea") : document.createElement("input");
+  control.className = mode === "extended" ? "qti3-textarea" : "qti3-text-input";
+  control.value = scalarString(currentValue);
+  control.setAttribute(
+    "aria-label",
+    interaction.prompt ?? (mode === "extended" ? "Extended text response" : "Text response"),
+  );
+  if (mode === "extended" && expectedLines > 0) {
+    (control as HTMLTextAreaElement).rows = expectedLines;
+  }
+  if (mode === "entry") {
+    applyExpectedTextEntryWidth(control, expectedLength);
+  }
+  const counter = mode === "extended" ? document.createElement("p") : undefined;
+  if (counter) {
+    counter.className = "qti3-counter";
+    counter.setAttribute("aria-live", "polite");
+  }
+  const sync = (emitResponse = true) => {
+    const value = control.value;
+    if (counter) {
+      const words = value.trim().length > 0 ? value.trim().split(/\s+/).length : 0;
+      counter.textContent = `${value.length} characters, ${words} words`;
+    }
+    if (emitResponse) update(value);
+  };
+  control.addEventListener("input", () => sync());
+  control.addEventListener("change", () => sync());
+  sync(false);
+  group.append(control);
+  if (counter) group.append(counter);
+  return group;
+}
+
+function applyExpectedTextEntryWidth(
+  control: HTMLInputElement | HTMLTextAreaElement,
+  expectedLength: number,
+): void {
+  if (!(control instanceof HTMLInputElement) || expectedLength <= 0) return;
+  const width = Math.max(8, Math.min(expectedLength + 2, 72));
+  control.style.inlineSize = `${width}ch`;
+}
+
+function renderInlineTextEntry(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = document.createElement("span");
+  group.className = "qti3-inline-text-response";
+  const input = document.createElement("input");
+  input.className = "qti3-text-input qti3-inline-text-input";
+  input.value = scalarString(currentValue);
+  input.setAttribute(
+    "aria-label",
+    interaction.prompt ?? interaction.contextText ?? "Text response",
+  );
+  const expectedLength = Number(interaction.attributes["expected-length"] ?? 0);
+  applyExpectedTextEntryWidth(input, expectedLength);
+  const sync = (emitResponse = true) => {
+    if (emitResponse) update(input.value);
+  };
+  input.addEventListener("input", () => sync());
+  input.addEventListener("change", () => sync());
+  sync(false);
+  group.append(input);
+  return group;
+}
+
+function renderSliderResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = document.createElement("div");
+  group.className = "qti3-slider-response";
+  const input = document.createElement("input");
+  input.type = "range";
+  input.min = interaction.attributes["lower-bound"] ?? "0";
+  input.max = interaction.attributes["upper-bound"] ?? "100";
+  input.step = interaction.attributes.step ?? "1";
+  input.value = scalarString(currentValue) || interaction.attributes["lower-bound"] || "0";
+  input.setAttribute("aria-label", interaction.prompt ?? "Slider response");
+  const output = document.createElement("output");
+  output.className = "qti3-slider-output";
+  output.value = input.value;
+  output.textContent = input.value;
+  const sync = () => {
+    output.value = input.value;
+    output.textContent = input.value;
+    update(coerceResponseInputValue(input.value, interaction.responseBaseType));
+  };
+  input.addEventListener("input", sync);
+  group.append(input, output);
+  return group;
+}
+
+function appendGraphicContext(group: HTMLElement, interaction: QtiInteraction): void {
+  if (!interaction.type.startsWith("graphic") || !interaction.object) return;
+  const context = document.createElement("div");
+  context.className = "qti3-graphic-context";
+  context.append(renderObjectAsset(interaction));
+  group.append(context);
+}
+
+function renderSelectPointResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = document.createElement("div");
+  group.role = "group";
+  group.setAttribute("aria-label", `${readableType(interaction.type)} coordinate response`);
+  const isMultiple = interaction.responseCardinality === "multiple";
+  const maxPoints = isMultiple ? maximumAllowedResponses(interaction) : 1;
+
+  const surface = document.createElement("button");
+  surface.type = "button";
+  surface.className = "qti3-point-surface";
+  surface.setAttribute("aria-label", `${readableType(interaction.type)} coordinate area`);
+  surface.style.display = "block";
+  surface.style.position = "relative";
+  surface.style.inlineSize = `min(100%, ${objectWidth(interaction)}px)`;
+  surface.style.aspectRatio = `${objectWidth(interaction)} / ${objectHeight(interaction)}`;
+  surface.style.boxSizing = "border-box";
+  surface.style.border = "1px solid CanvasText";
+  surface.style.background = "Canvas";
+  surface.style.color = "CanvasText";
+  surface.style.cursor = "crosshair";
+  surface.style.overflow = "hidden";
+
+  const object = interaction.object;
+  if (object?.data && object.type?.startsWith("image/")) {
+    const image = document.createElement("img");
+    image.src = object.data;
+    image.alt = "";
+    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 width = objectWidth(interaction);
+  const height = objectHeight(interaction);
+  let points = parsePointValues(currentValue);
+  let activeIndex = points.length > 0 ? points.length - 1 : -1;
+  const coordinate = document.createElement("output");
+  coordinate.className = "qti3-coordinate-output";
+  const initialPoint = () => ({
+    x: Math.round(width / 2),
+    y: Math.round(height / 2),
+  });
+  const emitValue = (): QtiValue => {
+    const values = points.map(pointToString);
+    if (isMultiple) return values;
+    return values[0] ?? "";
+  };
+  const commit = () => {
+    update(emitValue());
+  };
+  const syncMarker = () => {
+    surface.querySelectorAll(".qti3-point-marker").forEach((marker) => marker.remove());
+    if (points.length === 0) {
+      coordinate.value = "";
+      coordinate.textContent = "No point selected";
+      surface.setAttribute("aria-label", `${readableType(interaction.type)} coordinate area`);
+      return;
+    }
+    points.forEach((point, index) => {
+      const marker = document.createElement("span");
+      marker.className = "qti3-point-marker";
+      marker.setAttribute("aria-hidden", "true");
+      marker.style.position = "absolute";
+      marker.style.inlineSize = "8px";
+      marker.style.blockSize = "8px";
+      marker.style.border = "2px solid CanvasText";
+      marker.style.borderRadius = "50%";
+      marker.style.transform = "translate(-50%, -50%)";
+      marker.style.pointerEvents = "none";
+      marker.style.insetInlineStart = `${(point.x / width) * 100}%`;
+      marker.style.insetBlockStart = `${(point.y / height) * 100}%`;
+      if (index === activeIndex) marker.dataset.active = "true";
+      surface.append(marker);
+    });
+    const text = points.map(pointToString).join("; ");
+    coordinate.value = isMultiple
+      ? points.map(pointToString).join(" | ")
+      : pointToString(points[0]);
+    coordinate.textContent = isMultiple
+      ? `${points.length} selected point${points.length === 1 ? "" : "s"}: ${text}`
+      : `Selected point ${pointToString(points[0])}`;
+    surface.setAttribute(
+      "aria-label",
+      `${readableType(interaction.type)} coordinate area, selected ${text}`,
+    );
+  };
+  const clampPoint = (point: { x: number; y: number }) => {
+    point.x = Math.max(0, Math.min(width, point.x));
+    point.y = Math.max(0, Math.min(height, point.y));
+  };
+  const setActivePoint = (point: { x: number; y: number }) => {
+    clampPoint(point);
+    if (!isMultiple) {
+      points = [point];
+      activeIndex = 0;
+      return;
+    }
+    if (maxPoints !== undefined && points.length >= maxPoints) {
+      points[points.length - 1] = point;
+      activeIndex = points.length - 1;
+      return;
+    }
+    points.push(point);
+    activeIndex = points.length - 1;
+  };
+  const mutableActivePoint = () => {
+    if (points.length === 0) setActivePoint(initialPoint());
+    if (activeIndex < 0 || activeIndex >= points.length) activeIndex = points.length - 1;
+    const point = points[activeIndex];
+    if (point) return point;
+    const fallback = initialPoint();
+    points = [fallback];
+    activeIndex = 0;
+    return fallback;
+  };
+
+  surface.addEventListener("click", (event) => {
+    if (event.detail === 0) return;
+    const rect = surface.getBoundingClientRect();
+    setActivePoint({
+      x: Math.round(((event.clientX - rect.left) / rect.width) * width),
+      y: Math.round(((event.clientY - rect.top) / rect.height) * height),
+    });
+    syncMarker();
+    commit();
+  });
+  surface.addEventListener("keydown", (event) => {
+    const point = mutableActivePoint();
+    const step = event.shiftKey ? 10 : 1;
+    if (event.key === "ArrowLeft") point.x -= step;
+    else if (event.key === "ArrowRight") point.x += step;
+    else if (event.key === "ArrowUp") point.y -= step;
+    else if (event.key === "ArrowDown") point.y += step;
+    else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      commit();
+      return;
+    } else return;
+
+    event.preventDefault();
+    clampPoint(point);
+    syncMarker();
+  });
+
+  syncMarker();
+  const controls = document.createElement("div");
+  controls.className = "qti3-point-controls";
+  for (const [direction, dx, dy] of [
+    ["up", 0, -1],
+    ["left", -1, 0],
+    ["right", 1, 0],
+    ["down", 0, 1],
+  ] as const) {
+    controls.append(
+      movementButton(direction, movementLabel("point", direction), () => {
+        const point = mutableActivePoint();
+        point.x += dx;
+        point.y += dy;
+        clampPoint(point);
+        syncMarker();
+        commit();
+      }),
+    );
+  }
+  if (isMultiple) {
+    const clear = document.createElement("button");
+    clear.type = "button";
+    clear.textContent = "Clear points";
+    clear.addEventListener("click", () => {
+      points = [];
+      activeIndex = -1;
+      syncMarker();
+      commit();
+    });
+    controls.append(clear);
+  }
+  group.append(surface, coordinate, controls);
+  return group;
+}
+
+function renderPositionObjectResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = document.createElement("div");
+  group.role = "group";
+  group.setAttribute("aria-label", `${readableType(interaction.type)} object placement response`);
+
+  const stageObject = interaction.positionObjectStage ?? interaction.object;
+  const movableObject = interaction.positionObjectStage ? interaction.object : undefined;
+  const width = objectAssetWidth(stageObject, 480);
+  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 stage = document.createElement("div");
+  stage.className = "qti3-position-object-stage";
+  stage.tabIndex = 0;
+  stage.role = "group";
+  stage.setAttribute("aria-label", `${readableType(interaction.type)} placement stage`);
+  stage.style.position = "relative";
+  stage.style.inlineSize = `min(100%, ${width}px)`;
+  stage.style.aspectRatio = `${width} / ${height}`;
+  stage.style.boxSizing = "border-box";
+  stage.style.border = "1px solid CanvasText";
+  stage.style.background = "Canvas";
+  stage.style.color = "CanvasText";
+  stage.style.overflow = "hidden";
+  stage.style.touchAction = "none";
+
+  if (stageObject?.data && objectIsImage(stageObject)) {
+    const image = document.createElement("img");
+    image.src = stageObject.data;
+    image.alt = stageObject.text || "";
+    image.style.position = "absolute";
+    image.style.inset = "0";
+    image.style.inlineSize = "100%";
+    image.style.blockSize = "100%";
+    image.style.objectFit = "contain";
+    image.style.pointerEvents = "none";
+    stage.append(image);
+  }
+
+  const marker = document.createElement("button");
+  marker.type = "button";
+  marker.className = "qti3-position-object-marker";
+  marker.setAttribute("aria-label", "Movable object");
+  marker.style.position = "absolute";
+  marker.style.inlineSize = `${movableWidth}px`;
+  marker.style.blockSize = `${movableHeight}px`;
+  marker.style.transform = "translate(-50%, -50%)";
+  marker.style.border = "2px solid CanvasText";
+  marker.style.background = "Canvas";
+  marker.style.color = "CanvasText";
+  marker.style.padding = "0";
+  marker.style.cursor = "grab";
+  marker.style.touchAction = "none";
+  marker.draggable = false;
+
+  if (movableObject?.data && objectIsImage(movableObject)) {
+    const image = document.createElement("img");
+    image.src = movableObject.data;
+    image.alt = "";
+    image.style.inlineSize = "100%";
+    image.style.blockSize = "100%";
+    image.style.objectFit = "contain";
+    image.style.pointerEvents = "none";
+    marker.append(image);
+  } else {
+    marker.textContent = "Place";
+  }
+  stage.append(marker);
+
+  const coordinate = document.createElement("output");
+  coordinate.className = "qti3-coordinate-output";
+  const clamp = () => {
+    point.x = Math.max(0, Math.min(width, point.x));
+    point.y = Math.max(0, Math.min(height, point.y));
+  };
+  const commit = () => {
+    update(pointToString(point));
+  };
+  const syncMarker = () => {
+    clamp();
+    marker.style.insetInlineStart = `${percent(point.x, width)}%`;
+    marker.style.insetBlockStart = `${percent(point.y, height)}%`;
+    coordinate.value = pointToString(point);
+    coordinate.textContent = `Object positioned at ${pointToString(point)}`;
+    stage.setAttribute(
+      "aria-label",
+      `${readableType(interaction.type)} placement stage, object at ${pointToString(point)}`,
+    );
+  };
+  const pointFromPointer = (event: MouseEvent | PointerEvent) => {
+    const rect = stage.getBoundingClientRect();
+    point = {
+      x: Math.round(((event.clientX - rect.left) / rect.width) * width),
+      y: Math.round(((event.clientY - rect.top) / rect.height) * height),
+    };
+    clamp();
+  };
+  const moveBy = (dx: number, dy: number, emit = true) => {
+    point.x += dx;
+    point.y += dy;
+    syncMarker();
+    if (emit) commit();
+  };
+  const handleKey = (event: KeyboardEvent) => {
+    const step = event.shiftKey ? 10 : 1;
+    if (event.key === "ArrowLeft") moveBy(-step, 0, false);
+    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;
+    event.preventDefault();
+  };
+
+  let dragging = false;
+  marker.addEventListener("pointerdown", (event) => {
+    dragging = true;
+    marker.setPointerCapture(event.pointerId);
+    marker.style.cursor = "grabbing";
+    pointFromPointer(event);
+    syncMarker();
+    event.preventDefault();
+  });
+  marker.addEventListener("pointermove", (event) => {
+    if (!dragging) return;
+    pointFromPointer(event);
+    syncMarker();
+  });
+  marker.addEventListener("pointerup", (event) => {
+    if (!dragging) return;
+    dragging = false;
+    marker.releasePointerCapture(event.pointerId);
+    marker.style.cursor = "grab";
+    pointFromPointer(event);
+    syncMarker();
+    commit();
+  });
+  marker.addEventListener("pointercancel", () => {
+    dragging = false;
+    marker.style.cursor = "grab";
+  });
+  stage.addEventListener("click", (event) => {
+    if (event.target === marker) return;
+    pointFromPointer(event);
+    syncMarker();
+    commit();
+  });
+  stage.addEventListener("keydown", handleKey);
+  marker.addEventListener("keydown", handleKey);
+
+  const controls = document.createElement("div");
+  controls.className = "qti3-point-controls";
+  for (const [direction, dx, dy] of [
+    ["up", 0, -1],
+    ["left", -1, 0],
+    ["right", 1, 0],
+    ["down", 0, 1],
+  ] as const) {
+    controls.append(
+      movementButton(direction, movementLabel("object", direction), () => moveBy(dx, dy)),
+    );
+  }
+
+  syncMarker();
+  group.append(stage, coordinate, controls);
+  return group;
+}
+
+function renderDrawingResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = document.createElement("div");
+  group.role = "group";
+  group.setAttribute("aria-label", `${readableType(interaction.type)} response`);
+
+  const surface = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  surface.classList.add("qti3-drawing-surface");
+  surface.setAttribute("role", "img");
+  surface.setAttribute("aria-label", "Drawing response surface");
+  surface.setAttribute("tabindex", "0");
+  const width = drawingWidth(interaction);
+  const height = drawingHeight(interaction);
+  surface.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  surface.style.display = "block";
+  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.touchAction = "none";
+  const restoredStrokes = parseDrawingValue(currentValue);
+  const authoredBackgroundHref = drawingBackgroundHref(interaction);
+  let resolvedAuthoredBackgroundHref = authoredBackgroundHref;
+  let activeBackgroundIsAuthored =
+    restoredStrokes.length > 0 || !drawingResponseImage(currentValue);
+  let activeBackgroundHref =
+    restoredStrokes.length === 0
+      ? (drawingResponseImage(currentValue) ?? authoredBackgroundHref)
+      : authoredBackgroundHref;
+  const resetSurface = () => {
+    const background = activeBackgroundHref
+      ? drawingImageElement(activeBackgroundHref, width, height)
+      : undefined;
+    surface.replaceChildren(...(background ? [background] : []));
+  };
+  resetSurface();
+
+  const summary = document.createElement("output");
+  summary.className = "qti3-coordinate-output";
+  const strokes: DrawingStroke[] = [];
+  let activeStroke: DrawingStroke | undefined;
+  let commitVersion = 0;
+  const commit = (emitResponse = true) => {
+    const version = ++commitVersion;
+    if (emitResponse) {
+      if (strokes.length === 0) {
+        update(null);
+      } else {
+        void exportDrawingResponse(interaction, width, height, strokes, () => {
+          const currentHref = currentDrawingBackgroundHref(surface);
+          if (activeBackgroundIsAuthored && currentHref) {
+            resolvedAuthoredBackgroundHref = currentHref;
+          }
+          return currentHref ?? activeBackgroundHref;
+        }).then((value) => {
+          if (version === commitVersion) update(value);
+        });
+      }
+    }
+    const count = strokes.length;
+    summary.value = serializeDrawingStrokes(strokes);
+    summary.textContent =
+      count === 0 ? "No drawing strokes." : `${count} drawing stroke${count === 1 ? "" : "s"}.`;
+    surface.setAttribute(
+      "aria-label",
+      count === 0
+        ? "Drawing response surface, no strokes"
+        : `Drawing response surface, ${count} stroke${count === 1 ? "" : "s"}`,
+    );
+  };
+  for (const points of restoredStrokes) {
+    const element = polylineElement(points);
+    strokes.push({ points, element });
+    surface.append(element);
+  }
+  const addPoint = (event: PointerEvent) => {
+    if (!activeStroke) return;
+    const point = svgPoint(surface, event);
+    const previous = activeStroke.points.at(-1);
+    if (previous && previous.x === point.x && previous.y === point.y) return;
+    activeStroke.points.push(point);
+    activeStroke.element.setAttribute("points", serializeSvgPoints(activeStroke.points));
+  };
+  const finishStroke = (event: PointerEvent) => {
+    if (!activeStroke) return;
+    addPoint(event);
+    const firstPoint = activeStroke.points[0];
+    if (activeStroke.points.length === 1 && firstPoint) activeStroke.points.push(firstPoint);
+    activeStroke.element.setAttribute("points", serializeSvgPoints(activeStroke.points));
+    activeStroke = undefined;
+    commit();
+  };
+
+  surface.addEventListener("pointerdown", (event) => {
+    const point = svgPoint(surface, event);
+    const element = polylineElement([point]);
+    activeStroke = { points: [point], element };
+    strokes.push(activeStroke);
+    surface.append(element);
+    surface.setPointerCapture(event.pointerId);
+  });
+  surface.addEventListener("pointermove", addPoint);
+  surface.addEventListener("pointerup", finishStroke);
+  surface.addEventListener("pointercancel", () => {
+    activeStroke = undefined;
+  });
+  surface.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    const points = [
+      { x: 10, y: 10 },
+      { x: 90, y: 90 },
+    ];
+    const element = polylineElement(points);
+    strokes.push({ points, element });
+    surface.append(element);
+    commit();
+  });
+
+  const clear = document.createElement("button");
+  clear.type = "button";
+  clear.textContent = "Clear drawing";
+  clear.addEventListener("click", () => {
+    strokes.splice(0, strokes.length);
+    activeStroke = undefined;
+    if (activeBackgroundIsAuthored) {
+      resolvedAuthoredBackgroundHref =
+        currentDrawingBackgroundHref(surface) ?? resolvedAuthoredBackgroundHref;
+    }
+    activeBackgroundHref = resolvedAuthoredBackgroundHref;
+    activeBackgroundIsAuthored = true;
+    resetSurface();
+    commit();
+  });
+
+  const tools = document.createElement("div");
+  tools.className = "qti3-drawing-tools";
+  tools.append(clear);
+  commit(false);
+  group.append(surface, summary, tools);
+  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,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = responseGroup();
+
+  const surface = document.createElement("div");
+  surface.className = "qti3-hotspot-surface";
+  const width = objectWidth(interaction);
+  const height = objectHeight(interaction);
+  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 = "hidden";
+
+  const object = interaction.object;
+  if (object?.data && object.type?.startsWith("image/")) {
+    const image = document.createElement("img");
+    image.src = object.data;
+    image.alt = object.text || `${readableType(interaction.type)} image`;
+    image.style.inlineSize = "100%";
+    image.style.blockSize = "100%";
+    image.style.objectFit = "contain";
+    surface.append(image);
+  }
+
+  const selected = new Set(valueToStrings(currentValue));
+  const multiple = interaction.responseCardinality === "multiple";
+  const selectedSummary = document.createElement("p");
+  selectedSummary.className = "qti3-selection-summary";
+  selectedSummary.setAttribute("aria-live", "polite");
+  selectedSummary.textContent = "No region selected";
+  const syncSelected = () => {
+    for (const button of surface.querySelectorAll<HTMLButtonElement>("button")) {
+      const isSelected = selected.has(button.dataset.choiceIdentifier ?? "");
+      button.setAttribute("aria-pressed", isSelected ? "true" : "false");
+      button.dataset.selected = isSelected ? "true" : "false";
+    }
+    selectedSummary.textContent =
+      selected.size > 0 ? `Selected ${[...selected].join(", ")}` : "No region selected";
+  };
+  for (const choice of choicesOrFallback(interaction)) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "qti3-hotspot-button";
+    button.dataset.choiceIdentifier = choice.identifier;
+    button.textContent = choice.text;
+    button.title = choice.text;
+    button.setAttribute("aria-pressed", "false");
+    button.style.position = "absolute";
+    placeHotspotButton(button, choice, width, height);
+    button.addEventListener("click", () => {
+      if (multiple) {
+        if (selected.has(choice.identifier)) selected.delete(choice.identifier);
+        else selected.add(choice.identifier);
+        syncSelected();
+        update([...selected]);
+      } else {
+        selected.clear();
+        selected.add(choice.identifier);
+        syncSelected();
+        update(choice.identifier);
+      }
+    });
+    surface.append(button);
+  }
+
+  syncSelected();
+  group.append(surface, selectedSummary);
+  return group;
+}
+
+interface MediaResponseBinding {
+  currentValue?: QtiValue | undefined;
+  update?: ((value: QtiValue) => void) | undefined;
+  isCompleted?: (() => boolean) | undefined;
+}
+
+function renderObjectAsset(
+  interaction: QtiInteraction,
+  mediaResponse: MediaResponseBinding = {},
+): HTMLElement {
+  const object = interaction.object;
+  const label = interaction.prompt ?? object?.text ?? "Media interaction";
+  const mediaType = object ? mediaElementType(object) : undefined;
+
+  if (object && mediaType === "audio") {
+    const audio = document.createElement("audio");
+    configureMediaElement(audio, interaction, object, label, mediaResponse);
+    audio.style.inlineSize = "100%";
+    return audio;
+  }
+
+  if (object && mediaType === "video") {
+    const video = document.createElement("video");
+    configureMediaElement(video, interaction, object, label, mediaResponse);
+    if (object.width) video.width = Number(object.width);
+    if (object.height) video.height = Number(object.height);
+    return video;
+  }
+
+  if (object?.data && objectIsImage(object)) {
+    const image = document.createElement("img");
+    image.src = object.data;
+    image.alt = label;
+    image.style.maxInlineSize = "100%";
+    image.style.blockSize = "auto";
+    if (object.width) image.width = Number(object.width);
+    if (object.height) image.height = Number(object.height);
+    return image;
+  }
+
+  const group = document.createElement("div");
+  group.role = "group";
+  group.setAttribute("aria-label", label);
+  const fallbackHref = object?.data ?? object?.sources.find((source) => source.src)?.src;
+  if (fallbackHref) {
+    const link = document.createElement("a");
+    link.href = fallbackHref;
+    link.textContent = object?.text || fallbackHref;
+    group.append(link);
+  } else {
+    group.textContent = label;
+  }
+  return group;
+}
+
+function configureMediaElement(
+  media: HTMLAudioElement | HTMLVideoElement,
+  interaction: QtiInteraction,
+  object: QtiObjectAsset,
+  label: string,
+  mediaResponse: MediaResponseBinding,
+): void {
+  media.controls = mediaControlsMode(interaction, object) !== "none";
+  media.preload = "none";
+  media.autoplay = parseBooleanAttribute(interaction.attributes.autostart) ?? false;
+  media.loop = parseBooleanAttribute(interaction.attributes.loop) ?? false;
+  media.setAttribute("aria-label", label);
+  media.style.maxInlineSize = "100%";
+  copyMediaDataAttributes(media, interaction.attributes);
+  copyMediaDataAttributes(media, object.attributes);
+
+  if (object.data) media.src = object.data;
+  for (const source of object.sources) {
+    if (!source.src) continue;
+    const sourceElement = document.createElement("source");
+    sourceElement.src = source.src;
+    if (source.type) sourceElement.type = source.type;
+    media.append(sourceElement);
+  }
+  for (const track of object.tracks) {
+    if (!track.src) continue;
+    const trackElement = document.createElement("track");
+    trackElement.src = track.src;
+    if (track.kind) trackElement.kind = track.kind;
+    if (track.srclang) trackElement.srclang = track.srclang;
+    if (track.label) trackElement.label = track.label;
+    if (track.default) trackElement.default = true;
+    media.append(trackElement);
+  }
+
+  bindMediaPlayCount(media, interaction, mediaResponse);
+}
+
+function copyMediaDataAttributes(element: HTMLElement, attributes: Record<string, string>): void {
+  for (const [name, value] of Object.entries(attributes)) {
+    if (!name.startsWith("data-")) continue;
+    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),
+  );
+  if (types.some((value) => value.startsWith("audio/"))) return "audio";
+  if (types.some((value) => value.startsWith("video/"))) return "video";
+  return undefined;
+}
+
+function mediaControlsMode(
+  interaction: QtiInteraction,
+  object: QtiObjectAsset,
+): string | undefined {
+  return (
+    interaction.attributes["data-qti-media-player-controls"] ??
+    object.attributes["data-qti-media-player-controls"]
+  );
+}
+
+function bindMediaPlayCount(
+  media: HTMLAudioElement | HTMLVideoElement,
+  interaction: QtiInteraction,
+  mediaResponse: MediaResponseBinding,
+): void {
+  if (!mediaResponse.update) return;
+  let playCount = mediaPlayCount(mediaResponse.currentValue ?? null);
+  let activePlaySession = false;
+  let readyAfterEnded = false;
+  const maximum = maximumMediaPlays(interaction);
+
+  const syncState = () => {
+    media.dataset.playCount = String(playCount);
+    if (maximum !== undefined && playCount >= maximum && !activePlaySession) {
+      media.dataset.maxPlaysReached = "true";
+    } else {
+      delete media.dataset.maxPlaysReached;
+    }
+  };
+
+  media.addEventListener("play", () => {
+    if (mediaResponse.isCompleted?.()) {
+      return;
+    }
+    if (!activePlaySession && maximum !== undefined && playCount >= maximum) {
+      media.pause();
+      syncState();
+      return;
+    }
+    if (!activePlaySession && (readyAfterEnded || media.currentTime <= 0.25)) {
+      playCount += 1;
+      mediaResponse.update?.(playCount);
+      activePlaySession = true;
+      readyAfterEnded = false;
+      syncState();
+      return;
+    }
+    activePlaySession = true;
+    readyAfterEnded = false;
+    syncState();
+  });
+
+  media.addEventListener("ended", () => {
+    activePlaySession = false;
+    readyAfterEnded = true;
+    syncState();
+  });
+
+  media.addEventListener("seeked", () => {
+    if (!media.paused || media.currentTime > 0.25) return;
+    activePlaySession = false;
+    readyAfterEnded = false;
+    syncState();
+  });
+
+  syncState();
+}
+
+function objectIsImage(object: QtiObjectAsset): boolean {
+  return Boolean(
+    object.type?.startsWith("image/") ||
+    object.data?.startsWith("data:image/") ||
+    /\.(svg|png|jpg|jpeg|gif|webp)(?:[?#].*)?$/i.test(object.data ?? ""),
+  );
+}
+
+function appendOptions(select: HTMLSelectElement, choices: QtiChoice[]): void {
+  const empty = document.createElement("option");
+  empty.value = "";
+  empty.textContent = "";
+  select.append(empty);
+  for (const choice of choices) {
+    const option = document.createElement("option");
+    option.value = choice.identifier;
+    option.textContent = choice.text;
+    select.append(option);
+  }
+}
+
+function tokenRegion(label: string, visibleLabel?: string): HTMLElement {
+  const region = document.createElement("div");
+  region.className = "qti3-token-region";
+  region.role = "group";
+  region.setAttribute("aria-label", label);
+  if (visibleLabel) {
+    const heading = document.createElement("strong");
+    heading.className = "qti3-region-label";
+    heading.textContent = visibleLabel;
+    region.append(heading);
+  }
+  return region;
+}
+
+function tokenButton(choice: QtiChoice): HTMLButtonElement {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "qti3-token";
+  button.dataset.choiceIdentifier = choice.identifier;
+  button.setAttribute("aria-pressed", "false");
+  button.textContent = choice.text;
+  return button;
+}
+
+function choiceText(choices: QtiChoice[], identifier: string | undefined): string {
+  if (!identifier) return "";
+  return choices.find((choice) => choice.identifier === identifier)?.text ?? identifier;
+}
+
+function sourceChoices(interaction: QtiInteraction): QtiChoice[] {
+  const choices = choicesOrFallback(interaction);
+  const sourceRoles = new Set(["associableChoice", "matchSource", "gapChoice", "hotspot"]);
+  const sources = choices.filter((choice) => sourceRoles.has(choice.role));
+  return sources.length > 0 ? sources : choices;
+}
+
+function targetChoices(interaction: QtiInteraction): QtiChoice[] {
+  const choices = choicesOrFallback(interaction);
+  if (interaction.type === "associate" || interaction.type === "graphicAssociate") return choices;
+  const targetRoles = new Set(["matchTarget", "gap", "hotspot"]);
+  const targets = choices.filter((choice) => targetRoles.has(choice.role));
+  return targets.length > 0 ? targets : choices;
+}
+
+function choicesOrFallback(interaction: QtiInteraction): QtiChoice[] {
+  if (interaction.choices.length > 0) return interaction.choices;
+  return [
+    {
+      identifier: "A",
+      text: "A",
+      role: "simpleChoice",
+      qtiName: "qti-simple-choice",
+      attributes: {},
+    },
+    {
+      identifier: "B",
+      text: "B",
+      role: "simpleChoice",
+      qtiName: "qti-simple-choice",
+      attributes: {},
+    },
+  ];
+}
+
+function valueToStrings(value: QtiValue): string[] {
+  if (value === null) return [];
+  if (Array.isArray(value)) return value.map((item) => String(item));
+  return [String(value)];
+}
+
+function scalarString(value: QtiValue): string {
+  if (value === null || Array.isArray(value) || typeof value === "object") return "";
+  return String(value);
+}
+
+function coerceResponseInputValue(
+  value: string,
+  baseType: QtiInteraction["responseBaseType"],
+): QtiValue {
+  if (baseType === "integer") return Number.parseInt(value, 10);
+  if (baseType === "float") return Number.parseFloat(value);
+  if (baseType === "boolean") {
+    if (value === "true") return true;
+    if (value === "false") return false;
+  }
+  return value;
+}
+
+function orderChoicesFromValue(choices: QtiChoice[], value: QtiValue): QtiChoice[] {
+  const identifiers = valueToStrings(value);
+  if (identifiers.length === 0) return [...choices];
+  const byIdentifier = new Map(choices.map((choice) => [choice.identifier, choice]));
+  const ordered = identifiers
+    .map((identifier) => byIdentifier.get(identifier))
+    .filter((choice): choice is QtiChoice => Boolean(choice));
+  const used = new Set(ordered.map((choice) => choice.identifier));
+  ordered.push(...choices.filter((choice) => !used.has(choice.identifier)));
+  return ordered;
+}
+
+function parsePointValue(value: QtiValue): { x: number; y: number } | undefined {
+  const [raw] = valueToStrings(value);
+  return parsePointString(raw);
+}
+
+function parsePointValues(value: QtiValue): Array<{ x: number; y: number }> {
+  return valueToStrings(value).flatMap((raw) => {
+    const point = parsePointString(raw);
+    return point ? [point] : [];
+  });
+}
+
+function parsePointString(raw: string | undefined): { x: number; y: number } | undefined {
+  if (!raw) return undefined;
+  const values = raw.split(/\s+/).map(Number);
+  const x = values[0];
+  const y = values[1];
+  if (typeof x !== "number" || typeof y !== "number") return undefined;
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return undefined;
+  return { x, y };
+}
+
+function pointToString(point: { x: number; y: number } | undefined): string {
+  return point ? `${point.x} ${point.y}` : "";
+}
+
+type DrawingPoint = { x: number; y: number };
+type DrawingStroke = { points: DrawingPoint[]; element: SVGPolylineElement };
+
+function parseDrawingValue(value: QtiValue): DrawingPoint[][] {
+  const raw = scalarString(value);
+  if (!raw) return [];
+
+  const metadata = drawingMetadataFromSvgDataUrl(raw);
+  if (metadata) return parseDrawingStrokePayload(metadata);
+
+  return parseDrawingStrokePayload(raw);
+}
+
+function drawingMetadataFromSvgDataUrl(raw: string): string | undefined {
+  if (!raw.startsWith("data:image/svg+xml")) return undefined;
+  const commaIndex = raw.indexOf(",");
+  if (commaIndex === -1) return undefined;
+  const encoded = raw.slice(commaIndex + 1);
+  let svg = "";
+  try {
+    svg = raw.slice(0, commaIndex).includes(";base64")
+      ? atob(encoded)
+      : decodeURIComponent(encoded);
+  } catch {
+    return undefined;
+  }
+  const match = svg.match(/\sdata-qti3-strokes="([^"]*)"/);
+  if (!match?.[1]) return undefined;
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return undefined;
+  }
+}
+
+function drawingResponseImage(value: QtiValue): string | undefined {
+  const raw = scalarString(value);
+  return raw?.startsWith("data:image/") ? raw : undefined;
+}
+
+function parseDrawingStrokePayload(raw: string): DrawingPoint[][] {
+  return raw
+    .split("|")
+    .map((stroke) => {
+      const numbers = stroke
+        .trim()
+        .split(/\s+/)
+        .map(Number)
+        .filter((item) => Number.isFinite(item));
+      const points: DrawingPoint[] = [];
+      for (let index = 0; index + 1 < numbers.length; index += 2) {
+        points.push({ x: numbers[index]!, y: numbers[index + 1]! });
+      }
+      return points;
+    })
+    .filter((points) => points.length > 0);
+}
+
+function objectWidth(interaction: QtiInteraction): number {
+  return dimension(interaction.object?.width, 160);
+}
+
+function objectHeight(interaction: QtiInteraction): number {
+  return dimension(interaction.object?.height, 120);
+}
+
+function objectAssetWidth(object: QtiObjectAsset | undefined, fallback: number): number {
+  return dimension(object?.width, fallback);
+}
+
+function objectAssetHeight(object: QtiObjectAsset | undefined, fallback: number): number {
+  return dimension(object?.height, fallback);
+}
+
+function drawingWidth(interaction: QtiInteraction): number {
+  return dimension(interaction.object?.width, 640);
+}
+
+function drawingHeight(interaction: QtiInteraction): number {
+  return dimension(interaction.object?.height, 360);
+}
+
+function dimension(value: string | undefined, fallback: number): number {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+
+function placeHotspotButton(
+  button: HTMLButtonElement,
+  choice: QtiChoice,
+  width: number,
+  height: number,
+): void {
+  const coords = (choice.attributes.coords ?? "")
+    .split(",")
+    .map((value) => Number(value.trim()))
+    .filter((value) => Number.isFinite(value));
+  const shape = choice.attributes.shape;
+
+  if (shape === "circle" && coords.length >= 3) {
+    const [x, y, radius] = coords as [number, number, number];
+    button.style.insetInlineStart = `${percent(x - radius, width)}%`;
+    button.style.insetBlockStart = `${percent(y - radius, height)}%`;
+    button.style.inlineSize = `${percent(radius * 2, width)}%`;
+    button.style.blockSize = `${percent(radius * 2, height)}%`;
+    button.style.borderRadius = "50%";
+    return;
+  }
+
+  if (shape === "rect" && coords.length >= 4) {
+    const [left, top, right, bottom] = coords as [number, number, number, number];
+    button.style.insetInlineStart = `${percent(left, width)}%`;
+    button.style.insetBlockStart = `${percent(top, height)}%`;
+    button.style.inlineSize = `${percent(Math.max(1, right - left), width)}%`;
+    button.style.blockSize = `${percent(Math.max(1, bottom - top), height)}%`;
+    return;
+  }
+
+  if (shape === "poly" && coords.length >= 6) {
+    const xs = coords.filter((_, index) => index % 2 === 0);
+    const ys = coords.filter((_, index) => index % 2 === 1);
+    const left = Math.min(...xs);
+    const top = Math.min(...ys);
+    const right = Math.max(...xs);
+    const bottom = Math.max(...ys);
+    button.style.insetInlineStart = `${percent(left, width)}%`;
+    button.style.insetBlockStart = `${percent(top, height)}%`;
+    button.style.inlineSize = `${percent(Math.max(1, right - left), width)}%`;
+    button.style.blockSize = `${percent(Math.max(1, bottom - top), height)}%`;
+    return;
+  }
+
+  button.style.insetInlineStart = "0";
+  button.style.insetBlockStart = "0";
+}
+
+function hotspotCenter(choice: QtiChoice, width: number, height: number): { x: number; y: number } {
+  const coords = hotspotCoords(choice);
+  const shape = choice.attributes.shape;
+  if ((shape === "circle" || shape === "ellipse") && coords.length >= 2) {
+    const [x, y] = coords as [number, number];
+    return { x, y };
+  }
+  if (shape === "rect" && coords.length >= 4) {
+    const [left, top, right, bottom] = coords as [number, number, number, number];
+    return { x: (left + right) / 2, y: (top + bottom) / 2 };
+  }
+  if (shape === "poly" && coords.length >= 6) {
+    const xs = coords.filter((_, index) => index % 2 === 0);
+    const ys = coords.filter((_, index) => index % 2 === 1);
+    return {
+      x: (Math.min(...xs) + Math.max(...xs)) / 2,
+      y: (Math.min(...ys) + Math.max(...ys)) / 2,
+    };
+  }
+  return { x: width / 2, y: height / 2 };
+}
+
+function hotspotCoords(choice: QtiChoice): number[] {
+  return (choice.attributes.coords ?? "")
+    .split(",")
+    .map((value) => Number(value.trim()))
+    .filter((value) => Number.isFinite(value));
+}
+
+function hotspotDisplayLabel(choice: QtiChoice, choices: QtiChoice[]): string {
+  return choice.attributes["hotspot-label"] || `Region ${choices.indexOf(choice) + 1}`;
+}
+
+function hotspotAccessibleLabel(choice: QtiChoice, index: number): string {
+  return (
+    choice.attributes["aria-label"] || choice.attributes["hotspot-label"] || `Region ${index + 1}`
+  );
+}
+
+function exceedsHotspotMatchMax(choice: QtiChoice, selectedPairs: string[]): boolean {
+  const maximum = parseUnlimitedMaximum(choice.attributes["match-max"]);
+  if (maximum === undefined) return false;
+  const currentUseCount = selectedPairs
+    .flatMap((pair) => pair.split(" "))
+    .filter((identifier) => identifier === choice.identifier).length;
+  return currentUseCount + 1 > maximum;
+}
+
+function percent(value: number, total: number): number {
+  if (total <= 0) return 0;
+  return (value / total) * 100;
+}
+
+function svgPoint(surface: SVGSVGElement, event: PointerEvent): { x: number; y: number } {
+  const rect = surface.getBoundingClientRect();
+  const viewBox = surface.viewBox.baseVal;
+  const width = viewBox.width || 160;
+  const height = viewBox.height || 120;
+  const x = Math.round(((event.clientX - rect.left) / rect.width) * width);
+  const y = Math.round(((event.clientY - rect.top) / rect.height) * height);
+  return {
+    x: Math.max(0, Math.min(width, x)),
+    y: Math.max(0, Math.min(height, y)),
+  };
+}
+
+async function exportDrawingResponse(
+  interaction: QtiInteraction,
+  width: number,
+  height: number,
+  strokes: DrawingStroke[],
+  backgroundHref: () => string | undefined,
+): Promise<string> {
+  const href = backgroundHref();
+  const mime = drawingResponseMime(interaction.object);
+  if (mime === "image/svg+xml") {
+    return svgDrawingDataUrl(interaction, width, height, strokes, await portableImageHref(href));
+  }
+  return rasterDrawingDataUrl(interaction, width, height, strokes, href, mime);
+}
+
+function drawingResponseMime(
+  object: QtiObjectAsset | undefined,
+): "image/svg+xml" | "image/png" | "image/jpeg" | "image/webp" {
+  const candidates = [
+    object?.type,
+    object?.data,
+    ...(object?.sources.map((source) => source.type ?? source.src) ?? []),
+  ];
+  for (const candidate of candidates) {
+    const mime = imageMime(candidate);
+    if (mime) return mime;
+  }
+  return "image/svg+xml";
+}
+
+function imageMime(
+  value: string | undefined,
+): "image/svg+xml" | "image/png" | "image/jpeg" | "image/webp" | undefined {
+  if (!value) return undefined;
+  const normalized = value.toLowerCase().split(";")[0] ?? "";
+  if (normalized === "image/svg+xml") return "image/svg+xml";
+  if (normalized === "image/png") return "image/png";
+  if (normalized === "image/jpeg" || normalized === "image/jpg") return "image/jpeg";
+  if (normalized === "image/webp") return "image/webp";
+  const dataMime = value.match(/^data:([^;,]+)/i)?.[1]?.toLowerCase();
+  if (dataMime) return imageMime(dataMime);
+  if (/\.svg(?:[?#].*)?$/i.test(value)) return "image/svg+xml";
+  if (/\.png(?:[?#].*)?$/i.test(value)) return "image/png";
+  if (/\.jpe?g(?:[?#].*)?$/i.test(value)) return "image/jpeg";
+  if (/\.webp(?:[?#].*)?$/i.test(value)) return "image/webp";
+  return undefined;
+}
+
+function svgDrawingDataUrl(
+  interaction: QtiInteraction,
+  width: number,
+  height: number,
+  strokes: DrawingStroke[],
+  backgroundHref: string | undefined,
+): string {
+  const markup = svgDrawingMarkup(interaction, width, height, strokes, backgroundHref);
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+}
+
+function svgDrawingMarkup(
+  interaction: QtiInteraction,
+  width: number,
+  height: number,
+  strokes: DrawingStroke[],
+  backgroundHref: string | undefined,
+): string {
+  const strokePayload = serializeDrawingStrokes(strokes);
+  const background =
+    backgroundHref && interaction.object && objectIsImage(interaction.object)
+      ? `<image href="${xmlAttribute(backgroundHref)}" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>`
+      : "";
+  const lines = strokes
+    .map((stroke) => {
+      return `<polyline points="${xmlAttribute(serializeSvgPoints(stroke.points))}" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>`;
+    })
+    .join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"><metadata id="qti3-drawing-response" data-qti3-strokes="${xmlAttribute(encodeURIComponent(strokePayload))}"></metadata>${background}${lines}</svg>`;
+}
+
+async function rasterDrawingDataUrl(
+  interaction: QtiInteraction,
+  width: number,
+  height: number,
+  strokes: DrawingStroke[],
+  backgroundHref: string | undefined,
+  mime: "image/png" | "image/jpeg" | "image/webp",
+): Promise<string> {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) return svgDrawingDataUrl(interaction, width, height, strokes, backgroundHref);
+
+  if (mime === "image/jpeg") {
+    context.fillStyle = "#fff";
+    context.fillRect(0, 0, width, height);
+  }
+
+  if (backgroundHref && interaction.object && objectIsImage(interaction.object)) {
+    try {
+      const image = await loadCanvasImage(backgroundHref);
+      context.drawImage(image, 0, 0, width, height);
+    } catch {
+      // Export the candidate marks even when the authored background cannot be rasterized.
+    }
+  }
+
+  context.strokeStyle = "#000";
+  context.lineWidth = 3;
+  context.lineCap = "round";
+  context.lineJoin = "round";
+  for (const stroke of strokes) {
+    const [first, ...rest] = stroke.points;
+    if (!first) continue;
+    context.beginPath();
+    context.moveTo(first.x, first.y);
+    for (const point of rest) context.lineTo(point.x, point.y);
+    context.stroke();
+  }
+
+  try {
+    return canvas.toDataURL(mime);
+  } catch {
+    return svgDrawingDataUrl(interaction, width, height, strokes, backgroundHref);
+  }
+}
+
+function loadCanvasImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => resolve(image), { once: true });
+    image.addEventListener("error", () => reject(new Error(`Unable to load ${src}`)), {
+      once: true,
+    });
+    image.src = src;
+  });
+}
+
+async function portableImageHref(href: string | undefined): Promise<string | undefined> {
+  if (!href || href.startsWith("data:")) return href;
+  try {
+    const response = await fetch(href);
+    if (!response.ok) return href;
+    return await blobToDataUrl(await response.blob());
+  } catch {
+    return href;
+  }
+}
+
+function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      resolve(String(reader.result ?? ""));
+    });
+    reader.addEventListener("error", () => {
+      reject(reader.error ?? new Error("Unable to read drawing background."));
+    });
+    reader.readAsDataURL(blob);
+  });
+}
+
+function drawingBackgroundHref(interaction: QtiInteraction): string | undefined {
+  if (!interaction.object?.data || !objectIsImage(interaction.object)) return undefined;
+  return interaction.object.data;
+}
+
+function drawingImageElement(href: string, width: number, height: number): SVGImageElement {
+  const image = document.createElementNS("http://www.w3.org/2000/svg", "image");
+  image.setAttribute("href", href);
+  image.setAttribute("width", String(width));
+  image.setAttribute("height", String(height));
+  image.setAttribute("preserveAspectRatio", "xMidYMid meet");
+  image.setAttribute("aria-hidden", "true");
+  return image;
+}
+
+function currentDrawingBackgroundHref(surface: SVGSVGElement): string | undefined {
+  return surface.querySelector("image")?.getAttribute("href") ?? undefined;
+}
+
+function serializeSvgPoints(points: Array<{ x: number; y: number }>): string {
+  return points.map((point) => `${point.x},${point.y}`).join(" ");
+}
+
+function serializeDrawingStrokes(strokes: Pick<DrawingStroke, "points">[]): string {
+  return strokes.map((stroke) => serializeDrawingStroke(stroke.points)).join(" | ");
+}
+
+function serializeDrawingStroke(points: DrawingPoint[]): string {
+  return points.map((point) => `${point.x} ${point.y}`).join(" ");
+}
+
+function xmlAttribute(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function polylineElement(points: DrawingPoint[]): SVGPolylineElement {
+  const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+  line.setAttribute("points", serializeSvgPoints(points));
+  line.setAttribute("fill", "none");
+  line.setAttribute("stroke", "CanvasText");
+  line.setAttribute("stroke-width", "3");
+  line.setAttribute("stroke-linecap", "round");
+  line.setAttribute("stroke-linejoin", "round");
+  return line;
+}
+
+function portableCustomEventValue(event: Event): QtiValue | undefined {
+  if (!("detail" in event)) return undefined;
+  const detail = event.detail as { value?: QtiValue; response?: QtiValue } | QtiValue | undefined;
+  if (detail === undefined) return 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;
+  }
+  return detail as QtiValue;
+}
+
+const htmlContentElements = new Set([
+  "a",
+  "abbr",
+  "b",
+  "blockquote",
+  "br",
+  "caption",
+  "cite",
+  "code",
+  "dd",
+  "dfn",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "figcaption",
+  "figure",
+  "hr",
+  "i",
+  "img",
+  "kbd",
+  "li",
+  "ol",
+  "p",
+  "pre",
+  "q",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "tfoot",
+  "th",
+  "thead",
+  "tr",
+  "ul",
+  "var",
+]);
+
+const mathMlElements = new Set([
+  "math",
+  "maction",
+  "maligngroup",
+  "malignmark",
+  "menclose",
+  "merror",
+  "mfenced",
+  "mfrac",
+  "mglyph",
+  "mi",
+  "mlabeledtr",
+  "mlongdiv",
+  "mmultiscripts",
+  "mn",
+  "mo",
+  "mover",
+  "mpadded",
+  "mphantom",
+  "mroot",
+  "mrow",
+  "ms",
+  "mscarries",
+  "mscarry",
+  "msgroup",
+  "msline",
+  "mspace",
+  "msqrt",
+  "msrow",
+  "mstack",
+  "mstyle",
+  "msub",
+  "msubsup",
+  "msup",
+  "mtable",
+  "mtd",
+  "mtext",
+  "mtr",
+  "munder",
+  "munderover",
+  "semantics",
+]);
+
+function contentElementName(qtiName: string): string | undefined {
+  if (qtiName === "qti-content-body" || qtiName === "qti-prompt") return undefined;
+  if (htmlContentElements.has(qtiName) || mathMlElements.has(qtiName)) return qtiName;
+  if (qtiName === "object") return "object";
+  if (qtiName === "qti-rubric-block") return "section";
+  if (qtiName === "qti-template-block") return "div";
+  if (qtiName === "qti-template-inline") return "span";
+  return undefined;
+}
+
+function createContentElement(name: string): HTMLElement | MathMLElement {
+  if (mathMlElements.has(name)) {
+    return document.createElementNS("http://www.w3.org/1998/Math/MathML", name) as MathMLElement;
+  }
+  return document.createElement(name);
+}
+
+function copySafeAttributes(element: Element, attributes: Record<string, string>): void {
+  for (const [name, value] of Object.entries(attributes)) {
+    if (!isSafeContentAttribute(name, value)) continue;
+    element.setAttribute(name, value);
+  }
+}
+
+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") {
+    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-")
+  );
+}
+
+const mathMlAttributeNames = new Set([
+  "accent",
+  "accentunder",
+  "align",
+  "columnalign",
+  "display",
+  "fence",
+  "largeop",
+  "lspace",
+  "mathbackground",
+  "mathcolor",
+  "mathsize",
+  "mathvariant",
+  "movablelimits",
+  "rowalign",
+  "rspace",
+  "separator",
+  "stretchy",
+]);
+
+function isSafeUrl(value: string): boolean {
+  return (
+    value.startsWith("#") ||
+    value.startsWith("/") ||
+    value.startsWith("./") ||
+    value.startsWith("../") ||
+    value.startsWith("http://") ||
+    value.startsWith("https://") ||
+    value.startsWith("data:image/") ||
+    value.startsWith("data:audio/") ||
+    value.startsWith("data:video/")
+  );
+}
+
+function isResolvableAssetUrl(value: string): boolean {
+  return (
+    !value.startsWith("#") &&
+    !value.startsWith("data:") &&
+    !value.startsWith("blob:") &&
+    !value.startsWith("http://") &&
+    !value.startsWith("https://")
+  );
+}
+
+function formatPrintedValue(value: QtiValue, format?: string): string {
+  if (value === null || value === undefined) return "";
+  const numericValue =
+    typeof value === "number" ? value : typeof value === "string" ? Number(value) : Number.NaN;
+  if (Number.isFinite(numericValue) && format) {
+    const fixed = /^%\.(\d+)f$/.exec(format);
+    if (fixed) return numericValue.toFixed(Number(fixed[1]));
+    if (format === "%d" || format === "%i") return String(Math.trunc(numericValue));
+  }
+  if (Array.isArray(value)) return value.map((item) => String(item)).join(", ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+function contentNodeText(node: QtiContentNode): string {
+  if (node.kind === "text") return node.text;
+  if ("children" in node) return node.children.map(contentNodeText).join("");
+  return "";
+}
+
+function readableType(type: string): string {
+  return type
+    .replace(/[A-Z]/g, (letter) => ` ${letter.toLowerCase()}`)
+    .replace(/^./, (letter) => letter.toUpperCase());
+}
+
+function errorView(message: string): HTMLElement {
+  const element = document.createElement("p");
+  element.role = "alert";
+  element.textContent = message;
+  return element;
+}
+
+function validationMessageElement(responseIdentifier: string): HTMLElement {
+  const element = document.createElement("p");
+  element.id = validationMessageId(responseIdentifier);
+  element.dataset.validationFor = responseIdentifier;
+  element.hidden = true;
+  element.role = "alert";
+  return element;
+}
+
+function inlineValidationMessageElement(responseIdentifier: string): HTMLElement {
+  const element = document.createElement("span");
+  element.id = validationMessageId(responseIdentifier);
+  element.dataset.validationFor = responseIdentifier;
+  element.hidden = true;
+  element.role = "alert";
+  return element;
+}
+
+function validationMessageId(responseIdentifier: string): string {
+  return `qti3-validation-${responseIdentifier}`;
+}
+
+function cloneDiagnostics(diagnostics: QtiDiagnostic[]): QtiDiagnostic[] {
+  return diagnostics.map((diagnostic) => ({
+    ...diagnostic,
+    source: diagnostic.source ? { ...diagnostic.source } : undefined,
+  }));
+}
+
+function playerStyleElement(): HTMLStyleElement {
+  const style = document.createElement("style");
+  style.textContent = `
+    .qti3-player {
+      --qti3-match-accent: #2f6fca;
+      --qti3-match-target-bg: #f5f6f7;
+      --qti3-match-target-border: #6f7782;
+
+      display: grid;
+      gap: 1rem;
+      max-inline-size: 72rem;
+      font: 16px/1.45 system-ui, sans-serif;
+    }
+
+    @supports (color: light-dark(#000, #fff)) {
+      .qti3-player {
+        --qti3-match-accent: light-dark(#2f6fca, #8ab4f8);
+        --qti3-match-target-bg: light-dark(#f5f6f7, #202124);
+        --qti3-match-target-border: light-dark(#6f7782, #9aa0a6);
+      }
+    }
+
+    .qti3-interaction {
+      display: grid;
+      gap: 0.75rem;
+    }
+
+    .qti3-item-body {
+      display: grid;
+      gap: 1rem;
+    }
+
+    .qti3-item-body > * {
+      margin-block: 0;
+    }
+
+    .qti3-embedded-interaction {
+      display: inline-flex;
+      gap: 0.35rem;
+      margin-inline: 0.18rem;
+      align-items: baseline;
+      vertical-align: baseline;
+    }
+
+    .qti3-inline-text-input {
+      inline-size: auto;
+      min-inline-size: 8ch;
+      max-inline-size: 18ch;
+      margin-inline: 0.25rem;
+    }
+
+    .qti3-printed-variable {
+      font-weight: 700;
+    }
+
+    .qti3-feedback-block {
+      padding: 0.75rem;
+      border-inline-start: 4px solid Highlight;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .qti3-response-group {
+      min-inline-size: 0;
+    }
+
+    .qti3-response-group > * + * {
+      margin-block-start: 0.75rem;
+    }
+
+    .qti3-reorder-item,
+    .qti3-token-region,
+    .qti3-pair-chip,
+    .qti3-gap-region,
+    .qti3-gap-target {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    .qti3-reorder-list {
+      display: grid;
+      gap: 0.5rem;
+      padding-inline-start: 1.5rem;
+    }
+
+    .qti3-pair-selector {
+      display: grid;
+      gap: 0.75rem;
+      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+      align-items: start;
+    }
+
+    .qti3-match-selector {
+      display: grid;
+      gap: 1.5rem;
+      inline-size: 100%;
+      max-inline-size: 72rem;
+      box-sizing: border-box;
+    }
+
+    .qti3-match-source-bank,
+    .qti3-match-target-bank {
+      align-items: stretch;
+    }
+
+    .qti3-token.qti3-match-source {
+      border-color: var(--qti3-match-accent);
+      background: Canvas;
+      color: var(--qti3-match-accent);
+    }
+
+    .qti3-token.qti3-match-target {
+      flex: 1 1 9rem;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      min-block-size: 5rem;
+      box-sizing: border-box;
+      border-color: var(--qti3-match-target-border);
+      background: var(--qti3-match-target-bg);
+      color: CanvasText;
+      font-weight: 700;
+      white-space: normal;
+      overflow-wrap: anywhere;
+      text-align: center;
+    }
+
+    @media (forced-colors: active) {
+      .qti3-token.qti3-match-source {
+        border-color: LinkText;
+        color: LinkText;
+      }
+
+      .qti3-token.qti3-match-target {
+        border-color: GrayText;
+        background: ButtonFace;
+        color: ButtonText;
+      }
+    }
+
+    .qti3-region-label {
+      flex-basis: 100%;
+      font-size: 0.9rem;
+      font-weight: 700;
+    }
+
+    .qti3-choice-list {
+      display: grid;
+      gap: 0.5rem;
+      grid-template-columns: minmax(0, 42rem);
+    }
+
+    .qti3-choice-option {
+      display: grid;
+      grid-template-columns: auto auto minmax(0, 1fr);
+      gap: 0.65rem;
+      align-items: center;
+      justify-content: start;
+      inline-size: 100%;
+      box-sizing: border-box;
+      min-block-size: 2.75rem;
+      padding: 0.65rem 0.8rem;
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+      cursor: pointer;
+    }
+
+    .qti3-choice-option input {
+      margin: 0;
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+
+    .qti3-choice-label {
+      min-inline-size: 1.75rem;
+      font-weight: 700;
+    }
+
+    .qti3-choice-text {
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
+    }
+
+    .qti3-choice-option[data-selected="true"] {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    .qti3-hottext-group {
+      max-inline-size: 58rem;
+    }
+
+    .qti3-hottext-passage {
+      margin-block: 0;
+      font-size: 1.05rem;
+      line-height: 1.75;
+    }
+
+    .qti3-hottext-token {
+      display: inline;
+      margin-inline: 0.1rem;
+      padding: 0.12rem 0.28rem;
+      border: 1px solid CanvasText;
+      border-radius: 0.2rem;
+      background: Canvas;
+      color: LinkText;
+      font: inherit;
+      text-decoration: underline;
+      text-decoration-thickness: 0.08em;
+      text-underline-offset: 0.16em;
+      cursor: pointer;
+    }
+
+    .qti3-hottext-token[data-selected="true"] {
+      background: Highlight;
+      color: HighlightText;
+      text-decoration-color: HighlightText;
+    }
+
+    .qti3-reorder-item {
+      padding: 0.5rem;
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .qti3-drop-target {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .qti3-token,
+    .qti3-icon-button,
+    .qti3-player button,
+    .qti3-player select,
+    .qti3-player input,
+    .qti3-player textarea {
+      font: inherit;
+    }
+
+    .qti3-token {
+      min-inline-size: 2.5rem;
+      padding: 0.35rem 0.65rem;
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+      cursor: grab;
+    }
+
+    .qti3-icon-button {
+      display: inline-grid;
+      place-items: center;
+      inline-size: 2.25rem;
+      block-size: 2.25rem;
+      padding: 0;
+      line-height: 1;
+    }
+
+    .qti3-token[aria-pressed="true"],
+    .qti3-pair-chip {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    .qti3-pair-list {
+      display: grid;
+      gap: 0.5rem;
+      padding-inline-start: 1.5rem;
+    }
+
+    .qti3-pair-chip {
+      width: fit-content;
+      padding: 0.35rem 0.5rem;
+    }
+
+    .qti3-gap-target {
+      min-block-size: 2.75rem;
+      padding: 0.5rem;
+      border: 1px dashed CanvasText;
+    }
+
+    .qti3-gap-region {
+      margin-block-start: 0.5rem;
+    }
+
+    .qti3-gap-passage {
+      display: block;
+      max-inline-size: 62rem;
+      line-height: 2.3;
+    }
+
+    .qti3-gap-passage .qti3-gap-target {
+      display: inline-flex;
+      padding: 0;
+      border: 0;
+      margin-inline: 0.15rem;
+      margin-block: 0.2rem;
+      vertical-align: middle;
+    }
+
+    .qti3-gap-button {
+      min-inline-size: 8rem;
+      min-block-size: 2.25rem;
+      text-align: start;
+    }
+
+    .qti3-text-response,
+    .qti3-slider-response {
+      display: grid;
+      gap: 0.4rem;
+      max-inline-size: 42rem;
+    }
+
+    .qti3-text-input,
+    .qti3-textarea {
+      inline-size: 100%;
+      box-sizing: border-box;
+      padding: 0.55rem 0.65rem;
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .qti3-textarea {
+      min-block-size: 8rem;
+      resize: vertical;
+    }
+
+    .qti3-counter,
+    .qti3-slider-output {
+      margin: 0;
+      font-size: 0.9rem;
+    }
+
+    .qti3-slider-response {
+      grid-template-columns: minmax(8rem, 1fr) auto;
+      align-items: center;
+    }
+
+    .qti3-point-controls,
+    .qti3-drawing-tools {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-block-start: 0.5rem;
+    }
+
+    .qti3-coordinate-output {
+      display: block;
+      margin-block-start: 0.4rem;
+      font-size: 0.9rem;
+    }
+
+    .qti3-hotspot-button[data-selected="true"] {
+      background: Highlight !important;
+      color: HighlightText !important;
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .qti3-hotspot-button {
+      display: grid;
+      place-items: start;
+      padding: 0.25rem;
+      border: 2px solid CanvasText;
+      background: color-mix(in srgb, Canvas 65%, transparent);
+      color: CanvasText;
+      font-size: 0.8rem;
+      font-weight: 700;
+      line-height: 1;
+      cursor: pointer;
+    }
+
+    .qti3-hotspot.qti-selections-light .qti3-hotspot-button {
+      border-color: white;
+      color: white;
+      background: rgb(0 0 0 / 0.45);
+    }
+
+    .qti3-hotspot.qti-selections-dark .qti3-hotspot-button {
+      border-color: black;
+      color: black;
+      background: rgb(255 255 255 / 0.65);
+    }
+
+    .qti3-hotspot.qti-unselected-hidden
+      .qti3-hotspot-button:not([data-selected="true"]):not(:focus):not(:focus-visible) {
+      opacity: 0;
+    }
+
+    @supports not (background: color-mix(in srgb, Canvas 65%, transparent)) {
+      .qti3-hotspot-button {
+        background: Canvas;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .qti3-hotspot.qti-selections-light .qti3-hotspot-button,
+      .qti3-hotspot.qti-selections-dark .qti3-hotspot-button {
+        border-color: CanvasText;
+        color: CanvasText;
+        background: Canvas;
+      }
+    }
+
+    .qti3-graphic-associate-surface,
+    .qti3-graphic-order-surface {
+      touch-action: manipulation;
+    }
+
+    .qti3-graphic-associate-lines,
+    .qti3-graphic-sequence-lines {
+      position: absolute;
+      inset: 0;
+      inline-size: 100%;
+      block-size: 100%;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    .qti3-graphic-associate-lines line,
+    .qti3-graphic-sequence-lines line {
+      stroke: Highlight;
+      stroke-width: 4;
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+
+    .qti3-graphic-sequence-lines marker path {
+      fill: Highlight;
+    }
+
+    .qti3-graphic-associate-hotspot,
+    .qti3-graphic-order-hotspot {
+      z-index: 2;
+    }
+
+    .qti3-graphic-order-hotspot {
+      display: grid;
+      place-items: center;
+      gap: 0.15rem;
+      text-align: center;
+    }
+
+    .qti3-graphic-order-number {
+      display: grid;
+      place-items: center;
+      min-inline-size: 1.45rem;
+      min-block-size: 1.45rem;
+      border-radius: 999px;
+      background: Highlight;
+      color: HighlightText;
+      font-weight: 700;
+    }
+
+    .qti3-graphic-order-number:empty {
+      display: none;
+    }
+
+    .qti3-graphic-order-list {
+      display: grid;
+      gap: 0.5rem;
+      padding-inline-start: 1.5rem;
+      margin-block: 0.5rem 0;
+    }
+
+    .qti3-graphic-order-item {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.4rem;
+      align-items: center;
+    }
+
+    .qti3-selection-summary {
+      margin: 0;
+    }
+
+    .qti3-token:focus,
+    .qti3-hotspot-button:focus,
+    .qti3-player button:focus-visible,
+    .qti3-player select:focus-visible,
+    .qti3-player input:focus-visible,
+    .qti3-player textarea:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .qti3-player * {
+        scroll-behavior: auto;
+      }
+    }
+  `;
+  return style;
+}
+
+function responseIsEmpty(value: QtiValue): boolean {
+  return value === null || value === "" || (Array.isArray(value) && value.length === 0);
+}
+
+function responseCount(value: QtiValue): number {
+  return responseIsEmpty(value) ? 0 : Array.isArray(value) ? value.length : 1;
+}
+
+function maximumAllowedResponses(interaction: QtiInteraction | undefined): number | undefined {
+  if (!interaction) return undefined;
+  if (interaction.type === "media") return maximumMediaPlays(interaction);
+  const explicit =
+    interaction.attributes["max-choices"] ?? interaction.attributes["max-associations"];
+  if (explicit === undefined) return undefined;
+  const parsed = Number(explicit);
+  if (!Number.isInteger(parsed) || parsed <= 0) return undefined;
+  return parsed;
+}
+
+function minimumRequiredResponses(interaction: QtiInteraction | undefined): number {
+  if (!interaction) return 1;
+  if (interaction.type === "media") return minimumMediaPlays(interaction);
+  const explicit =
+    interaction.attributes["min-choices"] ?? interaction.attributes["min-associations"];
+  if (explicit === undefined) return 1;
+  const parsed = Number(explicit);
+  return Number.isInteger(parsed) && parsed >= 0 ? parsed : 1;
+}
+
+function minimumMediaPlays(interaction: QtiInteraction): number {
+  const parsed = Number(interaction.attributes["min-plays"] ?? "0");
+  return Number.isInteger(parsed) && parsed >= 0 ? parsed : 0;
+}
+
+function maximumMediaPlays(interaction: QtiInteraction): number | undefined {
+  const parsed = Number(interaction.attributes["max-plays"] ?? "0");
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;
+}
+
+function mediaPlayCount(value: QtiValue): number {
+  const parsed = typeof value === "number" ? value : typeof value === "string" ? Number(value) : 0;
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : 0;
+}
+
+function parseBooleanAttribute(value: string | undefined): boolean | undefined {
+  if (value === "true" || value === "1") return true;
+  if (value === "false" || value === "0") return false;
+  return undefined;
+}
+
+function matchMaxDiagnostics(
+  responseIdentifier: string,
+  interaction: QtiInteraction,
+  response: QtiValue,
+): QtiDiagnostic[] {
+  const identifiers = responseChoiceIdentifiers(response);
+  if (identifiers.length === 0) return [];
+  const counts = new Map<string, number>();
+  for (const identifier of identifiers) {
+    counts.set(identifier, (counts.get(identifier) ?? 0) + 1);
+  }
+
+  const diagnostics: QtiDiagnostic[] = [];
+  for (const choice of interaction.choices) {
+    const maximum = parseUnlimitedMaximum(choice.attributes["match-max"]);
+    if (maximum === undefined) continue;
+    const count = counts.get(choice.identifier) ?? 0;
+    if (count <= maximum) continue;
+    diagnostics.push({
+      code: "response.matchMax",
+      severity: "error",
+      message: `${choice.text || choice.identifier} may be used at most ${maximum} time${maximum === 1 ? "" : "s"}.`,
+      path: responseIdentifier,
+    });
+  }
+  return diagnostics;
+}
+
+function responseChoiceIdentifiers(response: QtiValue): string[] {
+  const values = Array.isArray(response) ? response : response === null ? [] : [response];
+  return values.flatMap((value) => String(value).split(/\s+/).filter(Boolean));
+}
+
+function parseUnlimitedMaximum(value: string | undefined): number | undefined {
+  if (value === undefined) return undefined;
+  const parsed = Number(value);
+  if (!Number.isInteger(parsed) || parsed <= 0) return undefined;
+  return parsed;
+}
+
+async function defaultFetchXml(url: string): Promise<string> {
+  if (!globalThis.fetch) {
+    throw new Error("No fetch implementation is available. Provide loadUrl(url, { fetchXml }).");
+  }
+  const response = await globalThis.fetch(url);
+  if (!response.ok) throw new Error(`Failed to load QTI XML from ${url}: ${response.status}.`);
+  return response.text();
+}