@longsightgroup/qti3-player 0.5.1 → 0.5.4

package/dist/reorder/list-controls.js

@@ -0,0 +1,75 @@
+import { movementButton } from "../movement.js";
+import { orderedItemAccessibleName } from "./a11y.js";
+export function createReorderHandleControls(options) {
+    const { identifier, label, index, total, handleClassName, visibleText, messages, onMoveBy } = options;
+    const handle = document.createElement("button");
+    handle.type = "button";
+    handle.className = handleClassName;
+    handle.dataset.choiceIdentifier = identifier;
+    handle.setAttribute("aria-label", orderedItemAccessibleName(messages, label, index, total));
+    handle.textContent = visibleText;
+    handle.addEventListener("keydown", (event) => {
+        if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            onMoveBy(-1);
+        }
+        else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+            event.preventDefault();
+            onMoveBy(1);
+        }
+    });
+    const up = movementButton("up", messages.message("moveChoice", { label, direction: "up" }), () => onMoveBy(-1));
+    up.disabled = index === 0;
+    const down = movementButton("down", messages.message("moveChoice", { label, direction: "down" }), () => onMoveBy(1));
+    down.disabled = index === total - 1;
+    return { handle, up, down };
+}
+export function bindOrderListItemDrag(item, choiceIdentifier, index, dragState, moveChoice, findIndex) {
+    item.draggable = true;
+    item.dataset.choiceIdentifier = choiceIdentifier;
+    item.addEventListener("pointerdown", (event) => {
+        if (event.button !== 0 || event.target.closest("button"))
+            return;
+        dragState.pointerDraggedIdentifier = choiceIdentifier;
+        try {
+            item.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // Synthetic pointer events and some browser drag paths do not create a capturable pointer.
+        }
+    });
+    item.addEventListener("pointerup", (event) => {
+        if (!dragState.pointerDraggedIdentifier)
+            return;
+        const target = document
+            .elementFromPoint(event.clientX, event.clientY)
+            ?.closest(".qti3-reorder-item");
+        const targetIdentifier = target?.dataset.choiceIdentifier;
+        delete dragState.pointerDraggedIdentifier;
+        if (!targetIdentifier)
+            return;
+        moveChoice(findIndex(choiceIdentifier), findIndex(targetIdentifier));
+    });
+    item.addEventListener("pointercancel", () => {
+        delete dragState.pointerDraggedIdentifier;
+    });
+    item.addEventListener("dragstart", (event) => {
+        dragState.draggedIdentifier = choiceIdentifier;
+        event.dataTransfer?.setData("text/plain", choiceIdentifier);
+        event.dataTransfer?.setDragImage(item, 12, 12);
+    });
+    item.addEventListener("dragover", (event) => {
+        event.preventDefault();
+        item.classList.add("qti3-drop-target");
+    });
+    item.addEventListener("dragleave", () => item.classList.remove("qti3-drop-target"));
+    item.addEventListener("drop", (event) => {
+        event.preventDefault();
+        item.classList.remove("qti3-drop-target");
+        const dragged = event.dataTransfer?.getData("text/plain") || dragState.draggedIdentifier;
+        if (!dragged)
+            return;
+        moveChoice(findIndex(dragged), index);
+    });
+}
+//# sourceMappingURL=list-controls.js.map

package/dist/reorder/list-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-controls.js","sourceRoot":"","sources":["../../src/reorder/list-controls.ts"],"names":[],"mappings":"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"}

package/dist/reorder/order-interaction.d.ts

@@ -0,0 +1,4 @@
+import type { QtiInteraction, QtiValue } from "@longsightgroup/qti3-core";
+import type { PlayerMessageResolver } from "../player-message-resolver.js";
+export declare function renderOrderedResponse(interaction: QtiInteraction, update: (value: QtiValue) => void, currentValue: QtiValue, messages: PlayerMessageResolver): HTMLElement;
+//# sourceMappingURL=order-interaction.d.ts.map

package/dist/reorder/order-interaction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-interaction.d.ts","sourceRoot":"","sources":["../../src/reorder/order-interaction.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAc3E,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,cAAc,EAC3B,MAAM,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,EACjC,YAAY,EAAE,QAAQ,EACtB,QAAQ,EAAE,qBAAqB,GAC9B,WAAW,CAwDb"}

package/dist/reorder/order-interaction.js

@@ -0,0 +1,54 @@
+import { interactionChoices, missingChoicesMessage, orderChoicesFromValue, responseGroup, } from "../interaction-support.js";
+import { announceOrderedItemMove, createSelectionSummary, focusReorderControl } from "./a11y.js";
+import { bindOrderListItemDrag, createReorderHandleControls, } from "./list-controls.js";
+export function renderOrderedResponse(interaction, update, currentValue, messages) {
+    const group = responseGroup();
+    const choices = interactionChoices(interaction).filter((choice) => choice.role !== "gap");
+    if (choices.length === 0) {
+        group.append(missingChoicesMessage(interaction));
+        return group;
+    }
+    const ordered = orderChoicesFromValue(choices, currentValue);
+    const list = document.createElement("ol");
+    list.className = "qti3-reorder-list";
+    list.setAttribute("aria-label", messages.message("interactionCurrentOrderList", { type: interaction.type }));
+    const summary = createSelectionSummary();
+    const dragState = {};
+    const commit = () => update(ordered.map((choice) => choice.identifier));
+    const findIndex = (identifier) => ordered.findIndex((entry) => entry.identifier === identifier);
+    const moveChoice = (from, to) => {
+        if (from === to || from < 0 || from >= ordered.length || to < 0 || to >= ordered.length)
+            return;
+        const [choice] = ordered.splice(from, 1);
+        if (!choice)
+            return;
+        ordered.splice(to, 0, choice);
+        renderList();
+        announceOrderedItemMove(summary, messages, choice.text, to, ordered.length, from);
+        commit();
+        focusReorderControl(list, choice.identifier);
+    };
+    const renderList = () => {
+        list.replaceChildren(...ordered.map((choice, index) => {
+            const item = document.createElement("li");
+            item.className = "qti3-reorder-item";
+            bindOrderListItemDrag(item, choice.identifier, index, dragState, moveChoice, findIndex);
+            const { handle, up, down } = createReorderHandleControls({
+                identifier: choice.identifier,
+                label: choice.text,
+                index,
+                total: ordered.length,
+                handleClassName: "qti3-token qti3-reorder-handle",
+                visibleText: choice.text,
+                messages,
+                onMoveBy: (delta) => moveChoice(index, index + delta),
+            });
+            item.append(handle, up, down);
+            return item;
+        }));
+    };
+    renderList();
+    group.append(list, summary);
+    return group;
+}
+//# sourceMappingURL=order-interaction.js.map

package/dist/reorder/order-interaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-interaction.js","sourceRoot":"","sources":["../../src/reorder/order-interaction.ts"],"names":[],"mappings":"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"}

package/dist/styles/base-styles.d.ts

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

package/dist/styles/base-styles.d.ts.map

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

package/dist/styles/base-styles.js

@@ -0,0 +1,133 @@
+export const BASE_PLAYER_STYLES = `
+.qti3-embedded-interaction-unsupported {
+  color: CanvasText;
+}
+
+.qti3-portable-custom-host {
+  border: 1px solid CanvasText;
+  padding: 0.5rem;
+  margin-block-end: 0.5rem;
+}
+
+.qti3-player {
+  --qti3-match-accent: #2f6fca;
+  --qti3-match-target-bg: #f5f6f7;
+  --qti3-match-target-border: #6f7782;
+
+  display: grid;
+  gap: 1rem;
+  max-inline-size: 72rem;
+  font: 16px/1.45 system-ui, sans-serif;
+}
+
+@supports (color: light-dark(#000, #fff)) {
+  .qti3-player {
+    --qti3-match-accent: light-dark(#2f6fca, #8ab4f8);
+    --qti3-match-target-bg: light-dark(#f5f6f7, #202124);
+    --qti3-match-target-border: light-dark(#6f7782, #9aa0a6);
+  }
+}
+
+.qti3-interaction {
+  display: grid;
+  gap: 0.75rem;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+.qti3-item-body {
+  display: grid;
+  gap: 1rem;
+}
+
+.qti3-item-body > * {
+  margin-block: 0;
+}
+
+.qti3-player .qti-hidden {
+  display: none !important;
+}
+
+.qti3-player .qti-visually-hidden,
+.qti3-player .qti3-selection-summary,
+.qti3-player .qti3-coordinate-output {
+  position: absolute !important;
+  overflow: hidden !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  inline-size: 1px !important;
+  block-size: 1px !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+}
+
+qti-assessment-item-player[data-show-live-regions] .qti3-selection-summary,
+qti-assessment-item-player[data-show-live-regions] .qti3-coordinate-output {
+  position: static !important;
+  overflow: visible !important;
+  clip: auto !important;
+  clip-path: none !important;
+  inline-size: auto !important;
+  block-size: auto !important;
+  margin: 0 0 0.5rem !important;
+  padding: 0 !important;
+  border: 0 !important;
+  white-space: normal !important;
+  font-size: 0.875rem;
+  color: light-dark(#5f6368, #bdc1c6);
+  font-style: italic;
+}
+
+.qti3-embedded-interaction {
+  display: inline-flex;
+  gap: 0.35rem;
+  margin-inline: 0.18rem;
+  align-items: baseline;
+  vertical-align: baseline;
+}
+
+.qti3-inline-text-input {
+  inline-size: auto;
+  min-inline-size: 8ch;
+  max-inline-size: 18ch;
+  margin-inline: 0.25rem;
+}
+
+.qti3-printed-variable {
+  font-weight: 700;
+}
+
+.qti3-feedback-block {
+  padding: 0.75rem;
+  border-inline-start: 4px solid Highlight;
+  background: Canvas;
+  color: CanvasText;
+}
+
+.qti3-response-group {
+  min-inline-size: 0;
+}
+
+.qti3-response-group > * + * {
+  margin-block-start: 0.75rem;
+}
+
+.qti3-token:focus,
+.qti3-hotspot-button:focus,
+.qti3-player button:focus-visible,
+.qti3-player select:focus-visible,
+.qti3-player input:focus-visible,
+.qti3-player textarea:focus-visible {
+  outline: 3px solid Highlight;
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .qti3-player * {
+    scroll-behavior: auto;
+  }
+}
+`.trim();
+//# sourceMappingURL=base-styles.js.map

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

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

package/dist/styles/choice-hottext-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const CHOICE_HOTTEXT_PLAYER_STYLES: string;
+//# sourceMappingURL=choice-hottext-styles.d.ts.map

package/dist/styles/choice-hottext-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-hottext-styles.d.ts","sourceRoot":"","sources":["../../src/styles/choice-hottext-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,4BAA4B,QA0EjC,CAAC"}

package/dist/styles/choice-hottext-styles.js

@@ -0,0 +1,76 @@
+export const CHOICE_HOTTEXT_PLAYER_STYLES = `
+.qti3-choice-list {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: minmax(0, 42rem);
+}
+
+.qti3-choice-option {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr);
+  gap: 0.65rem;
+  align-items: center;
+  justify-content: start;
+  inline-size: 100%;
+  box-sizing: border-box;
+  min-block-size: 2.75rem;
+  padding: 0.65rem 0.8rem;
+  border: 1px solid CanvasText;
+  background: Canvas;
+  color: CanvasText;
+  cursor: pointer;
+}
+
+.qti3-choice-option input {
+  margin: 0;
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.qti3-choice-label {
+  min-inline-size: 1.75rem;
+  font-weight: 700;
+}
+
+.qti3-choice-text {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.qti3-choice-option[data-selected="true"] {
+  background: Highlight;
+  color: HighlightText;
+}
+
+.qti3-hottext-group {
+  max-inline-size: 58rem;
+}
+
+.qti3-hottext-passage {
+  margin-block: 0;
+  font-size: 1.05rem;
+  line-height: 1.75;
+}
+
+.qti3-hottext-token {
+  display: inline;
+  margin-inline: 0.1rem;
+  padding: 0.12rem 0.28rem;
+  border: 1px solid CanvasText;
+  border-radius: 0.2rem;
+  background: Canvas;
+  color: LinkText;
+  font: inherit;
+  text-decoration: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.16em;
+  cursor: pointer;
+}
+
+.qti3-hottext-token[data-selected="true"] {
+  background: Highlight;
+  color: HighlightText;
+  text-decoration-color: HighlightText;
+}
+`.trim();
+//# sourceMappingURL=choice-hottext-styles.js.map

package/dist/styles/choice-hottext-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-hottext-styles.js","sourceRoot":"","sources":["../../src/styles/choice-hottext-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,4BAA4B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0E3C,CAAC,IAAI,EAAE,CAAC"}

package/dist/styles/control-styles.d.ts

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

package/dist/styles/control-styles.d.ts.map

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

package/dist/styles/control-styles.js

@@ -0,0 +1,114 @@
+export const CONTROL_PLAYER_STYLES = `
+.qti3-reorder-item,
+.qti3-token-region,
+.qti3-pair-chip,
+.qti3-gap-region,
+.qti3-gap-target {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.qti3-reorder-list {
+  display: grid;
+  gap: 0.5rem;
+  padding-inline-start: 1.5rem;
+}
+
+.qti3-reorder-item {
+  padding: 0.5rem;
+  border: 1px solid CanvasText;
+  background: Canvas;
+  color: CanvasText;
+}
+
+.qti3-drop-target {
+  outline: 3px solid Highlight;
+  outline-offset: 2px;
+}
+
+.qti3-token,
+.qti3-icon-button,
+.qti3-player button,
+.qti3-player select,
+.qti3-player input,
+.qti3-player textarea {
+  font: inherit;
+}
+
+.qti3-token {
+  min-inline-size: 2.5rem;
+  padding: 0.35rem 0.65rem;
+  border: 1px solid CanvasText;
+  background: Canvas;
+  color: CanvasText;
+  cursor: grab;
+}
+
+.qti3-icon-button {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  padding: 0;
+  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;
+  color: HighlightText;
+}
+
+.qti3-pair-list {
+  display: grid;
+  gap: 0.5rem;
+  padding-inline-start: 1.5rem;
+}
+
+.qti3-pair-chip {
+  width: fit-content;
+  padding: 0.35rem 0.5rem;
+}
+
+.qti3-point-controls,
+.qti3-drawing-tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-block-start: 0.5rem;
+}
+`.trim();
+//# sourceMappingURL=control-styles.js.map

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

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

package/dist/styles/drawing-styles.d.ts

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

package/dist/styles/drawing-styles.d.ts.map

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

package/dist/styles/drawing-styles.js

@@ -0,0 +1,30 @@
+export const DRAWING_PLAYER_STYLES = `
+.qti3-drawing-surface {
+  color-scheme: light;
+  box-sizing: border-box;
+  border: 1px solid #000;
+  background: #fff;
+  color: #000;
+}
+
+.qti3-drawing-surface .qti3-drawing-stroke {
+  fill: none;
+  stroke: #000;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (forced-colors: active) {
+  .qti3-drawing-surface {
+    border-color: CanvasText;
+    background: Canvas;
+    color: #000;
+  }
+
+  .qti3-drawing-surface .qti3-drawing-stroke {
+    stroke: #000;
+  }
+}
+`.trim();
+//# sourceMappingURL=drawing-styles.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+export const GAP_MATCH_PLAYER_STYLES = `
+.qti3-gap-target {
+  min-block-size: 2.75rem;
+  padding: 0.5rem;
+  border: 1px dashed CanvasText;
+}
+
+.qti3-gap-region {
+  margin-block-start: 0.5rem;
+}
+
+.qti3-gap-passage {
+  display: block;
+  max-inline-size: 62rem;
+  line-height: 2.3;
+}
+
+.qti3-gap-passage .qti3-gap-target {
+  display: inline-flex;
+  padding: 0;
+  border: 0;
+  margin-inline: 0.15rem;
+  margin-block: 0.2rem;
+  vertical-align: middle;
+}
+
+.qti3-gap-button {
+  min-inline-size: 8rem;
+  min-block-size: 2.25rem;
+  text-align: start;
+}
+`.trim();
+//# sourceMappingURL=gap-match-styles.js.map

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

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

package/dist/styles/graphic-styles.d.ts

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

package/dist/styles/graphic-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphic-styles.d.ts","sourceRoot":"","sources":["../../src/styles/graphic-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,QA+R1B,CAAC"}