@longsightgroup/qti3-player 0.3.0 → 0.5.1

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),
+      ),
     );
   }
 

package/src/interactions/select-point-interaction.ts

@@ -5,11 +5,10 @@ import {
   appendGraphicObjectImage,
   objectHeight,
   objectWidth,
-  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 { maximumAllowedResponses } from "../response-limits.js";
 import { parsePointValues, pointToString } from "./point-value.js";
 
@@ -17,11 +16,14 @@ export function renderSelectPointResponse(
   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)} coordinate response`);
+  group.setAttribute(
+    "aria-label",
+    messages.message("interactionCoordinateResponse", { type: interaction.type }),
+  );
   const isMultiple = interaction.responseCardinality === "multiple";
   const maxPoints = isMultiple ? maximumAllowedResponses(interaction) : 1;
 
@@ -33,7 +35,10 @@ export function renderSelectPointResponse(
     objectHeight(interaction),
     "qti3-point-surface",
   );
-  surface.setAttribute("aria-label", `${readableType(interaction.type)} coordinate area`);
+  surface.setAttribute(
+    "aria-label",
+    messages.message("interactionCoordinateArea", { type: interaction.type }),
+  );
 
   const object = interaction.object;
   if (object) {
@@ -45,7 +50,8 @@ export function renderSelectPointResponse(
   let points = parsePointValues(currentValue);
   let activeIndex = points.length > 0 ? points.length - 1 : -1;
   const coordinate = document.createElement("output");
-  coordinate.className = "qti3-coordinate-output";
+  coordinate.className = "qti3-coordinate-output qti-visually-hidden";
+  coordinate.setAttribute("aria-live", "polite");
   const initialPoint = () => ({
     x: Math.round(width / 2),
     y: Math.round(height / 2),
@@ -62,8 +68,11 @@ export function renderSelectPointResponse(
     surface.querySelectorAll(".qti3-point-marker").forEach((marker) => marker.remove());
     if (points.length === 0) {
       coordinate.value = "";
-      coordinate.textContent = messages.noPointSelected();
-      surface.setAttribute("aria-label", `${readableType(interaction.type)} coordinate area`);
+      coordinate.textContent = messages.message("noPointSelected");
+      surface.setAttribute(
+        "aria-label",
+        messages.message("interactionCoordinateArea", { type: interaction.type }),
+      );
       return;
     }
     points.forEach((point, index) => {
@@ -83,11 +92,14 @@ export function renderSelectPointResponse(
       ? points.map(pointToString).join(" | ")
       : pointToString(points[0]);
     coordinate.textContent = isMultiple
-      ? `${points.length} selected point${points.length === 1 ? "" : "s"}: ${text}`
-      : `Selected point ${pointToString(points[0])}`;
+      ? messages.message("selectedPointsSummary", { count: points.length, coordinates: text })
+      : messages.message("selectedPointAt", { coordinates: pointToString(points[0]) });
     surface.setAttribute(
       "aria-label",
-      `${readableType(interaction.type)} coordinate area, selected ${text}`,
+      messages.message("interactionCoordinateAreaSelected", {
+        type: interaction.type,
+        coordinates: text,
+      }),
     );
   };
   const clampPoint = (point: { x: number; y: number }) => {
@@ -158,7 +170,7 @@ export function renderSelectPointResponse(
     ["down", 0, 1],
   ] as const) {
     controls.append(
-      movementButton(direction, messages.movePoint({ direction }), () => {
+      movementButton(direction, messages.message("movePoint", { direction }), () => {
         const point = mutableActivePoint();
         point.x += dx;
         point.y += dy;
@@ -171,7 +183,7 @@ export function renderSelectPointResponse(
   if (isMultiple) {
     const clear = document.createElement("button");
     clear.type = "button";
-    clear.textContent = messages.clearPoints();
+    clear.textContent = messages.message("clearPoints");
     clear.addEventListener("click", () => {
       points = [];
       activeIndex = -1;

package/src/interactions/shared.ts

@@ -1,4 +1,5 @@
 import type { QtiChoice, QtiInteraction } from "@longsightgroup/qti3-core";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 import { interactionChoices } from "../interaction-support.js";
 
 export function tokenRegion(label: string, visibleLabel?: string): HTMLElement {
@@ -49,8 +50,24 @@ export function targetChoices(interaction: QtiInteraction): QtiChoice[] {
   return targets.length > 0 ? targets : choices;
 }
 
-export function pairRegionLabels(interaction: QtiInteraction): { source: string; target: string } {
-  if (interaction.type === "associate") return { source: "First concept", target: "Pair with" };
-  if (interaction.type === "match") return { source: "Prompt", target: "Match" };
-  return { source: "Source", target: "Target" };
+export function pairRegionLabels(
+  interaction: QtiInteraction,
+  messages: PlayerMessageResolver,
+): { source: string; target: string } {
+  if (interaction.type === "associate") {
+    return {
+      source: messages.message("associateFirstConceptRegion"),
+      target: messages.message("associatePairWithRegion"),
+    };
+  }
+  if (interaction.type === "match") {
+    return {
+      source: messages.message("matchPromptRegion"),
+      target: messages.message("matchMatchRegion"),
+    };
+  }
+  return {
+    source: messages.message("genericSourceRegion"),
+    target: messages.message("genericTargetRegion"),
+  };
 }

package/src/interactions/text-interaction.ts

@@ -1,4 +1,5 @@
 import type { QtiInteraction, QtiValue } from "@longsightgroup/qti3-core";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 
 function scalarString(value: QtiValue): string {
   if (value === null || Array.isArray(value) || typeof value === "object") return "";
@@ -32,6 +33,7 @@ export function renderTextResponse(
   update: (value: QtiValue) => void,
   mode: "entry" | "extended",
   currentValue: QtiValue,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = document.createElement("div");
   group.className = "qti3-text-response";
@@ -43,7 +45,10 @@ export function renderTextResponse(
   control.value = scalarString(currentValue);
   control.setAttribute(
     "aria-label",
-    interaction.prompt ?? (mode === "extended" ? "Extended text response" : "Text response"),
+    interaction.prompt ??
+      (mode === "extended"
+        ? messages.message("extendedTextResponseLabel")
+        : messages.message("textResponseLabel")),
   );
   if (mode === "extended" && expectedLines > 0) {
     (control as HTMLTextAreaElement).rows = expectedLines;
@@ -60,7 +65,10 @@ export function renderTextResponse(
     const value = control.value;
     if (counter) {
       const words = value.trim().length > 0 ? value.trim().split(/\s+/).length : 0;
-      counter.textContent = `${value.length} characters, ${words} words`;
+      counter.textContent = messages.message("extendedTextCounter", {
+        characters: value.length,
+        words,
+      });
     }
     if (emitResponse) update(value);
   };
@@ -76,6 +84,7 @@ export function renderInlineTextEntry(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = document.createElement("span");
   group.className = "qti3-inline-text-response";
@@ -84,7 +93,7 @@ export function renderInlineTextEntry(
   input.value = scalarString(currentValue);
   input.setAttribute(
     "aria-label",
-    interaction.prompt ?? interaction.contextText ?? "Text response",
+    interaction.prompt ?? interaction.contextText ?? messages.message("textResponseLabel"),
   );
   const expectedLength = Number(interaction.attributes["expected-length"] ?? 0);
   applyExpectedTextEntryWidth(input, expectedLength);
@@ -102,6 +111,7 @@ export function renderSliderResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const group = document.createElement("div");
   group.className = "qti3-slider-response";
@@ -111,7 +121,7 @@ export function renderSliderResponse(
   input.max = interaction.attributes["upper-bound"] ?? "100";
   input.step = interaction.attributes.step ?? "1";
   input.value = scalarString(currentValue) || interaction.attributes["lower-bound"] || "0";
-  input.setAttribute("aria-label", interaction.prompt ?? "Slider response");
+  input.setAttribute("aria-label", interaction.prompt ?? messages.message("sliderResponseLabel"));
   const output = document.createElement("output");
   output.className = "qti3-slider-output";
   output.value = input.value;

package/src/interactions/upload-interaction.ts

@@ -1,16 +1,19 @@
 import type { QtiInteraction, QtiValue } from "@longsightgroup/qti3-core";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 import { interactionLabel } from "./interaction-label.js";
 
 export function renderUploadResponse(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   const input = document.createElement("input");
   input.type = "file";
   input.className = "qti3-upload-input";
-  input.setAttribute("aria-label", interactionLabel(interaction) || messages.uploadResponse());
+  input.setAttribute(
+    "aria-label",
+    interactionLabel(interaction) || messages.message("uploadResponse"),
+  );
   input.addEventListener("change", () => update(input.files?.[0]?.name ?? ""));
   return input;
 }

package/src/player/content-state.ts

@@ -36,7 +36,18 @@ export function isFeedbackVisible(
   return node.showHide === "show" ? hasIdentifier : !hasIdentifier;
 }
 
-export function isTemplateContentVisible(element: HTMLElement, value: QtiValue): boolean {
+interface TemplateContentVisibilityElement {
+  dataset: {
+    templateIdentifier?: string;
+    templateValueIdentifier?: string;
+    showHide?: string;
+  };
+}
+
+export function isTemplateContentVisible(
+  element: TemplateContentVisibilityElement,
+  value: QtiValue,
+): boolean {
   const templateIdentifier = element.dataset.templateIdentifier;
   const identifier = element.dataset.templateValueIdentifier;
   if (!templateIdentifier || !identifier) return true;

package/src/player/interaction-render.ts

@@ -5,12 +5,12 @@ import { interactionLabel, qtiSharedClassNames } from "../interactions/interacti
 import { renderSelect } from "../interactions/inline-choice-interaction.js";
 import { renderInlineTextEntry } from "../interactions/text-interaction.js";
 import { renderUnsupportedEmbeddedInteraction } from "../interactions/unsupported-interaction.js";
-import type { QtiPlayerMessages } from "../player-messages.js";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
 import { inlineValidationMessageElement, validationMessageElement } from "../player-validation.js";
 
 export interface BlockInteractionRenderOptions {
   interaction: QtiInteraction;
-  messages: QtiPlayerMessages;
+  messages: PlayerMessageResolver;
   update: (value: QtiValue) => void;
   currentValue: QtiValue;
   isCompleted: () => boolean;
@@ -65,7 +65,7 @@ export function renderEmbeddedInteractionSection(
   interaction: QtiInteraction,
   update: (value: QtiValue) => void,
   currentValue: QtiValue,
-  messages: QtiPlayerMessages,
+  messages: PlayerMessageResolver,
 ): HTMLElement {
   if (interaction.type !== "inlineChoice" && interaction.type !== "textEntry") {
     return renderUnsupportedEmbeddedInteraction(interaction);
@@ -83,7 +83,7 @@ export function renderEmbeddedInteractionSection(
   wrapper.append(
     interaction.type === "inlineChoice"
       ? renderSelect(interaction, update, currentValue, messages)
-      : renderInlineTextEntry(interaction, update, currentValue),
+      : renderInlineTextEntry(interaction, update, currentValue, messages),
   );
   return wrapper;
 }