@longsightgroup/qti3-player 0.1.0 → 0.1.1

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";
@@ -600,11 +611,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 +668,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 +788,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 +878,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 +891,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 +1008,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 +1030,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 +1073,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 +1194,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 +1327,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 +1350,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 +1402,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 +1594,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 +1649,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 +1711,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 +1813,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 +1981,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 +2168,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);
@@ -2265,10 +2331,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);
@@ -2398,7 +2461,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 +2543,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)
@@ -2898,11 +2974,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 +3009,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,10 +3067,14 @@ function playerStyleElement() {
       color: CanvasText;
     }
 
-    .qti3-player fieldset {
+    .qti3-response-group {
       min-inline-size: 0;
     }
 
+    .qti3-response-group > * + * {
+      margin-block-start: 0.75rem;
+    }
+
     .qti3-actions,
     .qti3-reorder-item,
     .qti3-token-region,
@@ -3013,52 +3100,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 +3257,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 +3301,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 +3310,7 @@ function playerStyleElement() {
 
     .qti3-gap-button {
       min-inline-size: 8rem;
+      min-block-size: 2.25rem;
       text-align: start;
     }