@longsightgroup/qti3-player 0.4.0 → 0.5.4

package/dist/styles/graphic-styles.js

@@ -0,0 +1,289 @@
+export const GRAPHIC_PLAYER_STYLES = `
+.qti3-hotspot-button[data-selected="true"] {
+  background: Highlight !important;
+  color: HighlightText !important;
+  outline: 3px solid Highlight;
+  outline-offset: 2px;
+}
+
+.qti3-hotspot-button {
+  position: absolute;
+  inset-inline-start: var(--qti3-graphic-region-inline-start, 0);
+  inset-block-start: var(--qti3-graphic-region-block-start, 0);
+  inline-size: var(--qti3-graphic-region-inline-size, auto);
+  block-size: var(--qti3-graphic-region-block-size, auto);
+  display: grid;
+  place-items: start;
+  padding: 0.25rem;
+  border: 2px solid CanvasText;
+  background: color-mix(in srgb, Canvas 65%, transparent);
+  color: CanvasText;
+  font-size: 0.8rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.qti3-hotspot-button[data-shape="circle"] {
+  border-radius: 50%;
+}
+
+.qti3-graphic-associate-hotspot,
+.qti3-graphic-gap-hotspot,
+.qti3-graphic-order-hotspot {
+  position: absolute;
+  inset-inline-start: var(--qti3-graphic-region-inline-start, 0);
+  inset-block-start: var(--qti3-graphic-region-block-start, 0);
+  inline-size: var(--qti3-graphic-region-inline-size, auto);
+  block-size: var(--qti3-graphic-region-block-size, auto);
+  z-index: 2;
+}
+
+.qti3-graphic-associate-hotspot[data-shape="circle"],
+.qti3-graphic-gap-hotspot[data-shape="circle"],
+.qti3-graphic-order-hotspot[data-shape="circle"] {
+  border-radius: 50%;
+}
+
+.qti3-hotspot.qti-selections-light .qti3-hotspot-button {
+  border-color: white;
+  color: white;
+  background: rgb(0 0 0 / 0.45);
+}
+
+.qti3-hotspot.qti-selections-dark .qti3-hotspot-button {
+  border-color: black;
+  color: black;
+  background: rgb(255 255 255 / 0.65);
+}
+
+.qti3-hotspot.qti-unselected-hidden
+  .qti3-hotspot-button:not([data-selected="true"]):not(:focus):not(:focus-visible) {
+  opacity: 0;
+}
+
+@supports not (background: color-mix(in srgb, Canvas 65%, transparent)) {
+  .qti3-hotspot-button {
+    background: Canvas;
+  }
+}
+
+@media (forced-colors: active) {
+  .qti3-hotspot.qti-selections-light .qti3-hotspot-button,
+  .qti3-hotspot.qti-selections-dark .qti3-hotspot-button {
+    border-color: CanvasText;
+    color: CanvasText;
+    background: Canvas;
+  }
+}
+
+.qti3-graphic-surface,
+.qti3-hotspot-surface,
+.qti3-point-surface,
+.qti3-position-object-stage,
+.qti3-graphic-associate-surface,
+.qti3-graphic-gap-match-surface,
+.qti3-graphic-order-surface {
+  position: relative;
+  border: 1px solid CanvasText;
+  background: Canvas;
+  overflow: hidden;
+  max-inline-size: 100%;
+}
+
+.qti3-graphic-associate-surface,
+.qti3-graphic-gap-match-surface,
+.qti3-graphic-order-surface {
+  touch-action: manipulation;
+}
+
+.qti3-graphic-associate-lines,
+.qti3-graphic-sequence-lines {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.qti3-graphic-associate-lines line,
+.qti3-graphic-sequence-lines line {
+  stroke: Highlight;
+  stroke-width: 4;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.qti3-graphic-sequence-lines marker path {
+  fill: Highlight;
+}
+
+.qti3-graphic-associate-hotspot,
+.qti3-graphic-gap-hotspot,
+.qti3-graphic-order-hotspot {
+  touch-action: none;
+}
+
+.qti3-graphic-gap-match-surface {
+  overflow: visible;
+  margin-block-end: calc(var(--qti3-graphic-gap-label-block-size, 2rem) + 0.75rem);
+}
+
+.qti3-point-surface {
+  display: block;
+  box-sizing: border-box;
+  cursor: crosshair;
+  color: CanvasText;
+}
+
+.qti3-position-object-stage {
+  box-sizing: border-box;
+  color: CanvasText;
+  touch-action: none;
+  overflow: visible;
+  margin-block-end: calc(var(--qti3-position-object-marker-block-size, 2rem) + 12px);
+}
+
+.qti3-graphic-object-image {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+.qti3-position-object-marker {
+  position: absolute;
+  inline-size: var(--qti3-position-object-marker-inline-size, 2rem);
+  block-size: var(--qti3-position-object-marker-block-size, 2rem);
+  transform: translate(-50%, -50%);
+  border: 2px solid CanvasText;
+  background: Canvas;
+  color: CanvasText;
+  padding: 0;
+  cursor: grab;
+  touch-action: none;
+}
+
+.qti3-position-object-marker[data-placed="true"] {
+  inset-inline-start: var(--qti3-position-object-marker-inline-start);
+  inset-block-start: var(--qti3-position-object-marker-block-start);
+}
+
+.qti3-position-object-marker[data-dragging="true"] {
+  cursor: grabbing;
+}
+
+.qti3-position-object-marker[data-placed="false"] {
+  inset-inline-start: var(--qti3-position-object-unplaced-inline-start, 50%);
+  inset-block-start: var(--qti3-position-object-unplaced-block-start, calc(100% + 1rem));
+}
+
+.qti3-position-object-marker img {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+.qti3-point-marker {
+  position: absolute;
+  inset-inline-start: var(--qti3-point-marker-inline-start);
+  inset-block-start: var(--qti3-point-marker-block-start);
+  inline-size: 8px;
+  block-size: 8px;
+  border: 2px solid CanvasText;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.qti3-point-marker[data-active="true"] {
+  outline: 2px solid Highlight;
+  outline-offset: 1px;
+}
+
+.qti3-graphic-gap-hotspot {
+  display: grid;
+  place-items: center;
+  padding: 0;
+  overflow: visible;
+  border-style: dashed;
+  background: rgb(255 255 255 / 0.08);
+  color: CanvasText;
+}
+
+.qti3-graphic-gap-hotspot[data-selected="true"] {
+  border-style: solid;
+  background: color-mix(in srgb, Highlight 18%, Canvas);
+}
+
+.qti3-graphic-gap-label {
+  position: absolute;
+  inset-block-start: calc(100% + 0.2rem);
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  inline-size: max-content;
+  max-inline-size: min(12rem, calc(100vw - 2rem));
+  min-inline-size: 0;
+  padding: 0.25rem 0.4rem;
+  border: 1px solid CanvasText;
+  border-radius: 0.25rem;
+  background: Canvas;
+  color: CanvasText;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.15;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.16);
+  text-align: center;
+  white-space: normal;
+}
+
+@supports not (background: color-mix(in srgb, Highlight 18%, Canvas)) {
+  .qti3-graphic-gap-hotspot[data-selected="true"] {
+    background: Canvas;
+  }
+}
+
+.qti3-graphic-order-hotspot {
+  display: grid;
+  place-items: center;
+  gap: 0.15rem;
+  text-align: center;
+}
+
+.qti3-graphic-order-number {
+  display: grid;
+  place-items: center;
+  min-inline-size: 1.45rem;
+  min-block-size: 1.45rem;
+  border-radius: 999px;
+  background: Highlight;
+  color: HighlightText;
+  font-weight: 700;
+}
+
+.qti3-graphic-order-number:empty {
+  display: none;
+}
+
+.qti3-graphic-order-list {
+  display: grid;
+  gap: 0.5rem;
+  padding-inline-start: 1.5rem;
+  margin-block: 0.5rem 0;
+}
+
+.qti3-graphic-order-item {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+}
+`.trim();
+//# sourceMappingURL=graphic-styles.js.map

package/dist/styles/graphic-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphic-styles.js","sourceRoot":"","sources":["../../src/styles/graphic-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+RpC,CAAC,IAAI,EAAE,CAAC"}

package/dist/styles/match-pair-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const MATCH_PAIR_PLAYER_STYLES: string;
+//# sourceMappingURL=match-pair-styles.d.ts.map

package/dist/styles/match-pair-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match-pair-styles.d.ts","sourceRoot":"","sources":["../../src/styles/match-pair-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB,QA4D7B,CAAC"}

package/dist/styles/match-pair-styles.js

@@ -0,0 +1,62 @@
+export const MATCH_PAIR_PLAYER_STYLES = `
+.qti3-pair-selector {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  align-items: start;
+}
+
+.qti3-match-selector {
+  display: grid;
+  gap: 1.5rem;
+  inline-size: 100%;
+  max-inline-size: 72rem;
+  box-sizing: border-box;
+}
+
+.qti3-match-source-bank,
+.qti3-match-target-bank {
+  align-items: stretch;
+}
+
+.qti3-token.qti3-match-source {
+  border-color: var(--qti3-match-accent);
+  background: Canvas;
+  color: var(--qti3-match-accent);
+}
+
+.qti3-token.qti3-match-target {
+  flex: 1 1 9rem;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  min-block-size: 5rem;
+  box-sizing: border-box;
+  border-color: var(--qti3-match-target-border);
+  background: var(--qti3-match-target-bg);
+  color: CanvasText;
+  font-weight: 700;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: center;
+}
+
+@media (forced-colors: active) {
+  .qti3-token.qti3-match-source {
+    border-color: LinkText;
+    color: LinkText;
+  }
+
+  .qti3-token.qti3-match-target {
+    border-color: GrayText;
+    background: ButtonFace;
+    color: ButtonText;
+  }
+}
+
+.qti3-region-label {
+  flex-basis: 100%;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+`.trim();
+//# sourceMappingURL=match-pair-styles.js.map

package/dist/styles/match-pair-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"match-pair-styles.js","sourceRoot":"","sources":["../../src/styles/match-pair-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DvC,CAAC,IAAI,EAAE,CAAC"}

package/dist/styles/text-slider-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const TEXT_SLIDER_PLAYER_STYLES: string;
+//# sourceMappingURL=text-slider-styles.d.ts.map

package/dist/styles/text-slider-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-slider-styles.d.ts","sourceRoot":"","sources":["../../src/styles/text-slider-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,QAiC9B,CAAC"}

package/dist/styles/text-slider-styles.js

@@ -0,0 +1,35 @@
+export const TEXT_SLIDER_PLAYER_STYLES = `
+.qti3-text-response,
+.qti3-slider-response {
+  display: grid;
+  gap: 0.4rem;
+  max-inline-size: 42rem;
+}
+
+.qti3-text-input,
+.qti3-textarea {
+  inline-size: 100%;
+  box-sizing: border-box;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid CanvasText;
+  background: Canvas;
+  color: CanvasText;
+}
+
+.qti3-textarea {
+  min-block-size: 8rem;
+  resize: vertical;
+}
+
+.qti3-counter,
+.qti3-slider-output {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.qti3-slider-response {
+  grid-template-columns: minmax(8rem, 1fr) auto;
+  align-items: center;
+}
+`.trim();
+//# sourceMappingURL=text-slider-styles.js.map

package/dist/styles/text-slider-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-slider-styles.js","sourceRoot":"","sources":["../../src/styles/text-slider-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCxC,CAAC,IAAI,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longsightgroup/qti3-player",
-  "version": "0.4.0",
+  "version": "0.5.4",
   "description": "Style-neutral web component player for rendering and scoring QTI 3 assessment items.",
   "keywords": [
     "assessment",
@@ -25,11 +25,11 @@
     "directory": "packages/player"
   },
   "files": [
-    "dist/*.d.ts",
-    "dist/*.d.ts.map",
-    "dist/*.js",
-    "dist/*.js.map",
-    "!dist/*.test.*",
+    "dist/**/*.d.ts",
+    "dist/**/*.d.ts.map",
+    "dist/**/*.js",
+    "dist/**/*.js.map",
+    "!dist/**/*.test.*",
     "src/**/*.ts",
     "!src/**/*.test.ts"
   ],
@@ -45,8 +45,8 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@longsightgroup/qti3-core": "0.4.0",
-    "@longsightgroup/qti3-fixtures": "0.4.0"
+    "@longsightgroup/qti3-core": "0.5.4",
+    "@longsightgroup/qti3-fixtures": "0.5.4"
   },
   "scripts": {}
 }

package/src/controls/remove-button.ts

@@ -1,13 +1,16 @@
 import { trashIcon } from "../icons.js";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 
-export function removeButton(label: string | null, messages: QtiPlayerMessages): HTMLButtonElement {
-  const safeLabel = label?.trim() || messages.remove();
+export function removeButton(
+  label: string | null,
+  messages: PlayerMessageResolver,
+): HTMLButtonElement {
+  const safeLabel = label?.trim() || messages.message("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.title = messages.message("remove");
+  button.setAttribute("aria-label", messages.message("removePair", { label: safeLabel }));
   button.append(trashIcon());
   return button;
 }

package/src/index.ts

@@ -1,26 +1,82 @@
+export type { QtiPlayerMovementDirection } from "./player-messages.js";
 export type {
-  QtiPlayerAssociationPairLabelParams,
-  QtiPlayerMessages,
-  QtiPlayerRemoveMessageParams,
-} from "./player-messages.js";
+  QtiAttemptStateV1,
+  QtiCatalogSupportResolution,
+  QtiCatalogSupportResolutionOptions,
+  QtiScoreResult,
+  QtiTextToSpeechTraversal,
+} from "@longsightgroup/qti3-core";
 export type {
   QtiAssessmentItemPlayerCustomEventMap,
   QtiAssessmentItemPlayerEvent,
   QtiAssessmentItemPlayerEventDetailMap,
   QtiAssessmentItemPlayerEventName,
+  QtiDiagnosticsEventDetail,
   QtiEndAttemptEventDetail,
   QtiPlayerFetchXml,
   QtiPlayerLoadOptions,
-  QtiPlayerMessageOverrides,
   QtiPlayerResolveAsset,
   QtiPlayerSessionControl,
   QtiPortableCustomMountEventDetail,
   QtiReadyEventDetail,
   QtiResponseChangeEventDetail,
+  QtiResetEventDetail,
+  QtiRestoreEventDetail,
   QtiScoreAttemptOptions,
   QtiScoreEventDetail,
   QtiStateChangeEventDetail,
   QtiSuspendEventDetail,
   QtiValidationEventDetail,
 } from "./player-types.js";
+export type {
+  QtiAssessmentItemPlayerAdapterEventCallback,
+  QtiAssessmentItemPlayerAdapterEventHandlerProps,
+  QtiAssessmentItemPlayerAdapterEventPropName,
+  QtiAssessmentItemPlayerAdapterLoadSyncInput,
+  QtiAssessmentItemPlayerAdapterProps,
+  QtiAssessmentItemPlayerAdapterPropName,
+  QtiAssessmentItemPlayerHandle,
+  QtiAssessmentItemPlayerLoadDependencies,
+} from "./player-adapter.js";
+export {
+  bindQtiAssessmentItemPlayerAdapterEvents,
+  createQtiAssessmentItemPlayerAdapterLoadSync,
+  createQtiAssessmentItemPlayerHandle,
+  isQtiAssessmentItemPlayerAdapterPropName,
+  normalizeQtiAssessmentItemPlayerLoadError,
+  qtiAssessmentItemPlayerAdapterEventEntries,
+  qtiAssessmentItemPlayerAdapterPropNames,
+  qtiAssessmentItemPlayerLoadDependencies,
+  qtiAssessmentItemPlayerLoadStateKey,
+  syncQtiAssessmentItemPlayerAdapterChrome,
+  syncQtiAssessmentItemPlayerAdapterMessages,
+} from "./player-adapter.js";
+export type { PlayerMessageCatalog } from "./player-message-catalog.js";
+export type { PlayerMessageKey, PlayerMessageResolverKind } from "./player-message-manifest.js";
+export { PLAYER_MESSAGE_MANIFEST } from "./player-message-manifest.js";
+export {
+  createPlayerMessageResolver,
+  defaultPlayerMessageCatalog,
+  defaultPlayerMessageResolver,
+  extractMessagePlaceholders,
+  formatPlayerMessage,
+  mergePlayerMessageCatalogs,
+  type PlayerMessageOverride,
+  type PlayerMessageParams,
+  type PlayerMessageResolver,
+  type QtiPlayerMessageOverrides,
+} from "./player-message-catalog.js";
+export { PLAYER_MESSAGE_KEYS, PLAYER_MESSAGE_STRING_KEYS } from "./player-message-keys.js";
+export type {
+  PlayerMessageCatalogDiagnostic,
+  PlayerMessageCatalogDiagnosticCode,
+  PlayerMessageCatalogValidationResult,
+  ValidatePlayerMessageCatalogOptions,
+} from "./player-message-catalog-validate.js";
+export {
+  allowedCatalogPlaceholders,
+  requiredCatalogPlaceholders,
+  validatePlayerMessageCatalog,
+} from "./player-message-catalog-validate.js";
+export { resolvePlayerMessages } from "./player-locale.js";
 export { QtiAssessmentItemPlayer, defineQtiAssessmentItemPlayer } from "./player-element.js";

package/src/interactions/choice-interaction.ts

@@ -2,10 +2,10 @@ import type { QtiInteraction, QtiValue } from "@longsightgroup/qti3-core";
 import {
   interactionChoices,
   missingChoicesMessage,
-  readableType,
   responseGroup,
   valueToStrings,
 } from "../interaction-support.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 
 function choicePresentationLabel(interaction: QtiInteraction, index: number): string {
   const classNames = new Set((interaction.attributes.class ?? "").split(/\s+/).filter(Boolean));
@@ -28,6 +28,7 @@ export function renderChoice(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = responseGroup("qti3-choice-group");
 
@@ -37,7 +38,10 @@ export function renderChoice(
   const list = document.createElement("div");
   list.className = "qti3-choice-list";
   list.role = "group";
-  list.setAttribute("aria-label", `${readableType(interaction.type)} options`);
+  list.setAttribute(
+    "aria-label",
+    messages.message("interactionOptionsList", { type: interaction.type }),
+  );
   const syncSelected = () => {
     for (const label of list.querySelectorAll<HTMLElement>(".qti3-choice-option")) {
       const identifier = label.dataset.choiceIdentifier ?? "";

package/src/interactions/drawing-interaction.ts

@@ -1,6 +1,6 @@
 import type { QtiInteraction, QtiObjectAsset, QtiValue } from "@longsightgroup/qti3-core";
-import { applyResponsiveGraphicSize, objectIsImage, readableType } from "../interaction-support.js";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import { applyResponsiveGraphicSize, objectIsImage } from "../interaction-support.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 
 export const DRAWING_STROKE_COLOR = "#000";
 export const DRAWING_STROKE_WIDTH = 3;
@@ -9,16 +9,19 @@ export function renderDrawingResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = document.createElement("div");
   group.role = "group";
-  group.setAttribute("aria-label", `${readableType(interaction.type)} response`);
+  group.setAttribute(
+    "aria-label",
+    messages.message("interactionDrawingResponse", { type: interaction.type }),
+  );
 
   const surface = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   surface.classList.add("qti3-drawing-surface");
   surface.setAttribute("role", "img");
-  surface.setAttribute("aria-label", "Drawing response surface");
+  surface.setAttribute("aria-label", messages.message("drawingSurface"));
   surface.setAttribute("tabindex", "0");
   const width = drawingWidth(interaction);
   const height = drawingHeight(interaction);
@@ -68,12 +71,14 @@ export function renderDrawingResponse(
     const count = strokes.length;
     summary.value = serializeDrawingStrokes(strokes);
     summary.textContent =
-      count === 0 ? "No drawing strokes." : `${count} drawing stroke${count === 1 ? "" : "s"}.`;
+      count === 0
+        ? messages.message("drawingStatusEmpty")
+        : messages.message("drawingStatusStrokeCount", { count });
     surface.setAttribute(
       "aria-label",
       count === 0
-        ? "Drawing response surface, no strokes"
-        : `Drawing response surface, ${count} stroke${count === 1 ? "" : "s"}`,
+        ? messages.message("drawingSurfaceEmpty")
+        : messages.message("drawingSurfaceStrokeCount", { count }),
     );
   };
   for (const points of restoredStrokes) {
@@ -127,7 +132,7 @@ export function renderDrawingResponse(
 
   const clear = document.createElement("button");
   clear.type = "button";
-  clear.textContent = messages.clearDrawing();
+  clear.textContent = messages.message("clearDrawing");
   clear.addEventListener("click", () => {
     strokes.splice(0, strokes.length);
     activeStroke = undefined;

package/src/interactions/end-attempt-interaction.ts

@@ -1,16 +1,16 @@
 import type { QtiInteraction, QtiValue } from "@longsightgroup/qti3-core";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 
 export function renderEndAttemptResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   endAttempt: () => void,
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const button = document.createElement("button");
   button.type = "button";
   button.className = "qti3-end-attempt-button";
-  button.textContent = interaction.attributes.title ?? messages.endAttempt();
+  button.textContent = interaction.attributes.title ?? messages.message("endAttempt");
   button.addEventListener("click", () => {
     if (interaction.responseIdentifier) update(true);
     endAttempt();