@longsightgroup/qti3-player 0.1.0 → 0.1.2

package/dist/index.js

@@ -35,33 +35,36 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         this.render();
         this.renderValidationMessages();
         this.updateAttemptAvailability();
-        this.dispatchEvent(new CustomEvent("qti-ready", { detail: { item: result.document.item } }));
+        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() {
+    scoreAttempt(options = {}) {
         const session = this.session;
         if (!session)
             return undefined;
-        const validationMessages = this.sessionControl.validateResponses
-            ? this.validateResponses()
-            : [];
+        const shouldValidateResponses = options.validateResponses ?? this.sessionControl.validateResponses;
+        const validationMessages = shouldValidateResponses ? this.validateResponses() : [];
         if (validationMessages.length > 0) {
-            this.validationMessages = validationMessages;
+            this.validationMessages = cloneDiagnostics(validationMessages);
             this.renderValidationMessages();
-            const state = session.serialize();
-            state.validationMessages = validationMessages;
-            this.dispatchEvent(new CustomEvent("qti-validation", { detail: { validationMessages } }));
+            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.dispatchEvent(new CustomEvent("qti-score", { detail: result }));
+        this.dispatchPlayerEvent("qti-score", result);
         this.updateDynamicBodyState();
         this.updateAttemptAvailability();
         if (this.sessionControl.showFeedback)
@@ -96,12 +99,17 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         this.emitStateChange();
     }
     suspend() {
-        this.session?.setStatus("suspended");
-        this.dispatchEvent(new CustomEvent("qti-suspend", { detail: { state: this.serialize() } }));
-        this.emitStateChange();
+        if (!this.session)
+            return;
+        this.session.setStatus("suspended");
+        const state = this.serialize();
+        if (!state)
+            return;
+        this.dispatchPlayerEvent("qti-suspend", { state });
+        this.emitStateChange(state);
     }
-    endAttempt() {
-        const result = this.scoreAttempt();
+    endAttempt(options = {}) {
+        const result = this.scoreAttempt(options);
         if (!result)
             return;
         if (!this.documentModel?.item.adaptive ||
@@ -109,8 +117,11 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             this.session?.setStatus("completed");
         }
         this.updateAttemptAvailability();
-        this.dispatchEvent(new CustomEvent("qti-endattempt", { detail: { state: this.serialize() } }));
-        this.emitStateChange();
+        const state = this.serialize();
+        if (!state)
+            return;
+        this.dispatchPlayerEvent("qti-endattempt", { state });
+        this.emitStateChange(state);
     }
     serialize() {
         const state = this.session?.serialize();
@@ -119,7 +130,12 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         return state;
     }
     emitStateChange(state = this.serialize()) {
-        this.dispatchEvent(new CustomEvent("qti-statechange", { detail: { state } }));
+        if (!state)
+            return;
+        this.dispatchPlayerEvent("qti-statechange", { state });
+    }
+    dispatchPlayerEvent(type, detail) {
+        this.dispatchEvent(new CustomEvent(type, { detail }));
     }
     render() {
         const documentModel = this.documentModel;
@@ -128,12 +144,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         this.applyDefaultStyles();
         const root = document.createElement("article");
         root.className = "qti3-player";
-        root.setAttribute("aria-labelledby", "qti3-item-title");
         root.append(playerStyleElement());
-        const title = document.createElement("h2");
-        title.id = "qti3-item-title";
-        title.textContent = documentModel.item.title ?? documentModel.item.identifier;
-        root.append(title);
         if (documentModel.item.prompt && documentModel.item.body.length === 0) {
             const prompt = document.createElement("p");
             prompt.className = "qti3-item-prompt";
@@ -151,14 +162,6 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                 root.append(this.renderInteraction(interaction));
             }
         }
-        const actions = document.createElement("div");
-        actions.className = "qti3-actions";
-        const score = document.createElement("button");
-        score.type = "button";
-        score.textContent = "Score";
-        score.addEventListener("click", () => this.scoreAttempt());
-        actions.append(score);
-        root.append(actions);
         const feedback = document.createElement("section");
         feedback.className = "qti3-feedback";
         feedback.role = "status";
@@ -189,9 +192,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                 return;
             this.session.respond(responseIdentifier, value);
             this.clearValidationMessage(responseIdentifier);
-            this.dispatchEvent(new CustomEvent("qti-responsechange", {
-                detail: { responseIdentifier, value },
-            }));
+            this.dispatchPlayerEvent("qti-responsechange", { responseIdentifier, value });
             this.emitStateChange();
         };
         const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
@@ -284,7 +285,11 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             return field;
         }
         if (interaction.type === "media") {
-            field.append(renderObjectAsset(interaction));
+            field.append(renderObjectAsset(interaction, {
+                currentValue,
+                update,
+                isCompleted: () => this.attemptIsCompleted(),
+            }));
             return field;
         }
         field.append(renderSelect(interaction, update, currentValue));
@@ -307,9 +312,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                 return;
             this.session.respond(responseIdentifier, value);
             this.clearValidationMessage(responseIdentifier);
-            this.dispatchEvent(new CustomEvent("qti-responsechange", {
-                detail: { responseIdentifier, value },
-            }));
+            this.dispatchPlayerEvent("qti-responsechange", { responseIdentifier, value });
             this.emitStateChange();
         };
         const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
@@ -421,7 +424,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         const article = this.querySelector(".qti3-player");
         if (article)
             article.dataset.status = this.dataset.status;
-        for (const control of this.querySelectorAll(".qti3-interaction button, .qti3-interaction input, .qti3-interaction select, .qti3-interaction textarea, .qti3-actions button")) {
+        for (const control of this.querySelectorAll(".qti3-interaction button, .qti3-interaction input, .qti3-interaction select, .qti3-interaction textarea")) {
             control.disabled = completed;
         }
         for (const element of this.querySelectorAll(".qti3-interaction [tabindex]:not(button):not(input):not(select):not(textarea)")) {
@@ -512,20 +515,24 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             .map((interaction) => [interaction.responseIdentifier, interaction]));
         const diagnostics = [];
         for (const declaration of this.documentModel.item.responseDeclarations) {
-            if (declaration.correctResponse === null)
-                continue;
             const interaction = interactionsByResponse.get(declaration.identifier);
+            if (declaration.correctResponse === null && interaction?.type !== "media")
+                continue;
             const minimum = minimumRequiredResponses(interaction);
-            const count = responseCount(state.responses[declaration.identifier] ?? null);
+            const count = interaction?.type === "media"
+                ? mediaPlayCount(state.responses[declaration.identifier] ?? null)
+                : responseCount(state.responses[declaration.identifier] ?? null);
             const maximum = maximumAllowedResponses(interaction);
             if (count < minimum) {
                 diagnostics.push({
                     code: "response.required",
                     severity: "error",
                     message: interaction?.attributes["data-min-selections-message"] ??
-                        (minimum === 1
-                            ? `${declaration.identifier} requires a response.`
-                            : `${declaration.identifier} requires at least ${minimum} responses.`),
+                        (interaction?.type === "media"
+                            ? `${declaration.identifier} requires at least ${minimum} play${minimum === 1 ? "" : "s"}.`
+                            : minimum === 1
+                                ? `${declaration.identifier} requires a response.`
+                                : `${declaration.identifier} requires at least ${minimum} responses.`),
                     path: declaration.identifier,
                 });
             }
@@ -534,7 +541,9 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                     code: "response.maximum",
                     severity: "error",
                     message: interaction?.attributes["data-max-selections-message"] ??
-                        `${declaration.identifier} allows at most ${maximum} response${maximum === 1 ? "" : "s"}.`,
+                        (interaction?.type === "media"
+                            ? `${declaration.identifier} allows at most ${maximum} play${maximum === 1 ? "" : "s"}.`
+                            : `${declaration.identifier} allows at most ${maximum} response${maximum === 1 ? "" : "s"}.`),
                     path: declaration.identifier,
                 });
             }
@@ -600,11 +609,7 @@ export function defineQtiAssessmentItemPlayer() {
     }
 }
 function renderChoice(interaction, update, currentValue) {
-    const group = document.createElement("fieldset");
-    group.className = "qti3-choice-group";
-    const legend = document.createElement("legend");
-    legend.textContent = readableType(interaction.type);
-    group.append(legend);
+    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");
@@ -661,6 +666,30 @@ function renderChoice(interaction, update, currentValue) {
     group.append(list);
     return group;
 }
+function responseGroup(className) {
+    const group = document.createElement("div");
+    group.className = ["qti3-response-group", className].filter(Boolean).join(" ");
+    return group;
+}
+const movementGlyphs = {
+    up: "\u2191",
+    down: "\u2193",
+    left: "\u2190",
+    right: "\u2192",
+};
+function movementButton(direction, accessibleName, onClick) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "qti3-icon-button";
+    button.dataset.moveDirection = direction;
+    button.textContent = movementGlyphs[direction];
+    button.setAttribute("aria-label", accessibleName);
+    button.addEventListener("click", onClick);
+    return button;
+}
+function movementLabel(target, direction) {
+    return `Move ${target} ${direction}`;
+}
 function renderHottextResponse(interaction, update, currentValue) {
     const group = document.createElement("div");
     group.className = "qti3-hottext-group";
@@ -757,10 +786,7 @@ function usesPairResponse(interaction) {
         interaction.type === "graphicGapMatch");
 }
 function renderOrderedResponse(interaction, update, currentValue) {
-    const group = document.createElement("fieldset");
-    const legend = document.createElement("legend");
-    legend.textContent = orderedResponseLegend(interaction.type);
-    group.append(legend);
+    const group = responseGroup();
     appendGraphicContext(group, interaction);
     const choices = choicesOrFallback(interaction).filter((choice) => choice.role !== "gap");
     const ordered = orderChoicesFromValue(choices, currentValue);
@@ -850,20 +876,10 @@ function renderOrderedResponse(interaction, update, currentValue) {
                     moveChoice(index, index + 1);
                 }
             });
-            const up = document.createElement("button");
-            up.type = "button";
-            up.className = "qti3-icon-button";
-            up.textContent = "Up";
+            const up = movementButton("up", movementLabel(choice.text, "up"), () => moveChoice(index, index - 1));
             up.disabled = index === 0;
-            up.setAttribute("aria-label", `Move ${choice.text} up`);
-            up.addEventListener("click", () => moveChoice(index, index - 1));
-            const down = document.createElement("button");
-            down.type = "button";
-            down.className = "qti3-icon-button";
-            down.textContent = "Down";
+            const down = movementButton("down", movementLabel(choice.text, "down"), () => moveChoice(index, index + 1));
             down.disabled = index === ordered.length - 1;
-            down.setAttribute("aria-label", `Move ${choice.text} down`);
-            down.addEventListener("click", () => moveChoice(index, index + 1));
             item.append(handle, up, down);
             return item;
         }));
@@ -873,10 +889,7 @@ function renderOrderedResponse(interaction, update, currentValue) {
     return group;
 }
 function renderPairResponse(interaction, update, currentValue) {
-    const group = document.createElement("fieldset");
-    const legend = document.createElement("legend");
-    legend.textContent = `${readableType(interaction.type)} pairs`;
-    group.append(legend);
+    const group = responseGroup();
     appendGraphicContext(group, interaction);
     const sources = sourceChoices(interaction);
     const targets = targetChoices(interaction);
@@ -993,17 +1006,19 @@ function renderPairResponse(interaction, update, currentValue) {
     return group;
 }
 function renderMatchResponse(interaction, update, currentValue) {
-    const group = document.createElement("fieldset");
-    const legend = document.createElement("legend");
-    legend.textContent = "Match rows";
-    group.append(legend);
+    const group = responseGroup();
     const sources = sourceChoices(interaction);
     const targets = targetChoices(interaction);
     const selectedPairs = valueToStrings(currentValue);
-    const grid = document.createElement("div");
-    grid.className = "qti3-match-grid";
-    grid.role = "group";
-    grid.setAttribute("aria-label", "Match rows");
+    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");
@@ -1013,17 +1028,27 @@ function renderMatchResponse(interaction, update, currentValue) {
         else
             update([...selectedPairs]);
     };
-    const syncPressed = () => {
-        for (const button of grid.querySelectorAll(".qti3-match-target")) {
-            const pair = `${button.dataset.sourceIdentifier} ${button.dataset.choiceIdentifier}`;
-            button.setAttribute("aria-pressed", selectedPairs.includes(pair) ? "true" : "false");
-        }
-    };
     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(" ");
@@ -1046,53 +1071,117 @@ function renderMatchResponse(interaction, update, currentValue) {
             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) {
-                const existingSourcePairs = selectedPairs.filter((existing) => existing.startsWith(`${source.identifier} `));
-                for (const existing of existingSourcePairs)
-                    removePair(existing);
+                removePairsForSource(source);
             }
             if (parseUnlimitedMaximum(target.attributes["match-max"]) === 1) {
-                const existingTargetPairs = selectedPairs.filter((existing) => existing.endsWith(` ${target.identifier}`));
-                for (const existing of existingTargetPairs)
-                    removePair(existing);
+                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 row = document.createElement("div");
-        row.className = "qti3-match-row";
-        row.dataset.sourceIdentifier = source.identifier;
-        const sourceLabel = document.createElement("span");
-        sourceLabel.className = "qti3-match-source";
-        sourceLabel.textContent = source.text;
-        const targetRegion = document.createElement("div");
-        targetRegion.className = "qti3-match-targets";
-        targetRegion.role = "group";
-        targetRegion.setAttribute("aria-label", `Targets for ${source.text}`);
-        for (const target of targets) {
-            const button = tokenButton(target);
-            button.classList.add("qti3-match-target");
-            button.dataset.sourceIdentifier = source.identifier;
-            button.setAttribute("aria-label", `${source.text}: ${target.text}`);
-            button.addEventListener("click", () => togglePair(source, target));
-            targetRegion.append(button);
-        }
-        row.append(sourceLabel, targetRegion);
-        grid.append(row);
+        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(grid, pairList);
+    group.append(selector, pairList);
     return group;
 }
 function pairRegionLabels(interaction) {
@@ -1103,10 +1192,7 @@ function pairRegionLabels(interaction) {
     return { source: "Source", target: "Target" };
 }
 function renderGraphicOrderResponse(interaction, update, currentValue) {
-    const group = document.createElement("fieldset");
-    const legend = document.createElement("legend");
-    legend.textContent = readableType(interaction.type);
-    group.append(legend);
+    const group = responseGroup();
     const width = objectWidth(interaction);
     const height = objectHeight(interaction);
     const choices = choicesOrFallback(interaction).filter((choice) => choice.role === "hotspot");
@@ -1239,12 +1325,14 @@ function renderGraphicOrderResponse(interaction, update, currentValue) {
         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}. ${hotspotDisplayLabel(choice, choices)}`;
-            label.setAttribute("aria-label", `${hotspotDisplayLabel(choice, choices)}, position ${index + 1} of ${currentChoices.length}`);
+            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") {
@@ -1260,22 +1348,14 @@ function renderGraphicOrderResponse(interaction, update, currentValue) {
                     removeHotspot(choice.identifier);
                 }
             });
-            const up = document.createElement("button");
-            up.type = "button";
-            up.textContent = "Up";
+            const up = movementButton("up", movementLabel(choiceLabel, "up"), () => moveHotspot(choice.identifier, -1));
             up.disabled = index === 0;
-            up.setAttribute("aria-label", `Move ${hotspotDisplayLabel(choice, choices)} up`);
-            up.addEventListener("click", () => moveHotspot(choice.identifier, -1));
-            const down = document.createElement("button");
-            down.type = "button";
-            down.textContent = "Down";
+            const down = movementButton("down", movementLabel(choiceLabel, "down"), () => moveHotspot(choice.identifier, 1));
             down.disabled = index === currentChoices.length - 1;
-            down.setAttribute("aria-label", `Move ${hotspotDisplayLabel(choice, choices)} down`);
-            down.addEventListener("click", () => moveHotspot(choice.identifier, 1));
             const remove = document.createElement("button");
             remove.type = "button";
             remove.textContent = "Remove";
-            remove.setAttribute("aria-label", `Remove ${hotspotDisplayLabel(choice, choices)}`);
+            remove.setAttribute("aria-label", `Remove ${choiceLabel}`);
             remove.addEventListener("click", () => removeHotspot(choice.identifier));
             item.append(label, up, down, remove);
             return item;
@@ -1320,10 +1400,7 @@ function renderGraphicOrderResponse(interaction, update, currentValue) {
     return group;
 }
 function renderGraphicAssociateResponse(interaction, update, currentValue) {
-    const group = document.createElement("fieldset");
-    const legend = document.createElement("legend");
-    legend.textContent = readableType(interaction.type);
-    group.append(legend);
+    const group = responseGroup();
     const width = objectWidth(interaction);
     const height = objectHeight(interaction);
     const choices = choicesOrFallback(interaction).filter((choice) => choice.role === "hotspot");
@@ -1515,10 +1592,7 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
     return group;
 }
 function renderGapMatchResponse(interaction, update, currentValue) {
-    const group = document.createElement("fieldset");
-    const legend = document.createElement("legend");
-    legend.textContent = readableType(interaction.type);
-    group.append(legend);
+    const group = responseGroup();
     appendGraphicContext(group, interaction);
     const sources = sourceChoices(interaction);
     const gaps = targetChoices(interaction);
@@ -1573,20 +1647,20 @@ function renderGapMatchResponse(interaction, update, currentValue) {
         const button = document.createElement("button");
         button.type = "button";
         button.className = "qti3-gap-button";
-        button.textContent = assigned ? assigned.text : "Empty";
+        button.textContent = assigned ? assigned.text : "";
         button.setAttribute("aria-label", assigned ? `${gapLabel}, assigned ${assigned.text}` : `${gapLabel}, empty`);
         button.addEventListener("click", () => assign(gap, selectedSource?.identifier));
-        const remove = document.createElement("button");
-        remove.type = "button";
-        remove.textContent = "Remove";
-        remove.disabled = !assigned;
-        remove.setAttribute("aria-label", `Remove ${gapLabel.toLowerCase()} assignment`);
-        remove.addEventListener("click", () => {
+        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, remove);
+        target.append(button);
         return target;
     };
     const renderGaps = () => {
@@ -1635,7 +1709,7 @@ function renderSelect(interaction, update, currentValue) {
     const [selected] = valueToStrings(currentValue);
     if (selected)
         select.value = selected;
-    select.addEventListener("change", () => update(select.value));
+    select.addEventListener("change", () => update(select.value === "" ? null : select.value));
     return select;
 }
 function appendInlineControl(content, control, nextSegment) {
@@ -1737,7 +1811,7 @@ function renderSliderResponse(interaction, update, currentValue) {
     const sync = () => {
         output.value = input.value;
         output.textContent = input.value;
-        update(input.value);
+        update(coerceResponseInputValue(input.value, interaction.responseBaseType));
     };
     input.addEventListener("input", sync);
     group.append(input, output);
@@ -1905,25 +1979,20 @@ function renderSelectPointResponse(interaction, update, currentValue) {
     syncMarker();
     const controls = document.createElement("div");
     controls.className = "qti3-point-controls";
-    for (const [label, dx, dy] of [
-        ["Up", 0, -1],
-        ["Left", -1, 0],
-        ["Right", 1, 0],
-        ["Down", 0, 1],
+    for (const [direction, dx, dy] of [
+        ["up", 0, -1],
+        ["left", -1, 0],
+        ["right", 1, 0],
+        ["down", 0, 1],
     ]) {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.textContent = label;
-        button.setAttribute("aria-label", `Move point ${label.toLowerCase()}`);
-        button.addEventListener("click", () => {
+        controls.append(movementButton(direction, movementLabel("point", direction), () => {
             const point = mutableActivePoint();
             point.x += dx;
             point.y += dy;
             clampPoint(point);
             syncMarker();
             commit();
-        });
-        controls.append(button);
+        }));
     }
     if (isMultiple) {
         const clear = document.createElement("button");
@@ -2097,18 +2166,13 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
     marker.addEventListener("keydown", handleKey);
     const controls = document.createElement("div");
     controls.className = "qti3-point-controls";
-    for (const [label, dx, dy] of [
-        ["Up", 0, -1],
-        ["Left", -1, 0],
-        ["Right", 1, 0],
-        ["Down", 0, 1],
+    for (const [direction, dx, dy] of [
+        ["up", 0, -1],
+        ["left", -1, 0],
+        ["right", 1, 0],
+        ["down", 0, 1],
     ]) {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.textContent = label;
-        button.setAttribute("aria-label", `Move object ${label.toLowerCase()}`);
-        button.addEventListener("click", () => moveBy(dx, dy));
-        controls.append(button);
+        controls.append(movementButton(direction, movementLabel("object", direction), () => moveBy(dx, dy)));
     }
     syncMarker();
     group.append(stage, coordinate, controls);
@@ -2133,8 +2197,17 @@ function renderDrawingResponse(interaction, update, currentValue) {
     surface.style.border = "1px solid CanvasText";
     surface.style.background = "Canvas";
     surface.style.touchAction = "none";
-    const background = drawingBackgroundImage(interaction, width, height);
+    const restoredStrokes = parseDrawingValue(currentValue);
+    const authoredBackgroundHref = drawingBackgroundHref(interaction);
+    let resolvedAuthoredBackgroundHref = authoredBackgroundHref;
+    let activeBackgroundIsAuthored = restoredStrokes.length > 0 || !drawingResponseImage(currentValue);
+    let activeBackgroundHref = restoredStrokes.length === 0
+        ? (drawingResponseImage(currentValue) ?? authoredBackgroundHref)
+        : authoredBackgroundHref;
     const resetSurface = () => {
+        const background = activeBackgroundHref
+            ? drawingImageElement(activeBackgroundHref, width, height)
+            : undefined;
         surface.replaceChildren(...(background ? [background] : []));
     };
     resetSurface();
@@ -2142,22 +2215,35 @@ function renderDrawingResponse(interaction, update, currentValue) {
     summary.className = "qti3-coordinate-output";
     const strokes = [];
     let activeStroke;
-    const serializeStroke = (points) => {
-        return points.map((point) => `${point.x} ${point.y}`).join(" ");
-    };
+    let commitVersion = 0;
     const commit = (emitResponse = true) => {
-        const value = strokes.map((stroke) => serializeStroke(stroke.points)).join(" | ");
-        if (emitResponse)
-            update(value);
+        const version = ++commitVersion;
+        if (emitResponse) {
+            if (strokes.length === 0) {
+                update(null);
+            }
+            else {
+                void exportDrawingResponse(interaction, width, height, strokes, () => {
+                    const currentHref = currentDrawingBackgroundHref(surface);
+                    if (activeBackgroundIsAuthored && currentHref) {
+                        resolvedAuthoredBackgroundHref = currentHref;
+                    }
+                    return currentHref ?? activeBackgroundHref;
+                }).then((value) => {
+                    if (version === commitVersion)
+                        update(value);
+                });
+            }
+        }
         const count = strokes.length;
-        summary.value = value;
+        summary.value = serializeDrawingStrokes(strokes);
         summary.textContent =
             count === 0 ? "No drawing strokes." : `${count} drawing stroke${count === 1 ? "" : "s"}.`;
         surface.setAttribute("aria-label", count === 0
             ? "Drawing response surface, no strokes"
             : `Drawing response surface, ${count} stroke${count === 1 ? "" : "s"}`);
     };
-    for (const points of parseDrawingValue(currentValue)) {
+    for (const points of restoredStrokes) {
         const element = polylineElement(points);
         strokes.push({ points, element });
         surface.append(element);
@@ -2215,6 +2301,12 @@ function renderDrawingResponse(interaction, update, currentValue) {
     clear.addEventListener("click", () => {
         strokes.splice(0, strokes.length);
         activeStroke = undefined;
+        if (activeBackgroundIsAuthored) {
+            resolvedAuthoredBackgroundHref =
+                currentDrawingBackgroundHref(surface) ?? resolvedAuthoredBackgroundHref;
+        }
+        activeBackgroundHref = resolvedAuthoredBackgroundHref;
+        activeBackgroundIsAuthored = true;
         resetSurface();
         commit();
     });
@@ -2265,10 +2357,7 @@ function renderPortableCustomResponse(interaction, update, currentValue) {
     return group;
 }
 function renderHotspotResponse(interaction, update, currentValue) {
-    const group = document.createElement("fieldset");
-    const legend = document.createElement("legend");
-    legend.textContent = `${readableType(interaction.type)} regions`;
-    group.append(legend);
+    const group = responseGroup();
     const surface = document.createElement("div");
     surface.className = "qti3-hotspot-surface";
     const width = objectWidth(interaction);
@@ -2337,27 +2426,19 @@ function renderHotspotResponse(interaction, update, currentValue) {
     group.append(surface, selectedSummary);
     return group;
 }
-function renderObjectAsset(interaction) {
+function renderObjectAsset(interaction, mediaResponse = {}) {
     const object = interaction.object;
-    const type = object?.type ?? "";
     const label = interaction.prompt ?? object?.text ?? "Media interaction";
-    if (object?.data && type.startsWith("audio/")) {
+    const mediaType = object ? mediaElementType(object) : undefined;
+    if (object && mediaType === "audio") {
         const audio = document.createElement("audio");
-        audio.controls = true;
-        audio.preload = "none";
-        audio.src = object.data;
-        audio.setAttribute("aria-label", label);
-        audio.style.maxInlineSize = "100%";
+        configureMediaElement(audio, interaction, object, label, mediaResponse);
         audio.style.inlineSize = "100%";
         return audio;
     }
-    if (object?.data && type.startsWith("video/")) {
+    if (object && mediaType === "video") {
         const video = document.createElement("video");
-        video.controls = true;
-        video.preload = "none";
-        video.src = object.data;
-        video.setAttribute("aria-label", label);
-        video.style.maxInlineSize = "100%";
+        configureMediaElement(video, interaction, object, label, mediaResponse);
         if (object.width)
             video.width = Number(object.width);
         if (object.height)
@@ -2379,10 +2460,11 @@ function renderObjectAsset(interaction) {
     const group = document.createElement("div");
     group.role = "group";
     group.setAttribute("aria-label", label);
-    if (object?.data) {
+    const fallbackHref = object?.data ?? object?.sources.find((source) => source.src)?.src;
+    if (fallbackHref) {
         const link = document.createElement("a");
-        link.href = object.data;
-        link.textContent = object.text || object.data;
+        link.href = fallbackHref;
+        link.textContent = object?.text || fallbackHref;
         group.append(link);
     }
     else {
@@ -2390,6 +2472,113 @@ function renderObjectAsset(interaction) {
     }
     return group;
 }
+function configureMediaElement(media, interaction, object, label, mediaResponse) {
+    media.controls = mediaControlsMode(interaction, object) !== "none";
+    media.preload = "none";
+    media.autoplay = parseBooleanAttribute(interaction.attributes.autostart) ?? false;
+    media.loop = parseBooleanAttribute(interaction.attributes.loop) ?? false;
+    media.setAttribute("aria-label", label);
+    media.style.maxInlineSize = "100%";
+    copyMediaDataAttributes(media, interaction.attributes);
+    copyMediaDataAttributes(media, object.attributes);
+    if (object.data)
+        media.src = object.data;
+    for (const source of object.sources) {
+        if (!source.src)
+            continue;
+        const sourceElement = document.createElement("source");
+        sourceElement.src = source.src;
+        if (source.type)
+            sourceElement.type = source.type;
+        media.append(sourceElement);
+    }
+    for (const track of object.tracks) {
+        if (!track.src)
+            continue;
+        const trackElement = document.createElement("track");
+        trackElement.src = track.src;
+        if (track.kind)
+            trackElement.kind = track.kind;
+        if (track.srclang)
+            trackElement.srclang = track.srclang;
+        if (track.label)
+            trackElement.label = track.label;
+        if (track.default)
+            trackElement.default = true;
+        media.append(trackElement);
+    }
+    bindMediaPlayCount(media, interaction, mediaResponse);
+}
+function copyMediaDataAttributes(element, attributes) {
+    for (const [name, value] of Object.entries(attributes)) {
+        if (!name.startsWith("data-"))
+            continue;
+        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/") ||
@@ -2398,7 +2587,7 @@ function objectIsImage(object) {
 function appendOptions(select, choices) {
     const empty = document.createElement("option");
     empty.value = "";
-    empty.textContent = "Select";
+    empty.textContent = "";
     select.append(empty);
     for (const choice of choices) {
         const option = document.createElement("option");
@@ -2480,6 +2669,19 @@ function scalarString(value) {
         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)
@@ -2521,6 +2723,42 @@ function parseDrawingValue(value) {
     const raw = scalarString(value);
     if (!raw)
         return [];
+    const metadata = drawingMetadataFromSvgDataUrl(raw);
+    if (metadata)
+        return parseDrawingStrokePayload(metadata);
+    return parseDrawingStrokePayload(raw);
+}
+function drawingMetadataFromSvgDataUrl(raw) {
+    if (!raw.startsWith("data:image/svg+xml"))
+        return undefined;
+    const commaIndex = raw.indexOf(",");
+    if (commaIndex === -1)
+        return undefined;
+    const encoded = raw.slice(commaIndex + 1);
+    let svg = "";
+    try {
+        svg = raw.slice(0, commaIndex).includes(";base64")
+            ? atob(encoded)
+            : decodeURIComponent(encoded);
+    }
+    catch {
+        return undefined;
+    }
+    const match = svg.match(/\sdata-qti3-strokes="([^"]*)"/);
+    if (!match?.[1])
+        return undefined;
+    try {
+        return decodeURIComponent(match[1]);
+    }
+    catch {
+        return undefined;
+    }
+}
+function drawingResponseImage(value) {
+    const raw = scalarString(value);
+    return raw?.startsWith("data:image/") ? raw : undefined;
+}
+function parseDrawingStrokePayload(raw) {
     return raw
         .split("|")
         .map((stroke) => {
@@ -2657,20 +2895,177 @@ function svgPoint(surface, event) {
         y: Math.max(0, Math.min(height, y)),
     };
 }
-function drawingBackgroundImage(interaction, width, height) {
+async function exportDrawingResponse(interaction, width, height, strokes, backgroundHref) {
+    const href = backgroundHref();
+    const mime = drawingResponseMime(interaction.object);
+    if (mime === "image/svg+xml") {
+        return svgDrawingDataUrl(interaction, width, height, strokes, await portableImageHref(href));
+    }
+    return rasterDrawingDataUrl(interaction, width, height, strokes, href, mime);
+}
+function drawingResponseMime(object) {
+    const candidates = [
+        object?.type,
+        object?.data,
+        ...(object?.sources.map((source) => source.type ?? source.src) ?? []),
+    ];
+    for (const candidate of candidates) {
+        const mime = imageMime(candidate);
+        if (mime)
+            return mime;
+    }
+    return "image/svg+xml";
+}
+function imageMime(value) {
+    if (!value)
+        return undefined;
+    const normalized = value.toLowerCase().split(";")[0] ?? "";
+    if (normalized === "image/svg+xml")
+        return "image/svg+xml";
+    if (normalized === "image/png")
+        return "image/png";
+    if (normalized === "image/jpeg" || normalized === "image/jpg")
+        return "image/jpeg";
+    if (normalized === "image/webp")
+        return "image/webp";
+    const dataMime = value.match(/^data:([^;,]+)/i)?.[1]?.toLowerCase();
+    if (dataMime)
+        return imageMime(dataMime);
+    if (/\.svg(?:[?#].*)?$/i.test(value))
+        return "image/svg+xml";
+    if (/\.png(?:[?#].*)?$/i.test(value))
+        return "image/png";
+    if (/\.jpe?g(?:[?#].*)?$/i.test(value))
+        return "image/jpeg";
+    if (/\.webp(?:[?#].*)?$/i.test(value))
+        return "image/webp";
+    return undefined;
+}
+function svgDrawingDataUrl(interaction, width, height, strokes, backgroundHref) {
+    const markup = svgDrawingMarkup(interaction, width, height, strokes, backgroundHref);
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+}
+function svgDrawingMarkup(interaction, width, height, strokes, backgroundHref) {
+    const strokePayload = serializeDrawingStrokes(strokes);
+    const background = backgroundHref && interaction.object && objectIsImage(interaction.object)
+        ? `<image href="${xmlAttribute(backgroundHref)}" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>`
+        : "";
+    const lines = strokes
+        .map((stroke) => {
+        return `<polyline points="${xmlAttribute(serializeSvgPoints(stroke.points))}" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>`;
+    })
+        .join("");
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"><metadata id="qti3-drawing-response" data-qti3-strokes="${xmlAttribute(encodeURIComponent(strokePayload))}"></metadata>${background}${lines}</svg>`;
+}
+async function rasterDrawingDataUrl(interaction, width, height, strokes, backgroundHref, mime) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d");
+    if (!context)
+        return svgDrawingDataUrl(interaction, width, height, strokes, backgroundHref);
+    if (mime === "image/jpeg") {
+        context.fillStyle = "#fff";
+        context.fillRect(0, 0, width, height);
+    }
+    if (backgroundHref && interaction.object && objectIsImage(interaction.object)) {
+        try {
+            const image = await loadCanvasImage(backgroundHref);
+            context.drawImage(image, 0, 0, width, height);
+        }
+        catch {
+            // Export the candidate marks even when the authored background cannot be rasterized.
+        }
+    }
+    context.strokeStyle = "#000";
+    context.lineWidth = 3;
+    context.lineCap = "round";
+    context.lineJoin = "round";
+    for (const stroke of strokes) {
+        const [first, ...rest] = stroke.points;
+        if (!first)
+            continue;
+        context.beginPath();
+        context.moveTo(first.x, first.y);
+        for (const point of rest)
+            context.lineTo(point.x, point.y);
+        context.stroke();
+    }
+    try {
+        return canvas.toDataURL(mime);
+    }
+    catch {
+        return svgDrawingDataUrl(interaction, width, height, strokes, backgroundHref);
+    }
+}
+function loadCanvasImage(src) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.addEventListener("load", () => resolve(image), { once: true });
+        image.addEventListener("error", () => reject(new Error(`Unable to load ${src}`)), {
+            once: true,
+        });
+        image.src = src;
+    });
+}
+async function portableImageHref(href) {
+    if (!href || href.startsWith("data:"))
+        return href;
+    try {
+        const response = await fetch(href);
+        if (!response.ok)
+            return href;
+        return await blobToDataUrl(await response.blob());
+    }
+    catch {
+        return href;
+    }
+}
+function blobToDataUrl(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.addEventListener("load", () => {
+            resolve(String(reader.result ?? ""));
+        });
+        reader.addEventListener("error", () => {
+            reject(reader.error ?? new Error("Unable to read drawing background."));
+        });
+        reader.readAsDataURL(blob);
+    });
+}
+function drawingBackgroundHref(interaction) {
     if (!interaction.object?.data || !objectIsImage(interaction.object))
         return undefined;
+    return interaction.object.data;
+}
+function drawingImageElement(href, width, height) {
     const image = document.createElementNS("http://www.w3.org/2000/svg", "image");
-    image.setAttribute("href", interaction.object.data);
+    image.setAttribute("href", href);
     image.setAttribute("width", String(width));
     image.setAttribute("height", String(height));
     image.setAttribute("preserveAspectRatio", "xMidYMid meet");
     image.setAttribute("aria-hidden", "true");
     return image;
 }
+function currentDrawingBackgroundHref(surface) {
+    return surface.querySelector("image")?.getAttribute("href") ?? undefined;
+}
 function serializeSvgPoints(points) {
     return points.map((point) => `${point.x},${point.y}`).join(" ");
 }
+function serializeDrawingStrokes(strokes) {
+    return strokes.map((stroke) => serializeDrawingStroke(stroke.points)).join(" | ");
+}
+function serializeDrawingStroke(points) {
+    return points.map((point) => `${point.x} ${point.y}`).join(" ");
+}
+function xmlAttribute(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;");
+}
 function polylineElement(points) {
     const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
     line.setAttribute("points", serializeSvgPoints(points));
@@ -2898,11 +3293,6 @@ function readableType(type) {
         .replace(/[A-Z]/g, (letter) => ` ${letter.toLowerCase()}`)
         .replace(/^./, (letter) => letter.toUpperCase());
 }
-function orderedResponseLegend(type) {
-    if (type === "order")
-        return readableType(type);
-    return `${readableType(type)} order`;
-}
 function errorView(message) {
     const element = document.createElement("p");
     element.role = "alert";
@@ -2938,12 +3328,24 @@ 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;
@@ -2984,11 +3386,14 @@ function playerStyleElement() {
       color: CanvasText;
     }
 
-    .qti3-player fieldset {
+    .qti3-response-group {
       min-inline-size: 0;
     }
 
-    .qti3-actions,
+    .qti3-response-group > * + * {
+      margin-block-start: 0.75rem;
+    }
+
     .qti3-reorder-item,
     .qti3-token-region,
     .qti3-pair-chip,
@@ -3013,52 +3418,50 @@ function playerStyleElement() {
       align-items: start;
     }
 
-    .qti3-match-grid {
+    .qti3-match-selector {
       display: grid;
-      gap: 0.5rem;
+      gap: 1.5rem;
       inline-size: 100%;
       max-inline-size: 72rem;
       box-sizing: border-box;
     }
 
-    .qti3-match-row {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      gap: 0.75rem;
-      align-items: start;
-      inline-size: 100%;
-      min-inline-size: 0;
-      box-sizing: border-box;
-      padding-block: 0.5rem;
-      border-block-end: 1px solid CanvasText;
-    }
-
-    .qti3-match-source {
-      font-weight: 700;
+    .qti3-match-source-bank,
+    .qti3-match-target-bank {
+      align-items: stretch;
     }
 
-    .qti3-match-targets {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-      inline-size: 100%;
-      min-inline-size: 0;
-      box-sizing: border-box;
+    .qti3-token.qti3-match-source {
+      border-color: var(--qti3-match-accent);
+      background: Canvas;
+      color: var(--qti3-match-accent);
     }
 
-    .qti3-match-target {
-      flex: 1 1 12rem;
+    .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: start;
+      text-align: center;
     }
 
-    @media (min-width: 768px) {
-      .qti3-match-row {
-        grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
+    @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;
       }
     }
 
@@ -3172,6 +3575,15 @@ function playerStyleElement() {
       cursor: grab;
     }
 
+    .qti3-icon-button {
+      display: inline-grid;
+      place-items: center;
+      inline-size: 2.25rem;
+      block-size: 2.25rem;
+      padding: 0;
+      line-height: 1;
+    }
+
     .qti3-token[aria-pressed="true"],
     .qti3-pair-chip {
       background: Highlight;
@@ -3207,6 +3619,8 @@ function playerStyleElement() {
 
     .qti3-gap-passage .qti3-gap-target {
       display: inline-flex;
+      padding: 0;
+      border: 0;
       margin-inline: 0.15rem;
       margin-block: 0.2rem;
       vertical-align: middle;
@@ -3214,6 +3628,7 @@ function playerStyleElement() {
 
     .qti3-gap-button {
       min-inline-size: 8rem;
+      min-block-size: 2.25rem;
       text-align: start;
     }
 
@@ -3415,6 +3830,8 @@ function responseCount(value) {
 function maximumAllowedResponses(interaction) {
     if (!interaction)
         return undefined;
+    if (interaction.type === "media")
+        return maximumMediaPlays(interaction);
     const explicit = interaction.attributes["max-choices"] ?? interaction.attributes["max-associations"];
     if (explicit === undefined)
         return undefined;
@@ -3426,12 +3843,33 @@ function maximumAllowedResponses(interaction) {
 function minimumRequiredResponses(interaction) {
     if (!interaction)
         return 1;
+    if (interaction.type === "media")
+        return minimumMediaPlays(interaction);
     const explicit = interaction.attributes["min-choices"] ?? interaction.attributes["min-associations"];
     if (explicit === undefined)
         return 1;
     const parsed = Number(explicit);
     return Number.isInteger(parsed) && parsed >= 0 ? parsed : 1;
 }
+function minimumMediaPlays(interaction) {
+    const parsed = Number(interaction.attributes["min-plays"] ?? "0");
+    return Number.isInteger(parsed) && parsed >= 0 ? parsed : 0;
+}
+function maximumMediaPlays(interaction) {
+    const parsed = Number(interaction.attributes["max-plays"] ?? "0");
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;
+}
+function mediaPlayCount(value) {
+    const parsed = typeof value === "number" ? value : typeof value === "string" ? Number(value) : 0;
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : 0;
+}
+function parseBooleanAttribute(value) {
+    if (value === "true" || value === "1")
+        return true;
+    if (value === "false" || value === "0")
+        return false;
+    return undefined;
+}
 function matchMaxDiagnostics(responseIdentifier, interaction, response) {
     const identifiers = responseChoiceIdentifiers(response);
     if (identifiers.length === 0)