@longsightgroup/qti3-player 0.2.0 → 0.2.1

package/README.md

@@ -39,6 +39,25 @@ player?.addEventListener("qti-statechange", (event) => {
 });
 ```
 
+## Player Chrome Messages
+
+The player keeps authored QTI content language separate from player chrome such as
+remove buttons. Chrome language defaults to the player `languageOfInterface` property,
+the `language-of-interface` attribute, browser language, document language, then
+English. Hosts can override it when delivery settings require a fixed interface language.
+
+Built-in catalogs are currently available for English, Spanish (`es-MX`, `es-ES`),
+Swedish (`sv-SE`), German (`de-DE`), Portuguese (`pt-BR`, `pt-PT`), and French
+(`fr-FR`, `fr-CA`).
+
+```ts
+player.languageOfInterface = "es-MX";
+player.messages = {
+  remove: () => "Eliminar",
+  removePair: ({ label }) => `Eliminar ${label}`,
+};
+```
+
 ## Portable Custom Interactions
 
 For `qti-portable-custom-interaction`, the player renders a

package/dist/index.d.ts

@@ -15,6 +15,14 @@ export interface QtiPlayerLoadOptions {
     fetchXml?: QtiPlayerFetchXml | undefined;
     resolveAsset?: QtiPlayerResolveAsset | undefined;
 }
+export interface QtiPlayerRemoveMessageParams {
+    label: string;
+}
+export interface QtiPlayerMessages {
+    remove: () => string;
+    removePair: (params: QtiPlayerRemoveMessageParams) => string;
+}
+export type QtiPlayerMessageOverrides = Partial<QtiPlayerMessages>;
 export interface QtiReadyEventDetail {
     item: QtiAssessmentItem;
 }
@@ -61,11 +69,21 @@ export type QtiAssessmentItemPlayerCustomEventMap = {
 };
 declare const HTMLElementBase: typeof HTMLElement;
 export declare class QtiAssessmentItemPlayer extends HTMLElementBase {
+    static get observedAttributes(): string[];
     private documentModel?;
     private session?;
     private resolveAsset;
     private validationMessages;
+    private languageOfInterfaceOverride;
+    private messageOverrides;
     private sessionControl;
+    get languageOfInterface(): string;
+    set languageOfInterface(value: string | undefined);
+    get locale(): string;
+    set locale(value: string | undefined);
+    get messages(): QtiPlayerMessageOverrides;
+    set messages(value: QtiPlayerMessageOverrides | undefined);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     loadXml(xml: string, options?: QtiPlayerLoadOptions): Promise<void>;
     loadUrl(url: string, options?: QtiPlayerLoadOptions): Promise<void>;
     scoreAttempt(options?: QtiScoreAttemptOptions): QtiScoreResult | undefined;
@@ -78,6 +96,8 @@ export declare class QtiAssessmentItemPlayer extends HTMLElementBase {
     getCatalogSupportResolution(options?: QtiCatalogSupportResolutionOptions): QtiCatalogSupportResolution | undefined;
     private emitStateChange;
     private dispatchPlayerEvent;
+    private playerMessages;
+    private rerenderIfLoaded;
     private render;
     private renderInteraction;
     private renderPortableCustomResponse;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EAGtB,KAAK,aAAa,EAElB,KAAK,cAAc,EAGnB,KAAK,2BAA2B,EAChC,KAAK,2BAA2B,EAChC,KAAK,cAAc,EACnB,KAAK,2BAA2B,EAChC,KAAK,kCAAkC,EACvC,KAAK,wBAAwB,EAC7B,KAAK,QAAQ,EACd,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,sBAAsB;IACrC,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC;AAED,MAAM,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AACjE,MAAM,MAAM,qBAAqB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAE5D,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACtC,MAAM,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACtC,cAAc,CAAC,EAAE,uBAAuB,GAAG,SAAS,CAAC;IACrD,QAAQ,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACzC,YAAY,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,WAAW,iCAAiC;IAChD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,cAAc,CAAC;IAC5B,UAAU,EAAE,2BAA2B,CAAC;IACxC,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,2BAA2B,GAAG,SAAS,CAAC;CACjD;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AAEjD,MAAM,WAAW,wBAAwB;IACvC,kBAAkB,EAAE,aAAa,EAAE,CAAC;IACpC,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,qCAAqC;IACpD,WAAW,EAAE,mBAAmB,CAAC;IACjC,iBAAiB,EAAE,yBAAyB,CAAC;IAC7C,oBAAoB,EAAE,4BAA4B,CAAC;IACnD,2BAA2B,EAAE,iCAAiC,CAAC;IAC/D,WAAW,EAAE,mBAAmB,CAAC;IACjC,gBAAgB,EAAE,wBAAwB,CAAC;IAC3C,aAAa,EAAE,qBAAqB,CAAC;IACrC,gBAAgB,EAAE,wBAAwB,CAAC;CAC5C;AAED,MAAM,MAAM,gCAAgC,GAAG,MAAM,qCAAqC,CAAC;AAE3F,MAAM,MAAM,4BAA4B,CACtC,CAAC,SAAS,gCAAgC,GAAG,gCAAgC,IAC3E,WAAW,CAAC,qCAAqC,CAAC,CAAC,CAAC,CAAC,CAAC;AAE1D,MAAM,MAAM,qCAAqC,GAAG;KACjD,CAAC,IAAI,gCAAgC,GAAG,WAAW,CAAC,qCAAqC,CAAC,CAAC,CAAC,CAAC;CAC/F,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,OAAO,WAOO,CAAC;AAEtC,qBAAa,uBAAwB,SAAQ,eAAe;IAC1D,OAAO,CAAC,aAAa,CAAC,CAAc;IACpC,OAAO,CAAC,OAAO,CAAC,CAAiB;IACjC,OAAO,CAAC,YAAY,CAAoC;IACxD,OAAO,CAAC,kBAAkB,CAAuB;IACjD,OAAO,CAAC,cAAc,CAGpB;IAEI,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,oBAAyB,GAAG,OAAO,CAAC,IAAI,CAAC;IA0BvE,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,oBAAyB,GAAG,OAAO,CAAC,IAAI,CAAC;IAK7E,YAAY,CAAC,OAAO,GAAE,sBAA2B,GAAG,cAAc,GAAG,SAAS;IA6B9E,KAAK,IAAI,IAAI;IAUb,OAAO,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI;IAmBvC,OAAO,IAAI,IAAI;IASf,UAAU,CAAC,OAAO,GAAE,sBAA2B,GAAG,IAAI;IAgBtD,SAAS,IAAI,iBAAiB,GAAG,SAAS;IAM1C,wBAAwB,IAAI,wBAAwB,GAAG,SAAS;IAKhE,2BAA2B,CACzB,OAAO,GAAE,kCAAuC,GAC/C,2BAA2B,GAAG,SAAS;IAK1C,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,MAAM;IA0Cd,OAAO,CAAC,iBAAiB;IAoJzB,OAAO,CAAC,4BAA4B;IA6FpC,OAAO,CAAC,yBAAyB;IAiCjC,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,iBAAiB;IA0CzB,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,sBAAsB;IA+B9B,OAAO,CAAC,yBAAyB;IAgCjC,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,yBAAyB;IAsBjC,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,iBAAiB;IAyDzB,OAAO,CAAC,wBAAwB;IAgChC,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,cAAc;CAgBvB;AAED,wBAAgB,6BAA6B,IAAI,IAAI,CAIpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,uBAAuB,CAAC;KACvD;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -7,14 +7,48 @@ const HTMLElementBase = globalThis.HTMLElement ??
         }
     };
 export class QtiAssessmentItemPlayer extends HTMLElementBase {
+    static get observedAttributes() {
+        return ["language-of-interface", "locale"];
+    }
     documentModel;
     session;
     resolveAsset;
     validationMessages = [];
+    languageOfInterfaceOverride;
+    messageOverrides = {};
     sessionControl = {
         validateResponses: true,
         showFeedback: true,
     };
+    get languageOfInterface() {
+        return (this.languageOfInterfaceOverride ??
+            this.getAttribute?.("language-of-interface") ??
+            this.getAttribute?.("locale") ??
+            defaultPlayerLocale(this));
+    }
+    set languageOfInterface(value) {
+        this.languageOfInterfaceOverride = normalizedLocale(value);
+        this.rerenderIfLoaded();
+    }
+    get locale() {
+        return this.languageOfInterface;
+    }
+    set locale(value) {
+        this.languageOfInterface = value;
+    }
+    get messages() {
+        return this.messageOverrides;
+    }
+    set messages(value) {
+        this.messageOverrides = value ?? {};
+        this.rerenderIfLoaded();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if ((name !== "language-of-interface" && name !== "locale") || oldValue === newValue) {
+            return;
+        }
+        this.rerenderIfLoaded();
+    }
     async loadXml(xml, options = {}) {
         this.sessionControl = {
             validateResponses: options.sessionControl?.validateResponses ?? true,
@@ -147,6 +181,16 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     dispatchPlayerEvent(type, detail) {
         this.dispatchEvent(new CustomEvent(type, { detail }));
     }
+    playerMessages() {
+        return resolvePlayerMessages(this.languageOfInterface, this.messageOverrides);
+    }
+    rerenderIfLoaded() {
+        if (!this.documentModel)
+            return;
+        this.render();
+        this.renderValidationMessages();
+        this.updateAttemptAvailability();
+    }
     render() {
         const documentModel = this.documentModel;
         if (!documentModel)
@@ -186,6 +230,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         this.replaceChildren(root);
     }
     renderInteraction(interaction) {
+        const messages = this.playerMessages();
         const field = document.createElement("section");
         field.className = `qti3-interaction qti3-${interaction.type}`;
         field.classList.add(...qtiSharedClassNames(interaction.attributes.class));
@@ -212,7 +257,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         };
         const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
         if (interaction.type === "graphicOrder") {
-            field.append(renderGraphicOrderResponse(interaction, update, currentValue));
+            field.append(renderGraphicOrderResponse(interaction, update, currentValue, messages));
             return field;
         }
         if (usesOrderedResponse(interaction)) {
@@ -224,15 +269,15 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             return field;
         }
         if (interaction.type === "graphicAssociate") {
-            field.append(renderGraphicAssociateResponse(interaction, update, currentValue));
+            field.append(renderGraphicAssociateResponse(interaction, update, currentValue, messages));
             return field;
         }
         if (interaction.type === "match") {
-            field.append(renderMatchResponse(interaction, update, currentValue));
+            field.append(renderMatchResponse(interaction, update, currentValue, messages));
             return field;
         }
         if (usesPairResponse(interaction)) {
-            field.append(renderPairResponse(interaction, update, currentValue));
+            field.append(renderPairResponse(interaction, update, currentValue, messages));
             return field;
         }
         if (interaction.type === "hotspot" && interaction.object) {
@@ -727,6 +772,137 @@ export function defineQtiAssessmentItemPlayer() {
         customElements.define("qti-assessment-item-player", QtiAssessmentItemPlayer);
     }
 }
+const defaultEnglishPlayerMessages = {
+    remove: () => "Remove",
+    removePair: ({ label }) => `Remove ${label}`,
+};
+const playerMessages = {
+    defaultEnglish: defaultEnglishPlayerMessages,
+    spanish: playerMessageCatalog("Quitar", ({ label }) => `Quitar ${label}`),
+    swedish: playerMessageCatalog("Ta bort", ({ label }) => `Ta bort ${label}`),
+    german: playerMessageCatalog("Entfernen", ({ label }) => `${label} entfernen`),
+    portuguese: playerMessageCatalog("Remover", ({ label }) => `Remover ${label}`),
+    french: playerMessageCatalog("Supprimer", ({ label }) => `Supprimer ${label}`),
+};
+const builtInPlayerMessageCatalogs = new Map([
+    ["en", playerMessages.defaultEnglish],
+    ["es", playerMessages.spanish],
+    ["es-es", playerMessages.spanish],
+    ["es-mx", playerMessages.spanish],
+    ["sv", playerMessages.swedish],
+    ["sv-se", playerMessages.swedish],
+    ["de", playerMessages.german],
+    ["de-de", playerMessages.german],
+    ["pt", playerMessages.portuguese],
+    ["pt-br", playerMessages.portuguese],
+    ["pt-pt", playerMessages.portuguese],
+    ["fr", playerMessages.french],
+    ["fr-ca", playerMessages.french],
+    ["fr-fr", playerMessages.french],
+]);
+function playerMessageCatalog(remove, removePair) {
+    return {
+        remove: () => remove,
+        removePair,
+    };
+}
+function resolvePlayerMessages(locale, overrides) {
+    const catalog = builtInPlayerMessageCatalog(locale);
+    return {
+        remove: overrides.remove ?? catalog?.remove ?? defaultEnglishPlayerMessages.remove,
+        removePair: overrides.removePair ?? catalog?.removePair ?? defaultEnglishPlayerMessages.removePair,
+    };
+}
+function builtInPlayerMessageCatalog(locale) {
+    for (const candidate of localeFallbacks(locale)) {
+        const catalog = builtInPlayerMessageCatalogs.get(candidate);
+        if (catalog)
+            return catalog;
+    }
+    return undefined;
+}
+function localeFallbacks(locale) {
+    const normalized = normalizedLocale(locale)?.toLowerCase();
+    if (!normalized)
+        return ["en"];
+    const parts = normalized.split("-");
+    const fallbacks = [];
+    for (let length = parts.length; length > 0; length -= 1) {
+        fallbacks.push(parts.slice(0, length).join("-"));
+    }
+    return fallbacks.includes("en") ? fallbacks : [...fallbacks, "en"];
+}
+function normalizedLocale(value) {
+    const trimmed = value?.trim();
+    if (!trimmed)
+        return undefined;
+    try {
+        return Intl.getCanonicalLocales(trimmed)[0] ?? trimmed;
+    }
+    catch {
+        return trimmed;
+    }
+}
+function defaultPlayerLocale(host) {
+    const elementLanguage = normalizedLocale(host?.getAttribute("lang"));
+    if (elementLanguage)
+        return elementLanguage;
+    const navigatorLanguages = globalThis.navigator?.languages ?? [];
+    for (const language of navigatorLanguages) {
+        const normalized = normalizedLocale(language);
+        if (normalized)
+            return normalized;
+    }
+    return (normalizedLocale(globalThis.navigator?.language) ??
+        normalizedLocale(host?.closest("[lang]")?.getAttribute("lang")) ??
+        normalizedLocale(host?.ownerDocument?.documentElement.lang) ??
+        normalizedLocale(globalThis.document?.documentElement.lang) ??
+        "en");
+}
+function removeButton(label, messages) {
+    const safeLabel = label?.trim() || messages.remove();
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "qti3-icon-button qti3-remove-button";
+    button.title = messages.remove();
+    button.setAttribute("aria-label", messages.removePair({ label: safeLabel }));
+    button.append(trashIcon());
+    return button;
+}
+function inlineIcon(className, paths) {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svg.setAttribute("width", "24");
+    svg.setAttribute("height", "24");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    svg.setAttribute("class", className);
+    for (const entry of paths) {
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        if (typeof entry === "string") {
+            path.setAttribute("d", entry);
+        }
+        else {
+            path.setAttribute("d", entry.d);
+            if (entry.stroke) {
+                path.setAttribute("stroke", entry.stroke);
+                path.style.stroke = entry.stroke;
+            }
+            if (entry.fill) {
+                path.setAttribute("fill", entry.fill);
+                path.style.fill = entry.fill;
+            }
+        }
+        svg.append(path);
+    }
+    return svg;
+}
 function renderChoice(interaction, update, currentValue) {
     const group = responseGroup("qti3-choice-group");
     const multiple = interaction.responseCardinality === "multiple" || interaction.responseCardinality === "ordered";
@@ -790,19 +966,32 @@ function responseGroup(className) {
     group.className = ["qti3-response-group", className].filter(Boolean).join(" ");
     return group;
 }
-const movementGlyphs = {
-    up: "\u2191",
-    down: "\u2193",
-    left: "\u2190",
-    right: "\u2192",
+function trashIcon() {
+    return inlineIcon("qti3-trash-icon", [
+        { d: "M0 0h24v24H0z", stroke: "none", fill: "none" },
+        "M4 7l16 0",
+        "M10 11l0 6",
+        "M14 11l0 6",
+        "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12",
+        "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3",
+    ]);
+}
+const movementIconPaths = {
+    up: ["M12 5l0 14", "M18 11l-6 -6", "M6 11l6 -6"],
+    down: ["M12 5l0 14", "M18 13l-6 6", "M6 13l6 6"],
+    left: ["M5 12l14 0", "M5 12l6 6", "M5 12l6 -6"],
+    right: ["M5 12l14 0", "M13 18l6 -6", "M13 6l6 6"],
 };
+function movementIcon(direction) {
+    return inlineIcon("qti3-movement-icon", movementIconPaths[direction]);
+}
 function movementButton(direction, accessibleName, onClick) {
     const button = document.createElement("button");
     button.type = "button";
-    button.className = "qti3-icon-button";
+    button.className = "qti3-icon-button qti3-move-button";
     button.dataset.moveDirection = direction;
-    button.textContent = movementGlyphs[direction];
     button.setAttribute("aria-label", accessibleName);
+    button.append(movementIcon(direction));
     button.addEventListener("click", onClick);
     return button;
 }
@@ -1007,7 +1196,7 @@ function renderOrderedResponse(interaction, update, currentValue) {
     group.append(list);
     return group;
 }
-function renderPairResponse(interaction, update, currentValue) {
+function renderPairResponse(interaction, update, currentValue, messages) {
     const group = responseGroup();
     appendGraphicContext(group, interaction);
     const sources = sourceChoices(interaction);
@@ -1066,10 +1255,7 @@ function renderPairResponse(interaction, update, currentValue) {
             item.className = "qti3-pair-chip";
             const text = document.createElement("span");
             text.textContent = `${choiceText(sources, source)} to ${choiceText(targets, target)}`;
-            const remove = document.createElement("button");
-            remove.type = "button";
-            remove.textContent = "Remove";
-            remove.setAttribute("aria-label", `Remove ${text.textContent}`);
+            const remove = removeButton(text.textContent, messages);
             remove.addEventListener("click", () => {
                 const index = selectedPairs.indexOf(pair);
                 if (index >= 0)
@@ -1124,7 +1310,7 @@ function renderPairResponse(interaction, update, currentValue) {
     group.append(selector, pairList);
     return group;
 }
-function renderMatchResponse(interaction, update, currentValue) {
+function renderMatchResponse(interaction, update, currentValue, messages) {
     const group = responseGroup();
     const sources = sourceChoices(interaction);
     const targets = targetChoices(interaction);
@@ -1176,10 +1362,7 @@ function renderMatchResponse(interaction, update, currentValue) {
             item.className = "qti3-pair-chip";
             const text = document.createElement("span");
             text.textContent = label;
-            const remove = document.createElement("button");
-            remove.type = "button";
-            remove.textContent = "Remove";
-            remove.setAttribute("aria-label", `Remove ${label}`);
+            const remove = removeButton(label, messages);
             remove.addEventListener("click", () => {
                 removePair(pair);
                 syncPressed();
@@ -1310,7 +1493,7 @@ function pairRegionLabels(interaction) {
         return { source: "Prompt", target: "Match" };
     return { source: "Source", target: "Target" };
 }
-function renderGraphicOrderResponse(interaction, update, currentValue) {
+function renderGraphicOrderResponse(interaction, update, currentValue, messages) {
     const group = responseGroup();
     const width = objectWidth(interaction);
     const height = objectHeight(interaction);
@@ -1471,10 +1654,7 @@ function renderGraphicOrderResponse(interaction, update, currentValue) {
             up.disabled = index === 0;
             const down = movementButton("down", movementLabel(choiceLabel, "down"), () => moveHotspot(choice.identifier, 1));
             down.disabled = index === currentChoices.length - 1;
-            const remove = document.createElement("button");
-            remove.type = "button";
-            remove.textContent = "Remove";
-            remove.setAttribute("aria-label", `Remove ${choiceLabel}`);
+            const remove = removeButton(choiceLabel, messages);
             remove.addEventListener("click", () => removeHotspot(choice.identifier));
             item.append(label, up, down, remove);
             return item;
@@ -1518,7 +1698,7 @@ function renderGraphicOrderResponse(interaction, update, currentValue) {
     group.append(surface, summary, list);
     return group;
 }
-function renderGraphicAssociateResponse(interaction, update, currentValue) {
+function renderGraphicAssociateResponse(interaction, update, currentValue, messages) {
     const group = responseGroup();
     const width = objectWidth(interaction);
     const height = objectHeight(interaction);
@@ -1721,10 +1901,7 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
             item.className = "qti3-pair-chip";
             const text = document.createElement("span");
             text.textContent = pairLabel;
-            const remove = document.createElement("button");
-            remove.type = "button";
-            remove.textContent = "Remove";
-            remove.setAttribute("aria-label", `Remove ${pairLabel}`);
+            const remove = removeButton(pairLabel, messages);
             remove.addEventListener("click", () => removePair(pair));
             item.append(text, remove);
             return item;
@@ -2041,6 +2218,7 @@ function renderGraphicGapMatchResponse(interaction, update, currentValue) {
             renderTargets();
             commit();
         });
+        button.style.position = "absolute";
         placeHotspotButton(button, gap, width, height);
         if (assigned) {
             const assignedLabel = document.createElement("span");
@@ -4118,6 +4296,37 @@ function playerStyleElement() {
       line-height: 1;
     }
 
+    .qti3-remove-button {
+      border: 1px solid currentColor;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+    }
+
+    .qti3-remove-button:hover {
+      background: color-mix(in srgb, currentColor 14%, transparent);
+    }
+
+    .qti3-trash-icon {
+      inline-size: 1.125rem;
+      block-size: 1.125rem;
+    }
+
+    .qti3-movement-icon {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+
+    .qti3-trash-icon path,
+    .qti3-movement-icon path {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+    }
+
     .qti3-token[aria-pressed="true"],
     .qti3-pair-chip {
       background: Highlight;