@longsightgroup/qti3-player 0.2.1 → 0.3.0

package/src/interactions/gap-match-interaction.ts

@@ -0,0 +1,337 @@
+import type { QtiChoice, QtiInteraction, QtiValue } from "@longsightgroup/qti3-core";
+import {
+  applyGraphicSurfaceLayout,
+  appendGraphicObjectImage,
+  missingChoicesMessage,
+  objectHeight,
+  objectWidth,
+  placeHotspotButton,
+  readableType,
+  responseGroup,
+  valueToStrings,
+} from "../interaction-support.js";
+import { parseUnlimitedMaximum } from "../response-limits.js";
+import { appendGraphicContext } from "./graphic-context.js";
+import { appendInlineControl, normalizeInlineSegmentText } from "./inline-controls.js";
+import { sourceChoices, targetChoices, tokenButton, tokenRegion } from "./shared.js";
+
+function positivePixelValue(value: string | undefined): number | undefined {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
+}
+
+function graphicGapLabelBlockSize(sources: QtiChoice[]): number {
+  const maxLength = Math.max(
+    0,
+    ...sources.map((source) => (source.text || source.identifier).trim().length),
+  );
+  const estimatedLines = Math.max(1, Math.ceil(maxLength / 22));
+  return Number((estimatedLines * 0.95 + 0.9).toFixed(2));
+}
+
+export function renderGapMatchResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  if (
+    interaction.type === "graphicGapMatch" &&
+    interaction.object &&
+    interaction.choices.some((choice) => choice.role === "hotspot")
+  ) {
+    return renderGraphicGapMatchResponse(interaction, update, currentValue);
+  }
+
+  const group = responseGroup();
+  appendGraphicContext(group, interaction);
+  const sources = sourceChoices(interaction);
+  const gaps = targetChoices(interaction);
+  if (sources.length === 0 || gaps.length === 0) {
+    group.append(missingChoicesMessage(interaction));
+    return group;
+  }
+  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 renderGraphicGapMatchResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+): HTMLElement {
+  const group = responseGroup();
+  const width = objectWidth(interaction);
+  const height = objectHeight(interaction);
+  const sources = sourceChoices(interaction);
+  const gaps = targetChoices(interaction).filter((choice) => choice.role === "hotspot");
+  if (sources.length === 0 || gaps.length === 0) {
+    group.append(missingChoicesMessage(interaction));
+    return group;
+  }
+  const assignments = new Map<string, QtiChoice>();
+  let selectedSource: QtiChoice | undefined;
+  let draggedSource: string | undefined;
+
+  for (const pair of valueToStrings(currentValue)) {
+    const [sourceIdentifier, gapIdentifier] = pair.split(/\s+/);
+    const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+    if (source && gapIdentifier) assignments.set(gapIdentifier, source);
+  }
+
+  const surface = document.createElement("div");
+  applyGraphicSurfaceLayout(
+    surface,
+    width,
+    height,
+    "qti3-graphic-context",
+    "qti3-graphic-gap-match-surface",
+  );
+  surface.role = "group";
+  surface.setAttribute("aria-label", `${readableType(interaction.type)} target image`);
+  surface.style.overflow = "visible";
+  surface.style.setProperty(
+    "--qti3-graphic-gap-label-block-size",
+    `${graphicGapLabelBlockSize(sources)}rem`,
+  );
+
+  if (interaction.object) {
+    appendGraphicObjectImage(
+      surface,
+      interaction.object,
+      interaction.object.text || `${readableType(interaction.type)} image`,
+    );
+  }
+
+  const sourceRegion = tokenRegion(`${readableType(interaction.type)} choices`);
+  sourceRegion.classList.add("qti3-graphic-gap-source-region");
+  const choicesWidth = positivePixelValue(interaction.attributes["data-choices-container-width"]);
+  if (choicesWidth !== undefined) sourceRegion.style.maxInlineSize = `${choicesWidth}px`;
+
+  const summary = document.createElement("p");
+  summary.className = "qti3-selection-summary";
+  summary.setAttribute("aria-live", "polite");
+
+  const commit = () => {
+    update(
+      [...assignments.entries()].map(
+        ([gapIdentifier, source]) => `${source.identifier} ${gapIdentifier}`,
+      ),
+    );
+  };
+  const syncSources = () => {
+    for (const button of sourceRegion.querySelectorAll<HTMLButtonElement>("button")) {
+      button.setAttribute(
+        "aria-pressed",
+        button.dataset.choiceIdentifier === selectedSource?.identifier ? "true" : "false",
+      );
+    }
+  };
+  const clearSourceIfSingleUse = (source: QtiChoice, keepGapIdentifier: string) => {
+    if (parseUnlimitedMaximum(source.attributes["match-max"]) !== 1) return;
+    for (const [gapIdentifier, assigned] of assignments.entries()) {
+      if (gapIdentifier !== keepGapIdentifier && assigned.identifier === source.identifier) {
+        assignments.delete(gapIdentifier);
+      }
+    }
+  };
+  const assign = (gap: QtiChoice, sourceIdentifier: string | undefined) => {
+    const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+    if (!source) return;
+    clearSourceIfSingleUse(source, gap.identifier);
+    assignments.set(gap.identifier, source);
+    selectedSource = undefined;
+    syncSources();
+    renderTargets();
+    commit();
+  };
+  const targetLabel = (gap: QtiChoice, index: number) =>
+    gap.attributes["aria-label"] || gap.attributes["hotspot-label"] || `Target ${index + 1}`;
+  const renderTargetButton = (gap: QtiChoice, index: number): HTMLButtonElement => {
+    const assigned = assignments.get(gap.identifier);
+    const label = targetLabel(gap, index);
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "qti3-hotspot-button qti3-graphic-gap-hotspot";
+    button.dataset.gapIdentifier = gap.identifier;
+    button.dataset.selected = assigned ? "true" : "false";
+    button.setAttribute(
+      "aria-label",
+      assigned ? `${label}, assigned ${assigned.text}` : `${label}, empty`,
+    );
+    button.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      button.classList.add("qti3-drop-target");
+    });
+    button.addEventListener("dragleave", () => button.classList.remove("qti3-drop-target"));
+    button.addEventListener("drop", (event) => {
+      event.preventDefault();
+      button.classList.remove("qti3-drop-target");
+      assign(gap, event.dataTransfer?.getData("text/plain") || draggedSource);
+    });
+    button.addEventListener("click", () => assign(gap, selectedSource?.identifier));
+    button.addEventListener("keydown", (event) => {
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      if (!assignments.has(gap.identifier)) return;
+      event.preventDefault();
+      assignments.delete(gap.identifier);
+      renderTargets();
+      commit();
+    });
+    placeHotspotButton(button, gap, width, height);
+    if (assigned) {
+      const assignedLabel = document.createElement("span");
+      assignedLabel.className = "qti3-graphic-gap-label";
+      assignedLabel.textContent = assigned.text;
+      button.append(assignedLabel);
+    }
+    return button;
+  };
+  const renderTargets = () => {
+    surface.querySelectorAll(".qti3-graphic-gap-hotspot").forEach((target) => target.remove());
+    for (const [index, gap] of gaps.entries()) {
+      surface.append(renderTargetButton(gap, index));
+    }
+    summary.textContent =
+      assignments.size > 0
+        ? `${assignments.size} ${assignments.size === 1 ? "label" : "labels"} placed.`
+        : "No labels placed.";
+  };
+
+  for (const source of sources) {
+    const button = tokenButton(source);
+    button.draggable = true;
+    button.addEventListener("dragstart", (event) => {
+      draggedSource = source.identifier;
+      event.dataTransfer?.setData("text/plain", source.identifier);
+      event.dataTransfer?.setDragImage(button, 8, 8);
+    });
+    button.addEventListener("dragend", () => {
+      draggedSource = undefined;
+      syncSources();
+    });
+    button.addEventListener("click", () => {
+      selectedSource = source;
+      syncSources();
+    });
+    sourceRegion.append(button);
+  }
+
+  renderTargets();
+  group.append(surface, sourceRegion, summary);
+  return group;
+}

package/src/interactions/graphic-associate-interaction.ts

@@ -0,0 +1,324 @@
+import type { QtiChoice, QtiInteraction, QtiValue } from "@longsightgroup/qti3-core";
+import { removeButton } from "../controls/remove-button.js";
+import {
+  applyGraphicSurfaceLayout,
+  appendGraphicObjectImage,
+  interactionChoices,
+  missingChoicesMessage,
+  hotspotAccessibleLabel,
+  hotspotCenter,
+  hotspotDisplayLabel,
+  objectHeight,
+  objectWidth,
+  placeHotspotButton,
+  readableType,
+  responseGroup,
+  valueToStrings,
+} from "../interaction-support.js";
+import type { QtiPlayerMessages } from "../player-messages.js";
+import { exceedsHotspotMatchMax, maximumAllowedResponses } from "../response-limits.js";
+
+export function renderGraphicAssociateResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+  messages: QtiPlayerMessages,
+): HTMLElement {
+  const group = responseGroup();
+
+  const width = objectWidth(interaction);
+  const height = objectHeight(interaction);
+  const choices = interactionChoices(interaction).filter((choice) => choice.role === "hotspot");
+  if (choices.length === 0) {
+    group.append(missingChoicesMessage(interaction));
+    return group;
+  }
+  const selectedPairs = valueToStrings(currentValue);
+  const maximumAssociations =
+    interaction.responseCardinality === "single" ? 1 : maximumAllowedResponses(interaction);
+  let selectedHotspot: QtiChoice | undefined;
+  let draggedHotspot: QtiChoice | undefined;
+  let dragPointerId: number | undefined;
+  let dragStart: { x: number; y: number } | undefined;
+  let dragStarted = false;
+  let suppressNextClick = false;
+  let previewLine: SVGLineElement | undefined;
+
+  const surface = document.createElement("div");
+  applyGraphicSurfaceLayout(surface, width, height, "qti3-graphic-associate-surface");
+  surface.role = "group";
+  surface.setAttribute("aria-label", `${readableType(interaction.type)} hotspots`);
+
+  const object = interaction.object;
+  if (object) {
+    appendGraphicObjectImage(
+      surface,
+      object,
+      object.text || `${readableType(interaction.type)} 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 authoredPointFromPointer = (event: PointerEvent) => {
+    const rect = surface.getBoundingClientRect();
+    return {
+      x: Math.max(0, Math.min(width, ((event.clientX - rect.left) / rect.width) * width)),
+      y: Math.max(0, Math.min(height, ((event.clientY - rect.top) / rect.height) * height)),
+    };
+  };
+  const removePreviewLine = () => {
+    previewLine?.remove();
+    previewLine = undefined;
+  };
+  const suppressFollowingClick = () => {
+    suppressNextClick = true;
+    setTimeout(() => {
+      suppressNextClick = false;
+    }, 0);
+  };
+  const updatePreviewLine = (source: QtiChoice, event: PointerEvent) => {
+    const start = hotspotCenter(source, width, height);
+    const end = authoredPointFromPointer(event);
+    if (!previewLine) {
+      previewLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      previewLine.dataset.preview = "true";
+      connections.append(previewLine);
+    }
+    previewLine.setAttribute("x1", String(start.x));
+    previewLine.setAttribute("y1", String(start.y));
+    previewLine.setAttribute("x2", String(end.x));
+    previewLine.setAttribute("y2", String(end.y));
+  };
+  const hotspotFromPointer = (event: PointerEvent) => {
+    const element = document.elementFromPoint(event.clientX, event.clientY);
+    const button = element?.closest<HTMLButtonElement>(".qti3-graphic-associate-hotspot");
+    const identifier = button?.dataset.choiceIdentifier;
+    return choices.find((choice) => choice.identifier === identifier);
+  };
+  const finishDrag = (event: PointerEvent, source: QtiChoice) => {
+    const target = hotspotFromPointer(event);
+    removePreviewLine();
+    if (target) {
+      addPair(source, target);
+      return;
+    }
+    selectedHotspot = undefined;
+    renderState();
+  };
+  const chooseHotspot = (choice: QtiChoice) => {
+    if (!selectedHotspot) {
+      selectedHotspot = choice;
+      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
+      ? messages.hotspotSelectedChooseAnother({
+          label: hotspotDisplayLabel(selectedHotspot, choices),
+        })
+      : selectedPairs.length > 0
+        ? messages.associationsMade({ count: selectedPairs.length })
+        : messages.noAssociationsMade();
+    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 = messages.associationPairLabel({
+          source: sourceChoice ? hotspotDisplayLabel(sourceChoice, choices) : source,
+          target: 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 = removeButton(pairLabel, messages);
+        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));
+    placeHotspotButton(button, choice, width, height);
+    button.addEventListener("click", (event) => {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        event.preventDefault();
+        return;
+      }
+      chooseHotspot(choice);
+    });
+    button.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
+      draggedHotspot = choice;
+      dragPointerId = event.pointerId;
+      dragStart = { x: event.clientX, y: event.clientY };
+      dragStarted = false;
+      button.setPointerCapture(event.pointerId);
+    });
+    button.addEventListener("pointermove", (event) => {
+      if (dragPointerId !== event.pointerId || !draggedHotspot || !dragStart) return;
+      const moved = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
+      if (!dragStarted && moved < 4) return;
+      if (!dragStarted) {
+        dragStarted = true;
+        suppressFollowingClick();
+        selectedHotspot = draggedHotspot;
+        renderState();
+      }
+      updatePreviewLine(draggedHotspot, event);
+      event.preventDefault();
+    });
+    button.addEventListener("pointerup", (event) => {
+      if (dragPointerId !== event.pointerId || !draggedHotspot) return;
+      const source = draggedHotspot;
+      draggedHotspot = undefined;
+      dragPointerId = undefined;
+      dragStart = undefined;
+      button.releasePointerCapture(event.pointerId);
+      if (!dragStarted) return;
+      dragStarted = false;
+      suppressFollowingClick();
+      finishDrag(event, source);
+      event.preventDefault();
+    });
+    button.addEventListener("pointercancel", (event) => {
+      if (dragPointerId !== event.pointerId) return;
+      draggedHotspot = undefined;
+      dragPointerId = undefined;
+      dragStart = undefined;
+      dragStarted = false;
+      removePreviewLine();
+      selectedHotspot = undefined;
+      renderState();
+    });
+    button.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        event.preventDefault();
+        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;
+}

package/src/interactions/graphic-context.ts

@@ -0,0 +1,33 @@
+import type { QtiInteraction } from "@longsightgroup/qti3-core";
+import { objectIsImage } from "../interaction-support.js";
+
+export 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";
+  const object = interaction.object;
+  const label = interaction.prompt ?? object.text ?? "Graphic interaction";
+
+  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);
+    context.append(image);
+  } else {
+    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;
+      context.append(link);
+    } else {
+      context.textContent = label;
+    }
+  }
+
+  group.append(context);
+}