@longsightgroup/qti3-player 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { assertQtiAttemptStateV1, createItemSession, parseQtiXml, visibleModalFeedback, } from "@longsightgroup/qti3-core";
+import { assertQtiAttemptStateV1, createItemSession, createCatalogSupportResolution, createTextToSpeechTraversal, parseQtiXml, visibleModalFeedback, } from "@longsightgroup/qti3-core";
 const HTMLElementBase = globalThis.HTMLElement ??
     class {
         replaceChildren() { }
@@ -129,6 +129,16 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             state.validationMessages = cloneDiagnostics(this.validationMessages);
         return state;
     }
+    getTextToSpeechTraversal() {
+        if (!this.documentModel)
+            return undefined;
+        return createTextToSpeechTraversal(this.documentModel);
+    }
+    getCatalogSupportResolution(options = {}) {
+        if (!this.documentModel)
+            return undefined;
+        return createCatalogSupportResolution(this.documentModel, options);
+    }
     emitStateChange(state = this.serialize()) {
         if (!state)
             return;
@@ -144,6 +154,10 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         this.applyDefaultStyles();
         const root = document.createElement("article");
         root.className = "qti3-player";
+        if (documentModel.item.language) {
+            root.lang = documentModel.item.language;
+            root.setAttribute("xml:lang", documentModel.item.language);
+        }
         root.append(playerStyleElement());
         if (documentModel.item.prompt && documentModel.item.body.length === 0) {
             const prompt = document.createElement("p");
@@ -162,14 +176,6 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                 root.append(this.renderInteraction(interaction));
             }
         }
-        const actions = document.createElement("div");
-        actions.className = "qti3-actions";
-        const score = document.createElement("button");
-        score.type = "button";
-        score.textContent = "Score";
-        score.addEventListener("click", () => this.scoreAttempt());
-        actions.append(score);
-        root.append(actions);
         const feedback = document.createElement("section");
         feedback.className = "qti3-feedback";
         feedback.role = "status";
@@ -187,6 +193,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         if (interaction.responseIdentifier)
             field.dataset.responseIdentifier = interaction.responseIdentifier;
         const heading = document.createElement("h3");
+        copySafeAttributes(heading, interaction.promptAttributes ?? {});
         heading.textContent = interactionLabel(interaction);
         field.append(heading);
         if (interaction.responseIdentifier) {
@@ -200,9 +207,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                 return;
             this.session.respond(responseIdentifier, value);
             this.clearValidationMessage(responseIdentifier);
-            this.dispatchEvent(new CustomEvent("qti-responsechange", {
-                detail: { responseIdentifier, value },
-            }));
+            this.dispatchPlayerEvent("qti-responsechange", { responseIdentifier, value });
             this.emitStateChange();
         };
         const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
@@ -263,7 +268,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             return field;
         }
         if (interaction.type === "portableCustom") {
-            field.append(renderPortableCustomResponse(interaction, update, currentValue));
+            field.append(this.renderPortableCustomResponse(interaction, update, currentValue));
             return field;
         }
         if (interaction.type === "textEntry") {
@@ -295,12 +300,97 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             return field;
         }
         if (interaction.type === "media") {
-            field.append(renderObjectAsset(interaction));
+            field.append(renderObjectAsset(interaction, {
+                currentValue,
+                update,
+                isCompleted: () => this.attemptIsCompleted(),
+            }));
             return field;
         }
         field.append(renderSelect(interaction, update, currentValue));
         return field;
     }
+    renderPortableCustomResponse(interaction, update, currentValue) {
+        const definition = interaction.portableCustom ?? portableCustomDefinitionFromAttributes(interaction);
+        const responseIdentifier = interaction.responseIdentifier ?? definition.responseIdentifier ?? "";
+        const currentState = responseIdentifier
+            ? this.currentInteractionState(responseIdentifier)
+            : undefined;
+        const group = document.createElement("div");
+        group.role = "group";
+        group.setAttribute("aria-label", interaction.prompt ?? "Portable custom interaction");
+        const host = document.createElement("div");
+        host.className = "qti3-portable-custom-host";
+        host.tabIndex = 0;
+        host.dataset.responseIdentifier = responseIdentifier;
+        host.dataset.typeIdentifier = definition.customInteractionTypeIdentifier ?? "";
+        host.dataset.module = definition.module ?? "";
+        host.dataset.qtiName = interaction.qtiName;
+        if (definition.interactionModules?.primaryConfiguration) {
+            host.dataset.primaryConfiguration = definition.interactionModules.primaryConfiguration;
+        }
+        if (definition.interactionModules?.secondaryConfiguration) {
+            host.dataset.secondaryConfiguration = definition.interactionModules.secondaryConfiguration;
+        }
+        if (currentState !== undefined)
+            host.dataset.state = JSON.stringify(currentState);
+        host.setAttribute("role", "application");
+        host.setAttribute("aria-label", interaction.prompt ?? "Portable custom interaction host");
+        host.style.border = "1px solid CanvasText";
+        host.style.padding = "0.5rem";
+        host.style.marginBlockEnd = "0.5rem";
+        if (definition.interactionMarkup.length > 0) {
+            const markup = document.createElement("div");
+            markup.className = "qti3-portable-custom-markup";
+            markup.append(...this.renderContentNodes(definition.interactionMarkup));
+            host.append(markup);
+        }
+        else {
+            host.textContent = "Portable custom interaction host";
+        }
+        const fallback = document.createElement("input");
+        fallback.type = "hidden";
+        fallback.className = "qti3-portable-custom-response";
+        fallback.hidden = true;
+        fallback.tabIndex = -1;
+        fallback.setAttribute("aria-hidden", "true");
+        fallback.value = scalarString(currentValue);
+        const handlePortableCustomEvent = (event) => {
+            const state = portableCustomEventState(event);
+            const value = portableCustomEventValue(event);
+            const validity = portableCustomEventValidity(event);
+            if (state !== undefined && responseIdentifier && this.session) {
+                this.session.setInteractionState(responseIdentifier, state);
+                host.dataset.state = JSON.stringify(state);
+            }
+            if (value !== undefined) {
+                fallback.value = String(value ?? "");
+                update(value);
+            }
+            if (validity && responseIdentifier) {
+                this.setPortableCustomValidity(responseIdentifier, validity.valid, validity.message);
+                this.emitStateChange();
+            }
+            if (value === undefined && state !== undefined && !validity)
+                this.emitStateChange();
+        };
+        host.addEventListener("qti3-portable-custom-response", handlePortableCustomEvent);
+        host.addEventListener("qti3-pci-response", handlePortableCustomEvent);
+        host.addEventListener("qti3-portable-custom-state", handlePortableCustomEvent);
+        host.addEventListener("qti3-portable-custom-validity", handlePortableCustomEvent);
+        queueMicrotask(() => {
+            this.dispatchPlayerEvent("qti-portable-custom-mount", {
+                responseIdentifier,
+                interaction,
+                definition,
+                host,
+                value: currentValue,
+                state: currentState,
+            });
+        });
+        group.append(host, fallback);
+        return group;
+    }
     renderEmbeddedInteraction(interaction) {
         if (interaction.type !== "inlineChoice" && interaction.type !== "textEntry") {
             return this.renderInteraction(interaction);
@@ -318,9 +408,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                 return;
             this.session.respond(responseIdentifier, value);
             this.clearValidationMessage(responseIdentifier);
-            this.dispatchEvent(new CustomEvent("qti-responsechange", {
-                detail: { responseIdentifier, value },
-            }));
+            this.dispatchPlayerEvent("qti-responsechange", { responseIdentifier, value });
             this.emitStateChange();
         };
         const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
@@ -354,10 +442,13 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         }
         if (node.qtiName === "qti-prompt") {
             const prompt = document.createElement("p");
-            prompt.className = "qti3-item-prompt";
+            copySafeAttributes(prompt, node.attributes);
+            prompt.classList.add("qti3-item-prompt");
             prompt.append(...this.renderContentNodes(node.children));
             return [prompt];
         }
+        if (unsafeContentElements.has(node.qtiName))
+            return [];
         const elementName = contentElementName(node.qtiName);
         if (!elementName)
             return this.renderContentNodes(node.children);
@@ -432,7 +523,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         const article = this.querySelector(".qti3-player");
         if (article)
             article.dataset.status = this.dataset.status;
-        for (const control of this.querySelectorAll(".qti3-interaction button, .qti3-interaction input, .qti3-interaction select, .qti3-interaction textarea, .qti3-actions button")) {
+        for (const control of this.querySelectorAll(".qti3-interaction button, .qti3-interaction input, .qti3-interaction select, .qti3-interaction textarea")) {
             control.disabled = completed;
         }
         for (const element of this.querySelectorAll(".qti3-interaction [tabindex]:not(button):not(input):not(select):not(textarea)")) {
@@ -497,6 +588,26 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     currentResponseValue(identifier) {
         return this.session?.serialize().responses[identifier] ?? null;
     }
+    currentInteractionState(identifier) {
+        return this.session?.serialize().interactionStates?.[identifier];
+    }
+    setPortableCustomValidity(responseIdentifier, valid, message) {
+        if (valid) {
+            this.clearValidationMessage(responseIdentifier);
+            return;
+        }
+        const diagnostic = {
+            code: "response.portableCustom.validity",
+            severity: "error",
+            message: message?.trim() || `${responseIdentifier} is not valid.`,
+            path: responseIdentifier,
+        };
+        this.validationMessages = [
+            ...this.validationMessages.filter((entry) => entry.path !== responseIdentifier),
+            diagnostic,
+        ];
+        this.renderValidationMessages();
+    }
     applyDefaultStyles() {
         this.style.color = "CanvasText";
         this.style.backgroundColor = "Canvas";
@@ -523,20 +634,24 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             .map((interaction) => [interaction.responseIdentifier, interaction]));
         const diagnostics = [];
         for (const declaration of this.documentModel.item.responseDeclarations) {
-            if (declaration.correctResponse === null)
-                continue;
             const interaction = interactionsByResponse.get(declaration.identifier);
+            if (declaration.correctResponse === null && interaction?.type !== "media")
+                continue;
             const minimum = minimumRequiredResponses(interaction);
-            const count = responseCount(state.responses[declaration.identifier] ?? null);
+            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"] ??
-                        (minimum === 1
-                            ? `${declaration.identifier} requires a response.`
-                            : `${declaration.identifier} requires at least ${minimum} responses.`),
+                        (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,
                 });
             }
@@ -545,7 +660,9 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                     code: "response.maximum",
                     severity: "error",
                     message: interaction?.attributes["data-max-selections-message"] ??
-                        `${declaration.identifier} allows at most ${maximum} response${maximum === 1 ? "" : "s"}.`,
+                        (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,
                 });
             }
@@ -1409,6 +1526,12 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
     const selectedPairs = valueToStrings(currentValue);
     const maximumAssociations = interaction.responseCardinality === "single" ? 1 : maximumAllowedResponses(interaction);
     let selectedHotspot;
+    let draggedHotspot;
+    let dragPointerId;
+    let dragStart;
+    let dragStarted = false;
+    let suppressNextClick = false;
+    let previewLine;
     const surface = document.createElement("div");
     surface.className = "qti3-graphic-associate-surface";
     surface.role = "group";
@@ -1498,6 +1621,52 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
         renderState();
         commit();
     };
+    const authoredPointFromPointer = (event) => {
+        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, event) => {
+        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) => {
+        const element = document.elementFromPoint(event.clientX, event.clientY);
+        const button = element?.closest(".qti3-graphic-associate-hotspot");
+        const identifier = button?.dataset.choiceIdentifier;
+        return choices.find((choice) => choice.identifier === identifier);
+    };
+    const finishDrag = (event, source) => {
+        const target = hotspotFromPointer(event);
+        removePreviewLine();
+        if (target) {
+            addPair(source, target);
+            return;
+        }
+        selectedHotspot = undefined;
+        renderState();
+    };
     const chooseHotspot = (choice) => {
         if (!selectedHotspot) {
             selectedHotspot = choice;
@@ -1571,8 +1740,66 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
         button.setAttribute("aria-pressed", "false");
         button.setAttribute("aria-label", hotspotAccessibleLabel(choice, index));
         button.style.position = "absolute";
+        button.style.touchAction = "none";
         placeHotspotButton(button, choice, width, height);
-        button.addEventListener("click", () => chooseHotspot(choice));
+        button.addEventListener("click", (event) => {
+            if (suppressNextClick) {
+                suppressNextClick = false;
+                event.preventDefault();
+                return;
+            }
+            chooseHotspot(choice);
+        });
+        button.addEventListener("pointerdown", (event) => {
+            if (event.button !== 0)
+                return;
+            draggedHotspot = choice;
+            dragPointerId = event.pointerId;
+            dragStart = { x: event.clientX, y: event.clientY };
+            dragStarted = false;
+            button.setPointerCapture(event.pointerId);
+        });
+        button.addEventListener("pointermove", (event) => {
+            if (dragPointerId !== event.pointerId || !draggedHotspot || !dragStart)
+                return;
+            const moved = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
+            if (!dragStarted && moved < 4)
+                return;
+            if (!dragStarted) {
+                dragStarted = true;
+                suppressFollowingClick();
+                selectedHotspot = draggedHotspot;
+                renderState();
+            }
+            updatePreviewLine(draggedHotspot, event);
+            event.preventDefault();
+        });
+        button.addEventListener("pointerup", (event) => {
+            if (dragPointerId !== event.pointerId || !draggedHotspot)
+                return;
+            const source = draggedHotspot;
+            draggedHotspot = undefined;
+            dragPointerId = undefined;
+            dragStart = undefined;
+            button.releasePointerCapture(event.pointerId);
+            if (!dragStarted)
+                return;
+            dragStarted = false;
+            suppressFollowingClick();
+            finishDrag(event, source);
+            event.preventDefault();
+        });
+        button.addEventListener("pointercancel", (event) => {
+            if (dragPointerId !== event.pointerId)
+                return;
+            draggedHotspot = undefined;
+            dragPointerId = undefined;
+            dragStart = undefined;
+            dragStarted = false;
+            removePreviewLine();
+            selectedHotspot = undefined;
+            renderState();
+        });
         button.addEventListener("keydown", (event) => {
             if (event.key === "ArrowRight" || event.key === "ArrowDown") {
                 event.preventDefault();
@@ -1594,6 +1821,11 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
     return group;
 }
 function renderGapMatchResponse(interaction, update, currentValue) {
+    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);
@@ -1703,6 +1935,153 @@ function renderGapMatchResponse(interaction, update, currentValue) {
     group.append(sourceRegion, gapRegion);
     return group;
 }
+function renderGraphicGapMatchResponse(interaction, update, currentValue) {
+    const group = responseGroup();
+    const width = objectWidth(interaction);
+    const height = objectHeight(interaction);
+    const sources = sourceChoices(interaction);
+    const gaps = targetChoices(interaction).filter((choice) => choice.role === "hotspot");
+    const assignments = new Map();
+    let selectedSource;
+    let draggedSource;
+    for (const pair of valueToStrings(currentValue)) {
+        const [sourceIdentifier, gapIdentifier] = pair.split(/\s+/);
+        const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+        if (source && gapIdentifier)
+            assignments.set(gapIdentifier, source);
+    }
+    const surface = document.createElement("div");
+    surface.className = "qti3-graphic-context qti3-graphic-gap-match-surface";
+    surface.role = "group";
+    surface.setAttribute("aria-label", `${readableType(interaction.type)} target image`);
+    surface.style.position = "relative";
+    surface.style.inlineSize = `${width}px`;
+    surface.style.aspectRatio = `${width} / ${height}`;
+    surface.style.maxInlineSize = "100%";
+    surface.style.border = "1px solid CanvasText";
+    surface.style.background = "Canvas";
+    surface.style.overflow = "visible";
+    surface.style.setProperty("--qti3-graphic-gap-label-block-size", `${graphicGapLabelBlockSize(sources)}rem`);
+    if (interaction.object?.data && objectIsImage(interaction.object)) {
+        const image = document.createElement("img");
+        image.src = interaction.object.data;
+        image.alt = interaction.object.text || `${readableType(interaction.type)} image`;
+        image.style.position = "absolute";
+        image.style.inset = "0";
+        image.style.inlineSize = "100%";
+        image.style.blockSize = "100%";
+        image.style.objectFit = "contain";
+        image.style.pointerEvents = "none";
+        surface.append(image);
+    }
+    const sourceRegion = tokenRegion(`${readableType(interaction.type)} choices`);
+    sourceRegion.classList.add("qti3-graphic-gap-source-region");
+    const choicesWidth = positivePixelValue(interaction.attributes["data-choices-container-width"]);
+    if (choicesWidth !== undefined)
+        sourceRegion.style.maxInlineSize = `${choicesWidth}px`;
+    const summary = document.createElement("p");
+    summary.className = "qti3-selection-summary";
+    summary.setAttribute("aria-live", "polite");
+    const commit = () => {
+        update([...assignments.entries()].map(([gapIdentifier, source]) => `${source.identifier} ${gapIdentifier}`));
+    };
+    const syncSources = () => {
+        for (const button of sourceRegion.querySelectorAll("button")) {
+            button.setAttribute("aria-pressed", button.dataset.choiceIdentifier === selectedSource?.identifier ? "true" : "false");
+        }
+    };
+    const clearSourceIfSingleUse = (source, keepGapIdentifier) => {
+        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, sourceIdentifier) => {
+        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, index) => gap.attributes["aria-label"] || gap.attributes["hotspot-label"] || `Target ${index + 1}`;
+    const renderTargetButton = (gap, index) => {
+        const assigned = assignments.get(gap.identifier);
+        const label = targetLabel(gap, index);
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "qti3-hotspot-button qti3-graphic-gap-hotspot";
+        button.dataset.gapIdentifier = gap.identifier;
+        button.dataset.selected = assigned ? "true" : "false";
+        button.setAttribute("aria-label", assigned ? `${label}, assigned ${assigned.text}` : `${label}, empty`);
+        button.addEventListener("dragover", (event) => {
+            event.preventDefault();
+            button.classList.add("qti3-drop-target");
+        });
+        button.addEventListener("dragleave", () => button.classList.remove("qti3-drop-target"));
+        button.addEventListener("drop", (event) => {
+            event.preventDefault();
+            button.classList.remove("qti3-drop-target");
+            assign(gap, event.dataTransfer?.getData("text/plain") || draggedSource);
+        });
+        button.addEventListener("click", () => assign(gap, selectedSource?.identifier));
+        button.addEventListener("keydown", (event) => {
+            if (event.key !== "Delete" && event.key !== "Backspace")
+                return;
+            if (!assignments.has(gap.identifier))
+                return;
+            event.preventDefault();
+            assignments.delete(gap.identifier);
+            renderTargets();
+            commit();
+        });
+        placeHotspotButton(button, gap, width, height);
+        if (assigned) {
+            const assignedLabel = document.createElement("span");
+            assignedLabel.className = "qti3-graphic-gap-label";
+            assignedLabel.textContent = assigned.text;
+            button.append(assignedLabel);
+        }
+        return button;
+    };
+    const renderTargets = () => {
+        surface.querySelectorAll(".qti3-graphic-gap-hotspot").forEach((target) => target.remove());
+        for (const [index, gap] of gaps.entries()) {
+            surface.append(renderTargetButton(gap, index));
+        }
+        summary.textContent =
+            assignments.size > 0
+                ? `${assignments.size} ${assignments.size === 1 ? "label" : "labels"} placed.`
+                : "No labels placed.";
+    };
+    for (const source of sources) {
+        const button = tokenButton(source);
+        button.draggable = true;
+        button.addEventListener("dragstart", (event) => {
+            draggedSource = source.identifier;
+            event.dataTransfer?.setData("text/plain", source.identifier);
+            event.dataTransfer?.setDragImage(button, 8, 8);
+        });
+        button.addEventListener("dragend", () => {
+            draggedSource = undefined;
+            syncSources();
+        });
+        button.addEventListener("click", () => {
+            selectedSource = source;
+            syncSources();
+        });
+        sourceRegion.append(button);
+    }
+    renderTargets();
+    group.append(surface, sourceRegion, summary);
+    return group;
+}
 function renderSelect(interaction, update, currentValue) {
     const select = document.createElement("select");
     select.className = "qti3-inline-select";
@@ -2021,10 +2400,9 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
     const height = objectAssetHeight(stageObject, 300);
     const movableWidth = objectAssetWidth(movableObject, Math.max(32, Math.round(width * 0.12)));
     const movableHeight = objectAssetHeight(movableObject, Math.max(32, Math.round(height * 0.12)));
-    let point = parsePointValue(currentValue) ?? {
-        x: Math.round(width / 2),
-        y: Math.round(height / 2),
-    };
+    const parsedPoint = parsePointValue(currentValue);
+    let point = parsedPoint ?? { x: 0, y: 0 };
+    let isPlaced = Boolean(parsedPoint);
     const stage = document.createElement("div");
     stage.className = "qti3-position-object-stage";
     stage.tabIndex = 0;
@@ -2037,8 +2415,9 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
     stage.style.border = "1px solid CanvasText";
     stage.style.background = "Canvas";
     stage.style.color = "CanvasText";
-    stage.style.overflow = "hidden";
+    stage.style.overflow = "visible";
     stage.style.touchAction = "none";
+    stage.style.marginBlockEnd = `${Math.ceil(movableHeight + 12)}px`;
     if (stageObject?.data && objectIsImage(stageObject)) {
         const image = document.createElement("img");
         image.src = stageObject.data;
@@ -2087,10 +2466,22 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
         point.y = Math.max(0, Math.min(height, point.y));
     };
     const commit = () => {
+        if (!isPlaced)
+            return;
         update(pointToString(point));
     };
     const syncMarker = () => {
+        if (!isPlaced) {
+            marker.dataset.placed = "false";
+            marker.style.insetInlineStart = `${Math.round(movableWidth / 2)}px`;
+            marker.style.insetBlockStart = `calc(100% + ${Math.round(movableHeight / 2 + 8)}px)`;
+            coordinate.value = "";
+            coordinate.textContent = "Object not placed";
+            stage.setAttribute("aria-label", `${readableType(interaction.type)} placement stage, object not placed`);
+            return;
+        }
         clamp();
+        marker.dataset.placed = "true";
         marker.style.insetInlineStart = `${percent(point.x, width)}%`;
         marker.style.insetBlockStart = `${percent(point.y, height)}%`;
         coordinate.value = pointToString(point);
@@ -2103,9 +2494,17 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
             x: Math.round(((event.clientX - rect.left) / rect.width) * width),
             y: Math.round(((event.clientY - rect.top) / rect.height) * height),
         };
+        isPlaced = true;
         clamp();
     };
+    const ensureKeyboardPoint = () => {
+        if (isPlaced)
+            return;
+        point = { x: 0, y: 0 };
+        isPlaced = true;
+    };
     const moveBy = (dx, dy, emit = true) => {
+        ensureKeyboardPoint();
         point.x += dx;
         point.y += dy;
         syncMarker();
@@ -2122,24 +2521,32 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
             moveBy(0, -step, false);
         else if (event.key === "ArrowDown")
             moveBy(0, step, false);
-        else if (event.key === "Enter" || event.key === " ")
+        else if (event.key === "Enter" || event.key === " ") {
+            ensureKeyboardPoint();
+            syncMarker();
             commit();
+        }
         else
             return;
         event.preventDefault();
     };
     let dragging = false;
+    let dragMoved = false;
     marker.addEventListener("pointerdown", (event) => {
         dragging = true;
+        dragMoved = false;
         marker.setPointerCapture(event.pointerId);
         marker.style.cursor = "grabbing";
-        pointFromPointer(event);
-        syncMarker();
+        if (isPlaced) {
+            pointFromPointer(event);
+            syncMarker();
+        }
         event.preventDefault();
     });
     marker.addEventListener("pointermove", (event) => {
         if (!dragging)
             return;
+        dragMoved = true;
         pointFromPointer(event);
         syncMarker();
     });
@@ -2149,9 +2556,11 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
         dragging = false;
         marker.releasePointerCapture(event.pointerId);
         marker.style.cursor = "grab";
-        pointFromPointer(event);
-        syncMarker();
-        commit();
+        if (dragMoved || isPlaced) {
+            pointFromPointer(event);
+            syncMarker();
+            commit();
+        }
     });
     marker.addEventListener("pointercancel", () => {
         dragging = false;
@@ -2199,8 +2608,17 @@ function renderDrawingResponse(interaction, update, currentValue) {
     surface.style.border = "1px solid CanvasText";
     surface.style.background = "Canvas";
     surface.style.touchAction = "none";
-    const background = drawingBackgroundImage(interaction, width, height);
+    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();
@@ -2208,22 +2626,35 @@ function renderDrawingResponse(interaction, update, currentValue) {
     summary.className = "qti3-coordinate-output";
     const strokes = [];
     let activeStroke;
-    const serializeStroke = (points) => {
-        return points.map((point) => `${point.x} ${point.y}`).join(" ");
-    };
+    let commitVersion = 0;
     const commit = (emitResponse = true) => {
-        const value = strokes.map((stroke) => serializeStroke(stroke.points)).join(" | ");
-        if (emitResponse)
-            update(value);
+        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 = value;
+        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 parseDrawingValue(currentValue)) {
+    for (const points of restoredStrokes) {
         const element = polylineElement(points);
         strokes.push({ points, element });
         surface.append(element);
@@ -2281,6 +2712,12 @@ function renderDrawingResponse(interaction, update, currentValue) {
     clear.addEventListener("click", () => {
         strokes.splice(0, strokes.length);
         activeStroke = undefined;
+        if (activeBackgroundIsAuthored) {
+            resolvedAuthoredBackgroundHref =
+                currentDrawingBackgroundHref(surface) ?? resolvedAuthoredBackgroundHref;
+        }
+        activeBackgroundHref = resolvedAuthoredBackgroundHref;
+        activeBackgroundIsAuthored = true;
         resetSurface();
         commit();
     });
@@ -2291,45 +2728,6 @@ function renderDrawingResponse(interaction, update, currentValue) {
     group.append(surface, summary, tools);
     return group;
 }
-function renderPortableCustomResponse(interaction, update, currentValue) {
-    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, update, currentValue) {
     const group = responseGroup();
     const surface = document.createElement("div");
@@ -2400,27 +2798,19 @@ function renderHotspotResponse(interaction, update, currentValue) {
     group.append(surface, selectedSummary);
     return group;
 }
-function renderObjectAsset(interaction) {
+function renderObjectAsset(interaction, mediaResponse = {}) {
     const object = interaction.object;
-    const type = object?.type ?? "";
     const label = interaction.prompt ?? object?.text ?? "Media interaction";
-    if (object?.data && type.startsWith("audio/")) {
+    const mediaType = object ? mediaElementType(object) : undefined;
+    if (object && mediaType === "audio") {
         const audio = document.createElement("audio");
-        audio.controls = true;
-        audio.preload = "none";
-        audio.src = object.data;
-        audio.setAttribute("aria-label", label);
-        audio.style.maxInlineSize = "100%";
+        configureMediaElement(audio, interaction, object, label, mediaResponse);
         audio.style.inlineSize = "100%";
         return audio;
     }
-    if (object?.data && type.startsWith("video/")) {
+    if (object && mediaType === "video") {
         const video = document.createElement("video");
-        video.controls = true;
-        video.preload = "none";
-        video.src = object.data;
-        video.setAttribute("aria-label", label);
-        video.style.maxInlineSize = "100%";
+        configureMediaElement(video, interaction, object, label, mediaResponse);
         if (object.width)
             video.width = Number(object.width);
         if (object.height)
@@ -2442,10 +2832,11 @@ function renderObjectAsset(interaction) {
     const group = document.createElement("div");
     group.role = "group";
     group.setAttribute("aria-label", label);
-    if (object?.data) {
+    const fallbackHref = object?.data ?? object?.sources.find((source) => source.src)?.src;
+    if (fallbackHref) {
         const link = document.createElement("a");
-        link.href = object.data;
-        link.textContent = object.text || object.data;
+        link.href = fallbackHref;
+        link.textContent = object?.text || fallbackHref;
         group.append(link);
     }
     else {
@@ -2453,6 +2844,132 @@ function renderObjectAsset(interaction) {
     }
     return group;
 }
+function configureMediaElement(media, interaction, object, label, mediaResponse) {
+    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;
+        copySafeMediaChildAttributes(sourceElement, source.attributes, sourceAttributeNames);
+        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;
+        copySafeMediaChildAttributes(trackElement, track.attributes, trackAttributeNames);
+        media.append(trackElement);
+    }
+    bindMediaPlayCount(media, interaction, mediaResponse);
+}
+function copyMediaDataAttributes(element, attributes) {
+    for (const [name, value] of Object.entries(attributes)) {
+        if (!name.startsWith("data-"))
+            continue;
+        element.setAttribute(name, value);
+    }
+}
+const sourceAttributeNames = new Set(["src", "srcset", "type"]);
+const trackAttributeNames = new Set(["default", "kind", "label", "src", "srclang"]);
+function copySafeMediaChildAttributes(element, attributes, controlledNames) {
+    for (const [name, value] of Object.entries(attributes)) {
+        const normalizedName = name.toLowerCase();
+        if (controlledNames.has(normalizedName))
+            continue;
+        if (normalizedName === "class" ||
+            normalizedName === "id" ||
+            normalizedName === "title" ||
+            normalizedName === "media" ||
+            normalizedName === "sizes" ||
+            normalizedName.startsWith("data-")) {
+            element.setAttribute(name, value);
+        }
+    }
+}
+function mediaElementType(object) {
+    const types = [object.type, ...object.sources.map((source) => source.type)].filter((value) => 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, object) {
+    return (interaction.attributes["data-qti-media-player-controls"] ??
+        object.attributes["data-qti-media-player-controls"]);
+}
+function bindMediaPlayCount(media, interaction, mediaResponse) {
+    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) {
     return Boolean(object.type?.startsWith("image/") ||
         object.data?.startsWith("data:image/") ||
@@ -2499,6 +3016,10 @@ function choiceText(choices, identifier) {
 }
 function sourceChoices(interaction) {
     const choices = choicesOrFallback(interaction);
+    if (interaction.type === "gapMatch" || interaction.type === "graphicGapMatch") {
+        const gapChoices = choices.filter((choice) => choice.role === "gapChoice");
+        return gapChoices.length > 0 ? gapChoices : choices;
+    }
     const sourceRoles = new Set(["associableChoice", "matchSource", "gapChoice", "hotspot"]);
     const sources = choices.filter((choice) => sourceRoles.has(choice.role));
     return sources.length > 0 ? sources : choices;
@@ -2597,6 +3118,42 @@ function parseDrawingValue(value) {
     const raw = scalarString(value);
     if (!raw)
         return [];
+    const metadata = drawingMetadataFromSvgDataUrl(raw);
+    if (metadata)
+        return parseDrawingStrokePayload(metadata);
+    return parseDrawingStrokePayload(raw);
+}
+function drawingMetadataFromSvgDataUrl(raw) {
+    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) {
+    const raw = scalarString(value);
+    return raw?.startsWith("data:image/") ? raw : undefined;
+}
+function parseDrawingStrokePayload(raw) {
     return raw
         .split("|")
         .map((stroke) => {
@@ -2635,6 +3192,15 @@ function dimension(value, fallback) {
     const parsed = Number(value);
     return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
 }
+function positivePixelValue(value) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
+}
+function graphicGapLabelBlockSize(sources) {
+    const maxLength = Math.max(0, ...sources.map((source) => (source.text || source.identifier).trim().length));
+    const estimatedLines = Math.max(1, Math.ceil(maxLength / 22));
+    return Number((estimatedLines * 0.95 + 0.9).toFixed(2));
+}
 function placeHotspotButton(button, choice, width, height) {
     const coords = (choice.attributes.coords ?? "")
         .split(",")
@@ -2733,20 +3299,177 @@ function svgPoint(surface, event) {
         y: Math.max(0, Math.min(height, y)),
     };
 }
-function drawingBackgroundImage(interaction, width, height) {
+async function exportDrawingResponse(interaction, width, height, strokes, backgroundHref) {
+    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) {
+    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) {
+    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, width, height, strokes, backgroundHref) {
+    const markup = svgDrawingMarkup(interaction, width, height, strokes, backgroundHref);
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+}
+function svgDrawingMarkup(interaction, width, height, strokes, backgroundHref) {
+    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, width, height, strokes, backgroundHref, mime) {
+    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) {
+    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) {
+    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) {
+    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) {
     if (!interaction.object?.data || !objectIsImage(interaction.object))
         return undefined;
+    return interaction.object.data;
+}
+function drawingImageElement(href, width, height) {
     const image = document.createElementNS("http://www.w3.org/2000/svg", "image");
-    image.setAttribute("href", interaction.object.data);
+    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) {
+    return surface.querySelector("image")?.getAttribute("href") ?? undefined;
+}
 function serializeSvgPoints(points) {
     return points.map((point) => `${point.x},${point.y}`).join(" ");
 }
+function serializeDrawingStrokes(strokes) {
+    return strokes.map((stroke) => serializeDrawingStroke(stroke.points)).join(" | ");
+}
+function serializeDrawingStroke(points) {
+    return points.map((point) => `${point.x} ${point.y}`).join(" ");
+}
+function xmlAttribute(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;");
+}
 function polylineElement(points) {
     const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
     line.setAttribute("points", serializeSvgPoints(points));
@@ -2757,6 +3480,20 @@ function polylineElement(points) {
     line.setAttribute("stroke-linejoin", "round");
     return line;
 }
+function portableCustomDefinitionFromAttributes(interaction) {
+    return {
+        responseIdentifier: interaction.responseIdentifier,
+        customInteractionTypeIdentifier: interaction.attributes["custom-interaction-type-identifier"],
+        module: interaction.attributes.module,
+        interactionMarkup: [],
+        templateVariables: [],
+        contextVariables: [],
+        stylesheets: [],
+        dataAttributes: Object.fromEntries(Object.entries(interaction.attributes).filter(([name]) => name.startsWith("data-"))),
+        attributes: interaction.attributes,
+        source: interaction.source,
+    };
+}
 function portableCustomEventValue(event) {
     if (!("detail" in event))
         return undefined;
@@ -2768,13 +3505,51 @@ function portableCustomEventValue(event) {
             return detail.value ?? null;
         if ("response" in detail)
             return detail.response ?? null;
+        if ("state" in detail || "valid" in detail)
+            return undefined;
     }
     return detail;
 }
+function portableCustomEventState(event) {
+    if (!("detail" in event))
+        return undefined;
+    const detail = event.detail;
+    if (typeof detail !== "object" || detail === null || !("state" in detail))
+        return undefined;
+    return isPortableCustomStateValue(detail.state) ? detail.state : undefined;
+}
+function portableCustomEventValidity(event) {
+    if (!("detail" in event))
+        return undefined;
+    const detail = event.detail;
+    if (typeof detail !== "object" || detail === null || typeof detail.valid !== "boolean") {
+        return undefined;
+    }
+    return {
+        valid: detail.valid,
+        message: typeof detail.message === "string" ? detail.message : undefined,
+    };
+}
+function isPortableCustomStateValue(value) {
+    if (value === null)
+        return true;
+    if (typeof value === "string" || typeof value === "boolean")
+        return true;
+    if (typeof value === "number")
+        return Number.isFinite(value);
+    if (Array.isArray(value))
+        return value.every(isPortableCustomStateValue);
+    if (typeof value === "object") {
+        return Object.values(value).every(isPortableCustomStateValue);
+    }
+    return false;
+}
 const htmlContentElements = new Set([
     "a",
     "abbr",
     "b",
+    "bdi",
+    "bdo",
     "blockquote",
     "br",
     "caption",
@@ -2788,6 +3563,12 @@ const htmlContentElements = new Set([
     "em",
     "figcaption",
     "figure",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
     "hr",
     "i",
     "img",
@@ -2797,6 +3578,12 @@ const htmlContentElements = new Set([
     "p",
     "pre",
     "q",
+    "rb",
+    "rbc",
+    "rp",
+    "rt",
+    "rtc",
+    "ruby",
     "samp",
     "small",
     "span",
@@ -2813,6 +3600,7 @@ const htmlContentElements = new Set([
     "ul",
     "var",
 ]);
+const unsafeContentElements = new Set(["script", "style"]);
 const mathMlElements = new Set([
     "math",
     "maction",
@@ -2881,32 +3669,80 @@ function copySafeAttributes(element, attributes) {
         if (!isSafeContentAttribute(name, value))
             continue;
         element.setAttribute(name, value);
+        if (name === "xml:lang" && !Object.hasOwn(attributes, "lang")) {
+            element.setAttribute("lang", value);
+        }
+    }
+    applySharedAccessibilityVocabulary(element, attributes);
+}
+function applySharedAccessibilityVocabulary(element, attributes) {
+    for (const [name, value] of Object.entries(attributes)) {
+        const ariaName = qtiAriaAttributeName(name);
+        if (!ariaName || hasAttributeName(attributes, ariaName))
+            continue;
+        element.setAttribute(ariaName, value);
     }
+    const suppressTts = attributeValue(attributes, "data-qti-suppress-tts");
+    if (suppressesScreenReaderSpeech(suppressTts) &&
+        !hasAttributeName(attributes, "aria-hidden") &&
+        !hasAttributeName(attributes, "data-qti-aria-hidden")) {
+        element.setAttribute("aria-hidden", "true");
+    }
+}
+function qtiAriaAttributeName(name) {
+    const normalizedName = name.toLowerCase();
+    const prefix = "data-qti-aria-";
+    if (!normalizedName.startsWith(prefix))
+        return undefined;
+    const suffix = normalizedName.slice(prefix.length);
+    if (!/^[a-z0-9][a-z0-9-]*$/.test(suffix))
+        return undefined;
+    return `aria-${suffix}`;
+}
+function attributeValue(attributes, name) {
+    const normalizedName = name.toLowerCase();
+    const entry = Object.entries(attributes).find(([attributeName]) => attributeName.toLowerCase() === normalizedName);
+    return entry?.[1];
+}
+function hasAttributeName(attributes, name) {
+    return attributeValue(attributes, name) !== undefined;
+}
+function suppressesScreenReaderSpeech(value) {
+    if (!value)
+        return false;
+    const tokens = value
+        .toLowerCase()
+        .split(/[\s,]+/)
+        .filter(Boolean);
+    return tokens.includes("all") || tokens.includes("screen-reader");
 }
 function isSafeContentAttribute(name, value) {
-    if (name.startsWith("on"))
+    const normalizedName = name.toLowerCase();
+    if (normalizedName.startsWith("on"))
         return false;
-    if (name === "style")
+    if (normalizedName === "style")
         return false;
-    if (name === "href" || name === "src" || name === "data") {
+    if (normalizedName === "href" || normalizedName === "src" || normalizedName === "data") {
         return isSafeUrl(value);
     }
-    return (name === "alt" ||
-        name === "aria-label" ||
-        name === "aria-describedby" ||
-        name === "class" ||
-        name === "colspan" ||
-        name === "height" ||
-        name === "id" ||
-        name === "lang" ||
-        name === "role" ||
-        name === "rowspan" ||
-        name === "scope" ||
-        name === "title" ||
-        name === "type" ||
-        name === "width" ||
-        mathMlAttributeNames.has(name) ||
-        name.startsWith("data-"));
+    return (normalizedName === "alt" ||
+        normalizedName === "class" ||
+        normalizedName === "colspan" ||
+        normalizedName === "dir" ||
+        normalizedName === "headers" ||
+        normalizedName === "height" ||
+        normalizedName === "id" ||
+        normalizedName === "lang" ||
+        normalizedName === "role" ||
+        normalizedName === "rowspan" ||
+        normalizedName === "scope" ||
+        normalizedName === "title" ||
+        normalizedName === "type" ||
+        normalizedName === "width" ||
+        normalizedName === "xml:lang" ||
+        mathMlAttributeNames.has(normalizedName) ||
+        normalizedName.startsWith("aria-") ||
+        normalizedName.startsWith("data-"));
 }
 const mathMlAttributeNames = new Set([
     "accent",
@@ -3041,6 +3877,23 @@ function playerStyleElement() {
       margin-block: 0;
     }
 
+    .qti3-player .qti-hidden {
+      display: none !important;
+    }
+
+    .qti3-player .qti-visually-hidden {
+      position: absolute !important;
+      overflow: hidden !important;
+      clip: rect(1px, 1px, 1px, 1px) !important;
+      clip-path: inset(50%) !important;
+      inline-size: 1px !important;
+      block-size: 1px !important;
+      margin: -1px !important;
+      padding: 0 !important;
+      border: 0 !important;
+      white-space: nowrap !important;
+    }
+
     .qti3-embedded-interaction {
       display: inline-flex;
       gap: 0.35rem;
@@ -3075,7 +3928,6 @@ function playerStyleElement() {
       margin-block-start: 0.75rem;
     }
 
-    .qti3-actions,
     .qti3-reorder-item,
     .qti3-token-region,
     .qti3-pair-chip,
@@ -3414,6 +4266,7 @@ function playerStyleElement() {
     }
 
     .qti3-graphic-associate-surface,
+    .qti3-graphic-gap-match-surface,
     .qti3-graphic-order-surface {
       touch-action: manipulation;
     }
@@ -3441,10 +4294,60 @@ function playerStyleElement() {
     }
 
     .qti3-graphic-associate-hotspot,
+    .qti3-graphic-gap-hotspot,
     .qti3-graphic-order-hotspot {
       z-index: 2;
     }
 
+    .qti3-graphic-gap-match-surface {
+      margin-block-end: calc(var(--qti3-graphic-gap-label-block-size, 2rem) + 0.75rem);
+    }
+
+    .qti3-graphic-gap-hotspot {
+      display: grid;
+      place-items: center;
+      padding: 0;
+      overflow: visible;
+      border-style: dashed;
+      background: rgb(255 255 255 / 0.08);
+      color: CanvasText;
+    }
+
+    .qti3-graphic-gap-hotspot[data-selected="true"] {
+      border-style: solid;
+      background: color-mix(in srgb, Highlight 18%, Canvas);
+    }
+
+    .qti3-graphic-gap-label {
+      position: absolute;
+      inset-block-start: calc(100% + 0.2rem);
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+      box-sizing: border-box;
+      inline-size: max-content;
+      max-inline-size: min(12rem, calc(100vw - 2rem));
+      min-inline-size: 0;
+      padding: 0.25rem 0.4rem;
+      border: 1px solid CanvasText;
+      border-radius: 0.25rem;
+      background: Canvas;
+      color: CanvasText;
+      font-size: 0.75rem;
+      font-weight: 700;
+      line-height: 1.15;
+      overflow-wrap: anywhere;
+      pointer-events: none;
+      box-shadow: 0 1px 2px rgb(0 0 0 / 0.16);
+      text-align: center;
+      white-space: normal;
+    }
+
+    @supports not (background: color-mix(in srgb, Highlight 18%, Canvas)) {
+      .qti3-graphic-gap-hotspot[data-selected="true"] {
+        background: Canvas;
+      }
+    }
+
     .qti3-graphic-order-hotspot {
       display: grid;
       place-items: center;
@@ -3512,6 +4415,8 @@ function responseCount(value) {
 function maximumAllowedResponses(interaction) {
     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;
@@ -3523,12 +4428,33 @@ function maximumAllowedResponses(interaction) {
 function minimumRequiredResponses(interaction) {
     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) {
+    const parsed = Number(interaction.attributes["min-plays"] ?? "0");
+    return Number.isInteger(parsed) && parsed >= 0 ? parsed : 0;
+}
+function maximumMediaPlays(interaction) {
+    const parsed = Number(interaction.attributes["max-plays"] ?? "0");
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;
+}
+function mediaPlayCount(value) {
+    const parsed = typeof value === "number" ? value : typeof value === "string" ? Number(value) : 0;
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : 0;
+}
+function parseBooleanAttribute(value) {
+    if (value === "true" || value === "1")
+        return true;
+    if (value === "false" || value === "0")
+        return false;
+    return undefined;
+}
 function matchMaxDiagnostics(responseIdentifier, interaction, response) {
     const identifiers = responseChoiceIdentifiers(response);
     if (identifiers.length === 0)