@conform-ed/qti-react 0.0.12 → 0.0.13

package/src/reference-skin/media.ts

@@ -0,0 +1,74 @@
+/**
+ * Reference Skin for `mediaInteraction` (ADR-0001): renders the wrapped audio/video
+ * element itself (skin-owned, so it can count plays), resolving the source through the
+ * runtime's Asset Resolver. The response is the play count as an integer string;
+ * playback is blocked once `maxPlays` is reached.
+ */
+
+import { createElement, type ReactNode, type SyntheticEvent } from "react";
+
+import type { BodyNode, InteractionRenderProps, XmlContentNode } from "../runtime";
+
+interface MediaNodeView {
+  prompt?: { content?: readonly BodyNode[] };
+  maxPlays?: number;
+  loop?: boolean;
+  content?: readonly BodyNode[];
+}
+
+function findMediaElement(nodes: readonly BodyNode[] | undefined): XmlContentNode | null {
+  for (const node of nodes ?? []) {
+    if (node.kind === "xml") {
+      const xmlNode = node as XmlContentNode;
+
+      if (xmlNode.name === "audio" || xmlNode.name === "video") {
+        return xmlNode;
+      }
+
+      const nested = findMediaElement(xmlNode.children);
+
+      if (nested) {
+        return nested;
+      }
+    }
+  }
+
+  return null;
+}
+
+export function MediaReferenceSkin(props: InteractionRenderProps): ReactNode {
+  const node = props.node as unknown as MediaNodeView;
+  const media = findMediaElement(node.content);
+  const plays = typeof props.value === "string" ? Number(props.value) || 0 : 0;
+  const playsExhausted = node.maxPlays !== undefined && node.maxPlays > 0 && plays >= node.maxPlays;
+
+  if (!media) {
+    return createElement(
+      "div",
+      { "data-qti-interaction": "mediaInteraction", "data-status": props.status },
+      "No media element.",
+    );
+  }
+
+  const src = typeof media.attributes?.["src"] === "string" ? props.resolveAsset(media.attributes["src"]) : undefined;
+
+  return createElement(
+    "div",
+    { "data-qti-interaction": "mediaInteraction", "data-status": props.status, "data-qti-plays": plays },
+    node.prompt ? createElement("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null,
+    createElement(media.name, {
+      src,
+      controls: true,
+      loop: node.loop ?? false,
+      onPlay: (event: SyntheticEvent<HTMLMediaElement>) => {
+        if (props.disabled || playsExhausted) {
+          event.currentTarget.pause();
+          return;
+        }
+
+        props.setValue(String(plays + 1));
+      },
+    }),
+    playsExhausted ? createElement("p", { role: "status" }, "No plays remaining.") : null,
+  );
+}

package/src/reference-skin/order.ts

@@ -0,0 +1,79 @@
+/**
+ * Reference Skin for `orderInteraction` (ADR-0001): an ordered list with per-item
+ * move-up/move-down buttons — keyboard-accessible reordering without drag-and-drop.
+ * The displayed order is the response; the first move answers with the full order.
+ */
+
+import { createElement, type ReactNode } from "react";
+
+import type { BodyNode, InteractionRenderProps } from "../runtime";
+
+interface OrderChoiceView {
+  identifier: string;
+  content?: readonly BodyNode[];
+}
+
+interface OrderNodeView {
+  prompt?: { content?: readonly BodyNode[] };
+  simpleChoices?: readonly OrderChoiceView[];
+}
+
+export function OrderReferenceSkin(props: InteractionRenderProps): ReactNode {
+  const node = props.node as unknown as OrderNodeView;
+  const choices = node.simpleChoices ?? [];
+  const declared = choices.map((choice) => choice.identifier);
+  const order = Array.isArray(props.value) ? [...props.value] : declared;
+  const choicesById = new Map(choices.map((choice) => [choice.identifier, choice]));
+
+  function move(index: number, delta: -1 | 1): void {
+    const target = index + delta;
+
+    if (target < 0 || target >= order.length) {
+      return;
+    }
+
+    const next = [...order];
+    const moved = next[index]!;
+
+    next[index] = next[target]!;
+    next[target] = moved;
+    props.setValue(next);
+  }
+
+  return createElement(
+    "div",
+    { "data-qti-interaction": "orderInteraction", "data-status": props.status },
+    node.prompt ? createElement("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null,
+    createElement(
+      "ol",
+      null,
+      order.map((identifier, index) =>
+        createElement(
+          "li",
+          { key: identifier },
+          props.renderContent(choicesById.get(identifier)?.content) ?? identifier,
+          createElement(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Move ${identifier} up`,
+              disabled: props.disabled || index === 0,
+              onClick: () => move(index, -1),
+            },
+            "↑",
+          ),
+          createElement(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Move ${identifier} down`,
+              disabled: props.disabled || index === order.length - 1,
+              onClick: () => move(index, 1),
+            },
+            "↓",
+          ),
+        ),
+      ),
+    ),
+  );
+}

package/src/reference-skin/position-object.ts

@@ -0,0 +1,84 @@
+/**
+ * Reference Skin for `positionObjectStage` (ADR-0001): click the stage to place the
+ * movable object image, centered on the click point. The view models the common
+ * single-interaction stage (one movable object per stage); multi-interaction stages
+ * fail descriptor validation and surface through the capability gate.
+ */
+
+import { createElement, type ReactNode } from "react";
+
+import { formatPoint, parsePoint, type Point } from "../graphic";
+import type { BodyNode, InteractionRenderProps } from "../runtime";
+import { GraphicStage, type ObjectView } from "./graphic-base";
+
+interface PositionObjectNodeView {
+  prompt?: { content?: readonly BodyNode[] };
+  stageObject?: ObjectView;
+  object?: ObjectView;
+  maxChoices?: number;
+}
+
+export function PositionObjectReferenceSkin(props: InteractionRenderProps): ReactNode {
+  const node = props.node as unknown as PositionObjectNodeView;
+  const maxChoices = node.maxChoices ?? 1;
+  const points =
+    props.value === null
+      ? []
+      : typeof props.value === "string"
+        ? [props.value]
+        : Array.isArray(props.value)
+          ? [...props.value]
+          : [];
+
+  if (!node.stageObject || !node.object) {
+    return null;
+  }
+
+  const movable = node.object;
+
+  function stageClick(point: Point): void {
+    if (props.disabled) {
+      return;
+    }
+
+    const formatted = formatPoint(point);
+
+    if (maxChoices === 1) {
+      props.setValue(formatted);
+      return;
+    }
+
+    if (points.length < maxChoices) {
+      props.setValue([...points, formatted]);
+    }
+  }
+
+  return createElement(GraphicStage, {
+    object: node.stageObject,
+    resolveAsset: props.resolveAsset,
+    interaction: "positionObjectStage",
+    status: props.status,
+    onStageClick: stageClick,
+    prompt: node.prompt
+      ? createElement("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content))
+      : null,
+    overlay: points.map((value, index) => {
+      const point = parsePoint(value);
+
+      if (!point) {
+        return null;
+      }
+
+      return createElement("image", {
+        key: `${value}-${index}`,
+        href: props.resolveAsset(movable.data),
+        x: point.x - (movable.width ?? 0) / 2,
+        y: point.y - (movable.height ?? 0) / 2,
+        width: movable.width,
+        height: movable.height,
+        "data-qti-point": value,
+        style: { pointerEvents: "none" },
+      });
+    }),
+  });
+}

package/src/reference-skin/select-point.ts

@@ -0,0 +1,87 @@
+/**
+ * Reference Skin for `selectPointInteraction` (ADR-0001): click the stage to record a
+ * point (image coordinates). With maxChoices 1 a new click replaces the point;
+ * otherwise clicks append until maxChoices is reached.
+ */
+
+import { Fragment, createElement, type ReactNode } from "react";
+
+import { formatPoint, type Point } from "../graphic";
+import type { BodyNode, InteractionRenderProps } from "../runtime";
+import { GraphicStage, type ObjectView } from "./graphic-base";
+
+interface SelectPointNodeView {
+  prompt?: { content?: readonly BodyNode[] };
+  object?: ObjectView;
+  maxChoices?: number;
+}
+
+export function SelectPointReferenceSkin(props: InteractionRenderProps): ReactNode {
+  const node = props.node as unknown as SelectPointNodeView;
+  const maxChoices = node.maxChoices ?? 1;
+  const points =
+    props.value === null
+      ? []
+      : typeof props.value === "string"
+        ? [props.value]
+        : Array.isArray(props.value)
+          ? [...props.value]
+          : [];
+
+  if (!node.object) {
+    return null;
+  }
+
+  function stageClick(point: Point): void {
+    if (props.disabled) {
+      return;
+    }
+
+    const formatted = formatPoint(point);
+
+    if (maxChoices === 1) {
+      props.setValue(formatted);
+      return;
+    }
+
+    if (points.length < maxChoices) {
+      props.setValue([...points, formatted]);
+    }
+  }
+
+  return createElement(GraphicStage, {
+    object: node.object,
+    resolveAsset: props.resolveAsset,
+    interaction: "selectPointInteraction",
+    status: props.status,
+    onStageClick: stageClick,
+    prompt: node.prompt
+      ? createElement("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content))
+      : null,
+    overlay: points.map((value, index) => {
+      const [x, y] = value.split(/\s+/u).map(Number);
+
+      return createElement(
+        Fragment,
+        { key: `${value}-${index}` },
+        createElement("circle", {
+          cx: x,
+          cy: y,
+          r: 5,
+          fill: "currentColor",
+          "data-qti-point": value,
+          style: { pointerEvents: "none" },
+        }),
+      );
+    }),
+    after: createElement(
+      "button",
+      {
+        type: "button",
+        disabled: props.disabled || points.length === 0,
+        onClick: () => props.setValue(null),
+      },
+      "Clear points",
+    ),
+  });
+}

package/src/reference-skin/slider.ts

@@ -0,0 +1,41 @@
+/**
+ * Reference Skin for `sliderInteraction` (ADR-0001): a controlled native range input
+ * with a visible current value. Responses are stored as decimal strings; numeric
+ * baseTypes compare numerically in scoring.
+ */
+
+import { createElement, type ChangeEvent, type ReactNode } from "react";
+
+import type { BodyNode, InteractionRenderProps } from "../runtime";
+
+interface SliderNodeView {
+  prompt?: { content?: readonly BodyNode[] };
+  lowerBound?: number;
+  upperBound?: number;
+  step?: number;
+}
+
+export function SliderReferenceSkin(props: InteractionRenderProps): ReactNode {
+  const node = props.node as unknown as SliderNodeView;
+  const lower = node.lowerBound ?? 0;
+  const value = typeof props.value === "string" && props.value !== "" ? props.value : String(lower);
+
+  return createElement(
+    "div",
+    { "data-qti-interaction": "sliderInteraction", "data-status": props.status },
+    node.prompt ? createElement("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null,
+    createElement("input", {
+      type: "range",
+      min: lower,
+      max: node.upperBound ?? 100,
+      step: node.step ?? 1,
+      value,
+      disabled: props.disabled,
+      "aria-disabled": props.disabled,
+      onChange: (event: ChangeEvent<HTMLInputElement>) => {
+        props.setValue(event.target.value);
+      },
+    }),
+    createElement("output", null, props.value === null ? "—" : value),
+  );
+}

package/src/reference-skin/text-entry.ts

@@ -0,0 +1,31 @@
+/**
+ * Reference Skin for `textEntryInteraction` (ADR-0001): a controlled native text input.
+ */
+
+import { createElement, type ChangeEvent, type ReactNode } from "react";
+
+import type { InteractionRenderProps } from "../runtime";
+
+interface TextEntryNodeView {
+  expectedLength?: number;
+  placeholderText?: string;
+}
+
+export function TextEntryReferenceSkin(props: InteractionRenderProps): ReactNode {
+  const node = props.node as unknown as TextEntryNodeView;
+  const value = typeof props.value === "string" ? props.value : "";
+
+  return createElement("input", {
+    type: "text",
+    value,
+    placeholder: node.placeholderText,
+    size: node.expectedLength,
+    disabled: props.disabled,
+    "aria-disabled": props.disabled,
+    "data-qti-interaction": "textEntryInteraction",
+    "data-status": props.status,
+    onChange: (event: ChangeEvent<HTMLInputElement>) => {
+      props.setValue(event.target.value === "" ? null : event.target.value);
+    },
+  });
+}

package/src/reference-skin/upload.ts

@@ -0,0 +1,46 @@
+/**
+ * Reference Skin for `uploadInteraction` (ADR-0001): a native file input. The selected
+ * file is stored as a data URL string (QTI `file` base type carries the content); items
+ * using upload are typically scored externally, not by client response processing.
+ */
+
+import { createElement, type ChangeEvent, type ReactNode } from "react";
+
+import type { BodyNode, InteractionRenderProps } from "../runtime";
+
+interface UploadNodeView {
+  prompt?: { content?: readonly BodyNode[] };
+  /** Accepted MIME type, per the QTI `type` attribute. */
+  type?: string;
+}
+
+export function UploadReferenceSkin(props: InteractionRenderProps): ReactNode {
+  const node = props.node as unknown as UploadNodeView;
+
+  return createElement(
+    "div",
+    { "data-qti-interaction": "uploadInteraction", "data-status": props.status },
+    node.prompt ? createElement("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null,
+    createElement("input", {
+      type: "file",
+      accept: node.type,
+      disabled: props.disabled,
+      "aria-disabled": props.disabled,
+      onChange: (event: ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+
+        if (!file) {
+          props.setValue(null);
+          return;
+        }
+
+        const reader = new FileReader();
+
+        reader.onload = () => {
+          props.setValue(typeof reader.result === "string" ? reader.result : null);
+        };
+        reader.readAsDataURL(file);
+      },
+    }),
+  );
+}