@longsightgroup/qti3-player 0.2.1 → 0.3.0

package/src/interactions/match-interaction.ts

@@ -0,0 +1,199 @@
+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 { parseUnlimitedMaximum } from "../response-limits.js";
+import { choiceText, sourceChoices, targetChoices, tokenButton, tokenRegion } from "./shared.js";
+
+export function renderMatchResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+  messages: QtiPlayerMessages,
+): HTMLElement {
+  const group = responseGroup();
+
+  const sources = sourceChoices(interaction);
+  const targets = targetChoices(interaction);
+  if (sources.length === 0 || targets.length === 0) {
+    group.append(missingChoicesMessage(interaction));
+    return group;
+  }
+  const selectedPairs: string[] = valueToStrings(currentValue);
+  let selectedSource: QtiChoice | undefined;
+  let selectedTarget: QtiChoice | undefined;
+  let draggedSource: string | undefined;
+
+  const selector = document.createElement("div");
+  selector.className = "qti3-match-selector";
+  const sourceRegion = tokenRegion("Match sources");
+  sourceRegion.classList.add("qti3-match-source-bank");
+  const targetRegion = tokenRegion("Match targets");
+  targetRegion.classList.add("qti3-match-target-bank");
+  const pairList = document.createElement("ul");
+  pairList.className = "qti3-pair-list";
+  pairList.setAttribute("aria-label", "Match selected pairs");
+
+  const commit = () => {
+    if (interaction.responseCardinality === "single") update(selectedPairs[0] ?? null);
+    else update([...selectedPairs]);
+  };
+  const removePair = (pair: string) => {
+    const index = selectedPairs.indexOf(pair);
+    if (index >= 0) selectedPairs.splice(index, 1);
+  };
+  const syncPressed = () => {
+    for (const button of sourceRegion.querySelectorAll<HTMLButtonElement>("button")) {
+      const identifier = button.dataset.choiceIdentifier ?? "";
+      button.setAttribute(
+        "aria-pressed",
+        identifier === selectedSource?.identifier ||
+          selectedPairs.some((pair) => pair.startsWith(`${identifier} `))
+          ? "true"
+          : "false",
+      );
+    }
+    for (const button of targetRegion.querySelectorAll<HTMLButtonElement>("button")) {
+      const identifier = button.dataset.choiceIdentifier ?? "";
+      button.setAttribute(
+        "aria-pressed",
+        identifier === selectedTarget?.identifier ||
+          selectedPairs.some((pair) => pair.endsWith(` ${identifier}`))
+          ? "true"
+          : "false",
+      );
+    }
+  };
+  const renderPairs = () => {
+    pairList.replaceChildren(
+      ...selectedPairs.map((pair) => {
+        const [source, target] = pair.split(" ");
+        const label = `${choiceText(sources, source)} to ${choiceText(targets, target)}`;
+        const item = document.createElement("li");
+        item.className = "qti3-pair-chip";
+        const text = document.createElement("span");
+        text.textContent = label;
+        const remove = removeButton(label, messages);
+        remove.addEventListener("click", () => {
+          removePair(pair);
+          syncPressed();
+          renderPairs();
+          commit();
+        });
+        item.append(text, remove);
+        return item;
+      }),
+    );
+  };
+  const clearSelection = () => {
+    selectedSource = undefined;
+    selectedTarget = undefined;
+  };
+  const removePairsForSource = (source: QtiChoice) => {
+    for (const existing of selectedPairs.filter((pair) =>
+      pair.startsWith(`${source.identifier} `),
+    )) {
+      removePair(existing);
+    }
+  };
+  const removePairsForTarget = (target: QtiChoice) => {
+    for (const existing of selectedPairs.filter((pair) => pair.endsWith(` ${target.identifier}`))) {
+      removePair(existing);
+    }
+  };
+  const togglePair = (source: QtiChoice, target: QtiChoice) => {
+    const pair = `${source.identifier} ${target.identifier}`;
+    if (selectedPairs.includes(pair)) {
+      removePair(pair);
+    } else {
+      if (interaction.responseCardinality === "single") selectedPairs.splice(0);
+      if (parseUnlimitedMaximum(source.attributes["match-max"]) === 1) {
+        removePairsForSource(source);
+      }
+      if (parseUnlimitedMaximum(target.attributes["match-max"]) === 1) {
+        removePairsForTarget(target);
+      }
+      selectedPairs.push(pair);
+    }
+    clearSelection();
+    syncPressed();
+    renderPairs();
+    commit();
+  };
+  const addSelectedPair = () => {
+    if (!selectedSource || !selectedTarget) return;
+    togglePair(selectedSource, selectedTarget);
+  };
+  const addPair = (sourceIdentifier: string | undefined, targetIdentifier: string): void => {
+    const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+    const target = targets.find((choice) => choice.identifier === targetIdentifier);
+    if (!source || !target) return;
+    togglePair(source, target);
+  };
+
+  for (const source of sources) {
+    const button = tokenButton(source);
+    button.classList.add("qti3-match-source");
+    button.draggable = true;
+    button.addEventListener("dragstart", (event) => {
+      draggedSource = source.identifier;
+      event.dataTransfer?.setData("text/plain", source.identifier);
+      event.dataTransfer?.setDragImage(button, 8, 8);
+    });
+    button.addEventListener("dragend", () => {
+      draggedSource = undefined;
+      syncPressed();
+    });
+    button.addEventListener("click", () => {
+      selectedSource = source;
+      syncPressed();
+      addSelectedPair();
+    });
+    button.addEventListener("keydown", (event) => {
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      event.preventDefault();
+      removePairsForSource(source);
+      clearSelection();
+      syncPressed();
+      renderPairs();
+      commit();
+    });
+    sourceRegion.append(button);
+  }
+
+  for (const target of targets) {
+    const button = tokenButton(target);
+    button.classList.add("qti3-match-target");
+    button.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      button.classList.add("qti3-drop-target");
+    });
+    button.addEventListener("dragleave", () => button.classList.remove("qti3-drop-target"));
+    button.addEventListener("drop", (event) => {
+      event.preventDefault();
+      button.classList.remove("qti3-drop-target");
+      addPair(event.dataTransfer?.getData("text/plain") || draggedSource, target.identifier);
+    });
+    button.addEventListener("click", () => {
+      selectedTarget = target;
+      syncPressed();
+      addSelectedPair();
+    });
+    button.addEventListener("keydown", (event) => {
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      event.preventDefault();
+      removePairsForTarget(target);
+      clearSelection();
+      syncPressed();
+      renderPairs();
+      commit();
+    });
+    targetRegion.append(button);
+  }
+
+  selector.append(sourceRegion, targetRegion);
+  syncPressed();
+  renderPairs();
+  group.append(selector, pairList);
+  return group;
+}

package/src/interactions/object-asset.ts

@@ -0,0 +1,212 @@
+import type { QtiInteraction, QtiObjectAsset, QtiValue } from "@longsightgroup/qti3-core";
+import { objectIsImage } from "../interaction-support.js";
+import { maximumMediaPlays, mediaPlayCount } from "../response-limits.js";
+
+function parseBooleanAttribute(value: string | undefined): boolean | undefined {
+  if (value === "true" || value === "1") return true;
+  if (value === "false" || value === "0") return false;
+  return undefined;
+}
+
+export interface MediaResponseBinding {
+  currentValue?: QtiValue | undefined;
+  update?: ((value: QtiValue) => void) | undefined;
+  isCompleted?: (() => boolean) | undefined;
+}
+
+export function renderObjectAsset(
+  interaction: QtiInteraction,
+  mediaResponse: MediaResponseBinding = {},
+): HTMLElement {
+  const object = interaction.object;
+  const label = interaction.prompt ?? object?.text ?? "Media interaction";
+  const mediaType = object ? mediaElementType(object) : undefined;
+
+  if (object && mediaType === "audio") {
+    const audio = document.createElement("audio");
+    configureMediaElement(audio, interaction, object, label, mediaResponse);
+    audio.style.inlineSize = "100%";
+    return audio;
+  }
+
+  if (object && mediaType === "video") {
+    const video = document.createElement("video");
+    configureMediaElement(video, interaction, object, label, mediaResponse);
+    if (object.width) video.width = Number(object.width);
+    if (object.height) video.height = Number(object.height);
+    return video;
+  }
+
+  if (object?.data && objectIsImage(object)) {
+    const image = document.createElement("img");
+    image.src = object.data;
+    image.alt = label;
+    image.style.maxInlineSize = "100%";
+    image.style.blockSize = "auto";
+    if (object.width) image.width = Number(object.width);
+    if (object.height) image.height = Number(object.height);
+    return image;
+  }
+
+  const group = document.createElement("div");
+  group.role = "group";
+  group.setAttribute("aria-label", label);
+  const fallbackHref = object?.data ?? object?.sources.find((source) => source.src)?.src;
+  if (fallbackHref) {
+    const link = document.createElement("a");
+    link.href = fallbackHref;
+    link.textContent = object?.text || fallbackHref;
+    group.append(link);
+  } else {
+    group.textContent = label;
+  }
+  return group;
+}
+
+function configureMediaElement(
+  media: HTMLAudioElement | HTMLVideoElement,
+  interaction: QtiInteraction,
+  object: QtiObjectAsset,
+  label: string,
+  mediaResponse: MediaResponseBinding,
+): void {
+  media.controls = mediaControlsMode(interaction, object) !== "none";
+  media.preload = "none";
+  media.autoplay = parseBooleanAttribute(interaction.attributes.autostart) ?? false;
+  media.loop = parseBooleanAttribute(interaction.attributes.loop) ?? false;
+  media.setAttribute("aria-label", label);
+  media.style.maxInlineSize = "100%";
+  copyMediaDataAttributes(media, interaction.attributes);
+  copyMediaDataAttributes(media, object.attributes);
+
+  if (object.data) media.src = object.data;
+  for (const source of object.sources) {
+    if (!source.src) continue;
+    const sourceElement = document.createElement("source");
+    sourceElement.src = source.src;
+    if (source.type) sourceElement.type = source.type;
+    copySafeMediaChildAttributes(sourceElement, source.attributes, sourceAttributeNames);
+    media.append(sourceElement);
+  }
+  for (const track of object.tracks) {
+    if (!track.src) continue;
+    const trackElement = document.createElement("track");
+    trackElement.src = track.src;
+    if (track.kind) trackElement.kind = track.kind;
+    if (track.srclang) trackElement.srclang = track.srclang;
+    if (track.label) trackElement.label = track.label;
+    if (track.default) trackElement.default = true;
+    copySafeMediaChildAttributes(trackElement, track.attributes, trackAttributeNames);
+    media.append(trackElement);
+  }
+
+  bindMediaPlayCount(media, interaction, mediaResponse);
+}
+
+function copyMediaDataAttributes(element: HTMLElement, attributes: Record<string, string>): void {
+  for (const [name, value] of Object.entries(attributes)) {
+    if (!name.startsWith("data-")) continue;
+    element.setAttribute(name, value);
+  }
+}
+
+const sourceAttributeNames = new Set(["src", "srcset", "type"]);
+const trackAttributeNames = new Set(["default", "kind", "label", "src", "srclang"]);
+
+function copySafeMediaChildAttributes(
+  element: HTMLElement,
+  attributes: Record<string, string>,
+  controlledNames: Set<string>,
+): void {
+  for (const [name, value] of Object.entries(attributes)) {
+    const normalizedName = name.toLowerCase();
+    if (controlledNames.has(normalizedName)) continue;
+    if (
+      normalizedName === "class" ||
+      normalizedName === "id" ||
+      normalizedName === "title" ||
+      normalizedName === "media" ||
+      normalizedName === "sizes" ||
+      normalizedName.startsWith("data-")
+    ) {
+      element.setAttribute(name, value);
+    }
+  }
+}
+
+function mediaElementType(object: QtiObjectAsset): "audio" | "video" | undefined {
+  const types = [object.type, ...object.sources.map((source) => source.type)].filter(
+    (value): value is string => Boolean(value),
+  );
+  if (types.some((value) => value.startsWith("audio/"))) return "audio";
+  if (types.some((value) => value.startsWith("video/"))) return "video";
+  return undefined;
+}
+
+function mediaControlsMode(
+  interaction: QtiInteraction,
+  object: QtiObjectAsset,
+): string | undefined {
+  return (
+    interaction.attributes["data-qti-media-player-controls"] ??
+    object.attributes["data-qti-media-player-controls"]
+  );
+}
+
+function bindMediaPlayCount(
+  media: HTMLAudioElement | HTMLVideoElement,
+  interaction: QtiInteraction,
+  mediaResponse: MediaResponseBinding,
+): void {
+  if (!mediaResponse.update) return;
+  let playCount = mediaPlayCount(mediaResponse.currentValue ?? null);
+  let activePlaySession = false;
+  let readyAfterEnded = false;
+  const maximum = maximumMediaPlays(interaction);
+
+  const syncState = () => {
+    media.dataset.playCount = String(playCount);
+    if (maximum !== undefined && playCount >= maximum && !activePlaySession) {
+      media.dataset.maxPlaysReached = "true";
+    } else {
+      delete media.dataset.maxPlaysReached;
+    }
+  };
+
+  media.addEventListener("play", () => {
+    if (mediaResponse.isCompleted?.()) {
+      return;
+    }
+    if (!activePlaySession && maximum !== undefined && playCount >= maximum) {
+      media.pause();
+      syncState();
+      return;
+    }
+    if (!activePlaySession && (readyAfterEnded || media.currentTime <= 0.25)) {
+      playCount += 1;
+      mediaResponse.update?.(playCount);
+      activePlaySession = true;
+      readyAfterEnded = false;
+      syncState();
+      return;
+    }
+    activePlaySession = true;
+    readyAfterEnded = false;
+    syncState();
+  });
+
+  media.addEventListener("ended", () => {
+    activePlaySession = false;
+    readyAfterEnded = true;
+    syncState();
+  });
+
+  media.addEventListener("seeked", () => {
+    if (!media.paused || media.currentTime > 0.25) return;
+    activePlaySession = false;
+    readyAfterEnded = false;
+    syncState();
+  });
+
+  syncState();
+}

package/src/interactions/pair-interaction.ts

@@ -0,0 +1,147 @@
+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 {
+  choiceText,
+  pairRegionLabels,
+  sourceChoices,
+  targetChoices,
+  tokenButton,
+  tokenRegion,
+} from "./shared.js";
+
+export function renderPairResponse(
+  interaction: QtiInteraction,
+  update: (value: QtiValue) => void,
+  currentValue: QtiValue,
+  messages: QtiPlayerMessages,
+): HTMLElement {
+  const group = responseGroup();
+
+  const sources = sourceChoices(interaction);
+  const targets = targetChoices(interaction);
+  if (sources.length === 0 || targets.length === 0) {
+    group.append(missingChoicesMessage(interaction));
+    return group;
+  }
+  const selectedPairs: string[] = valueToStrings(currentValue);
+  let selectedSource: QtiChoice | undefined;
+  let selectedTarget: QtiChoice | undefined;
+  const labels = pairRegionLabels(interaction);
+
+  const sourceRegion = tokenRegion(`${readableType(interaction.type)} sources`, labels.source);
+  const targetRegion = tokenRegion(`${readableType(interaction.type)} targets`, 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`);
+  let draggedSource: string | undefined;
+
+  const commit = () => {
+    if (interaction.responseCardinality === "single") update(selectedPairs[0] ?? null);
+    else update([...selectedPairs]);
+  };
+  const syncPressed = () => {
+    for (const button of sourceRegion.querySelectorAll<HTMLButtonElement>("button")) {
+      button.setAttribute(
+        "aria-pressed",
+        button.dataset.choiceIdentifier === selectedSource?.identifier ? "true" : "false",
+      );
+    }
+    for (const button of targetRegion.querySelectorAll<HTMLButtonElement>("button")) {
+      button.setAttribute(
+        "aria-pressed",
+        button.dataset.choiceIdentifier === selectedTarget?.identifier ? "true" : "false",
+      );
+    }
+  };
+  const addSelectedPair = () => {
+    if (!selectedSource || !selectedTarget) return;
+    const pair = `${selectedSource.identifier} ${selectedTarget.identifier}`;
+    if (!selectedPairs.includes(pair)) selectedPairs.push(pair);
+    selectedSource = undefined;
+    selectedTarget = undefined;
+    syncPressed();
+    renderPairs();
+    commit();
+  };
+  const addPair = (sourceIdentifier: string | undefined, targetIdentifier: string): void => {
+    const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+    const target = targets.find((choice) => choice.identifier === targetIdentifier);
+    if (!source || !target) return;
+    selectedSource = source;
+    selectedTarget = target;
+    addSelectedPair();
+  };
+  const renderPairs = () => {
+    pairList.replaceChildren(
+      ...selectedPairs.map((pair) => {
+        const [source, target] = pair.split(" ");
+        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);
+        remove.addEventListener("click", () => {
+          const index = selectedPairs.indexOf(pair);
+          if (index >= 0) selectedPairs.splice(index, 1);
+          renderPairs();
+          commit();
+        });
+        item.append(text, remove);
+        return item;
+      }),
+    );
+  };
+
+  for (const choice of sources) {
+    const button = tokenButton(choice);
+    button.draggable = true;
+    button.addEventListener("dragstart", (event) => {
+      draggedSource = choice.identifier;
+      event.dataTransfer?.setData("text/plain", choice.identifier);
+      event.dataTransfer?.setDragImage(button, 8, 8);
+    });
+    button.addEventListener("dragend", () => {
+      draggedSource = undefined;
+      syncPressed();
+    });
+    button.addEventListener("click", () => {
+      selectedSource = choice;
+      syncPressed();
+      addSelectedPair();
+    });
+    sourceRegion.append(button);
+  }
+  for (const choice of targets) {
+    const button = tokenButton(choice);
+    button.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      button.classList.add("qti3-drop-target");
+    });
+    button.addEventListener("dragleave", () => button.classList.remove("qti3-drop-target"));
+    button.addEventListener("drop", (event) => {
+      event.preventDefault();
+      button.classList.remove("qti3-drop-target");
+      addPair(event.dataTransfer?.getData("text/plain") || draggedSource, choice.identifier);
+    });
+    button.addEventListener("click", () => {
+      selectedTarget = choice;
+      syncPressed();
+      addSelectedPair();
+    });
+    targetRegion.append(button);
+  }
+
+  selector.append(sourceRegion, targetRegion);
+  renderPairs();
+  group.append(selector, pairList);
+  return group;
+}

package/src/interactions/point-value.ts

@@ -0,0 +1,41 @@
+import type { QtiObjectAsset, QtiValue } from "@longsightgroup/qti3-core";
+import { valueToStrings } from "../interaction-support.js";
+
+export function parsePointValue(value: QtiValue): { x: number; y: number } | undefined {
+  const [raw] = valueToStrings(value);
+  return parsePointString(raw);
+}
+
+export function parsePointValues(value: QtiValue): Array<{ x: number; y: number }> {
+  return valueToStrings(value).flatMap((raw) => {
+    const point = parsePointString(raw);
+    return point ? [point] : [];
+  });
+}
+
+function parsePointString(raw: string | undefined): { x: number; y: number } | undefined {
+  if (!raw) return undefined;
+  const values = raw.split(/\s+/).map(Number);
+  const x = values[0];
+  const y = values[1];
+  if (typeof x !== "number" || typeof y !== "number") return undefined;
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return undefined;
+  return { x, y };
+}
+
+export function pointToString(point: { x: number; y: number } | undefined): string {
+  return point ? `${point.x} ${point.y}` : "";
+}
+
+function dimension(value: string | undefined, fallback: number): number {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+
+export function objectAssetWidth(object: QtiObjectAsset | undefined, fallback: number): number {
+  return dimension(object?.width, fallback);
+}
+
+export function objectAssetHeight(object: QtiObjectAsset | undefined, fallback: number): number {
+  return dimension(object?.height, fallback);
+}