@longsightgroup/qti3-player 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,4713 +1,2 @@
-import { assertQtiAttemptStateV1, createItemSession, createCatalogSupportResolution, createTextToSpeechTraversal, parseQtiXml, visibleModalFeedback, } from "@longsightgroup/qti3-core";
-const HTMLElementBase = globalThis.HTMLElement ??
-    class {
-        replaceChildren() { }
-        dispatchEvent() {
-            return true;
-        }
-    };
-export class QtiAssessmentItemPlayer extends HTMLElementBase {
-    static get observedAttributes() {
-        return ["language-of-interface", "locale"];
-    }
-    documentModel;
-    session;
-    resolveAsset;
-    validationMessages = [];
-    languageOfInterfaceOverride;
-    messageOverrides = {};
-    sessionControl = {
-        validateResponses: true,
-        showFeedback: true,
-    };
-    get languageOfInterface() {
-        return (this.languageOfInterfaceOverride ??
-            this.getAttribute?.("language-of-interface") ??
-            this.getAttribute?.("locale") ??
-            defaultPlayerLocale(this));
-    }
-    set languageOfInterface(value) {
-        this.languageOfInterfaceOverride = normalizedLocale(value);
-        this.rerenderIfLoaded();
-    }
-    get locale() {
-        return this.languageOfInterface;
-    }
-    set locale(value) {
-        this.languageOfInterface = value;
-    }
-    get messages() {
-        return this.messageOverrides;
-    }
-    set messages(value) {
-        this.messageOverrides = value ?? {};
-        this.rerenderIfLoaded();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if ((name !== "language-of-interface" && name !== "locale") || oldValue === newValue) {
-            return;
-        }
-        this.rerenderIfLoaded();
-    }
-    async loadXml(xml, options = {}) {
-        this.sessionControl = {
-            validateResponses: options.sessionControl?.validateResponses ?? true,
-            showFeedback: options.sessionControl?.showFeedback ?? true,
-        };
-        this.resolveAsset = options.resolveAsset;
-        const result = parseQtiXml(xml);
-        this.dispatchEvent(new CustomEvent("qti-diagnostics", { detail: { diagnostics: result.diagnostics } }));
-        if (!result.document) {
-            this.replaceChildren(errorView("Unable to parse QTI item."));
-            return;
-        }
-        this.documentModel = result.document;
-        this.session = createItemSession(result.document, options.state);
-        this.validationMessages = cloneDiagnostics(options.state?.validationMessages ?? []);
-        if (options.status)
-            this.session.setStatus(options.status);
-        this.render();
-        this.renderValidationMessages();
-        this.updateAttemptAvailability();
-        this.dispatchPlayerEvent("qti-ready", { item: result.document.item });
-        this.emitStateChange();
-    }
-    async loadUrl(url, options = {}) {
-        const fetchXml = options.fetchXml ?? defaultFetchXml;
-        await this.loadXml(await fetchXml(url), options);
-    }
-    scoreAttempt(options = {}) {
-        const session = this.session;
-        if (!session)
-            return undefined;
-        const shouldValidateResponses = options.validateResponses ?? this.sessionControl.validateResponses;
-        const validationMessages = shouldValidateResponses ? this.validateResponses() : [];
-        if (validationMessages.length > 0) {
-            this.validationMessages = cloneDiagnostics(validationMessages);
-            this.renderValidationMessages();
-            const state = this.serialize();
-            if (!state)
-                return undefined;
-            this.dispatchPlayerEvent("qti-validation", {
-                validationMessages: cloneDiagnostics(this.validationMessages),
-                state,
-            });
-            this.emitStateChange(state);
-            return undefined;
-        }
-        this.validationMessages = [];
-        this.renderValidationMessages();
-        const result = session.score();
-        this.dispatchPlayerEvent("qti-score", result);
-        this.updateDynamicBodyState();
-        this.updateAttemptAvailability();
-        if (this.sessionControl.showFeedback)
-            this.renderFeedback(result.outcomes);
-        this.emitStateChange(result.state);
-        return result;
-    }
-    reset() {
-        if (!this.documentModel)
-            return;
-        this.session = createItemSession(this.documentModel);
-        this.validationMessages = [];
-        this.render();
-        this.updateAttemptAvailability();
-        this.dispatchEvent(new CustomEvent("qti-reset", { detail: { state: this.serialize() } }));
-        this.emitStateChange();
-    }
-    restore(state) {
-        if (!this.documentModel) {
-            throw new Error("Cannot restore QTI state before loading an item.");
-        }
-        assertQtiAttemptStateV1(state);
-        if (state.itemIdentifier !== this.documentModel.item.identifier) {
-            throw new Error(`Cannot restore state for ${state.itemIdentifier} into ${this.documentModel.item.identifier}.`);
-        }
-        this.session = createItemSession(this.documentModel, state);
-        this.validationMessages = cloneDiagnostics(state.validationMessages);
-        this.render();
-        this.renderValidationMessages();
-        this.updateAttemptAvailability();
-        this.dispatchEvent(new CustomEvent("qti-restore", { detail: { state: this.serialize() } }));
-        this.emitStateChange();
-    }
-    suspend() {
-        if (!this.session)
-            return;
-        this.session.setStatus("suspended");
-        const state = this.serialize();
-        if (!state)
-            return;
-        this.dispatchPlayerEvent("qti-suspend", { state });
-        this.emitStateChange(state);
-    }
-    endAttempt(options = {}) {
-        const result = this.scoreAttempt(options);
-        if (!result)
-            return;
-        if (!this.documentModel?.item.adaptive ||
-            result.state.outcomes.completionStatus === "completed") {
-            this.session?.setStatus("completed");
-        }
-        this.updateAttemptAvailability();
-        const state = this.serialize();
-        if (!state)
-            return;
-        this.dispatchPlayerEvent("qti-endattempt", { state });
-        this.emitStateChange(state);
-    }
-    serialize() {
-        const state = this.session?.serialize();
-        if (state)
-            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;
-        this.dispatchPlayerEvent("qti-statechange", { state });
-    }
-    dispatchPlayerEvent(type, detail) {
-        this.dispatchEvent(new CustomEvent(type, { detail }));
-    }
-    playerMessages() {
-        return resolvePlayerMessages(this.languageOfInterface, this.messageOverrides);
-    }
-    rerenderIfLoaded() {
-        if (!this.documentModel)
-            return;
-        this.render();
-        this.renderValidationMessages();
-        this.updateAttemptAvailability();
-    }
-    render() {
-        const documentModel = this.documentModel;
-        if (!documentModel)
-            return;
-        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");
-            prompt.className = "qti3-item-prompt";
-            prompt.textContent = documentModel.item.prompt;
-            root.append(prompt);
-        }
-        if (documentModel.item.body.length > 0) {
-            const body = document.createElement("div");
-            body.className = "qti3-item-body";
-            body.append(...this.renderContentNodes(documentModel.item.body));
-            root.append(body);
-        }
-        else {
-            for (const interaction of documentModel.item.interactions) {
-                root.append(this.renderInteraction(interaction));
-            }
-        }
-        const feedback = document.createElement("section");
-        feedback.className = "qti3-feedback";
-        feedback.role = "status";
-        feedback.setAttribute("aria-live", "polite");
-        feedback.hidden = true;
-        root.append(feedback);
-        this.resolveRenderedAssets(root);
-        this.replaceChildren(root);
-    }
-    renderInteraction(interaction) {
-        const messages = this.playerMessages();
-        const field = document.createElement("section");
-        field.className = `qti3-interaction qti3-${interaction.type}`;
-        field.classList.add(...qtiSharedClassNames(interaction.attributes.class));
-        field.dataset.interactionType = interaction.type;
-        if (interaction.responseIdentifier)
-            field.dataset.responseIdentifier = interaction.responseIdentifier;
-        const heading = document.createElement("h3");
-        copySafeAttributes(heading, interaction.promptAttributes ?? {});
-        heading.textContent = interactionLabel(interaction);
-        field.append(heading);
-        if (interaction.responseIdentifier) {
-            field.append(validationMessageElement(interaction.responseIdentifier));
-        }
-        const responseIdentifier = interaction.responseIdentifier;
-        const update = (value) => {
-            if (this.attemptIsCompleted())
-                return;
-            if (!responseIdentifier || !this.session)
-                return;
-            this.session.respond(responseIdentifier, value);
-            this.clearValidationMessage(responseIdentifier);
-            this.dispatchPlayerEvent("qti-responsechange", { responseIdentifier, value });
-            this.emitStateChange();
-        };
-        const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
-        if (interaction.type === "graphicOrder") {
-            field.append(renderGraphicOrderResponse(interaction, update, currentValue, messages));
-            return field;
-        }
-        if (usesOrderedResponse(interaction)) {
-            field.append(renderOrderedResponse(interaction, update, currentValue));
-            return field;
-        }
-        if (interaction.type === "gapMatch" || interaction.type === "graphicGapMatch") {
-            field.append(renderGapMatchResponse(interaction, update, currentValue));
-            return field;
-        }
-        if (interaction.type === "graphicAssociate") {
-            field.append(renderGraphicAssociateResponse(interaction, update, currentValue, messages));
-            return field;
-        }
-        if (interaction.type === "match") {
-            field.append(renderMatchResponse(interaction, update, currentValue, messages));
-            return field;
-        }
-        if (usesPairResponse(interaction)) {
-            field.append(renderPairResponse(interaction, update, currentValue, messages));
-            return field;
-        }
-        if (interaction.type === "hotspot" && interaction.object) {
-            field.append(renderHotspotResponse(interaction, update, currentValue));
-            return field;
-        }
-        if (interaction.type === "hottext") {
-            field.append(renderHottextResponse(interaction, update, currentValue));
-            return field;
-        }
-        if (usesChoiceSet(interaction)) {
-            field.append(renderChoice(interaction, update, currentValue));
-            return field;
-        }
-        if (interaction.type === "inlineChoice") {
-            field.append(renderSelect(interaction, update, currentValue));
-            return field;
-        }
-        if (interaction.type === "extendedText") {
-            field.append(renderTextResponse(interaction, update, "extended", currentValue));
-            return field;
-        }
-        if (interaction.type === "selectPoint") {
-            field.append(renderSelectPointResponse(interaction, update, currentValue));
-            return field;
-        }
-        if (interaction.type === "positionObject") {
-            field.append(renderPositionObjectResponse(interaction, update, currentValue));
-            return field;
-        }
-        if (interaction.type === "drawing") {
-            field.append(renderDrawingResponse(interaction, update, currentValue));
-            return field;
-        }
-        if (interaction.type === "portableCustom") {
-            field.append(this.renderPortableCustomResponse(interaction, update, currentValue));
-            return field;
-        }
-        if (interaction.type === "textEntry") {
-            field.append(renderTextResponse(interaction, update, "entry", currentValue));
-            return field;
-        }
-        if (interaction.type === "slider") {
-            field.append(renderSliderResponse(interaction, update, currentValue));
-            return field;
-        }
-        if (interaction.type === "upload") {
-            const input = document.createElement("input");
-            input.type = "file";
-            input.setAttribute("aria-label", heading.textContent ?? "Upload response");
-            input.addEventListener("change", () => update(input.files?.[0]?.name ?? ""));
-            field.append(input);
-            return field;
-        }
-        if (interaction.type === "endAttempt") {
-            const button = document.createElement("button");
-            button.type = "button";
-            button.textContent = interaction.attributes.title ?? "End attempt";
-            button.addEventListener("click", () => {
-                if (responseIdentifier)
-                    update(true);
-                this.endAttempt();
-            });
-            field.append(button);
-            return field;
-        }
-        if (interaction.type === "media") {
-            field.append(renderObjectAsset(interaction, {
-                currentValue,
-                update,
-                isCompleted: () => this.attemptIsCompleted(),
-            }));
-            return field;
-        }
-        field.append(renderSelect(interaction, update, currentValue));
-        return field;
-    }
-    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);
-        }
-        const wrapper = document.createElement("span");
-        wrapper.className = `qti3-interaction qti3-${interaction.type} qti3-embedded-interaction`;
-        wrapper.dataset.interactionType = interaction.type;
-        if (interaction.responseIdentifier)
-            wrapper.dataset.responseIdentifier = interaction.responseIdentifier;
-        const responseIdentifier = interaction.responseIdentifier;
-        const update = (value) => {
-            if (this.attemptIsCompleted())
-                return;
-            if (!responseIdentifier || !this.session)
-                return;
-            this.session.respond(responseIdentifier, value);
-            this.clearValidationMessage(responseIdentifier);
-            this.dispatchPlayerEvent("qti-responsechange", { responseIdentifier, value });
-            this.emitStateChange();
-        };
-        const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
-        if (interaction.responseIdentifier) {
-            wrapper.append(inlineValidationMessageElement(interaction.responseIdentifier));
-        }
-        wrapper.append(interaction.type === "inlineChoice"
-            ? renderSelect(interaction, update, currentValue)
-            : renderInlineTextEntry(interaction, update, currentValue));
-        return wrapper;
-    }
-    renderContentNodes(nodes) {
-        return nodes.flatMap((node) => this.renderContentNode(node));
-    }
-    renderContentNode(node) {
-        if (node.kind === "text")
-            return [document.createTextNode(node.text)];
-        if (node.kind === "interaction") {
-            const interaction = this.documentModel?.item.interactions[node.interactionIndex];
-            return interaction ? [this.renderEmbeddedInteraction(interaction)] : [];
-        }
-        if (node.kind === "printedVariable")
-            return [this.renderPrintedVariable(node.identifier, node.format)];
-        if (node.kind === "feedback")
-            return this.renderFeedbackContent(node);
-        if (node.qtiName === "qti-template-block" || node.qtiName === "qti-template-inline") {
-            return [this.renderTemplateContent(node)];
-        }
-        if (node.qtiName === "qti-position-object-stage") {
-            return this.renderContentNodes(node.children.filter((child) => !("qtiName" in child) || (child.qtiName !== "object" && child.qtiName !== "img")));
-        }
-        if (node.qtiName === "qti-prompt") {
-            const prompt = document.createElement("p");
-            copySafeAttributes(prompt, node.attributes);
-            prompt.classList.add("qti3-item-prompt");
-            prompt.append(...this.renderContentNodes(node.children));
-            return [prompt];
-        }
-        if (unsafeContentElements.has(node.qtiName))
-            return [];
-        const elementName = contentElementName(node.qtiName);
-        if (!elementName)
-            return this.renderContentNodes(node.children);
-        const element = createContentElement(elementName);
-        copySafeAttributes(element, node.attributes);
-        const mathTemplateValue = this.mathTemplateValue(node);
-        if (mathTemplateValue === undefined) {
-            element.append(...this.renderContentNodes(node.children));
-        }
-        else {
-            element.textContent = mathTemplateValue;
-        }
-        return [element];
-    }
-    renderTemplateContent(node) {
-        const element = document.createElement(node.qtiName === "qti-template-block" ? "div" : "span");
-        copySafeAttributes(element, node.attributes);
-        element.classList.add(node.qtiName === "qti-template-block" ? "qti3-template-block" : "qti3-template-inline");
-        element.dataset.templateIdentifier = node.attributes["template-identifier"] ?? "";
-        element.dataset.templateValueIdentifier = node.attributes.identifier ?? "";
-        element.dataset.showHide = node.attributes["show-hide"] === "hide" ? "hide" : "show";
-        element.hidden = !this.isTemplateContentVisible(element);
-        element.append(...this.renderContentNodes(node.children));
-        return element;
-    }
-    renderPrintedVariable(identifier, format) {
-        const output = document.createElement("output");
-        output.className = "qti3-printed-variable";
-        output.dataset.identifier = identifier;
-        if (format)
-            output.dataset.format = format;
-        output.value = formatPrintedValue(this.currentVariableValue(identifier), format);
-        output.textContent = output.value;
-        return output;
-    }
-    renderFeedbackContent(node) {
-        const element = document.createElement(node.feedbackType === "block" ? "section" : "span");
-        element.className = `qti3-feedback-${node.feedbackType}`;
-        element.dataset.feedbackIdentifier = node.identifier;
-        element.dataset.outcomeIdentifier = node.outcomeIdentifier;
-        element.dataset.showHide = node.showHide;
-        element.hidden = !this.isFeedbackVisible(node);
-        element.append(...this.renderContentNodes(node.children));
-        return [element];
-    }
-    updateDynamicBodyState() {
-        for (const output of this.querySelectorAll(".qti3-printed-variable")) {
-            const identifier = output.dataset.identifier;
-            if (!identifier)
-                continue;
-            output.value = formatPrintedValue(this.currentVariableValue(identifier), output.dataset.format);
-            output.textContent = output.value;
-        }
-        for (const element of this.querySelectorAll(".qti3-feedback-block, .qti3-feedback-inline")) {
-            const identifier = element.dataset.feedbackIdentifier;
-            const outcomeIdentifier = element.dataset.outcomeIdentifier;
-            if (!identifier || !outcomeIdentifier)
-                continue;
-            const value = this.currentVariableValue(outcomeIdentifier);
-            const hasIdentifier = Array.isArray(value)
-                ? value.map(String).includes(identifier)
-                : String(value ?? "") === identifier;
-            element.hidden = element.dataset.showHide === "hide" ? hasIdentifier : !hasIdentifier;
-        }
-        for (const element of this.querySelectorAll(".qti3-template-block, .qti3-template-inline")) {
-            element.hidden = !this.isTemplateContentVisible(element);
-        }
-    }
-    updateAttemptAvailability() {
-        const completed = this.attemptIsCompleted();
-        this.dataset.status = this.session?.serialize().status ?? "unloaded";
-        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")) {
-            control.disabled = completed;
-        }
-        for (const element of this.querySelectorAll(".qti3-interaction [tabindex]:not(button):not(input):not(select):not(textarea)")) {
-            if (completed) {
-                element.dataset.previousTabIndex = element.getAttribute("tabindex") ?? "0";
-                element.tabIndex = -1;
-                element.setAttribute("aria-disabled", "true");
-            }
-            else {
-                const previous = element.dataset.previousTabIndex;
-                if (previous !== undefined) {
-                    element.tabIndex = Number(previous);
-                    delete element.dataset.previousTabIndex;
-                }
-                element.removeAttribute("aria-disabled");
-            }
-        }
-    }
-    attemptIsCompleted() {
-        return this.session?.serialize().status === "completed";
-    }
-    isFeedbackVisible(node) {
-        const value = this.currentVariableValue(node.outcomeIdentifier);
-        const hasIdentifier = Array.isArray(value)
-            ? value.map(String).includes(node.identifier)
-            : String(value ?? "") === node.identifier;
-        return node.showHide === "show" ? hasIdentifier : !hasIdentifier;
-    }
-    isTemplateContentVisible(element) {
-        const templateIdentifier = element.dataset.templateIdentifier;
-        const identifier = element.dataset.templateValueIdentifier;
-        if (!templateIdentifier || !identifier)
-            return true;
-        const value = this.currentTemplateValue(templateIdentifier);
-        const hasIdentifier = Array.isArray(value)
-            ? value.map(String).includes(identifier)
-            : String(value ?? "") === identifier;
-        return element.dataset.showHide === "hide" ? !hasIdentifier : hasIdentifier;
-    }
-    currentVariableValue(identifier) {
-        const state = this.session?.serialize();
-        return (state?.outcomes[identifier] ??
-            state?.templateValues?.[identifier] ??
-            state?.responses[identifier] ??
-            null);
-    }
-    currentTemplateValue(identifier) {
-        return this.session?.serialize().templateValues?.[identifier] ?? null;
-    }
-    mathTemplateValue(node) {
-        if (node.qtiName !== "mi" && node.qtiName !== "mo")
-            return undefined;
-        const identifier = contentNodeText(node).trim();
-        if (!identifier)
-            return undefined;
-        const declaration = this.documentModel?.item.templateDeclarations.find((template) => template.identifier === identifier && template.attributes["math-variable"] === "true");
-        if (!declaration)
-            return undefined;
-        const value = this.currentTemplateValue(identifier);
-        return value === null ? "" : String(value);
-    }
-    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";
-        this.style.colorScheme = "light dark";
-    }
-    resolveRenderedAssets(root) {
-        if (!this.resolveAsset)
-            return;
-        for (const element of root.querySelectorAll("[src], [href], [data]")) {
-            for (const attribute of ["src", "href", "data"]) {
-                const value = element.getAttribute(attribute);
-                if (!value || !isResolvableAssetUrl(value))
-                    continue;
-                element.setAttribute(attribute, this.resolveAsset(value));
-            }
-        }
-    }
-    validateResponses() {
-        const state = this.session?.serialize();
-        if (!state || !this.documentModel)
-            return [];
-        const interactionsByResponse = new Map(this.documentModel.item.interactions
-            .filter((interaction) => interaction.responseIdentifier)
-            .map((interaction) => [interaction.responseIdentifier, interaction]));
-        const diagnostics = [];
-        for (const declaration of this.documentModel.item.responseDeclarations) {
-            const interaction = interactionsByResponse.get(declaration.identifier);
-            if (declaration.correctResponse === null && interaction?.type !== "media")
-                continue;
-            const minimum = minimumRequiredResponses(interaction);
-            const count = interaction?.type === "media"
-                ? mediaPlayCount(state.responses[declaration.identifier] ?? null)
-                : responseCount(state.responses[declaration.identifier] ?? null);
-            const maximum = maximumAllowedResponses(interaction);
-            if (count < minimum) {
-                diagnostics.push({
-                    code: "response.required",
-                    severity: "error",
-                    message: interaction?.attributes["data-min-selections-message"] ??
-                        (interaction?.type === "media"
-                            ? `${declaration.identifier} requires at least ${minimum} play${minimum === 1 ? "" : "s"}.`
-                            : minimum === 1
-                                ? `${declaration.identifier} requires a response.`
-                                : `${declaration.identifier} requires at least ${minimum} responses.`),
-                    path: declaration.identifier,
-                });
-            }
-            if (maximum !== undefined && count > maximum) {
-                diagnostics.push({
-                    code: "response.maximum",
-                    severity: "error",
-                    message: interaction?.attributes["data-max-selections-message"] ??
-                        (interaction?.type === "media"
-                            ? `${declaration.identifier} allows at most ${maximum} play${maximum === 1 ? "" : "s"}.`
-                            : `${declaration.identifier} allows at most ${maximum} response${maximum === 1 ? "" : "s"}.`),
-                    path: declaration.identifier,
-                });
-            }
-            if (interaction) {
-                diagnostics.push(...matchMaxDiagnostics(declaration.identifier, interaction, state.responses[declaration.identifier] ?? null));
-            }
-        }
-        return diagnostics;
-    }
-    renderValidationMessages() {
-        const messagesByIdentifier = new Map(this.validationMessages
-            .filter((message) => message.path)
-            .map((message) => [message.path, message]));
-        for (const section of this.querySelectorAll("[data-response-identifier]")) {
-            const responseIdentifier = section.dataset.responseIdentifier;
-            if (!responseIdentifier)
-                continue;
-            const message = messagesByIdentifier.get(responseIdentifier);
-            const messageElement = section.querySelector(`[data-validation-for="${responseIdentifier}"]`);
-            const controls = section.querySelectorAll("input, select, textarea, button");
-            if (message && messageElement) {
-                messageElement.textContent = message.message;
-                messageElement.hidden = false;
-                for (const control of controls) {
-                    control.setAttribute("aria-invalid", "true");
-                    control.setAttribute("aria-describedby", messageElement.id);
-                }
-            }
-            else if (messageElement) {
-                messageElement.textContent = "";
-                messageElement.hidden = true;
-                for (const control of controls) {
-                    control.removeAttribute("aria-invalid");
-                    control.removeAttribute("aria-describedby");
-                }
-            }
-        }
-    }
-    clearValidationMessage(responseIdentifier) {
-        const before = this.validationMessages.length;
-        this.validationMessages = this.validationMessages.filter((message) => message.path !== responseIdentifier);
-        if (this.validationMessages.length !== before)
-            this.renderValidationMessages();
-    }
-    renderFeedback(outcomes) {
-        const documentModel = this.documentModel;
-        const feedback = this.querySelector(".qti3-feedback");
-        if (!documentModel || !feedback)
-            return;
-        const visibleFeedback = visibleModalFeedback(documentModel.item, outcomes);
-        feedback.replaceChildren(...visibleFeedback.map((item) => {
-            const element = document.createElement("p");
-            element.dataset.feedbackIdentifier = item.identifier;
-            element.textContent = item.text;
-            return element;
-        }));
-        feedback.hidden = visibleFeedback.length === 0;
-    }
-}
-export function defineQtiAssessmentItemPlayer() {
-    if (globalThis.customElements && !customElements.get("qti-assessment-item-player")) {
-        customElements.define("qti-assessment-item-player", QtiAssessmentItemPlayer);
-    }
-}
-const defaultEnglishPlayerMessages = {
-    remove: () => "Remove",
-    removePair: ({ label }) => `Remove ${label}`,
-};
-const playerMessages = {
-    defaultEnglish: defaultEnglishPlayerMessages,
-    spanish: playerMessageCatalog("Quitar", ({ label }) => `Quitar ${label}`),
-    swedish: playerMessageCatalog("Ta bort", ({ label }) => `Ta bort ${label}`),
-    german: playerMessageCatalog("Entfernen", ({ label }) => `${label} entfernen`),
-    portuguese: playerMessageCatalog("Remover", ({ label }) => `Remover ${label}`),
-    french: playerMessageCatalog("Supprimer", ({ label }) => `Supprimer ${label}`),
-};
-const builtInPlayerMessageCatalogs = new Map([
-    ["en", playerMessages.defaultEnglish],
-    ["es", playerMessages.spanish],
-    ["es-es", playerMessages.spanish],
-    ["es-mx", playerMessages.spanish],
-    ["sv", playerMessages.swedish],
-    ["sv-se", playerMessages.swedish],
-    ["de", playerMessages.german],
-    ["de-de", playerMessages.german],
-    ["pt", playerMessages.portuguese],
-    ["pt-br", playerMessages.portuguese],
-    ["pt-pt", playerMessages.portuguese],
-    ["fr", playerMessages.french],
-    ["fr-ca", playerMessages.french],
-    ["fr-fr", playerMessages.french],
-]);
-function playerMessageCatalog(remove, removePair) {
-    return {
-        remove: () => remove,
-        removePair,
-    };
-}
-function resolvePlayerMessages(locale, overrides) {
-    const catalog = builtInPlayerMessageCatalog(locale);
-    return {
-        remove: overrides.remove ?? catalog?.remove ?? defaultEnglishPlayerMessages.remove,
-        removePair: overrides.removePair ?? catalog?.removePair ?? defaultEnglishPlayerMessages.removePair,
-    };
-}
-function builtInPlayerMessageCatalog(locale) {
-    for (const candidate of localeFallbacks(locale)) {
-        const catalog = builtInPlayerMessageCatalogs.get(candidate);
-        if (catalog)
-            return catalog;
-    }
-    return undefined;
-}
-function localeFallbacks(locale) {
-    const normalized = normalizedLocale(locale)?.toLowerCase();
-    if (!normalized)
-        return ["en"];
-    const parts = normalized.split("-");
-    const fallbacks = [];
-    for (let length = parts.length; length > 0; length -= 1) {
-        fallbacks.push(parts.slice(0, length).join("-"));
-    }
-    return fallbacks.includes("en") ? fallbacks : [...fallbacks, "en"];
-}
-function normalizedLocale(value) {
-    const trimmed = value?.trim();
-    if (!trimmed)
-        return undefined;
-    try {
-        return Intl.getCanonicalLocales(trimmed)[0] ?? trimmed;
-    }
-    catch {
-        return trimmed;
-    }
-}
-function defaultPlayerLocale(host) {
-    const elementLanguage = normalizedLocale(host?.getAttribute("lang"));
-    if (elementLanguage)
-        return elementLanguage;
-    const navigatorLanguages = globalThis.navigator?.languages ?? [];
-    for (const language of navigatorLanguages) {
-        const normalized = normalizedLocale(language);
-        if (normalized)
-            return normalized;
-    }
-    return (normalizedLocale(globalThis.navigator?.language) ??
-        normalizedLocale(host?.closest("[lang]")?.getAttribute("lang")) ??
-        normalizedLocale(host?.ownerDocument?.documentElement.lang) ??
-        normalizedLocale(globalThis.document?.documentElement.lang) ??
-        "en");
-}
-function removeButton(label, messages) {
-    const safeLabel = label?.trim() || messages.remove();
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = "qti3-icon-button qti3-remove-button";
-    button.title = messages.remove();
-    button.setAttribute("aria-label", messages.removePair({ label: safeLabel }));
-    button.append(trashIcon());
-    return button;
-}
-function inlineIcon(className, paths) {
-    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svg.setAttribute("width", "24");
-    svg.setAttribute("height", "24");
-    svg.setAttribute("viewBox", "0 0 24 24");
-    svg.setAttribute("fill", "none");
-    svg.setAttribute("stroke", "currentColor");
-    svg.setAttribute("stroke-width", "2");
-    svg.setAttribute("stroke-linecap", "round");
-    svg.setAttribute("stroke-linejoin", "round");
-    svg.setAttribute("aria-hidden", "true");
-    svg.setAttribute("focusable", "false");
-    svg.setAttribute("class", className);
-    for (const entry of paths) {
-        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        if (typeof entry === "string") {
-            path.setAttribute("d", entry);
-        }
-        else {
-            path.setAttribute("d", entry.d);
-            if (entry.stroke) {
-                path.setAttribute("stroke", entry.stroke);
-                path.style.stroke = entry.stroke;
-            }
-            if (entry.fill) {
-                path.setAttribute("fill", entry.fill);
-                path.style.fill = entry.fill;
-            }
-        }
-        svg.append(path);
-    }
-    return svg;
-}
-function renderChoice(interaction, update, currentValue) {
-    const group = responseGroup("qti3-choice-group");
-    const multiple = interaction.responseCardinality === "multiple" || interaction.responseCardinality === "ordered";
-    const selected = new Set(valueToStrings(currentValue));
-    const list = document.createElement("div");
-    list.className = "qti3-choice-list";
-    list.role = "group";
-    list.setAttribute("aria-label", `${readableType(interaction.type)} options`);
-    const syncSelected = () => {
-        for (const label of list.querySelectorAll(".qti3-choice-option")) {
-            const identifier = label.dataset.choiceIdentifier ?? "";
-            label.dataset.selected = selected.has(identifier) ? "true" : "false";
-        }
-    };
-    for (const [index, choice] of choicesOrFallback(interaction).entries()) {
-        const label = document.createElement("label");
-        label.className = "qti3-choice-option";
-        label.dataset.choiceIdentifier = choice.identifier;
-        const input = document.createElement("input");
-        input.type = multiple ? "checkbox" : "radio";
-        input.name = interaction.responseIdentifier ?? interaction.type;
-        input.value = choice.identifier;
-        input.checked = selected.has(choice.identifier);
-        input.addEventListener("change", () => {
-            if (multiple) {
-                if (input.checked)
-                    selected.add(choice.identifier);
-                else
-                    selected.delete(choice.identifier);
-                update([...selected]);
-            }
-            else {
-                selected.clear();
-                selected.add(choice.identifier);
-                syncSelected();
-                update(input.value);
-            }
-            syncSelected();
-        });
-        const visibleLabel = choicePresentationLabel(interaction, index);
-        const optionParts = [input];
-        if (visibleLabel) {
-            const labelText = document.createElement("span");
-            labelText.className = "qti3-choice-label";
-            labelText.textContent = visibleLabel;
-            optionParts.push(labelText);
-        }
-        const text = document.createElement("span");
-        text.className = "qti3-choice-text";
-        text.textContent = choice.text;
-        optionParts.push(text);
-        label.append(...optionParts);
-        list.append(label);
-    }
-    syncSelected();
-    group.append(list);
-    return group;
-}
-function responseGroup(className) {
-    const group = document.createElement("div");
-    group.className = ["qti3-response-group", className].filter(Boolean).join(" ");
-    return group;
-}
-function trashIcon() {
-    return inlineIcon("qti3-trash-icon", [
-        { d: "M0 0h24v24H0z", stroke: "none", fill: "none" },
-        "M4 7l16 0",
-        "M10 11l0 6",
-        "M14 11l0 6",
-        "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12",
-        "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3",
-    ]);
-}
-const movementIconPaths = {
-    up: ["M12 5l0 14", "M18 11l-6 -6", "M6 11l6 -6"],
-    down: ["M12 5l0 14", "M18 13l-6 6", "M6 13l6 6"],
-    left: ["M5 12l14 0", "M5 12l6 6", "M5 12l6 -6"],
-    right: ["M5 12l14 0", "M13 18l6 -6", "M13 6l6 6"],
-};
-function movementIcon(direction) {
-    return inlineIcon("qti3-movement-icon", movementIconPaths[direction]);
-}
-function movementButton(direction, accessibleName, onClick) {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = "qti3-icon-button qti3-move-button";
-    button.dataset.moveDirection = direction;
-    button.setAttribute("aria-label", accessibleName);
-    button.append(movementIcon(direction));
-    button.addEventListener("click", onClick);
-    return button;
-}
-function movementLabel(target, direction) {
-    return `Move ${target} ${direction}`;
-}
-function renderHottextResponse(interaction, update, currentValue) {
-    const group = document.createElement("div");
-    group.className = "qti3-hottext-group";
-    group.role = "group";
-    group.setAttribute("aria-label", "Hottext options");
-    const selected = new Set(valueToStrings(currentValue));
-    const multiple = interaction.responseCardinality === "multiple" || interaction.responseCardinality === "ordered";
-    const passage = document.createElement("p");
-    passage.className = "qti3-hottext-passage";
-    const syncSelected = () => {
-        for (const button of passage.querySelectorAll(".qti3-hottext-token")) {
-            const identifier = button.dataset.choiceIdentifier ?? "";
-            const isSelected = selected.has(identifier);
-            button.dataset.selected = isSelected ? "true" : "false";
-            button.setAttribute("aria-pressed", String(isSelected));
-        }
-    };
-    const segments = interaction.hottextSegments && interaction.hottextSegments.length > 0
-        ? interaction.hottextSegments
-        : choicesOrFallback(interaction).map((choice) => ({
-            kind: "hottext",
-            identifier: choice.identifier,
-            text: choice.text,
-            attributes: choice.attributes,
-            source: choice.source,
-        }));
-    const content = [];
-    for (const [segmentIndex, segment] of segments.entries()) {
-        if (segment.kind === "text") {
-            content.push(document.createTextNode(normalizeInlineSegmentText(segment.text)));
-            continue;
-        }
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = "qti3-hottext-token";
-        button.dataset.choiceIdentifier = segment.identifier;
-        button.textContent = segment.text;
-        button.addEventListener("click", () => {
-            if (multiple) {
-                if (selected.has(segment.identifier))
-                    selected.delete(segment.identifier);
-                else
-                    selected.add(segment.identifier);
-                update([...selected]);
-            }
-            else {
-                selected.clear();
-                selected.add(segment.identifier);
-                update(segment.identifier);
-            }
-            syncSelected();
-        });
-        appendInlineControl(content, button, segments[segmentIndex + 1]);
-    }
-    passage.append(...content);
-    syncSelected();
-    group.append(passage);
-    return group;
-}
-function choicePresentationLabel(interaction, index) {
-    const classNames = new Set((interaction.attributes.class ?? "").split(/\s+/).filter(Boolean));
-    if (classNames.has("qti-labels-none"))
-        return "";
-    const labels = classNames.has("qti-labels-decimal")
-        ? Array.from({ length: 26 }, (_, item) => `${item + 1}`)
-        : classNames.has("qti-labels-lower-alpha")
-            ? "abcdefghijklmnopqrstuvwxyz".split("")
-            : "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
-    const suffix = classNames.has("qti-labels-suffix-none")
-        ? ""
-        : classNames.has("qti-labels-suffix-parenthesis")
-            ? ")"
-            : ".";
-    return `${labels[index] ?? `${index + 1}`}${suffix}`;
-}
-function usesChoiceSet(interaction) {
-    if (interaction.type === "choice" || interaction.type === "hotspot") {
-        return true;
-    }
-    return (interaction.responseCardinality === "multiple" && interaction.responseBaseType === "identifier");
-}
-function usesOrderedResponse(interaction) {
-    return (interaction.responseCardinality === "ordered" ||
-        interaction.type === "order" ||
-        interaction.type === "graphicOrder");
-}
-function usesPairResponse(interaction) {
-    return (interaction.responseBaseType === "pair" ||
-        interaction.responseBaseType === "directedPair" ||
-        interaction.type === "associate" ||
-        interaction.type === "graphicAssociate" ||
-        interaction.type === "match" ||
-        interaction.type === "gapMatch" ||
-        interaction.type === "graphicGapMatch");
-}
-function renderOrderedResponse(interaction, update, currentValue) {
-    const group = responseGroup();
-    appendGraphicContext(group, interaction);
-    const choices = choicesOrFallback(interaction).filter((choice) => choice.role !== "gap");
-    const ordered = orderChoicesFromValue(choices, currentValue);
-    const list = document.createElement("ol");
-    list.className = "qti3-reorder-list";
-    list.setAttribute("aria-label", `${readableType(interaction.type)} current order`);
-    let draggedIdentifier;
-    let pointerDraggedIdentifier;
-    const commit = () => update(ordered.map((choice) => choice.identifier));
-    const moveChoice = (from, to) => {
-        if (from === to || from < 0 || from >= ordered.length || to < 0 || to >= ordered.length)
-            return;
-        const [choice] = ordered.splice(from, 1);
-        if (!choice)
-            return;
-        ordered.splice(to, 0, choice);
-        renderList();
-        commit();
-        list
-            .querySelector(`[data-choice-identifier="${choice.identifier}"]`)
-            ?.focus();
-    };
-    const renderList = () => {
-        list.replaceChildren(...ordered.map((choice, index) => {
-            const item = document.createElement("li");
-            item.className = "qti3-reorder-item";
-            item.draggable = true;
-            item.dataset.choiceIdentifier = choice.identifier;
-            item.addEventListener("pointerdown", (event) => {
-                if (event.button !== 0 || event.target.closest("button"))
-                    return;
-                pointerDraggedIdentifier = choice.identifier;
-                try {
-                    item.setPointerCapture(event.pointerId);
-                }
-                catch {
-                    // Synthetic pointer events and some browser drag paths do not create a capturable pointer.
-                }
-            });
-            item.addEventListener("pointerup", (event) => {
-                if (!pointerDraggedIdentifier)
-                    return;
-                const target = document
-                    .elementFromPoint(event.clientX, event.clientY)
-                    ?.closest(".qti3-reorder-item");
-                const targetIdentifier = target?.dataset.choiceIdentifier;
-                pointerDraggedIdentifier = undefined;
-                if (!targetIdentifier)
-                    return;
-                const from = ordered.findIndex((entry) => entry.identifier === choice.identifier);
-                const to = ordered.findIndex((entry) => entry.identifier === targetIdentifier);
-                moveChoice(from, to);
-            });
-            item.addEventListener("pointercancel", () => {
-                pointerDraggedIdentifier = undefined;
-            });
-            item.addEventListener("dragstart", (event) => {
-                draggedIdentifier = choice.identifier;
-                event.dataTransfer?.setData("text/plain", choice.identifier);
-                event.dataTransfer?.setDragImage(item, 12, 12);
-            });
-            item.addEventListener("dragover", (event) => {
-                event.preventDefault();
-                item.classList.add("qti3-drop-target");
-            });
-            item.addEventListener("dragleave", () => item.classList.remove("qti3-drop-target"));
-            item.addEventListener("drop", (event) => {
-                event.preventDefault();
-                item.classList.remove("qti3-drop-target");
-                const dragged = event.dataTransfer?.getData("text/plain") || draggedIdentifier;
-                const from = ordered.findIndex((entry) => entry.identifier === dragged);
-                moveChoice(from, index);
-            });
-            const handle = document.createElement("button");
-            handle.type = "button";
-            handle.className = "qti3-token qti3-reorder-handle";
-            handle.dataset.choiceIdentifier = choice.identifier;
-            handle.setAttribute("aria-label", `${choice.text}, position ${index + 1} of ${ordered.length}`);
-            handle.textContent = choice.text;
-            handle.addEventListener("keydown", (event) => {
-                if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
-                    event.preventDefault();
-                    moveChoice(index, index - 1);
-                }
-                else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-                    event.preventDefault();
-                    moveChoice(index, index + 1);
-                }
-            });
-            const up = movementButton("up", movementLabel(choice.text, "up"), () => moveChoice(index, index - 1));
-            up.disabled = index === 0;
-            const down = movementButton("down", movementLabel(choice.text, "down"), () => moveChoice(index, index + 1));
-            down.disabled = index === ordered.length - 1;
-            item.append(handle, up, down);
-            return item;
-        }));
-    };
-    renderList();
-    group.append(list);
-    return group;
-}
-function renderPairResponse(interaction, update, currentValue, messages) {
-    const group = responseGroup();
-    appendGraphicContext(group, interaction);
-    const sources = sourceChoices(interaction);
-    const targets = targetChoices(interaction);
-    const selectedPairs = valueToStrings(currentValue);
-    let selectedSource;
-    let selectedTarget;
-    const labels = pairRegionLabels(interaction);
-    const sourceRegion = tokenRegion(`${readableType(interaction.type)} sources`, labels.source);
-    const targetRegion = tokenRegion(`${readableType(interaction.type)} targets`, labels.target);
-    const selector = document.createElement("div");
-    selector.className = "qti3-pair-selector";
-    const pairList = document.createElement("ul");
-    pairList.className = "qti3-pair-list";
-    pairList.setAttribute("aria-label", `${readableType(interaction.type)} selected pairs`);
-    let draggedSource;
-    const commit = () => {
-        if (interaction.responseCardinality === "single")
-            update(selectedPairs[0] ?? null);
-        else
-            update([...selectedPairs]);
-    };
-    const syncPressed = () => {
-        for (const button of sourceRegion.querySelectorAll("button")) {
-            button.setAttribute("aria-pressed", button.dataset.choiceIdentifier === selectedSource?.identifier ? "true" : "false");
-        }
-        for (const button of targetRegion.querySelectorAll("button")) {
-            button.setAttribute("aria-pressed", button.dataset.choiceIdentifier === selectedTarget?.identifier ? "true" : "false");
-        }
-    };
-    const addSelectedPair = () => {
-        if (!selectedSource || !selectedTarget)
-            return;
-        const pair = `${selectedSource.identifier} ${selectedTarget.identifier}`;
-        if (!selectedPairs.includes(pair))
-            selectedPairs.push(pair);
-        selectedSource = undefined;
-        selectedTarget = undefined;
-        syncPressed();
-        renderPairs();
-        commit();
-    };
-    const addPair = (sourceIdentifier, targetIdentifier) => {
-        const source = sources.find((choice) => choice.identifier === sourceIdentifier);
-        const target = targets.find((choice) => choice.identifier === targetIdentifier);
-        if (!source || !target)
-            return;
-        selectedSource = source;
-        selectedTarget = target;
-        addSelectedPair();
-    };
-    const renderPairs = () => {
-        pairList.replaceChildren(...selectedPairs.map((pair) => {
-            const [source, target] = pair.split(" ");
-            const item = document.createElement("li");
-            item.className = "qti3-pair-chip";
-            const text = document.createElement("span");
-            text.textContent = `${choiceText(sources, source)} to ${choiceText(targets, target)}`;
-            const remove = removeButton(text.textContent, messages);
-            remove.addEventListener("click", () => {
-                const index = selectedPairs.indexOf(pair);
-                if (index >= 0)
-                    selectedPairs.splice(index, 1);
-                renderPairs();
-                commit();
-            });
-            item.append(text, remove);
-            return item;
-        }));
-    };
-    for (const choice of sources) {
-        const button = tokenButton(choice);
-        button.draggable = true;
-        button.addEventListener("dragstart", (event) => {
-            draggedSource = choice.identifier;
-            event.dataTransfer?.setData("text/plain", choice.identifier);
-            event.dataTransfer?.setDragImage(button, 8, 8);
-        });
-        button.addEventListener("dragend", () => {
-            draggedSource = undefined;
-            syncPressed();
-        });
-        button.addEventListener("click", () => {
-            selectedSource = choice;
-            syncPressed();
-            addSelectedPair();
-        });
-        sourceRegion.append(button);
-    }
-    for (const choice of targets) {
-        const button = tokenButton(choice);
-        button.addEventListener("dragover", (event) => {
-            event.preventDefault();
-            button.classList.add("qti3-drop-target");
-        });
-        button.addEventListener("dragleave", () => button.classList.remove("qti3-drop-target"));
-        button.addEventListener("drop", (event) => {
-            event.preventDefault();
-            button.classList.remove("qti3-drop-target");
-            addPair(event.dataTransfer?.getData("text/plain") || draggedSource, choice.identifier);
-        });
-        button.addEventListener("click", () => {
-            selectedTarget = choice;
-            syncPressed();
-            addSelectedPair();
-        });
-        targetRegion.append(button);
-    }
-    selector.append(sourceRegion, targetRegion);
-    renderPairs();
-    group.append(selector, pairList);
-    return group;
-}
-function renderMatchResponse(interaction, update, currentValue, messages) {
-    const group = responseGroup();
-    const sources = sourceChoices(interaction);
-    const targets = targetChoices(interaction);
-    const selectedPairs = valueToStrings(currentValue);
-    let selectedSource;
-    let selectedTarget;
-    let draggedSource;
-    const selector = document.createElement("div");
-    selector.className = "qti3-match-selector";
-    const sourceRegion = tokenRegion("Match sources");
-    sourceRegion.classList.add("qti3-match-source-bank");
-    const targetRegion = tokenRegion("Match targets");
-    targetRegion.classList.add("qti3-match-target-bank");
-    const pairList = document.createElement("ul");
-    pairList.className = "qti3-pair-list";
-    pairList.setAttribute("aria-label", "Match selected pairs");
-    const commit = () => {
-        if (interaction.responseCardinality === "single")
-            update(selectedPairs[0] ?? null);
-        else
-            update([...selectedPairs]);
-    };
-    const removePair = (pair) => {
-        const index = selectedPairs.indexOf(pair);
-        if (index >= 0)
-            selectedPairs.splice(index, 1);
-    };
-    const syncPressed = () => {
-        for (const button of sourceRegion.querySelectorAll("button")) {
-            const identifier = button.dataset.choiceIdentifier ?? "";
-            button.setAttribute("aria-pressed", identifier === selectedSource?.identifier ||
-                selectedPairs.some((pair) => pair.startsWith(`${identifier} `))
-                ? "true"
-                : "false");
-        }
-        for (const button of targetRegion.querySelectorAll("button")) {
-            const identifier = button.dataset.choiceIdentifier ?? "";
-            button.setAttribute("aria-pressed", identifier === selectedTarget?.identifier ||
-                selectedPairs.some((pair) => pair.endsWith(` ${identifier}`))
-                ? "true"
-                : "false");
-        }
-    };
-    const renderPairs = () => {
-        pairList.replaceChildren(...selectedPairs.map((pair) => {
-            const [source, target] = pair.split(" ");
-            const label = `${choiceText(sources, source)} to ${choiceText(targets, target)}`;
-            const item = document.createElement("li");
-            item.className = "qti3-pair-chip";
-            const text = document.createElement("span");
-            text.textContent = label;
-            const remove = removeButton(label, messages);
-            remove.addEventListener("click", () => {
-                removePair(pair);
-                syncPressed();
-                renderPairs();
-                commit();
-            });
-            item.append(text, remove);
-            return item;
-        }));
-    };
-    const clearSelection = () => {
-        selectedSource = undefined;
-        selectedTarget = undefined;
-    };
-    const removePairsForSource = (source) => {
-        for (const existing of selectedPairs.filter((pair) => pair.startsWith(`${source.identifier} `))) {
-            removePair(existing);
-        }
-    };
-    const removePairsForTarget = (target) => {
-        for (const existing of selectedPairs.filter((pair) => pair.endsWith(` ${target.identifier}`))) {
-            removePair(existing);
-        }
-    };
-    const togglePair = (source, target) => {
-        const pair = `${source.identifier} ${target.identifier}`;
-        if (selectedPairs.includes(pair)) {
-            removePair(pair);
-        }
-        else {
-            if (interaction.responseCardinality === "single")
-                selectedPairs.splice(0);
-            if (parseUnlimitedMaximum(source.attributes["match-max"]) === 1) {
-                removePairsForSource(source);
-            }
-            if (parseUnlimitedMaximum(target.attributes["match-max"]) === 1) {
-                removePairsForTarget(target);
-            }
-            selectedPairs.push(pair);
-        }
-        clearSelection();
-        syncPressed();
-        renderPairs();
-        commit();
-    };
-    const addSelectedPair = () => {
-        if (!selectedSource || !selectedTarget)
-            return;
-        togglePair(selectedSource, selectedTarget);
-    };
-    const addPair = (sourceIdentifier, targetIdentifier) => {
-        const source = sources.find((choice) => choice.identifier === sourceIdentifier);
-        const target = targets.find((choice) => choice.identifier === targetIdentifier);
-        if (!source || !target)
-            return;
-        togglePair(source, target);
-    };
-    for (const source of sources) {
-        const button = tokenButton(source);
-        button.classList.add("qti3-match-source");
-        button.draggable = true;
-        button.addEventListener("dragstart", (event) => {
-            draggedSource = source.identifier;
-            event.dataTransfer?.setData("text/plain", source.identifier);
-            event.dataTransfer?.setDragImage(button, 8, 8);
-        });
-        button.addEventListener("dragend", () => {
-            draggedSource = undefined;
-            syncPressed();
-        });
-        button.addEventListener("click", () => {
-            selectedSource = source;
-            syncPressed();
-            addSelectedPair();
-        });
-        button.addEventListener("keydown", (event) => {
-            if (event.key !== "Delete" && event.key !== "Backspace")
-                return;
-            event.preventDefault();
-            removePairsForSource(source);
-            clearSelection();
-            syncPressed();
-            renderPairs();
-            commit();
-        });
-        sourceRegion.append(button);
-    }
-    for (const target of targets) {
-        const button = tokenButton(target);
-        button.classList.add("qti3-match-target");
-        button.addEventListener("dragover", (event) => {
-            event.preventDefault();
-            button.classList.add("qti3-drop-target");
-        });
-        button.addEventListener("dragleave", () => button.classList.remove("qti3-drop-target"));
-        button.addEventListener("drop", (event) => {
-            event.preventDefault();
-            button.classList.remove("qti3-drop-target");
-            addPair(event.dataTransfer?.getData("text/plain") || draggedSource, target.identifier);
-        });
-        button.addEventListener("click", () => {
-            selectedTarget = target;
-            syncPressed();
-            addSelectedPair();
-        });
-        button.addEventListener("keydown", (event) => {
-            if (event.key !== "Delete" && event.key !== "Backspace")
-                return;
-            event.preventDefault();
-            removePairsForTarget(target);
-            clearSelection();
-            syncPressed();
-            renderPairs();
-            commit();
-        });
-        targetRegion.append(button);
-    }
-    selector.append(sourceRegion, targetRegion);
-    syncPressed();
-    renderPairs();
-    group.append(selector, pairList);
-    return group;
-}
-function pairRegionLabels(interaction) {
-    if (interaction.type === "associate")
-        return { source: "First concept", target: "Pair with" };
-    if (interaction.type === "match")
-        return { source: "Prompt", target: "Match" };
-    return { source: "Source", target: "Target" };
-}
-function renderGraphicOrderResponse(interaction, update, currentValue, messages) {
-    const group = responseGroup();
-    const width = objectWidth(interaction);
-    const height = objectHeight(interaction);
-    const choices = choicesOrFallback(interaction).filter((choice) => choice.role === "hotspot");
-    const orderedIdentifiers = valueToStrings(currentValue).filter((identifier) => choices.some((choice) => choice.identifier === identifier));
-    const surface = document.createElement("div");
-    surface.className = "qti3-graphic-order-surface";
-    surface.role = "group";
-    surface.setAttribute("aria-label", `${readableType(interaction.type)} hotspots`);
-    surface.style.position = "relative";
-    surface.style.inlineSize = `${width}px`;
-    surface.style.aspectRatio = `${width} / ${height}`;
-    surface.style.maxInlineSize = "100%";
-    surface.style.border = "1px solid CanvasText";
-    surface.style.background = "Canvas";
-    surface.style.overflow = "hidden";
-    const object = interaction.object;
-    if (object?.data && objectIsImage(object)) {
-        const image = document.createElement("img");
-        image.src = object.data;
-        image.alt = object.text || `${readableType(interaction.type)} image`;
-        image.style.inlineSize = "100%";
-        image.style.blockSize = "100%";
-        image.style.objectFit = "contain";
-        surface.append(image);
-    }
-    const sequenceLines = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    sequenceLines.classList.add("qti3-graphic-sequence-lines");
-    sequenceLines.setAttribute("viewBox", `0 0 ${width} ${height}`);
-    sequenceLines.setAttribute("aria-hidden", "true");
-    const markerId = `qti3-arrow-${Math.random().toString(36).slice(2)}`;
-    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
-    marker.setAttribute("id", markerId);
-    marker.setAttribute("viewBox", "0 0 10 10");
-    marker.setAttribute("refX", "8");
-    marker.setAttribute("refY", "5");
-    marker.setAttribute("markerWidth", "5");
-    marker.setAttribute("markerHeight", "5");
-    marker.setAttribute("orient", "auto-start-reverse");
-    const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path");
-    arrow.setAttribute("d", "M 0 0 L 10 5 L 0 10 z");
-    marker.append(arrow);
-    defs.append(marker);
-    sequenceLines.append(defs);
-    surface.append(sequenceLines);
-    const summary = document.createElement("p");
-    summary.className = "qti3-selection-summary";
-    summary.setAttribute("aria-live", "polite");
-    const list = document.createElement("ol");
-    list.className = "qti3-graphic-order-list";
-    list.setAttribute("aria-label", `${readableType(interaction.type)} selected order`);
-    const orderedChoices = () => orderedIdentifiers
-        .map((identifier) => choices.find((choice) => choice.identifier === identifier))
-        .filter((choice) => Boolean(choice));
-    const commit = () => update([...orderedIdentifiers]);
-    const focusHotspot = (identifier) => {
-        surface.querySelector(`[data-choice-identifier="${identifier}"]`)?.focus();
-    };
-    const focusRelativeHotspot = (choice, delta) => {
-        const index = choices.findIndex((entry) => entry.identifier === choice.identifier);
-        const next = choices[(index + delta + choices.length) % choices.length];
-        if (next)
-            focusHotspot(next.identifier);
-    };
-    const chooseHotspot = (choice) => {
-        const existingIndex = orderedIdentifiers.indexOf(choice.identifier);
-        if (existingIndex >= 0)
-            orderedIdentifiers.splice(existingIndex, 1);
-        orderedIdentifiers.push(choice.identifier);
-        renderState();
-        commit();
-        focusHotspot(choice.identifier);
-    };
-    const removeHotspot = (identifier) => {
-        const index = orderedIdentifiers.indexOf(identifier);
-        if (index < 0)
-            return;
-        orderedIdentifiers.splice(index, 1);
-        renderState();
-        commit();
-        focusHotspot(identifier);
-    };
-    const moveHotspot = (identifier, delta) => {
-        const index = orderedIdentifiers.indexOf(identifier);
-        const targetIndex = index + delta;
-        if (index < 0 || targetIndex < 0 || targetIndex >= orderedIdentifiers.length)
-            return;
-        const [entry] = orderedIdentifiers.splice(index, 1);
-        if (!entry)
-            return;
-        orderedIdentifiers.splice(targetIndex, 0, entry);
-        renderState();
-        commit();
-        list.querySelector(`[data-choice-identifier="${identifier}"]`)?.focus();
-    };
-    const renderState = () => {
-        for (const line of sequenceLines.querySelectorAll("line"))
-            line.remove();
-        const currentChoices = orderedChoices();
-        for (let index = 0; index < currentChoices.length - 1; index += 1) {
-            const current = currentChoices[index];
-            const next = currentChoices[index + 1];
-            if (!current || !next)
-                continue;
-            const start = hotspotCenter(current, width, height);
-            const end = hotspotCenter(next, width, height);
-            const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            line.setAttribute("x1", String(start.x));
-            line.setAttribute("y1", String(start.y));
-            line.setAttribute("x2", String(end.x));
-            line.setAttribute("y2", String(end.y));
-            line.setAttribute("marker-end", `url(#${markerId})`);
-            sequenceLines.append(line);
-        }
-        for (const button of surface.querySelectorAll(".qti3-hotspot-button")) {
-            const identifier = button.dataset.choiceIdentifier ?? "";
-            const index = orderedIdentifiers.indexOf(identifier);
-            const isSelected = index >= 0;
-            button.dataset.selected = isSelected ? "true" : "false";
-            button.setAttribute("aria-pressed", isSelected ? "true" : "false");
-            button.dataset.order = isSelected ? String(index + 1) : "";
-            const badge = button.querySelector(".qti3-graphic-order-number");
-            if (badge)
-                badge.textContent = isSelected ? String(index + 1) : "";
-        }
-        summary.textContent =
-            orderedIdentifiers.length > 0
-                ? `${orderedIdentifiers.length} ${orderedIdentifiers.length === 1 ? "region" : "regions"} ordered.`
-                : "No regions ordered";
-        list.replaceChildren(...currentChoices.map((choice, index) => {
-            const item = document.createElement("li");
-            item.className = "qti3-graphic-order-item";
-            item.dataset.choiceIdentifier = choice.identifier;
-            const choiceLabel = hotspotDisplayLabel(choice, choices);
-            const label = document.createElement("button");
-            label.type = "button";
-            label.className = "qti3-token";
-            label.dataset.choiceIdentifier = choice.identifier;
-            label.textContent = `${index + 1}. ${choiceLabel}`;
-            label.setAttribute("aria-label", `${choiceLabel}, position ${index + 1} of ${currentChoices.length}`);
-            label.addEventListener("click", () => focusHotspot(choice.identifier));
-            label.addEventListener("keydown", (event) => {
-                if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
-                    event.preventDefault();
-                    moveHotspot(choice.identifier, -1);
-                }
-                else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-                    event.preventDefault();
-                    moveHotspot(choice.identifier, 1);
-                }
-                else if (event.key === "Delete" || event.key === "Backspace") {
-                    event.preventDefault();
-                    removeHotspot(choice.identifier);
-                }
-            });
-            const up = movementButton("up", movementLabel(choiceLabel, "up"), () => moveHotspot(choice.identifier, -1));
-            up.disabled = index === 0;
-            const down = movementButton("down", movementLabel(choiceLabel, "down"), () => moveHotspot(choice.identifier, 1));
-            down.disabled = index === currentChoices.length - 1;
-            const remove = removeButton(choiceLabel, messages);
-            remove.addEventListener("click", () => removeHotspot(choice.identifier));
-            item.append(label, up, down, remove);
-            return item;
-        }));
-    };
-    for (const [index, choice] of choices.entries()) {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = "qti3-hotspot-button qti3-graphic-order-hotspot";
-        button.dataset.choiceIdentifier = choice.identifier;
-        button.title = hotspotAccessibleLabel(choice, index);
-        button.setAttribute("aria-label", hotspotAccessibleLabel(choice, index));
-        button.setAttribute("aria-pressed", "false");
-        button.style.position = "absolute";
-        placeHotspotButton(button, choice, width, height);
-        const text = document.createElement("span");
-        text.className = "qti3-hotspot-label";
-        text.textContent = hotspotDisplayLabel(choice, choices);
-        const order = document.createElement("span");
-        order.className = "qti3-graphic-order-number";
-        order.setAttribute("aria-hidden", "true");
-        button.append(text, order);
-        button.addEventListener("click", () => chooseHotspot(choice));
-        button.addEventListener("keydown", (event) => {
-            if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-                event.preventDefault();
-                focusRelativeHotspot(choice, 1);
-            }
-            else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-                event.preventDefault();
-                focusRelativeHotspot(choice, -1);
-            }
-            else if (event.key === "Delete" || event.key === "Backspace") {
-                event.preventDefault();
-                removeHotspot(choice.identifier);
-            }
-        });
-        surface.append(button);
-    }
-    renderState();
-    group.append(surface, summary, list);
-    return group;
-}
-function renderGraphicAssociateResponse(interaction, update, currentValue, messages) {
-    const group = responseGroup();
-    const width = objectWidth(interaction);
-    const height = objectHeight(interaction);
-    const choices = choicesOrFallback(interaction).filter((choice) => choice.role === "hotspot");
-    const selectedPairs = valueToStrings(currentValue);
-    const maximumAssociations = interaction.responseCardinality === "single" ? 1 : maximumAllowedResponses(interaction);
-    let selectedHotspot;
-    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";
-    surface.setAttribute("aria-label", `${readableType(interaction.type)} hotspots`);
-    surface.style.position = "relative";
-    surface.style.inlineSize = `${width}px`;
-    surface.style.aspectRatio = `${width} / ${height}`;
-    surface.style.maxInlineSize = "100%";
-    surface.style.border = "1px solid CanvasText";
-    surface.style.background = "Canvas";
-    surface.style.overflow = "hidden";
-    const object = interaction.object;
-    if (object?.data && objectIsImage(object)) {
-        const image = document.createElement("img");
-        image.src = object.data;
-        image.alt = object.text || `${readableType(interaction.type)} image`;
-        image.style.inlineSize = "100%";
-        image.style.blockSize = "100%";
-        image.style.objectFit = "contain";
-        surface.append(image);
-    }
-    const connections = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    connections.classList.add("qti3-graphic-associate-lines");
-    connections.setAttribute("viewBox", `0 0 ${width} ${height}`);
-    connections.setAttribute("aria-hidden", "true");
-    surface.append(connections);
-    const summary = document.createElement("p");
-    summary.className = "qti3-selection-summary";
-    summary.setAttribute("aria-live", "polite");
-    const pairList = document.createElement("ul");
-    pairList.className = "qti3-pair-list";
-    pairList.setAttribute("aria-label", `${readableType(interaction.type)} selected pairs`);
-    const commit = () => {
-        if (interaction.responseCardinality === "single")
-            update(selectedPairs[0] ?? null);
-        else
-            update([...selectedPairs]);
-    };
-    const removePair = (pair) => {
-        const index = selectedPairs.indexOf(pair);
-        if (index < 0)
-            return;
-        selectedPairs.splice(index, 1);
-        renderState();
-        commit();
-    };
-    const removePairsForHotspot = (identifier) => {
-        let removed = false;
-        for (let index = selectedPairs.length - 1; index >= 0; index -= 1) {
-            const [source, target] = selectedPairs[index]?.split(" ") ?? [];
-            if (source === identifier || target === identifier) {
-                selectedPairs.splice(index, 1);
-                removed = true;
-            }
-        }
-        if (!removed)
-            return;
-        renderState();
-        commit();
-    };
-    const addPair = (source, target) => {
-        if (source.identifier === target.identifier) {
-            selectedHotspot = undefined;
-            renderState();
-            return;
-        }
-        const pair = `${source.identifier} ${target.identifier}`;
-        if (!selectedPairs.includes(pair)) {
-            if (interaction.responseCardinality === "single")
-                selectedPairs.splice(0);
-            if (maximumAssociations !== undefined &&
-                selectedPairs.length >= maximumAssociations &&
-                interaction.responseCardinality !== "single") {
-                selectedHotspot = undefined;
-                renderState();
-                return;
-            }
-            if (exceedsHotspotMatchMax(source, selectedPairs) ||
-                exceedsHotspotMatchMax(target, selectedPairs)) {
-                selectedHotspot = undefined;
-                renderState();
-                return;
-            }
-            selectedPairs.push(pair);
-        }
-        selectedHotspot = undefined;
-        renderState();
-        commit();
-    };
-    const authoredPointFromPointer = (event) => {
-        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;
-            renderState();
-            return;
-        }
-        addPair(selectedHotspot, choice);
-    };
-    const focusRelativeHotspot = (choice, delta) => {
-        const index = choices.findIndex((entry) => entry.identifier === choice.identifier);
-        const next = choices[(index + delta + choices.length) % choices.length];
-        if (!next)
-            return;
-        surface
-            .querySelector(`[data-choice-identifier="${next.identifier}"]`)
-            ?.focus();
-    };
-    const renderState = () => {
-        connections.replaceChildren(...selectedPairs.flatMap((pair) => {
-            const [sourceIdentifier, targetIdentifier] = pair.split(" ");
-            const source = choices.find((choice) => choice.identifier === sourceIdentifier);
-            const target = choices.find((choice) => choice.identifier === targetIdentifier);
-            if (!source || !target)
-                return [];
-            const start = hotspotCenter(source, width, height);
-            const end = hotspotCenter(target, width, height);
-            const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            line.setAttribute("x1", String(start.x));
-            line.setAttribute("y1", String(start.y));
-            line.setAttribute("x2", String(end.x));
-            line.setAttribute("y2", String(end.y));
-            return [line];
-        }));
-        for (const button of surface.querySelectorAll(".qti3-hotspot-button")) {
-            const identifier = button.dataset.choiceIdentifier ?? "";
-            const isActive = identifier === selectedHotspot?.identifier;
-            const isPaired = selectedPairs.some((pair) => pair.split(" ").includes(identifier));
-            button.setAttribute("aria-pressed", isActive ? "true" : "false");
-            button.dataset.selected = isActive || isPaired ? "true" : "false";
-        }
-        summary.textContent = selectedHotspot
-            ? `${hotspotDisplayLabel(selectedHotspot, choices)} selected. Choose another hotspot.`
-            : selectedPairs.length > 0
-                ? `${selectedPairs.length} ${selectedPairs.length === 1 ? "association" : "associations"} made.`
-                : "No associations made";
-        pairList.replaceChildren(...selectedPairs.map((pair) => {
-            const [source, target] = pair.split(" ");
-            const sourceChoice = choices.find((choice) => choice.identifier === source);
-            const targetChoice = choices.find((choice) => choice.identifier === target);
-            const pairLabel = `${sourceChoice ? hotspotDisplayLabel(sourceChoice, choices) : source} to ${targetChoice ? hotspotDisplayLabel(targetChoice, choices) : target}`;
-            const item = document.createElement("li");
-            item.className = "qti3-pair-chip";
-            const text = document.createElement("span");
-            text.textContent = pairLabel;
-            const remove = removeButton(pairLabel, messages);
-            remove.addEventListener("click", () => removePair(pair));
-            item.append(text, remove);
-            return item;
-        }));
-    };
-    for (const [index, choice] of choices.entries()) {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = "qti3-hotspot-button qti3-graphic-associate-hotspot";
-        button.dataset.choiceIdentifier = choice.identifier;
-        button.textContent = hotspotDisplayLabel(choice, choices);
-        button.title = hotspotAccessibleLabel(choice, index);
-        button.setAttribute("aria-pressed", "false");
-        button.setAttribute("aria-label", hotspotAccessibleLabel(choice, index));
-        button.style.position = "absolute";
-        button.style.touchAction = "none";
-        placeHotspotButton(button, choice, width, height);
-        button.addEventListener("click", (event) => {
-            if (suppressNextClick) {
-                suppressNextClick = false;
-                event.preventDefault();
-                return;
-            }
-            chooseHotspot(choice);
-        });
-        button.addEventListener("pointerdown", (event) => {
-            if (event.button !== 0)
-                return;
-            draggedHotspot = choice;
-            dragPointerId = event.pointerId;
-            dragStart = { x: event.clientX, y: event.clientY };
-            dragStarted = false;
-            button.setPointerCapture(event.pointerId);
-        });
-        button.addEventListener("pointermove", (event) => {
-            if (dragPointerId !== event.pointerId || !draggedHotspot || !dragStart)
-                return;
-            const moved = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
-            if (!dragStarted && moved < 4)
-                return;
-            if (!dragStarted) {
-                dragStarted = true;
-                suppressFollowingClick();
-                selectedHotspot = draggedHotspot;
-                renderState();
-            }
-            updatePreviewLine(draggedHotspot, event);
-            event.preventDefault();
-        });
-        button.addEventListener("pointerup", (event) => {
-            if (dragPointerId !== event.pointerId || !draggedHotspot)
-                return;
-            const source = draggedHotspot;
-            draggedHotspot = undefined;
-            dragPointerId = undefined;
-            dragStart = undefined;
-            button.releasePointerCapture(event.pointerId);
-            if (!dragStarted)
-                return;
-            dragStarted = false;
-            suppressFollowingClick();
-            finishDrag(event, source);
-            event.preventDefault();
-        });
-        button.addEventListener("pointercancel", (event) => {
-            if (dragPointerId !== event.pointerId)
-                return;
-            draggedHotspot = undefined;
-            dragPointerId = undefined;
-            dragStart = undefined;
-            dragStarted = false;
-            removePreviewLine();
-            selectedHotspot = undefined;
-            renderState();
-        });
-        button.addEventListener("keydown", (event) => {
-            if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-                event.preventDefault();
-                focusRelativeHotspot(choice, 1);
-            }
-            else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-                event.preventDefault();
-                focusRelativeHotspot(choice, -1);
-            }
-            else if (event.key === "Delete" || event.key === "Backspace") {
-                event.preventDefault();
-                removePairsForHotspot(choice.identifier);
-            }
-        });
-        surface.append(button);
-    }
-    renderState();
-    group.append(surface, summary, pairList);
-    return group;
-}
-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);
-    const gaps = targetChoices(interaction);
-    const assignments = new Map();
-    let selectedSource;
-    let draggedSource;
-    const sourceRegion = tokenRegion(`${readableType(interaction.type)} choices`);
-    const gapRegion = document.createElement("div");
-    gapRegion.className = "qti3-gap-region qti3-gap-passage";
-    gapRegion.role = "group";
-    gapRegion.setAttribute("aria-label", `${readableType(interaction.type)} targets`);
-    for (const pair of valueToStrings(currentValue)) {
-        const [sourceIdentifier, gapIdentifier] = pair.split(/\s+/);
-        const source = sources.find((choice) => choice.identifier === sourceIdentifier);
-        if (source && gapIdentifier)
-            assignments.set(gapIdentifier, source);
-    }
-    const commit = () => {
-        update([...assignments.entries()].map(([gapIdentifier, source]) => `${source.identifier} ${gapIdentifier}`));
-    };
-    const syncSources = () => {
-        for (const button of sourceRegion.querySelectorAll("button")) {
-            button.setAttribute("aria-pressed", button.dataset.choiceIdentifier === selectedSource?.identifier ? "true" : "false");
-        }
-    };
-    const assign = (gap, sourceIdentifier) => {
-        const source = sources.find((choice) => choice.identifier === sourceIdentifier);
-        if (!source)
-            return;
-        assignments.set(gap.identifier, source);
-        selectedSource = undefined;
-        syncSources();
-        renderGaps();
-        commit();
-    };
-    const gapControl = (gap, index) => {
-        const assigned = assignments.get(gap.identifier);
-        const gapLabel = `Gap ${index + 1}`;
-        const target = document.createElement("span");
-        target.className = "qti3-gap-target";
-        target.dataset.gapIdentifier = gap.identifier;
-        target.addEventListener("dragover", (event) => {
-            event.preventDefault();
-            target.classList.add("qti3-drop-target");
-        });
-        target.addEventListener("dragleave", () => target.classList.remove("qti3-drop-target"));
-        target.addEventListener("drop", (event) => {
-            event.preventDefault();
-            target.classList.remove("qti3-drop-target");
-            assign(gap, event.dataTransfer?.getData("text/plain") || draggedSource);
-        });
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = "qti3-gap-button";
-        button.textContent = assigned ? assigned.text : "";
-        button.setAttribute("aria-label", assigned ? `${gapLabel}, assigned ${assigned.text}` : `${gapLabel}, empty`);
-        button.addEventListener("click", () => assign(gap, selectedSource?.identifier));
-        button.addEventListener("keydown", (event) => {
-            if (event.key !== "Delete" && event.key !== "Backspace")
-                return;
-            if (!assignments.has(gap.identifier))
-                return;
-            event.preventDefault();
-            assignments.delete(gap.identifier);
-            renderGaps();
-            commit();
-        });
-        target.append(button);
-        return target;
-    };
-    const renderGaps = () => {
-        const segments = interaction.gapMatchSegments ?? [];
-        const hasInlineGaps = segments.some((segment) => segment.kind === "gap");
-        if (!hasInlineGaps) {
-            gapRegion.replaceChildren(...gaps.map((gap, index) => gapControl(gap, index)));
-            return;
-        }
-        const content = [];
-        for (const [segmentIndex, segment] of segments.entries()) {
-            if (segment.kind === "text") {
-                content.push(document.createTextNode(normalizeInlineSegmentText(segment.text)));
-                continue;
-            }
-            const gapIndex = gaps.findIndex((gap) => gap.identifier === segment.identifier);
-            const gap = gaps[gapIndex];
-            if (gap) {
-                appendInlineControl(content, gapControl(gap, gapIndex), segments[segmentIndex + 1]);
-            }
-        }
-        gapRegion.replaceChildren(...content);
-    };
-    for (const source of sources) {
-        const button = tokenButton(source);
-        button.draggable = true;
-        button.addEventListener("dragstart", (event) => {
-            draggedSource = source.identifier;
-            event.dataTransfer?.setData("text/plain", source.identifier);
-        });
-        button.addEventListener("click", () => {
-            selectedSource = source;
-            syncSources();
-        });
-        sourceRegion.append(button);
-    }
-    renderGaps();
-    group.append(sourceRegion, gapRegion);
-    return group;
-}
-function renderGraphicGapMatchResponse(interaction, 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();
-        });
-        button.style.position = "absolute";
-        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";
-    select.setAttribute("aria-label", interactionLabel(interaction));
-    appendOptions(select, choicesOrFallback(interaction));
-    const [selected] = valueToStrings(currentValue);
-    if (selected)
-        select.value = selected;
-    select.addEventListener("change", () => update(select.value === "" ? null : select.value));
-    return select;
-}
-function appendInlineControl(content, control, nextSegment) {
-    const previous = content.at(-1);
-    if (previous instanceof Text && !/\s$/.test(previous.data)) {
-        content.push(document.createTextNode(" "));
-    }
-    content.push(control);
-    const nextText = nextSegment?.kind === "text" ? normalizeInlineSegmentText(nextSegment.text) : undefined;
-    if (nextText && !/^\s|^[,.;:!?]/.test(nextText)) {
-        content.push(document.createTextNode(" "));
-    }
-}
-function normalizeInlineSegmentText(value) {
-    return (value ?? "").replace(/\s+([,.;:!?])/g, "$1");
-}
-function interactionLabel(interaction) {
-    return interaction.prompt ?? interaction.contextText ?? readableType(interaction.type);
-}
-function qtiSharedClassNames(value) {
-    return (value ?? "").split(/\s+/).filter((className) => className.startsWith("qti-"));
-}
-function renderTextResponse(interaction, update, mode, currentValue) {
-    const group = document.createElement("div");
-    group.className = "qti3-text-response";
-    const expectedLength = Number(interaction.attributes["expected-length"] ?? 0);
-    const expectedLines = Number(interaction.attributes["expected-lines"] ?? 0);
-    const control = mode === "extended" ? document.createElement("textarea") : document.createElement("input");
-    control.className = mode === "extended" ? "qti3-textarea" : "qti3-text-input";
-    control.value = scalarString(currentValue);
-    control.setAttribute("aria-label", interaction.prompt ?? (mode === "extended" ? "Extended text response" : "Text response"));
-    if (mode === "extended" && expectedLines > 0) {
-        control.rows = expectedLines;
-    }
-    if (mode === "entry") {
-        applyExpectedTextEntryWidth(control, expectedLength);
-    }
-    const counter = mode === "extended" ? document.createElement("p") : undefined;
-    if (counter) {
-        counter.className = "qti3-counter";
-        counter.setAttribute("aria-live", "polite");
-    }
-    const sync = (emitResponse = true) => {
-        const value = control.value;
-        if (counter) {
-            const words = value.trim().length > 0 ? value.trim().split(/\s+/).length : 0;
-            counter.textContent = `${value.length} characters, ${words} words`;
-        }
-        if (emitResponse)
-            update(value);
-    };
-    control.addEventListener("input", () => sync());
-    control.addEventListener("change", () => sync());
-    sync(false);
-    group.append(control);
-    if (counter)
-        group.append(counter);
-    return group;
-}
-function applyExpectedTextEntryWidth(control, expectedLength) {
-    if (!(control instanceof HTMLInputElement) || expectedLength <= 0)
-        return;
-    const width = Math.max(8, Math.min(expectedLength + 2, 72));
-    control.style.inlineSize = `${width}ch`;
-}
-function renderInlineTextEntry(interaction, update, currentValue) {
-    const group = document.createElement("span");
-    group.className = "qti3-inline-text-response";
-    const input = document.createElement("input");
-    input.className = "qti3-text-input qti3-inline-text-input";
-    input.value = scalarString(currentValue);
-    input.setAttribute("aria-label", interaction.prompt ?? interaction.contextText ?? "Text response");
-    const expectedLength = Number(interaction.attributes["expected-length"] ?? 0);
-    applyExpectedTextEntryWidth(input, expectedLength);
-    const sync = (emitResponse = true) => {
-        if (emitResponse)
-            update(input.value);
-    };
-    input.addEventListener("input", () => sync());
-    input.addEventListener("change", () => sync());
-    sync(false);
-    group.append(input);
-    return group;
-}
-function renderSliderResponse(interaction, update, currentValue) {
-    const group = document.createElement("div");
-    group.className = "qti3-slider-response";
-    const input = document.createElement("input");
-    input.type = "range";
-    input.min = interaction.attributes["lower-bound"] ?? "0";
-    input.max = interaction.attributes["upper-bound"] ?? "100";
-    input.step = interaction.attributes.step ?? "1";
-    input.value = scalarString(currentValue) || interaction.attributes["lower-bound"] || "0";
-    input.setAttribute("aria-label", interaction.prompt ?? "Slider response");
-    const output = document.createElement("output");
-    output.className = "qti3-slider-output";
-    output.value = input.value;
-    output.textContent = input.value;
-    const sync = () => {
-        output.value = input.value;
-        output.textContent = input.value;
-        update(coerceResponseInputValue(input.value, interaction.responseBaseType));
-    };
-    input.addEventListener("input", sync);
-    group.append(input, output);
-    return group;
-}
-function appendGraphicContext(group, interaction) {
-    if (!interaction.type.startsWith("graphic") || !interaction.object)
-        return;
-    const context = document.createElement("div");
-    context.className = "qti3-graphic-context";
-    context.append(renderObjectAsset(interaction));
-    group.append(context);
-}
-function renderSelectPointResponse(interaction, update, currentValue) {
-    const group = document.createElement("div");
-    group.role = "group";
-    group.setAttribute("aria-label", `${readableType(interaction.type)} coordinate response`);
-    const isMultiple = interaction.responseCardinality === "multiple";
-    const maxPoints = isMultiple ? maximumAllowedResponses(interaction) : 1;
-    const surface = document.createElement("button");
-    surface.type = "button";
-    surface.className = "qti3-point-surface";
-    surface.setAttribute("aria-label", `${readableType(interaction.type)} coordinate area`);
-    surface.style.display = "block";
-    surface.style.position = "relative";
-    surface.style.inlineSize = `min(100%, ${objectWidth(interaction)}px)`;
-    surface.style.aspectRatio = `${objectWidth(interaction)} / ${objectHeight(interaction)}`;
-    surface.style.boxSizing = "border-box";
-    surface.style.border = "1px solid CanvasText";
-    surface.style.background = "Canvas";
-    surface.style.color = "CanvasText";
-    surface.style.cursor = "crosshair";
-    surface.style.overflow = "hidden";
-    const object = interaction.object;
-    if (object?.data && object.type?.startsWith("image/")) {
-        const image = document.createElement("img");
-        image.src = object.data;
-        image.alt = "";
-        image.style.position = "absolute";
-        image.style.inset = "0";
-        image.style.inlineSize = "100%";
-        image.style.blockSize = "100%";
-        image.style.objectFit = "contain";
-        image.style.pointerEvents = "none";
-        surface.append(image);
-    }
-    const width = objectWidth(interaction);
-    const height = objectHeight(interaction);
-    let points = parsePointValues(currentValue);
-    let activeIndex = points.length > 0 ? points.length - 1 : -1;
-    const coordinate = document.createElement("output");
-    coordinate.className = "qti3-coordinate-output";
-    const initialPoint = () => ({
-        x: Math.round(width / 2),
-        y: Math.round(height / 2),
-    });
-    const emitValue = () => {
-        const values = points.map(pointToString);
-        if (isMultiple)
-            return values;
-        return values[0] ?? "";
-    };
-    const commit = () => {
-        update(emitValue());
-    };
-    const syncMarker = () => {
-        surface.querySelectorAll(".qti3-point-marker").forEach((marker) => marker.remove());
-        if (points.length === 0) {
-            coordinate.value = "";
-            coordinate.textContent = "No point selected";
-            surface.setAttribute("aria-label", `${readableType(interaction.type)} coordinate area`);
-            return;
-        }
-        points.forEach((point, index) => {
-            const marker = document.createElement("span");
-            marker.className = "qti3-point-marker";
-            marker.setAttribute("aria-hidden", "true");
-            marker.style.position = "absolute";
-            marker.style.inlineSize = "8px";
-            marker.style.blockSize = "8px";
-            marker.style.border = "2px solid CanvasText";
-            marker.style.borderRadius = "50%";
-            marker.style.transform = "translate(-50%, -50%)";
-            marker.style.pointerEvents = "none";
-            marker.style.insetInlineStart = `${(point.x / width) * 100}%`;
-            marker.style.insetBlockStart = `${(point.y / height) * 100}%`;
-            if (index === activeIndex)
-                marker.dataset.active = "true";
-            surface.append(marker);
-        });
-        const text = points.map(pointToString).join("; ");
-        coordinate.value = isMultiple
-            ? points.map(pointToString).join(" | ")
-            : pointToString(points[0]);
-        coordinate.textContent = isMultiple
-            ? `${points.length} selected point${points.length === 1 ? "" : "s"}: ${text}`
-            : `Selected point ${pointToString(points[0])}`;
-        surface.setAttribute("aria-label", `${readableType(interaction.type)} coordinate area, selected ${text}`);
-    };
-    const clampPoint = (point) => {
-        point.x = Math.max(0, Math.min(width, point.x));
-        point.y = Math.max(0, Math.min(height, point.y));
-    };
-    const setActivePoint = (point) => {
-        clampPoint(point);
-        if (!isMultiple) {
-            points = [point];
-            activeIndex = 0;
-            return;
-        }
-        if (maxPoints !== undefined && points.length >= maxPoints) {
-            points[points.length - 1] = point;
-            activeIndex = points.length - 1;
-            return;
-        }
-        points.push(point);
-        activeIndex = points.length - 1;
-    };
-    const mutableActivePoint = () => {
-        if (points.length === 0)
-            setActivePoint(initialPoint());
-        if (activeIndex < 0 || activeIndex >= points.length)
-            activeIndex = points.length - 1;
-        const point = points[activeIndex];
-        if (point)
-            return point;
-        const fallback = initialPoint();
-        points = [fallback];
-        activeIndex = 0;
-        return fallback;
-    };
-    surface.addEventListener("click", (event) => {
-        if (event.detail === 0)
-            return;
-        const rect = surface.getBoundingClientRect();
-        setActivePoint({
-            x: Math.round(((event.clientX - rect.left) / rect.width) * width),
-            y: Math.round(((event.clientY - rect.top) / rect.height) * height),
-        });
-        syncMarker();
-        commit();
-    });
-    surface.addEventListener("keydown", (event) => {
-        const point = mutableActivePoint();
-        const step = event.shiftKey ? 10 : 1;
-        if (event.key === "ArrowLeft")
-            point.x -= step;
-        else if (event.key === "ArrowRight")
-            point.x += step;
-        else if (event.key === "ArrowUp")
-            point.y -= step;
-        else if (event.key === "ArrowDown")
-            point.y += step;
-        else if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            commit();
-            return;
-        }
-        else
-            return;
-        event.preventDefault();
-        clampPoint(point);
-        syncMarker();
-    });
-    syncMarker();
-    const controls = document.createElement("div");
-    controls.className = "qti3-point-controls";
-    for (const [direction, dx, dy] of [
-        ["up", 0, -1],
-        ["left", -1, 0],
-        ["right", 1, 0],
-        ["down", 0, 1],
-    ]) {
-        controls.append(movementButton(direction, movementLabel("point", direction), () => {
-            const point = mutableActivePoint();
-            point.x += dx;
-            point.y += dy;
-            clampPoint(point);
-            syncMarker();
-            commit();
-        }));
-    }
-    if (isMultiple) {
-        const clear = document.createElement("button");
-        clear.type = "button";
-        clear.textContent = "Clear points";
-        clear.addEventListener("click", () => {
-            points = [];
-            activeIndex = -1;
-            syncMarker();
-            commit();
-        });
-        controls.append(clear);
-    }
-    group.append(surface, coordinate, controls);
-    return group;
-}
-function renderPositionObjectResponse(interaction, update, currentValue) {
-    const group = document.createElement("div");
-    group.role = "group";
-    group.setAttribute("aria-label", `${readableType(interaction.type)} object placement response`);
-    const stageObject = interaction.positionObjectStage ?? interaction.object;
-    const movableObject = interaction.positionObjectStage ? interaction.object : undefined;
-    const width = objectAssetWidth(stageObject, 480);
-    const height = objectAssetHeight(stageObject, 300);
-    const movableWidth = objectAssetWidth(movableObject, Math.max(32, Math.round(width * 0.12)));
-    const movableHeight = objectAssetHeight(movableObject, Math.max(32, Math.round(height * 0.12)));
-    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;
-    stage.role = "group";
-    stage.setAttribute("aria-label", `${readableType(interaction.type)} placement stage`);
-    stage.style.position = "relative";
-    stage.style.inlineSize = `min(100%, ${width}px)`;
-    stage.style.aspectRatio = `${width} / ${height}`;
-    stage.style.boxSizing = "border-box";
-    stage.style.border = "1px solid CanvasText";
-    stage.style.background = "Canvas";
-    stage.style.color = "CanvasText";
-    stage.style.overflow = "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;
-        image.alt = stageObject.text || "";
-        image.style.position = "absolute";
-        image.style.inset = "0";
-        image.style.inlineSize = "100%";
-        image.style.blockSize = "100%";
-        image.style.objectFit = "contain";
-        image.style.pointerEvents = "none";
-        stage.append(image);
-    }
-    const marker = document.createElement("button");
-    marker.type = "button";
-    marker.className = "qti3-position-object-marker";
-    marker.setAttribute("aria-label", "Movable object");
-    marker.style.position = "absolute";
-    marker.style.inlineSize = `${movableWidth}px`;
-    marker.style.blockSize = `${movableHeight}px`;
-    marker.style.transform = "translate(-50%, -50%)";
-    marker.style.border = "2px solid CanvasText";
-    marker.style.background = "Canvas";
-    marker.style.color = "CanvasText";
-    marker.style.padding = "0";
-    marker.style.cursor = "grab";
-    marker.style.touchAction = "none";
-    marker.draggable = false;
-    if (movableObject?.data && objectIsImage(movableObject)) {
-        const image = document.createElement("img");
-        image.src = movableObject.data;
-        image.alt = "";
-        image.style.inlineSize = "100%";
-        image.style.blockSize = "100%";
-        image.style.objectFit = "contain";
-        image.style.pointerEvents = "none";
-        marker.append(image);
-    }
-    else {
-        marker.textContent = "Place";
-    }
-    stage.append(marker);
-    const coordinate = document.createElement("output");
-    coordinate.className = "qti3-coordinate-output";
-    const clamp = () => {
-        point.x = Math.max(0, Math.min(width, point.x));
-        point.y = Math.max(0, Math.min(height, point.y));
-    };
-    const commit = () => {
-        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);
-        coordinate.textContent = `Object positioned at ${pointToString(point)}`;
-        stage.setAttribute("aria-label", `${readableType(interaction.type)} placement stage, object at ${pointToString(point)}`);
-    };
-    const pointFromPointer = (event) => {
-        const rect = stage.getBoundingClientRect();
-        point = {
-            x: Math.round(((event.clientX - rect.left) / rect.width) * width),
-            y: Math.round(((event.clientY - rect.top) / rect.height) * height),
-        };
-        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();
-        if (emit)
-            commit();
-    };
-    const handleKey = (event) => {
-        const step = event.shiftKey ? 10 : 1;
-        if (event.key === "ArrowLeft")
-            moveBy(-step, 0, false);
-        else if (event.key === "ArrowRight")
-            moveBy(step, 0, false);
-        else if (event.key === "ArrowUp")
-            moveBy(0, -step, false);
-        else if (event.key === "ArrowDown")
-            moveBy(0, step, false);
-        else if (event.key === "Enter" || event.key === " ") {
-            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";
-        if (isPlaced) {
-            pointFromPointer(event);
-            syncMarker();
-        }
-        event.preventDefault();
-    });
-    marker.addEventListener("pointermove", (event) => {
-        if (!dragging)
-            return;
-        dragMoved = true;
-        pointFromPointer(event);
-        syncMarker();
-    });
-    marker.addEventListener("pointerup", (event) => {
-        if (!dragging)
-            return;
-        dragging = false;
-        marker.releasePointerCapture(event.pointerId);
-        marker.style.cursor = "grab";
-        if (dragMoved || isPlaced) {
-            pointFromPointer(event);
-            syncMarker();
-            commit();
-        }
-    });
-    marker.addEventListener("pointercancel", () => {
-        dragging = false;
-        marker.style.cursor = "grab";
-    });
-    stage.addEventListener("click", (event) => {
-        if (event.target === marker)
-            return;
-        pointFromPointer(event);
-        syncMarker();
-        commit();
-    });
-    stage.addEventListener("keydown", handleKey);
-    marker.addEventListener("keydown", handleKey);
-    const controls = document.createElement("div");
-    controls.className = "qti3-point-controls";
-    for (const [direction, dx, dy] of [
-        ["up", 0, -1],
-        ["left", -1, 0],
-        ["right", 1, 0],
-        ["down", 0, 1],
-    ]) {
-        controls.append(movementButton(direction, movementLabel("object", direction), () => moveBy(dx, dy)));
-    }
-    syncMarker();
-    group.append(stage, coordinate, controls);
-    return group;
-}
-function renderDrawingResponse(interaction, update, currentValue) {
-    const group = document.createElement("div");
-    group.role = "group";
-    group.setAttribute("aria-label", `${readableType(interaction.type)} response`);
-    const surface = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    surface.classList.add("qti3-drawing-surface");
-    surface.setAttribute("role", "img");
-    surface.setAttribute("aria-label", "Drawing response surface");
-    surface.setAttribute("tabindex", "0");
-    const width = drawingWidth(interaction);
-    const height = drawingHeight(interaction);
-    surface.setAttribute("viewBox", `0 0 ${width} ${height}`);
-    surface.style.display = "block";
-    surface.style.inlineSize = `${width}px`;
-    surface.style.aspectRatio = `${width} / ${height}`;
-    surface.style.maxInlineSize = "100%";
-    surface.style.border = "1px solid CanvasText";
-    surface.style.background = "Canvas";
-    surface.style.touchAction = "none";
-    const restoredStrokes = parseDrawingValue(currentValue);
-    const authoredBackgroundHref = drawingBackgroundHref(interaction);
-    let resolvedAuthoredBackgroundHref = authoredBackgroundHref;
-    let activeBackgroundIsAuthored = restoredStrokes.length > 0 || !drawingResponseImage(currentValue);
-    let activeBackgroundHref = restoredStrokes.length === 0
-        ? (drawingResponseImage(currentValue) ?? authoredBackgroundHref)
-        : authoredBackgroundHref;
-    const resetSurface = () => {
-        const background = activeBackgroundHref
-            ? drawingImageElement(activeBackgroundHref, width, height)
-            : undefined;
-        surface.replaceChildren(...(background ? [background] : []));
-    };
-    resetSurface();
-    const summary = document.createElement("output");
-    summary.className = "qti3-coordinate-output";
-    const strokes = [];
-    let activeStroke;
-    let commitVersion = 0;
-    const commit = (emitResponse = true) => {
-        const version = ++commitVersion;
-        if (emitResponse) {
-            if (strokes.length === 0) {
-                update(null);
-            }
-            else {
-                void exportDrawingResponse(interaction, width, height, strokes, () => {
-                    const currentHref = currentDrawingBackgroundHref(surface);
-                    if (activeBackgroundIsAuthored && currentHref) {
-                        resolvedAuthoredBackgroundHref = currentHref;
-                    }
-                    return currentHref ?? activeBackgroundHref;
-                }).then((value) => {
-                    if (version === commitVersion)
-                        update(value);
-                });
-            }
-        }
-        const count = strokes.length;
-        summary.value = serializeDrawingStrokes(strokes);
-        summary.textContent =
-            count === 0 ? "No drawing strokes." : `${count} drawing stroke${count === 1 ? "" : "s"}.`;
-        surface.setAttribute("aria-label", count === 0
-            ? "Drawing response surface, no strokes"
-            : `Drawing response surface, ${count} stroke${count === 1 ? "" : "s"}`);
-    };
-    for (const points of restoredStrokes) {
-        const element = polylineElement(points);
-        strokes.push({ points, element });
-        surface.append(element);
-    }
-    const addPoint = (event) => {
-        if (!activeStroke)
-            return;
-        const point = svgPoint(surface, event);
-        const previous = activeStroke.points.at(-1);
-        if (previous && previous.x === point.x && previous.y === point.y)
-            return;
-        activeStroke.points.push(point);
-        activeStroke.element.setAttribute("points", serializeSvgPoints(activeStroke.points));
-    };
-    const finishStroke = (event) => {
-        if (!activeStroke)
-            return;
-        addPoint(event);
-        const firstPoint = activeStroke.points[0];
-        if (activeStroke.points.length === 1 && firstPoint)
-            activeStroke.points.push(firstPoint);
-        activeStroke.element.setAttribute("points", serializeSvgPoints(activeStroke.points));
-        activeStroke = undefined;
-        commit();
-    };
-    surface.addEventListener("pointerdown", (event) => {
-        const point = svgPoint(surface, event);
-        const element = polylineElement([point]);
-        activeStroke = { points: [point], element };
-        strokes.push(activeStroke);
-        surface.append(element);
-        surface.setPointerCapture(event.pointerId);
-    });
-    surface.addEventListener("pointermove", addPoint);
-    surface.addEventListener("pointerup", finishStroke);
-    surface.addEventListener("pointercancel", () => {
-        activeStroke = undefined;
-    });
-    surface.addEventListener("keydown", (event) => {
-        if (event.key !== "Enter" && event.key !== " ")
-            return;
-        event.preventDefault();
-        const points = [
-            { x: 10, y: 10 },
-            { x: 90, y: 90 },
-        ];
-        const element = polylineElement(points);
-        strokes.push({ points, element });
-        surface.append(element);
-        commit();
-    });
-    const clear = document.createElement("button");
-    clear.type = "button";
-    clear.textContent = "Clear drawing";
-    clear.addEventListener("click", () => {
-        strokes.splice(0, strokes.length);
-        activeStroke = undefined;
-        if (activeBackgroundIsAuthored) {
-            resolvedAuthoredBackgroundHref =
-                currentDrawingBackgroundHref(surface) ?? resolvedAuthoredBackgroundHref;
-        }
-        activeBackgroundHref = resolvedAuthoredBackgroundHref;
-        activeBackgroundIsAuthored = true;
-        resetSurface();
-        commit();
-    });
-    const tools = document.createElement("div");
-    tools.className = "qti3-drawing-tools";
-    tools.append(clear);
-    commit(false);
-    group.append(surface, summary, tools);
-    return group;
-}
-function renderHotspotResponse(interaction, update, currentValue) {
-    const group = responseGroup();
-    const surface = document.createElement("div");
-    surface.className = "qti3-hotspot-surface";
-    const width = objectWidth(interaction);
-    const height = objectHeight(interaction);
-    surface.style.position = "relative";
-    surface.style.inlineSize = `${width}px`;
-    surface.style.aspectRatio = `${width} / ${height}`;
-    surface.style.maxInlineSize = "100%";
-    surface.style.border = "1px solid CanvasText";
-    surface.style.background = "Canvas";
-    surface.style.overflow = "hidden";
-    const object = interaction.object;
-    if (object?.data && object.type?.startsWith("image/")) {
-        const image = document.createElement("img");
-        image.src = object.data;
-        image.alt = object.text || `${readableType(interaction.type)} image`;
-        image.style.inlineSize = "100%";
-        image.style.blockSize = "100%";
-        image.style.objectFit = "contain";
-        surface.append(image);
-    }
-    const selected = new Set(valueToStrings(currentValue));
-    const multiple = interaction.responseCardinality === "multiple";
-    const selectedSummary = document.createElement("p");
-    selectedSummary.className = "qti3-selection-summary";
-    selectedSummary.setAttribute("aria-live", "polite");
-    selectedSummary.textContent = "No region selected";
-    const syncSelected = () => {
-        for (const button of surface.querySelectorAll("button")) {
-            const isSelected = selected.has(button.dataset.choiceIdentifier ?? "");
-            button.setAttribute("aria-pressed", isSelected ? "true" : "false");
-            button.dataset.selected = isSelected ? "true" : "false";
-        }
-        selectedSummary.textContent =
-            selected.size > 0 ? `Selected ${[...selected].join(", ")}` : "No region selected";
-    };
-    for (const choice of choicesOrFallback(interaction)) {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = "qti3-hotspot-button";
-        button.dataset.choiceIdentifier = choice.identifier;
-        button.textContent = choice.text;
-        button.title = choice.text;
-        button.setAttribute("aria-pressed", "false");
-        button.style.position = "absolute";
-        placeHotspotButton(button, choice, width, height);
-        button.addEventListener("click", () => {
-            if (multiple) {
-                if (selected.has(choice.identifier))
-                    selected.delete(choice.identifier);
-                else
-                    selected.add(choice.identifier);
-                syncSelected();
-                update([...selected]);
-            }
-            else {
-                selected.clear();
-                selected.add(choice.identifier);
-                syncSelected();
-                update(choice.identifier);
-            }
-        });
-        surface.append(button);
-    }
-    syncSelected();
-    group.append(surface, selectedSummary);
-    return group;
-}
-function renderObjectAsset(interaction, mediaResponse = {}) {
-    const object = interaction.object;
-    const label = interaction.prompt ?? object?.text ?? "Media interaction";
-    const mediaType = object ? mediaElementType(object) : undefined;
-    if (object && mediaType === "audio") {
-        const audio = document.createElement("audio");
-        configureMediaElement(audio, interaction, object, label, mediaResponse);
-        audio.style.inlineSize = "100%";
-        return audio;
-    }
-    if (object && mediaType === "video") {
-        const video = document.createElement("video");
-        configureMediaElement(video, interaction, object, label, mediaResponse);
-        if (object.width)
-            video.width = Number(object.width);
-        if (object.height)
-            video.height = Number(object.height);
-        return video;
-    }
-    if (object?.data && objectIsImage(object)) {
-        const image = document.createElement("img");
-        image.src = object.data;
-        image.alt = label;
-        image.style.maxInlineSize = "100%";
-        image.style.blockSize = "auto";
-        if (object.width)
-            image.width = Number(object.width);
-        if (object.height)
-            image.height = Number(object.height);
-        return image;
-    }
-    const group = document.createElement("div");
-    group.role = "group";
-    group.setAttribute("aria-label", label);
-    const fallbackHref = object?.data ?? object?.sources.find((source) => source.src)?.src;
-    if (fallbackHref) {
-        const link = document.createElement("a");
-        link.href = fallbackHref;
-        link.textContent = object?.text || fallbackHref;
-        group.append(link);
-    }
-    else {
-        group.textContent = label;
-    }
-    return group;
-}
-function configureMediaElement(media, 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/") ||
-        /\.(svg|png|jpg|jpeg|gif|webp)(?:[?#].*)?$/i.test(object.data ?? ""));
-}
-function appendOptions(select, choices) {
-    const empty = document.createElement("option");
-    empty.value = "";
-    empty.textContent = "";
-    select.append(empty);
-    for (const choice of choices) {
-        const option = document.createElement("option");
-        option.value = choice.identifier;
-        option.textContent = choice.text;
-        select.append(option);
-    }
-}
-function tokenRegion(label, visibleLabel) {
-    const region = document.createElement("div");
-    region.className = "qti3-token-region";
-    region.role = "group";
-    region.setAttribute("aria-label", label);
-    if (visibleLabel) {
-        const heading = document.createElement("strong");
-        heading.className = "qti3-region-label";
-        heading.textContent = visibleLabel;
-        region.append(heading);
-    }
-    return region;
-}
-function tokenButton(choice) {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = "qti3-token";
-    button.dataset.choiceIdentifier = choice.identifier;
-    button.setAttribute("aria-pressed", "false");
-    button.textContent = choice.text;
-    return button;
-}
-function choiceText(choices, identifier) {
-    if (!identifier)
-        return "";
-    return choices.find((choice) => choice.identifier === identifier)?.text ?? 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;
-}
-function targetChoices(interaction) {
-    const choices = choicesOrFallback(interaction);
-    if (interaction.type === "associate" || interaction.type === "graphicAssociate")
-        return choices;
-    const targetRoles = new Set(["matchTarget", "gap", "hotspot"]);
-    const targets = choices.filter((choice) => targetRoles.has(choice.role));
-    return targets.length > 0 ? targets : choices;
-}
-function choicesOrFallback(interaction) {
-    if (interaction.choices.length > 0)
-        return interaction.choices;
-    return [
-        {
-            identifier: "A",
-            text: "A",
-            role: "simpleChoice",
-            qtiName: "qti-simple-choice",
-            attributes: {},
-        },
-        {
-            identifier: "B",
-            text: "B",
-            role: "simpleChoice",
-            qtiName: "qti-simple-choice",
-            attributes: {},
-        },
-    ];
-}
-function valueToStrings(value) {
-    if (value === null)
-        return [];
-    if (Array.isArray(value))
-        return value.map((item) => String(item));
-    return [String(value)];
-}
-function scalarString(value) {
-    if (value === null || Array.isArray(value) || typeof value === "object")
-        return "";
-    return String(value);
-}
-function coerceResponseInputValue(value, baseType) {
-    if (baseType === "integer")
-        return Number.parseInt(value, 10);
-    if (baseType === "float")
-        return Number.parseFloat(value);
-    if (baseType === "boolean") {
-        if (value === "true")
-            return true;
-        if (value === "false")
-            return false;
-    }
-    return value;
-}
-function orderChoicesFromValue(choices, value) {
-    const identifiers = valueToStrings(value);
-    if (identifiers.length === 0)
-        return [...choices];
-    const byIdentifier = new Map(choices.map((choice) => [choice.identifier, choice]));
-    const ordered = identifiers
-        .map((identifier) => byIdentifier.get(identifier))
-        .filter((choice) => Boolean(choice));
-    const used = new Set(ordered.map((choice) => choice.identifier));
-    ordered.push(...choices.filter((choice) => !used.has(choice.identifier)));
-    return ordered;
-}
-function parsePointValue(value) {
-    const [raw] = valueToStrings(value);
-    return parsePointString(raw);
-}
-function parsePointValues(value) {
-    return valueToStrings(value).flatMap((raw) => {
-        const point = parsePointString(raw);
-        return point ? [point] : [];
-    });
-}
-function parsePointString(raw) {
-    if (!raw)
-        return undefined;
-    const values = raw.split(/\s+/).map(Number);
-    const x = values[0];
-    const y = values[1];
-    if (typeof x !== "number" || typeof y !== "number")
-        return undefined;
-    if (!Number.isFinite(x) || !Number.isFinite(y))
-        return undefined;
-    return { x, y };
-}
-function pointToString(point) {
-    return point ? `${point.x} ${point.y}` : "";
-}
-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) => {
-        const numbers = stroke
-            .trim()
-            .split(/\s+/)
-            .map(Number)
-            .filter((item) => Number.isFinite(item));
-        const points = [];
-        for (let index = 0; index + 1 < numbers.length; index += 2) {
-            points.push({ x: numbers[index], y: numbers[index + 1] });
-        }
-        return points;
-    })
-        .filter((points) => points.length > 0);
-}
-function objectWidth(interaction) {
-    return dimension(interaction.object?.width, 160);
-}
-function objectHeight(interaction) {
-    return dimension(interaction.object?.height, 120);
-}
-function objectAssetWidth(object, fallback) {
-    return dimension(object?.width, fallback);
-}
-function objectAssetHeight(object, fallback) {
-    return dimension(object?.height, fallback);
-}
-function drawingWidth(interaction) {
-    return dimension(interaction.object?.width, 640);
-}
-function drawingHeight(interaction) {
-    return dimension(interaction.object?.height, 360);
-}
-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(",")
-        .map((value) => Number(value.trim()))
-        .filter((value) => Number.isFinite(value));
-    const shape = choice.attributes.shape;
-    if (shape === "circle" && coords.length >= 3) {
-        const [x, y, radius] = coords;
-        button.style.insetInlineStart = `${percent(x - radius, width)}%`;
-        button.style.insetBlockStart = `${percent(y - radius, height)}%`;
-        button.style.inlineSize = `${percent(radius * 2, width)}%`;
-        button.style.blockSize = `${percent(radius * 2, height)}%`;
-        button.style.borderRadius = "50%";
-        return;
-    }
-    if (shape === "rect" && coords.length >= 4) {
-        const [left, top, right, bottom] = coords;
-        button.style.insetInlineStart = `${percent(left, width)}%`;
-        button.style.insetBlockStart = `${percent(top, height)}%`;
-        button.style.inlineSize = `${percent(Math.max(1, right - left), width)}%`;
-        button.style.blockSize = `${percent(Math.max(1, bottom - top), height)}%`;
-        return;
-    }
-    if (shape === "poly" && coords.length >= 6) {
-        const xs = coords.filter((_, index) => index % 2 === 0);
-        const ys = coords.filter((_, index) => index % 2 === 1);
-        const left = Math.min(...xs);
-        const top = Math.min(...ys);
-        const right = Math.max(...xs);
-        const bottom = Math.max(...ys);
-        button.style.insetInlineStart = `${percent(left, width)}%`;
-        button.style.insetBlockStart = `${percent(top, height)}%`;
-        button.style.inlineSize = `${percent(Math.max(1, right - left), width)}%`;
-        button.style.blockSize = `${percent(Math.max(1, bottom - top), height)}%`;
-        return;
-    }
-    button.style.insetInlineStart = "0";
-    button.style.insetBlockStart = "0";
-}
-function hotspotCenter(choice, width, height) {
-    const coords = hotspotCoords(choice);
-    const shape = choice.attributes.shape;
-    if ((shape === "circle" || shape === "ellipse") && coords.length >= 2) {
-        const [x, y] = coords;
-        return { x, y };
-    }
-    if (shape === "rect" && coords.length >= 4) {
-        const [left, top, right, bottom] = coords;
-        return { x: (left + right) / 2, y: (top + bottom) / 2 };
-    }
-    if (shape === "poly" && coords.length >= 6) {
-        const xs = coords.filter((_, index) => index % 2 === 0);
-        const ys = coords.filter((_, index) => index % 2 === 1);
-        return {
-            x: (Math.min(...xs) + Math.max(...xs)) / 2,
-            y: (Math.min(...ys) + Math.max(...ys)) / 2,
-        };
-    }
-    return { x: width / 2, y: height / 2 };
-}
-function hotspotCoords(choice) {
-    return (choice.attributes.coords ?? "")
-        .split(",")
-        .map((value) => Number(value.trim()))
-        .filter((value) => Number.isFinite(value));
-}
-function hotspotDisplayLabel(choice, choices) {
-    return choice.attributes["hotspot-label"] || `Region ${choices.indexOf(choice) + 1}`;
-}
-function hotspotAccessibleLabel(choice, index) {
-    return (choice.attributes["aria-label"] || choice.attributes["hotspot-label"] || `Region ${index + 1}`);
-}
-function exceedsHotspotMatchMax(choice, selectedPairs) {
-    const maximum = parseUnlimitedMaximum(choice.attributes["match-max"]);
-    if (maximum === undefined)
-        return false;
-    const currentUseCount = selectedPairs
-        .flatMap((pair) => pair.split(" "))
-        .filter((identifier) => identifier === choice.identifier).length;
-    return currentUseCount + 1 > maximum;
-}
-function percent(value, total) {
-    if (total <= 0)
-        return 0;
-    return (value / total) * 100;
-}
-function svgPoint(surface, event) {
-    const rect = surface.getBoundingClientRect();
-    const viewBox = surface.viewBox.baseVal;
-    const width = viewBox.width || 160;
-    const height = viewBox.height || 120;
-    const x = Math.round(((event.clientX - rect.left) / rect.width) * width);
-    const y = Math.round(((event.clientY - rect.top) / rect.height) * height);
-    return {
-        x: Math.max(0, Math.min(width, x)),
-        y: Math.max(0, Math.min(height, y)),
-    };
-}
-async function exportDrawingResponse(interaction, 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", 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));
-    line.setAttribute("fill", "none");
-    line.setAttribute("stroke", "CanvasText");
-    line.setAttribute("stroke-width", "3");
-    line.setAttribute("stroke-linecap", "round");
-    line.setAttribute("stroke-linejoin", "round");
-    return line;
-}
-function 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;
-    const detail = event.detail;
-    if (detail === undefined)
-        return undefined;
-    if (typeof detail === "object" && detail !== null && !Array.isArray(detail)) {
-        if ("value" in detail)
-            return detail.value ?? null;
-        if ("response" in detail)
-            return detail.response ?? null;
-        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",
-    "cite",
-    "code",
-    "dd",
-    "dfn",
-    "div",
-    "dl",
-    "dt",
-    "em",
-    "figcaption",
-    "figure",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "hr",
-    "i",
-    "img",
-    "kbd",
-    "li",
-    "ol",
-    "p",
-    "pre",
-    "q",
-    "rb",
-    "rbc",
-    "rp",
-    "rt",
-    "rtc",
-    "ruby",
-    "samp",
-    "small",
-    "span",
-    "strong",
-    "sub",
-    "sup",
-    "table",
-    "tbody",
-    "td",
-    "tfoot",
-    "th",
-    "thead",
-    "tr",
-    "ul",
-    "var",
-]);
-const unsafeContentElements = new Set(["script", "style"]);
-const mathMlElements = new Set([
-    "math",
-    "maction",
-    "maligngroup",
-    "malignmark",
-    "menclose",
-    "merror",
-    "mfenced",
-    "mfrac",
-    "mglyph",
-    "mi",
-    "mlabeledtr",
-    "mlongdiv",
-    "mmultiscripts",
-    "mn",
-    "mo",
-    "mover",
-    "mpadded",
-    "mphantom",
-    "mroot",
-    "mrow",
-    "ms",
-    "mscarries",
-    "mscarry",
-    "msgroup",
-    "msline",
-    "mspace",
-    "msqrt",
-    "msrow",
-    "mstack",
-    "mstyle",
-    "msub",
-    "msubsup",
-    "msup",
-    "mtable",
-    "mtd",
-    "mtext",
-    "mtr",
-    "munder",
-    "munderover",
-    "semantics",
-]);
-function contentElementName(qtiName) {
-    if (qtiName === "qti-content-body" || qtiName === "qti-prompt")
-        return undefined;
-    if (htmlContentElements.has(qtiName) || mathMlElements.has(qtiName))
-        return qtiName;
-    if (qtiName === "object")
-        return "object";
-    if (qtiName === "qti-rubric-block")
-        return "section";
-    if (qtiName === "qti-template-block")
-        return "div";
-    if (qtiName === "qti-template-inline")
-        return "span";
-    return undefined;
-}
-function createContentElement(name) {
-    if (mathMlElements.has(name)) {
-        return document.createElementNS("http://www.w3.org/1998/Math/MathML", name);
-    }
-    return document.createElement(name);
-}
-function copySafeAttributes(element, attributes) {
-    for (const [name, value] of Object.entries(attributes)) {
-        if (!isSafeContentAttribute(name, value))
-            continue;
-        element.setAttribute(name, value);
-        if (name === "xml:lang" && !Object.hasOwn(attributes, "lang")) {
-            element.setAttribute("lang", value);
-        }
-    }
-    applySharedAccessibilityVocabulary(element, attributes);
-}
-function applySharedAccessibilityVocabulary(element, 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) {
-    const normalizedName = name.toLowerCase();
-    if (normalizedName.startsWith("on"))
-        return false;
-    if (normalizedName === "style")
-        return false;
-    if (normalizedName === "href" || normalizedName === "src" || normalizedName === "data") {
-        return isSafeUrl(value);
-    }
-    return (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",
-    "accentunder",
-    "align",
-    "columnalign",
-    "display",
-    "fence",
-    "largeop",
-    "lspace",
-    "mathbackground",
-    "mathcolor",
-    "mathsize",
-    "mathvariant",
-    "movablelimits",
-    "rowalign",
-    "rspace",
-    "separator",
-    "stretchy",
-]);
-function isSafeUrl(value) {
-    return (value.startsWith("#") ||
-        value.startsWith("/") ||
-        value.startsWith("./") ||
-        value.startsWith("../") ||
-        value.startsWith("http://") ||
-        value.startsWith("https://") ||
-        value.startsWith("data:image/") ||
-        value.startsWith("data:audio/") ||
-        value.startsWith("data:video/"));
-}
-function isResolvableAssetUrl(value) {
-    return (!value.startsWith("#") &&
-        !value.startsWith("data:") &&
-        !value.startsWith("blob:") &&
-        !value.startsWith("http://") &&
-        !value.startsWith("https://"));
-}
-function formatPrintedValue(value, format) {
-    if (value === null || value === undefined)
-        return "";
-    const numericValue = typeof value === "number" ? value : typeof value === "string" ? Number(value) : Number.NaN;
-    if (Number.isFinite(numericValue) && format) {
-        const fixed = /^%\.(\d+)f$/.exec(format);
-        if (fixed)
-            return numericValue.toFixed(Number(fixed[1]));
-        if (format === "%d" || format === "%i")
-            return String(Math.trunc(numericValue));
-    }
-    if (Array.isArray(value))
-        return value.map((item) => String(item)).join(", ");
-    if (typeof value === "object")
-        return JSON.stringify(value);
-    return String(value);
-}
-function contentNodeText(node) {
-    if (node.kind === "text")
-        return node.text;
-    if ("children" in node)
-        return node.children.map(contentNodeText).join("");
-    return "";
-}
-function readableType(type) {
-    return type
-        .replace(/[A-Z]/g, (letter) => ` ${letter.toLowerCase()}`)
-        .replace(/^./, (letter) => letter.toUpperCase());
-}
-function errorView(message) {
-    const element = document.createElement("p");
-    element.role = "alert";
-    element.textContent = message;
-    return element;
-}
-function validationMessageElement(responseIdentifier) {
-    const element = document.createElement("p");
-    element.id = validationMessageId(responseIdentifier);
-    element.dataset.validationFor = responseIdentifier;
-    element.hidden = true;
-    element.role = "alert";
-    return element;
-}
-function inlineValidationMessageElement(responseIdentifier) {
-    const element = document.createElement("span");
-    element.id = validationMessageId(responseIdentifier);
-    element.dataset.validationFor = responseIdentifier;
-    element.hidden = true;
-    element.role = "alert";
-    return element;
-}
-function validationMessageId(responseIdentifier) {
-    return `qti3-validation-${responseIdentifier}`;
-}
-function cloneDiagnostics(diagnostics) {
-    return diagnostics.map((diagnostic) => ({
-        ...diagnostic,
-        source: diagnostic.source ? { ...diagnostic.source } : undefined,
-    }));
-}
-function playerStyleElement() {
-    const style = document.createElement("style");
-    style.textContent = `
-    .qti3-player {
-      --qti3-match-accent: #2f6fca;
-      --qti3-match-target-bg: #f5f6f7;
-      --qti3-match-target-border: #6f7782;
-
-      display: grid;
-      gap: 1rem;
-      max-inline-size: 72rem;
-      font: 16px/1.45 system-ui, sans-serif;
-    }
-
-    @supports (color: light-dark(#000, #fff)) {
-      .qti3-player {
-        --qti3-match-accent: light-dark(#2f6fca, #8ab4f8);
-        --qti3-match-target-bg: light-dark(#f5f6f7, #202124);
-        --qti3-match-target-border: light-dark(#6f7782, #9aa0a6);
-      }
-    }
-
-    .qti3-interaction {
-      display: grid;
-      gap: 0.75rem;
-    }
-
-    .qti3-item-body {
-      display: grid;
-      gap: 1rem;
-    }
-
-    .qti3-item-body > * {
-      margin-block: 0;
-    }
-
-    .qti3-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;
-      margin-inline: 0.18rem;
-      align-items: baseline;
-      vertical-align: baseline;
-    }
-
-    .qti3-inline-text-input {
-      inline-size: auto;
-      min-inline-size: 8ch;
-      max-inline-size: 18ch;
-      margin-inline: 0.25rem;
-    }
-
-    .qti3-printed-variable {
-      font-weight: 700;
-    }
-
-    .qti3-feedback-block {
-      padding: 0.75rem;
-      border-inline-start: 4px solid Highlight;
-      background: Canvas;
-      color: CanvasText;
-    }
-
-    .qti3-response-group {
-      min-inline-size: 0;
-    }
-
-    .qti3-response-group > * + * {
-      margin-block-start: 0.75rem;
-    }
-
-    .qti3-reorder-item,
-    .qti3-token-region,
-    .qti3-pair-chip,
-    .qti3-gap-region,
-    .qti3-gap-target {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-      align-items: center;
-    }
-
-    .qti3-reorder-list {
-      display: grid;
-      gap: 0.5rem;
-      padding-inline-start: 1.5rem;
-    }
-
-    .qti3-pair-selector {
-      display: grid;
-      gap: 0.75rem;
-      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
-      align-items: start;
-    }
-
-    .qti3-match-selector {
-      display: grid;
-      gap: 1.5rem;
-      inline-size: 100%;
-      max-inline-size: 72rem;
-      box-sizing: border-box;
-    }
-
-    .qti3-match-source-bank,
-    .qti3-match-target-bank {
-      align-items: stretch;
-    }
-
-    .qti3-token.qti3-match-source {
-      border-color: var(--qti3-match-accent);
-      background: Canvas;
-      color: var(--qti3-match-accent);
-    }
-
-    .qti3-token.qti3-match-target {
-      flex: 1 1 9rem;
-      min-inline-size: 0;
-      max-inline-size: 100%;
-      min-block-size: 5rem;
-      box-sizing: border-box;
-      border-color: var(--qti3-match-target-border);
-      background: var(--qti3-match-target-bg);
-      color: CanvasText;
-      font-weight: 700;
-      white-space: normal;
-      overflow-wrap: anywhere;
-      text-align: center;
-    }
-
-    @media (forced-colors: active) {
-      .qti3-token.qti3-match-source {
-        border-color: LinkText;
-        color: LinkText;
-      }
-
-      .qti3-token.qti3-match-target {
-        border-color: GrayText;
-        background: ButtonFace;
-        color: ButtonText;
-      }
-    }
-
-    .qti3-region-label {
-      flex-basis: 100%;
-      font-size: 0.9rem;
-      font-weight: 700;
-    }
-
-    .qti3-choice-list {
-      display: grid;
-      gap: 0.5rem;
-      grid-template-columns: minmax(0, 42rem);
-    }
-
-    .qti3-choice-option {
-      display: grid;
-      grid-template-columns: auto auto minmax(0, 1fr);
-      gap: 0.65rem;
-      align-items: center;
-      justify-content: start;
-      inline-size: 100%;
-      box-sizing: border-box;
-      min-block-size: 2.75rem;
-      padding: 0.65rem 0.8rem;
-      border: 1px solid CanvasText;
-      background: Canvas;
-      color: CanvasText;
-      cursor: pointer;
-    }
-
-    .qti3-choice-option input {
-      margin: 0;
-      inline-size: 1rem;
-      block-size: 1rem;
-    }
-
-    .qti3-choice-label {
-      min-inline-size: 1.75rem;
-      font-weight: 700;
-    }
-
-    .qti3-choice-text {
-      min-inline-size: 0;
-      overflow-wrap: anywhere;
-    }
-
-    .qti3-choice-option[data-selected="true"] {
-      background: Highlight;
-      color: HighlightText;
-    }
-
-    .qti3-hottext-group {
-      max-inline-size: 58rem;
-    }
-
-    .qti3-hottext-passage {
-      margin-block: 0;
-      font-size: 1.05rem;
-      line-height: 1.75;
-    }
-
-    .qti3-hottext-token {
-      display: inline;
-      margin-inline: 0.1rem;
-      padding: 0.12rem 0.28rem;
-      border: 1px solid CanvasText;
-      border-radius: 0.2rem;
-      background: Canvas;
-      color: LinkText;
-      font: inherit;
-      text-decoration: underline;
-      text-decoration-thickness: 0.08em;
-      text-underline-offset: 0.16em;
-      cursor: pointer;
-    }
-
-    .qti3-hottext-token[data-selected="true"] {
-      background: Highlight;
-      color: HighlightText;
-      text-decoration-color: HighlightText;
-    }
-
-    .qti3-reorder-item {
-      padding: 0.5rem;
-      border: 1px solid CanvasText;
-      background: Canvas;
-      color: CanvasText;
-    }
-
-    .qti3-drop-target {
-      outline: 3px solid Highlight;
-      outline-offset: 2px;
-    }
-
-    .qti3-token,
-    .qti3-icon-button,
-    .qti3-player button,
-    .qti3-player select,
-    .qti3-player input,
-    .qti3-player textarea {
-      font: inherit;
-    }
-
-    .qti3-token {
-      min-inline-size: 2.5rem;
-      padding: 0.35rem 0.65rem;
-      border: 1px solid CanvasText;
-      background: Canvas;
-      color: CanvasText;
-      cursor: grab;
-    }
-
-    .qti3-icon-button {
-      display: inline-grid;
-      place-items: center;
-      inline-size: 2.25rem;
-      block-size: 2.25rem;
-      padding: 0;
-      line-height: 1;
-    }
-
-    .qti3-remove-button {
-      border: 1px solid currentColor;
-      background: transparent;
-      color: inherit;
-      cursor: pointer;
-    }
-
-    .qti3-remove-button:hover {
-      background: color-mix(in srgb, currentColor 14%, transparent);
-    }
-
-    .qti3-trash-icon {
-      inline-size: 1.125rem;
-      block-size: 1.125rem;
-    }
-
-    .qti3-movement-icon {
-      inline-size: 1rem;
-      block-size: 1rem;
-    }
-
-    .qti3-trash-icon path,
-    .qti3-movement-icon path {
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      vector-effect: non-scaling-stroke;
-    }
-
-    .qti3-token[aria-pressed="true"],
-    .qti3-pair-chip {
-      background: Highlight;
-      color: HighlightText;
-    }
-
-    .qti3-pair-list {
-      display: grid;
-      gap: 0.5rem;
-      padding-inline-start: 1.5rem;
-    }
-
-    .qti3-pair-chip {
-      width: fit-content;
-      padding: 0.35rem 0.5rem;
-    }
-
-    .qti3-gap-target {
-      min-block-size: 2.75rem;
-      padding: 0.5rem;
-      border: 1px dashed CanvasText;
-    }
-
-    .qti3-gap-region {
-      margin-block-start: 0.5rem;
-    }
-
-    .qti3-gap-passage {
-      display: block;
-      max-inline-size: 62rem;
-      line-height: 2.3;
-    }
-
-    .qti3-gap-passage .qti3-gap-target {
-      display: inline-flex;
-      padding: 0;
-      border: 0;
-      margin-inline: 0.15rem;
-      margin-block: 0.2rem;
-      vertical-align: middle;
-    }
-
-    .qti3-gap-button {
-      min-inline-size: 8rem;
-      min-block-size: 2.25rem;
-      text-align: start;
-    }
-
-    .qti3-text-response,
-    .qti3-slider-response {
-      display: grid;
-      gap: 0.4rem;
-      max-inline-size: 42rem;
-    }
-
-    .qti3-text-input,
-    .qti3-textarea {
-      inline-size: 100%;
-      box-sizing: border-box;
-      padding: 0.55rem 0.65rem;
-      border: 1px solid CanvasText;
-      background: Canvas;
-      color: CanvasText;
-    }
-
-    .qti3-textarea {
-      min-block-size: 8rem;
-      resize: vertical;
-    }
-
-    .qti3-counter,
-    .qti3-slider-output {
-      margin: 0;
-      font-size: 0.9rem;
-    }
-
-    .qti3-slider-response {
-      grid-template-columns: minmax(8rem, 1fr) auto;
-      align-items: center;
-    }
-
-    .qti3-point-controls,
-    .qti3-drawing-tools {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-      margin-block-start: 0.5rem;
-    }
-
-    .qti3-coordinate-output {
-      display: block;
-      margin-block-start: 0.4rem;
-      font-size: 0.9rem;
-    }
-
-    .qti3-hotspot-button[data-selected="true"] {
-      background: Highlight !important;
-      color: HighlightText !important;
-      outline: 3px solid Highlight;
-      outline-offset: 2px;
-    }
-
-    .qti3-hotspot-button {
-      display: grid;
-      place-items: start;
-      padding: 0.25rem;
-      border: 2px solid CanvasText;
-      background: color-mix(in srgb, Canvas 65%, transparent);
-      color: CanvasText;
-      font-size: 0.8rem;
-      font-weight: 700;
-      line-height: 1;
-      cursor: pointer;
-    }
-
-    .qti3-hotspot.qti-selections-light .qti3-hotspot-button {
-      border-color: white;
-      color: white;
-      background: rgb(0 0 0 / 0.45);
-    }
-
-    .qti3-hotspot.qti-selections-dark .qti3-hotspot-button {
-      border-color: black;
-      color: black;
-      background: rgb(255 255 255 / 0.65);
-    }
-
-    .qti3-hotspot.qti-unselected-hidden
-      .qti3-hotspot-button:not([data-selected="true"]):not(:focus):not(:focus-visible) {
-      opacity: 0;
-    }
-
-    @supports not (background: color-mix(in srgb, Canvas 65%, transparent)) {
-      .qti3-hotspot-button {
-        background: Canvas;
-      }
-    }
-
-    @media (forced-colors: active) {
-      .qti3-hotspot.qti-selections-light .qti3-hotspot-button,
-      .qti3-hotspot.qti-selections-dark .qti3-hotspot-button {
-        border-color: CanvasText;
-        color: CanvasText;
-        background: Canvas;
-      }
-    }
-
-    .qti3-graphic-associate-surface,
-    .qti3-graphic-gap-match-surface,
-    .qti3-graphic-order-surface {
-      touch-action: manipulation;
-    }
-
-    .qti3-graphic-associate-lines,
-    .qti3-graphic-sequence-lines {
-      position: absolute;
-      inset: 0;
-      inline-size: 100%;
-      block-size: 100%;
-      pointer-events: none;
-      z-index: 1;
-    }
-
-    .qti3-graphic-associate-lines line,
-    .qti3-graphic-sequence-lines line {
-      stroke: Highlight;
-      stroke-width: 4;
-      stroke-linecap: round;
-      vector-effect: non-scaling-stroke;
-    }
-
-    .qti3-graphic-sequence-lines marker path {
-      fill: Highlight;
-    }
-
-    .qti3-graphic-associate-hotspot,
-    .qti3-graphic-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;
-      gap: 0.15rem;
-      text-align: center;
-    }
-
-    .qti3-graphic-order-number {
-      display: grid;
-      place-items: center;
-      min-inline-size: 1.45rem;
-      min-block-size: 1.45rem;
-      border-radius: 999px;
-      background: Highlight;
-      color: HighlightText;
-      font-weight: 700;
-    }
-
-    .qti3-graphic-order-number:empty {
-      display: none;
-    }
-
-    .qti3-graphic-order-list {
-      display: grid;
-      gap: 0.5rem;
-      padding-inline-start: 1.5rem;
-      margin-block: 0.5rem 0;
-    }
-
-    .qti3-graphic-order-item {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.4rem;
-      align-items: center;
-    }
-
-    .qti3-selection-summary {
-      margin: 0;
-    }
-
-    .qti3-token:focus,
-    .qti3-hotspot-button:focus,
-    .qti3-player button:focus-visible,
-    .qti3-player select:focus-visible,
-    .qti3-player input:focus-visible,
-    .qti3-player textarea:focus-visible {
-      outline: 3px solid Highlight;
-      outline-offset: 2px;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .qti3-player * {
-        scroll-behavior: auto;
-      }
-    }
-  `;
-    return style;
-}
-function responseIsEmpty(value) {
-    return value === null || value === "" || (Array.isArray(value) && value.length === 0);
-}
-function responseCount(value) {
-    return responseIsEmpty(value) ? 0 : Array.isArray(value) ? value.length : 1;
-}
-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;
-    const parsed = Number(explicit);
-    if (!Number.isInteger(parsed) || parsed <= 0)
-        return undefined;
-    return parsed;
-}
-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)
-        return [];
-    const counts = new Map();
-    for (const identifier of identifiers) {
-        counts.set(identifier, (counts.get(identifier) ?? 0) + 1);
-    }
-    const diagnostics = [];
-    for (const choice of interaction.choices) {
-        const maximum = parseUnlimitedMaximum(choice.attributes["match-max"]);
-        if (maximum === undefined)
-            continue;
-        const count = counts.get(choice.identifier) ?? 0;
-        if (count <= maximum)
-            continue;
-        diagnostics.push({
-            code: "response.matchMax",
-            severity: "error",
-            message: `${choice.text || choice.identifier} may be used at most ${maximum} time${maximum === 1 ? "" : "s"}.`,
-            path: responseIdentifier,
-        });
-    }
-    return diagnostics;
-}
-function responseChoiceIdentifiers(response) {
-    const values = Array.isArray(response) ? response : response === null ? [] : [response];
-    return values.flatMap((value) => String(value).split(/\s+/).filter(Boolean));
-}
-function parseUnlimitedMaximum(value) {
-    if (value === undefined)
-        return undefined;
-    const parsed = Number(value);
-    if (!Number.isInteger(parsed) || parsed <= 0)
-        return undefined;
-    return parsed;
-}
-async function defaultFetchXml(url) {
-    if (!globalThis.fetch) {
-        throw new Error("No fetch implementation is available. Provide loadUrl(url, { fetchXml }).");
-    }
-    const response = await globalThis.fetch(url);
-    if (!response.ok)
-        throw new Error(`Failed to load QTI XML from ${url}: ${response.status}.`);
-    return response.text();
-}
+export { QtiAssessmentItemPlayer, defineQtiAssessmentItemPlayer } from "./player-element.js";
 //# sourceMappingURL=index.js.map