@longsightgroup/qti3-player 0.4.0 → 0.5.4

package/src/interactions/gap-match-interaction.ts

@@ -6,10 +6,10 @@ import {
   objectHeight,
   objectWidth,
   placeHotspotButton,
-  readableType,
   responseGroup,
   valueToStrings,
 } from "../interaction-support.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 import { parseUnlimitedMaximum } from "../response-limits.js";
 import { appendGraphicContext } from "./graphic-context.js";
 import { appendInlineControl, normalizeInlineSegmentText } from "./inline-controls.js";
@@ -33,13 +33,14 @@ export function renderGapMatchResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   if (
     interaction.type === "graphicGapMatch" &&
     interaction.object &&
     interaction.choices.some((choice) => choice.role === "hotspot")
   ) {
-    return renderGraphicGapMatchResponse(interaction, update, currentValue);
+    return renderGraphicGapMatchResponse(interaction, update, currentValue, messages);
   }
 
   const group = responseGroup();
@@ -54,11 +55,16 @@ export function renderGapMatchResponse(
   let selectedSource: QtiChoice | undefined;
   let draggedSource: string | undefined;
 
-  const sourceRegion = tokenRegion(`${readableType(interaction.type)} choices`);
+  const sourceRegion = tokenRegion(
+    messages.message("interactionChoicesBank", { type: interaction.type }),
+  );
   const gapRegion = document.createElement("div");
   gapRegion.className = "qti3-gap-region qti3-gap-passage";
   gapRegion.role = "group";
-  gapRegion.setAttribute("aria-label", `${readableType(interaction.type)} targets`);
+  gapRegion.setAttribute(
+    "aria-label",
+    messages.message("interactionGapTargets", { type: interaction.type }),
+  );
   for (const pair of valueToStrings(currentValue)) {
     const [sourceIdentifier, gapIdentifier] = pair.split(/\s+/);
     const source = sources.find((choice) => choice.identifier === sourceIdentifier);
@@ -91,7 +97,7 @@ export function renderGapMatchResponse(
   };
   const gapControl = (gap: QtiChoice, index: number) => {
     const assigned = assignments.get(gap.identifier);
-    const gapLabel = `Gap ${index + 1}`;
+    const gapLabel = messages.message("gapLabel", { index: index + 1 });
     const target = document.createElement("span");
     target.className = "qti3-gap-target";
     target.dataset.gapIdentifier = gap.identifier;
@@ -112,7 +118,9 @@ export function renderGapMatchResponse(
     button.textContent = assigned ? assigned.text : "";
     button.setAttribute(
       "aria-label",
-      assigned ? `${gapLabel}, assigned ${assigned.text}` : `${gapLabel}, empty`,
+      assigned
+        ? messages.message("gapAssignedState", { label: gapLabel, assigned: assigned.text })
+        : messages.message("gapEmptyState", { label: gapLabel }),
     );
     button.addEventListener("click", () => assign(gap, selectedSource?.identifier));
     button.addEventListener("keydown", (event) => {
@@ -173,6 +181,7 @@ function renderGraphicGapMatchResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = responseGroup();
   const width = objectWidth(interaction);
@@ -202,7 +211,10 @@ function renderGraphicGapMatchResponse(
     "qti3-graphic-gap-match-surface",
   );
   surface.role = "group";
-  surface.setAttribute("aria-label", `${readableType(interaction.type)} target image`);
+  surface.setAttribute(
+    "aria-label",
+    messages.message("interactionTargetImage", { type: interaction.type }),
+  );
   surface.style.overflow = "visible";
   surface.style.setProperty(
     "--qti3-graphic-gap-label-block-size",
@@ -213,11 +225,14 @@ function renderGraphicGapMatchResponse(
     appendGraphicObjectImage(
       surface,
       interaction.object,
-      interaction.object.text || `${readableType(interaction.type)} image`,
+      interaction.object.text ||
+        messages.message("interactionImageAlt", { type: interaction.type }),
     );
   }
 
-  const sourceRegion = tokenRegion(`${readableType(interaction.type)} choices`);
+  const sourceRegion = tokenRegion(
+    messages.message("interactionChoicesBank", { type: interaction.type }),
+  );
   sourceRegion.classList.add("qti3-graphic-gap-source-region");
   const choicesWidth = positivePixelValue(interaction.attributes["data-choices-container-width"]);
   if (choicesWidth !== undefined) sourceRegion.style.maxInlineSize = `${choicesWidth}px`;
@@ -260,7 +275,9 @@ function renderGraphicGapMatchResponse(
     commit();
   };
   const targetLabel = (gap: QtiChoice, index: number) =>
-    gap.attributes["aria-label"] || gap.attributes["hotspot-label"] || `Target ${index + 1}`;
+    gap.attributes["aria-label"] ||
+    gap.attributes["hotspot-label"] ||
+    messages.message("graphicGapTargetLabel", { index: index + 1 });
   const renderTargetButton = (gap: QtiChoice, index: number): HTMLButtonElement => {
     const assigned = assignments.get(gap.identifier);
     const label = targetLabel(gap, index);
@@ -271,7 +288,9 @@ function renderGraphicGapMatchResponse(
     button.dataset.selected = assigned ? "true" : "false";
     button.setAttribute(
       "aria-label",
-      assigned ? `${label}, assigned ${assigned.text}` : `${label}, empty`,
+      assigned
+        ? messages.message("gapAssignedState", { label, assigned: assigned.text })
+        : messages.message("gapEmptyState", { label }),
     );
     button.addEventListener("dragover", (event) => {
       event.preventDefault();
@@ -308,8 +327,8 @@ function renderGraphicGapMatchResponse(
     }
     summary.textContent =
       assignments.size > 0
-        ? `${assignments.size} ${assignments.size === 1 ? "label" : "labels"} placed.`
-        : "No labels placed.";
+        ? messages.message("gapLabelsPlacedCount", { count: assignments.size })
+        : messages.message("gapNoLabelsPlaced");
   };
 
   for (const source of sources) {

package/src/interactions/graphic-associate-interaction.ts

@@ -11,18 +11,17 @@ import {
   objectHeight,
   objectWidth,
   placeHotspotButton,
-  readableType,
   responseGroup,
   valueToStrings,
 } from "../interaction-support.js";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 import { exceedsHotspotMatchMax, maximumAllowedResponses } from "../response-limits.js";
 
 export function renderGraphicAssociateResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = responseGroup();
 
@@ -47,14 +46,17 @@ export function renderGraphicAssociateResponse(
   const surface = document.createElement("div");
   applyGraphicSurfaceLayout(surface, width, height, "qti3-graphic-associate-surface");
   surface.role = "group";
-  surface.setAttribute("aria-label", `${readableType(interaction.type)} hotspots`);
+  surface.setAttribute(
+    "aria-label",
+    messages.message("interactionHotspots", { type: interaction.type }),
+  );
 
   const object = interaction.object;
   if (object) {
     appendGraphicObjectImage(
       surface,
       object,
-      object.text || `${readableType(interaction.type)} image`,
+      object.text || messages.message("interactionImageAlt", { type: interaction.type }),
     );
   }
 
@@ -69,7 +71,10 @@ export function renderGraphicAssociateResponse(
   summary.setAttribute("aria-live", "polite");
   const pairList = document.createElement("ul");
   pairList.className = "qti3-pair-list";
-  pairList.setAttribute("aria-label", `${readableType(interaction.type)} selected pairs`);
+  pairList.setAttribute(
+    "aria-label",
+    messages.message("interactionSelectedPairsList", { type: interaction.type }),
+  );
 
   const commit = () => {
     if (interaction.responseCardinality === "single") update(selectedPairs[0] ?? null);
@@ -214,18 +219,18 @@ export function renderGraphicAssociateResponse(
       button.dataset.selected = isActive || isPaired ? "true" : "false";
     }
     summary.textContent = selectedHotspot
-      ? messages.hotspotSelectedChooseAnother({
+      ? messages.message("hotspotSelectedChooseAnother", {
           label: hotspotDisplayLabel(selectedHotspot, choices),
         })
       : selectedPairs.length > 0
-        ? messages.associationsMade({ count: selectedPairs.length })
-        : messages.noAssociationsMade();
+        ? messages.message("associationsMade", { count: selectedPairs.length })
+        : messages.message("noAssociationsMade");
     pairList.replaceChildren(
       ...selectedPairs.map((pair) => {
         const [source = "", target = ""] = pair.split(" ");
         const sourceChoice = choices.find((choice) => choice.identifier === source);
         const targetChoice = choices.find((choice) => choice.identifier === target);
-        const pairLabel = messages.associationPairLabel({
+        const pairLabel = messages.message("associationPairLabel", {
           source: sourceChoice ? hotspotDisplayLabel(sourceChoice, choices) : source,
           target: targetChoice ? hotspotDisplayLabel(targetChoice, choices) : target,
         });

package/src/interactions/hotspot-interaction.ts

@@ -7,17 +7,16 @@ import {
   objectHeight,
   objectWidth,
   placeHotspotButton,
-  readableType,
   responseGroup,
   valueToStrings,
 } from "../interaction-support.js";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 
 export function renderHotspotResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = responseGroup();
 
@@ -37,7 +36,7 @@ export function renderHotspotResponse(
     appendGraphicObjectImage(
       surface,
       object,
-      object.text || `${readableType(interaction.type)} image`,
+      object.text || messages.message("interactionImageAlt", { type: interaction.type }),
     );
   }
 
@@ -46,7 +45,7 @@ export function renderHotspotResponse(
   const selectedSummary = document.createElement("p");
   selectedSummary.className = "qti3-selection-summary";
   selectedSummary.setAttribute("aria-live", "polite");
-  selectedSummary.textContent = messages.noRegionSelected();
+  selectedSummary.textContent = messages.message("noRegionSelected");
   const syncSelected = () => {
     for (const button of surface.querySelectorAll<HTMLButtonElement>("button")) {
       const isSelected = selected.has(button.dataset.choiceIdentifier ?? "");
@@ -54,7 +53,12 @@ export function renderHotspotResponse(
       button.dataset.selected = isSelected ? "true" : "false";
     }
     selectedSummary.textContent =
-      selected.size > 0 ? `Selected ${[...selected].join(", ")}` : messages.noRegionSelected();
+      selected.size > 0
+        ? messages.message("hotspotSelectionSummary", {
+            selection: [...selected].join(", "),
+            count: selected.size,
+          })
+        : messages.message("noRegionSelected");
   };
   for (const choice of choices) {
     const button = document.createElement("button");

package/src/interactions/inline-choice-interaction.ts

@@ -4,17 +4,17 @@ import {
   missingChoicesMessage,
   valueToStrings,
 } from "../interaction-support.js";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 import { interactionLabel } from "./interaction-label.js";
 
 function appendOptions(
   select: HTMLSelectElement,
   choices: QtiChoice[],
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): void {
   const empty = document.createElement("option");
   empty.value = "";
-  empty.textContent = messages.inlineChoicePrompt();
+  empty.textContent = messages.message("inlineChoicePrompt");
   select.append(empty);
   for (const choice of choices) {
     const option = document.createElement("option");
@@ -28,7 +28,7 @@ export function renderSelect(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const choices = interactionChoices(interaction);
   if (choices.length === 0) return missingChoicesMessage(interaction);

package/src/interactions/interaction-registry.ts

@@ -1,5 +1,5 @@
 import type { QtiInteraction, QtiValue } from "@longsightgroup/qti3-core";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 import { renderGraphicOrderResponse } from "../reorder/graphic-order-interaction.js";
 import { renderOrderedResponse } from "../reorder/order-interaction.js";
 import { renderChoice } from "./choice-interaction.js";
@@ -24,7 +24,7 @@ export interface InteractionResponseContext {
   interaction: QtiInteraction;
   update: (value: QtiValue) => void;
   currentValue: QtiValue;
-  messages: QtiPlayerMessages;
+  messages: PlayerMessageResolver;
   isCompleted: () => boolean;
   endAttempt: () => void;
   renderPortableCustom: (
@@ -81,8 +81,8 @@ export const interactionRegistry: InteractionRegistryEntry[] = [
     id: "gapMatch",
     matches: (interaction) =>
       interaction.type === "gapMatch" || interaction.type === "graphicGapMatch",
-    render: ({ interaction, update, currentValue }) =>
-      renderGapMatchResponse(interaction, update, currentValue),
+    render: ({ interaction, update, currentValue, messages }) =>
+      renderGapMatchResponse(interaction, update, currentValue, messages),
   },
   {
     id: "graphicAssociate",
@@ -117,8 +117,8 @@ export const interactionRegistry: InteractionRegistryEntry[] = [
   {
     id: "choice",
     matches: usesChoiceSet,
-    render: ({ interaction, update, currentValue }) =>
-      renderChoice(interaction, update, currentValue),
+    render: ({ interaction, update, currentValue, messages }) =>
+      renderChoice(interaction, update, currentValue, messages),
   },
   {
     id: "inlineChoice",
@@ -129,8 +129,8 @@ export const interactionRegistry: InteractionRegistryEntry[] = [
   {
     id: "extendedText",
     matches: (interaction) => interaction.type === "extendedText",
-    render: ({ interaction, update, currentValue }) =>
-      renderTextResponse(interaction, update, "extended", currentValue),
+    render: ({ interaction, update, currentValue, messages }) =>
+      renderTextResponse(interaction, update, "extended", currentValue, messages),
   },
   {
     id: "selectPoint",
@@ -159,14 +159,14 @@ export const interactionRegistry: InteractionRegistryEntry[] = [
   {
     id: "textEntry",
     matches: (interaction) => interaction.type === "textEntry",
-    render: ({ interaction, update, currentValue }) =>
-      renderTextResponse(interaction, update, "entry", currentValue),
+    render: ({ interaction, update, currentValue, messages }) =>
+      renderTextResponse(interaction, update, "entry", currentValue, messages),
   },
   {
     id: "slider",
     matches: (interaction) => interaction.type === "slider",
-    render: ({ interaction, update, currentValue }) =>
-      renderSliderResponse(interaction, update, currentValue),
+    render: ({ interaction, update, currentValue, messages }) =>
+      renderSliderResponse(interaction, update, currentValue, messages),
   },
   {
     id: "upload",

package/src/interactions/match-interaction.ts

@@ -1,7 +1,7 @@
 import type { QtiChoice, QtiInteraction, QtiValue } from "@longsightgroup/qti3-core";
 import { removeButton } from "../controls/remove-button.js";
 import { missingChoicesMessage, responseGroup, valueToStrings } from "../interaction-support.js";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 import { parseUnlimitedMaximum } from "../response-limits.js";
 import { choiceText, sourceChoices, targetChoices, tokenButton, tokenRegion } from "./shared.js";
 
@@ -9,7 +9,7 @@ export function renderMatchResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = responseGroup();
 
@@ -26,13 +26,13 @@ export function renderMatchResponse(
 
   const selector = document.createElement("div");
   selector.className = "qti3-match-selector";
-  const sourceRegion = tokenRegion("Match sources");
+  const sourceRegion = tokenRegion(messages.message("matchSourcesBank"));
   sourceRegion.classList.add("qti3-match-source-bank");
-  const targetRegion = tokenRegion("Match targets");
+  const targetRegion = tokenRegion(messages.message("matchTargetsBank"));
   targetRegion.classList.add("qti3-match-target-bank");
   const pairList = document.createElement("ul");
   pairList.className = "qti3-pair-list";
-  pairList.setAttribute("aria-label", "Match selected pairs");
+  pairList.setAttribute("aria-label", messages.message("matchSelectedPairsList"));
 
   const commit = () => {
     if (interaction.responseCardinality === "single") update(selectedPairs[0] ?? null);
@@ -68,7 +68,10 @@ export function renderMatchResponse(
     pairList.replaceChildren(
       ...selectedPairs.map((pair) => {
         const [source, target] = pair.split(" ");
-        const label = `${choiceText(sources, source)} to ${choiceText(targets, target)}`;
+        const label = messages.message("associationPairLabel", {
+          source: choiceText(sources, source),
+          target: choiceText(targets, target),
+        });
         const item = document.createElement("li");
         item.className = "qti3-pair-chip";
         const text = document.createElement("span");

package/src/interactions/pair-interaction.ts

@@ -1,12 +1,7 @@
 import type { QtiChoice, QtiInteraction, QtiValue } from "@longsightgroup/qti3-core";
 import { removeButton } from "../controls/remove-button.js";
-import {
-  missingChoicesMessage,
-  readableType,
-  responseGroup,
-  valueToStrings,
-} from "../interaction-support.js";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import { missingChoicesMessage, responseGroup, valueToStrings } from "../interaction-support.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 import {
   choiceText,
   pairRegionLabels,
@@ -20,7 +15,7 @@ export function renderPairResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = responseGroup();
 
@@ -33,15 +28,24 @@ export function renderPairResponse(
   const selectedPairs: string[] = valueToStrings(currentValue);
   let selectedSource: QtiChoice | undefined;
   let selectedTarget: QtiChoice | undefined;
-  const labels = pairRegionLabels(interaction);
+  const labels = pairRegionLabels(interaction, messages);
 
-  const sourceRegion = tokenRegion(`${readableType(interaction.type)} sources`, labels.source);
-  const targetRegion = tokenRegion(`${readableType(interaction.type)} targets`, labels.target);
+  const sourceRegion = tokenRegion(
+    messages.message("interactionSourcesBank", { type: interaction.type }),
+    labels.source,
+  );
+  const targetRegion = tokenRegion(
+    messages.message("interactionTargetsBank", { type: interaction.type }),
+    labels.target,
+  );
   const selector = document.createElement("div");
   selector.className = "qti3-pair-selector";
   const pairList = document.createElement("ul");
   pairList.className = "qti3-pair-list";
-  pairList.setAttribute("aria-label", `${readableType(interaction.type)} selected pairs`);
+  pairList.setAttribute(
+    "aria-label",
+    messages.message("interactionSelectedPairsList", { type: interaction.type }),
+  );
   let draggedSource: string | undefined;
 
   const commit = () => {
@@ -84,11 +88,15 @@ export function renderPairResponse(
     pairList.replaceChildren(
       ...selectedPairs.map((pair) => {
         const [source, target] = pair.split(" ");
+        const label = messages.message("associationPairLabel", {
+          source: choiceText(sources, source),
+          target: choiceText(targets, target),
+        });
         const item = document.createElement("li");
         item.className = "qti3-pair-chip";
         const text = document.createElement("span");
-        text.textContent = `${choiceText(sources, source)} to ${choiceText(targets, target)}`;
-        const remove = removeButton(text.textContent, messages);
+        text.textContent = label;
+        const remove = removeButton(label, messages);
         remove.addEventListener("click", () => {
           const index = selectedPairs.indexOf(pair);
           if (index >= 0) selectedPairs.splice(index, 1);

package/src/interactions/position-object-interaction.ts

@@ -6,11 +6,10 @@ import {
   appendGraphicObjectImage,
   objectIsImage,
   percent,
-  readableType,
   responseGroup,
 } from "../interaction-support.js";
 import { movementButton } from "../movement.js";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 import {
   objectAssetHeight,
   objectAssetWidth,
@@ -22,11 +21,14 @@ export function renderPositionObjectResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = responseGroup();
   group.role = "group";
-  group.setAttribute("aria-label", `${readableType(interaction.type)} object placement response`);
+  group.setAttribute(
+    "aria-label",
+    messages.message("interactionPlacementResponse", { type: interaction.type }),
+  );
 
   const stageObject = interaction.positionObjectStage ?? interaction.object;
   const movableObject = interaction.positionObjectStage ? interaction.object : undefined;
@@ -43,7 +45,10 @@ export function renderPositionObjectResponse(
   stage.style.setProperty("--qti3-position-object-marker-block-size", `${movableHeight}px`);
   stage.tabIndex = 0;
   stage.role = "group";
-  stage.setAttribute("aria-label", `${readableType(interaction.type)} placement stage`);
+  stage.setAttribute(
+    "aria-label",
+    messages.message("interactionPlacementStage", { type: interaction.type }),
+  );
 
   if (stageObject?.data && objectIsImage(stageObject)) {
     appendGraphicObjectImage(stage, stageObject, stageObject.text || "");
@@ -52,7 +57,7 @@ export function renderPositionObjectResponse(
   const marker = document.createElement("button");
   marker.type = "button";
   marker.className = "qti3-position-object-marker";
-  marker.setAttribute("aria-label", messages.movableObject());
+  marker.setAttribute("aria-label", messages.message("movableObject"));
   applyPositionObjectMarkerSize(marker, movableWidth, movableHeight);
   marker.draggable = false;
 
@@ -62,12 +67,13 @@ export function renderPositionObjectResponse(
     image.alt = "";
     marker.append(image);
   } else {
-    marker.textContent = messages.placeObject();
+    marker.textContent = messages.message("placeObject");
   }
   stage.append(marker);
 
   const coordinate = document.createElement("output");
-  coordinate.className = "qti3-coordinate-output";
+  coordinate.className = "qti3-coordinate-output qti-visually-hidden";
+  coordinate.setAttribute("aria-live", "polite");
   const clamp = () => {
     point.x = Math.max(0, Math.min(width, point.x));
     point.y = Math.max(0, Math.min(height, point.y));
@@ -90,10 +96,10 @@ export function renderPositionObjectResponse(
         `calc(100% + ${Math.round(movableHeight / 2 + 8)}px)`,
       );
       coordinate.value = "";
-      coordinate.textContent = "Object not placed";
+      coordinate.textContent = messages.message("objectNotPlaced");
       stage.setAttribute(
         "aria-label",
-        `${readableType(interaction.type)} placement stage, object not placed`,
+        messages.message("interactionPlacementStageEmpty", { type: interaction.type }),
       );
       return;
     }
@@ -107,10 +113,11 @@ export function renderPositionObjectResponse(
       `${percent(point.y, height)}%`,
     );
     coordinate.value = pointToString(point);
-    coordinate.textContent = `Object positioned at ${pointToString(point)}`;
+    const coordinates = pointToString(point);
+    coordinate.textContent = messages.message("objectPositionedAt", { coordinates });
     stage.setAttribute(
       "aria-label",
-      `${readableType(interaction.type)} placement stage, object at ${pointToString(point)}`,
+      messages.message("interactionPlacementStageAt", { type: interaction.type, coordinates }),
     );
   };
   const pointFromPointer = (event: MouseEvent | PointerEvent) => {
@@ -200,7 +207,9 @@ export function renderPositionObjectResponse(
     ["down", 0, 1],
   ] as const) {
     controls.append(
-      movementButton(direction, messages.moveObject({ direction }), () => moveBy(dx, dy)),
+      movementButton(direction, messages.message("moveObject", { direction }), () =>
+        moveBy(dx, dy),
+      ),
     );
   }