@longsightgroup/qti3-player 0.1.2 → 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");
@@ -179,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) {
@@ -253,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,6 +310,87 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         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);
@@ -346,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);
@@ -489,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";
@@ -1407,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";
@@ -1496,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;
@@ -1569,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();
@@ -1592,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);
@@ -1701,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";
@@ -2019,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;
@@ -2035,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;
@@ -2085,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);
@@ -2101,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();
@@ -2120,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();
     });
@@ -2147,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;
@@ -2317,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");
@@ -2490,6 +2862,7 @@ function configureMediaElement(media, interaction, object, label, mediaResponse)
         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) {
@@ -2505,6 +2878,7 @@ function configureMediaElement(media, interaction, object, label, mediaResponse)
             trackElement.label = track.label;
         if (track.default)
             trackElement.default = true;
+        copySafeMediaChildAttributes(trackElement, track.attributes, trackAttributeNames);
         media.append(trackElement);
     }
     bindMediaPlayCount(media, interaction, mediaResponse);
@@ -2516,6 +2890,23 @@ function copyMediaDataAttributes(element, attributes) {
         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/")))
@@ -2625,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;
@@ -2797,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(",")
@@ -3076,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;
@@ -3087,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",
@@ -3107,6 +3563,12 @@ const htmlContentElements = new Set([
     "em",
     "figcaption",
     "figure",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
     "hr",
     "i",
     "img",
@@ -3116,6 +3578,12 @@ const htmlContentElements = new Set([
     "p",
     "pre",
     "q",
+    "rb",
+    "rbc",
+    "rp",
+    "rt",
+    "rtc",
+    "ruby",
     "samp",
     "small",
     "span",
@@ -3132,6 +3600,7 @@ const htmlContentElements = new Set([
     "ul",
     "var",
 ]);
+const unsafeContentElements = new Set(["script", "style"]);
 const mathMlElements = new Set([
     "math",
     "maction",
@@ -3200,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",
@@ -3360,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;
@@ -3732,6 +4266,7 @@ function playerStyleElement() {
     }
 
     .qti3-graphic-associate-surface,
+    .qti3-graphic-gap-match-surface,
     .qti3-graphic-order-surface {
       touch-action: manipulation;
     }
@@ -3759,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;