@longsightgroup/qti3-player 0.1.1 → 0.1.2

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { type QtiAssessmentItem, type QtiAttemptStatus, type QtiAttemptStateV1, type QtiDiagnostic, type QtiScoreResult } from "@longsightgroup/qti3-core";
+import { type QtiAssessmentItem, type QtiAttemptStatus, type QtiAttemptStateV1, type QtiDiagnostic, type QtiScoreResult, type QtiValue } from "@longsightgroup/qti3-core";
 export interface QtiPlayerSessionControl {
     validateResponses?: boolean | undefined;
     showFeedback?: boolean | undefined;
@@ -21,6 +21,10 @@ export interface QtiReadyEventDetail {
 export interface QtiStateChangeEventDetail {
     state: QtiAttemptStateV1;
 }
+export interface QtiResponseChangeEventDetail {
+    responseIdentifier: string;
+    value: QtiValue;
+}
 export type QtiScoreEventDetail = QtiScoreResult;
 export interface QtiValidationEventDetail {
     validationMessages: QtiDiagnostic[];
@@ -35,6 +39,7 @@ export interface QtiEndAttemptEventDetail {
 export interface QtiAssessmentItemPlayerEventDetailMap {
     "qti-ready": QtiReadyEventDetail;
     "qti-statechange": QtiStateChangeEventDetail;
+    "qti-responsechange": QtiResponseChangeEventDetail;
     "qti-score": QtiScoreEventDetail;
     "qti-validation": QtiValidationEventDetail;
     "qti-suspend": QtiSuspendEventDetail;

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -162,14 +162,6 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                 root.append(this.renderInteraction(interaction));
             }
         }
-        const actions = document.createElement("div");
-        actions.className = "qti3-actions";
-        const score = document.createElement("button");
-        score.type = "button";
-        score.textContent = "Score";
-        score.addEventListener("click", () => this.scoreAttempt());
-        actions.append(score);
-        root.append(actions);
         const feedback = document.createElement("section");
         feedback.className = "qti3-feedback";
         feedback.role = "status";
@@ -200,9 +192,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                 return;
             this.session.respond(responseIdentifier, value);
             this.clearValidationMessage(responseIdentifier);
-            this.dispatchEvent(new CustomEvent("qti-responsechange", {
-                detail: { responseIdentifier, value },
-            }));
+            this.dispatchPlayerEvent("qti-responsechange", { responseIdentifier, value });
             this.emitStateChange();
         };
         const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
@@ -295,7 +285,11 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             return field;
         }
         if (interaction.type === "media") {
-            field.append(renderObjectAsset(interaction));
+            field.append(renderObjectAsset(interaction, {
+                currentValue,
+                update,
+                isCompleted: () => this.attemptIsCompleted(),
+            }));
             return field;
         }
         field.append(renderSelect(interaction, update, currentValue));
@@ -318,9 +312,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                 return;
             this.session.respond(responseIdentifier, value);
             this.clearValidationMessage(responseIdentifier);
-            this.dispatchEvent(new CustomEvent("qti-responsechange", {
-                detail: { responseIdentifier, value },
-            }));
+            this.dispatchPlayerEvent("qti-responsechange", { responseIdentifier, value });
             this.emitStateChange();
         };
         const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
@@ -432,7 +424,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         const article = this.querySelector(".qti3-player");
         if (article)
             article.dataset.status = this.dataset.status;
-        for (const control of this.querySelectorAll(".qti3-interaction button, .qti3-interaction input, .qti3-interaction select, .qti3-interaction textarea, .qti3-actions button")) {
+        for (const control of this.querySelectorAll(".qti3-interaction button, .qti3-interaction input, .qti3-interaction select, .qti3-interaction textarea")) {
             control.disabled = completed;
         }
         for (const element of this.querySelectorAll(".qti3-interaction [tabindex]:not(button):not(input):not(select):not(textarea)")) {
@@ -523,20 +515,24 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             .map((interaction) => [interaction.responseIdentifier, interaction]));
         const diagnostics = [];
         for (const declaration of this.documentModel.item.responseDeclarations) {
-            if (declaration.correctResponse === null)
-                continue;
             const interaction = interactionsByResponse.get(declaration.identifier);
+            if (declaration.correctResponse === null && interaction?.type !== "media")
+                continue;
             const minimum = minimumRequiredResponses(interaction);
-            const count = responseCount(state.responses[declaration.identifier] ?? null);
+            const count = interaction?.type === "media"
+                ? mediaPlayCount(state.responses[declaration.identifier] ?? null)
+                : responseCount(state.responses[declaration.identifier] ?? null);
             const maximum = maximumAllowedResponses(interaction);
             if (count < minimum) {
                 diagnostics.push({
                     code: "response.required",
                     severity: "error",
                     message: interaction?.attributes["data-min-selections-message"] ??
-                        (minimum === 1
-                            ? `${declaration.identifier} requires a response.`
-                            : `${declaration.identifier} requires at least ${minimum} responses.`),
+                        (interaction?.type === "media"
+                            ? `${declaration.identifier} requires at least ${minimum} play${minimum === 1 ? "" : "s"}.`
+                            : minimum === 1
+                                ? `${declaration.identifier} requires a response.`
+                                : `${declaration.identifier} requires at least ${minimum} responses.`),
                     path: declaration.identifier,
                 });
             }
@@ -545,7 +541,9 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
                     code: "response.maximum",
                     severity: "error",
                     message: interaction?.attributes["data-max-selections-message"] ??
-                        `${declaration.identifier} allows at most ${maximum} response${maximum === 1 ? "" : "s"}.`,
+                        (interaction?.type === "media"
+                            ? `${declaration.identifier} allows at most ${maximum} play${maximum === 1 ? "" : "s"}.`
+                            : `${declaration.identifier} allows at most ${maximum} response${maximum === 1 ? "" : "s"}.`),
                     path: declaration.identifier,
                 });
             }
@@ -2199,8 +2197,17 @@ function renderDrawingResponse(interaction, update, currentValue) {
     surface.style.border = "1px solid CanvasText";
     surface.style.background = "Canvas";
     surface.style.touchAction = "none";
-    const background = drawingBackgroundImage(interaction, width, height);
+    const restoredStrokes = parseDrawingValue(currentValue);
+    const authoredBackgroundHref = drawingBackgroundHref(interaction);
+    let resolvedAuthoredBackgroundHref = authoredBackgroundHref;
+    let activeBackgroundIsAuthored = restoredStrokes.length > 0 || !drawingResponseImage(currentValue);
+    let activeBackgroundHref = restoredStrokes.length === 0
+        ? (drawingResponseImage(currentValue) ?? authoredBackgroundHref)
+        : authoredBackgroundHref;
     const resetSurface = () => {
+        const background = activeBackgroundHref
+            ? drawingImageElement(activeBackgroundHref, width, height)
+            : undefined;
         surface.replaceChildren(...(background ? [background] : []));
     };
     resetSurface();
@@ -2208,22 +2215,35 @@ function renderDrawingResponse(interaction, update, currentValue) {
     summary.className = "qti3-coordinate-output";
     const strokes = [];
     let activeStroke;
-    const serializeStroke = (points) => {
-        return points.map((point) => `${point.x} ${point.y}`).join(" ");
-    };
+    let commitVersion = 0;
     const commit = (emitResponse = true) => {
-        const value = strokes.map((stroke) => serializeStroke(stroke.points)).join(" | ");
-        if (emitResponse)
-            update(value);
+        const version = ++commitVersion;
+        if (emitResponse) {
+            if (strokes.length === 0) {
+                update(null);
+            }
+            else {
+                void exportDrawingResponse(interaction, width, height, strokes, () => {
+                    const currentHref = currentDrawingBackgroundHref(surface);
+                    if (activeBackgroundIsAuthored && currentHref) {
+                        resolvedAuthoredBackgroundHref = currentHref;
+                    }
+                    return currentHref ?? activeBackgroundHref;
+                }).then((value) => {
+                    if (version === commitVersion)
+                        update(value);
+                });
+            }
+        }
         const count = strokes.length;
-        summary.value = value;
+        summary.value = serializeDrawingStrokes(strokes);
         summary.textContent =
             count === 0 ? "No drawing strokes." : `${count} drawing stroke${count === 1 ? "" : "s"}.`;
         surface.setAttribute("aria-label", count === 0
             ? "Drawing response surface, no strokes"
             : `Drawing response surface, ${count} stroke${count === 1 ? "" : "s"}`);
     };
-    for (const points of parseDrawingValue(currentValue)) {
+    for (const points of restoredStrokes) {
         const element = polylineElement(points);
         strokes.push({ points, element });
         surface.append(element);
@@ -2281,6 +2301,12 @@ function renderDrawingResponse(interaction, update, currentValue) {
     clear.addEventListener("click", () => {
         strokes.splice(0, strokes.length);
         activeStroke = undefined;
+        if (activeBackgroundIsAuthored) {
+            resolvedAuthoredBackgroundHref =
+                currentDrawingBackgroundHref(surface) ?? resolvedAuthoredBackgroundHref;
+        }
+        activeBackgroundHref = resolvedAuthoredBackgroundHref;
+        activeBackgroundIsAuthored = true;
         resetSurface();
         commit();
     });
@@ -2400,27 +2426,19 @@ function renderHotspotResponse(interaction, update, currentValue) {
     group.append(surface, selectedSummary);
     return group;
 }
-function renderObjectAsset(interaction) {
+function renderObjectAsset(interaction, mediaResponse = {}) {
     const object = interaction.object;
-    const type = object?.type ?? "";
     const label = interaction.prompt ?? object?.text ?? "Media interaction";
-    if (object?.data && type.startsWith("audio/")) {
+    const mediaType = object ? mediaElementType(object) : undefined;
+    if (object && mediaType === "audio") {
         const audio = document.createElement("audio");
-        audio.controls = true;
-        audio.preload = "none";
-        audio.src = object.data;
-        audio.setAttribute("aria-label", label);
-        audio.style.maxInlineSize = "100%";
+        configureMediaElement(audio, interaction, object, label, mediaResponse);
         audio.style.inlineSize = "100%";
         return audio;
     }
-    if (object?.data && type.startsWith("video/")) {
+    if (object && mediaType === "video") {
         const video = document.createElement("video");
-        video.controls = true;
-        video.preload = "none";
-        video.src = object.data;
-        video.setAttribute("aria-label", label);
-        video.style.maxInlineSize = "100%";
+        configureMediaElement(video, interaction, object, label, mediaResponse);
         if (object.width)
             video.width = Number(object.width);
         if (object.height)
@@ -2442,10 +2460,11 @@ function renderObjectAsset(interaction) {
     const group = document.createElement("div");
     group.role = "group";
     group.setAttribute("aria-label", label);
-    if (object?.data) {
+    const fallbackHref = object?.data ?? object?.sources.find((source) => source.src)?.src;
+    if (fallbackHref) {
         const link = document.createElement("a");
-        link.href = object.data;
-        link.textContent = object.text || object.data;
+        link.href = fallbackHref;
+        link.textContent = object?.text || fallbackHref;
         group.append(link);
     }
     else {
@@ -2453,6 +2472,113 @@ function renderObjectAsset(interaction) {
     }
     return group;
 }
+function configureMediaElement(media, interaction, object, label, mediaResponse) {
+    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;
+        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;
+        media.append(trackElement);
+    }
+    bindMediaPlayCount(media, interaction, mediaResponse);
+}
+function copyMediaDataAttributes(element, attributes) {
+    for (const [name, value] of Object.entries(attributes)) {
+        if (!name.startsWith("data-"))
+            continue;
+        element.setAttribute(name, value);
+    }
+}
+function mediaElementType(object) {
+    const types = [object.type, ...object.sources.map((source) => source.type)].filter((value) => 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, object) {
+    return (interaction.attributes["data-qti-media-player-controls"] ??
+        object.attributes["data-qti-media-player-controls"]);
+}
+function bindMediaPlayCount(media, interaction, mediaResponse) {
+    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();
+}
 function objectIsImage(object) {
     return Boolean(object.type?.startsWith("image/") ||
         object.data?.startsWith("data:image/") ||
@@ -2597,6 +2723,42 @@ function parseDrawingValue(value) {
     const raw = scalarString(value);
     if (!raw)
         return [];
+    const metadata = drawingMetadataFromSvgDataUrl(raw);
+    if (metadata)
+        return parseDrawingStrokePayload(metadata);
+    return parseDrawingStrokePayload(raw);
+}
+function drawingMetadataFromSvgDataUrl(raw) {
+    if (!raw.startsWith("data:image/svg+xml"))
+        return undefined;
+    const commaIndex = raw.indexOf(",");
+    if (commaIndex === -1)
+        return undefined;
+    const encoded = raw.slice(commaIndex + 1);
+    let svg = "";
+    try {
+        svg = raw.slice(0, commaIndex).includes(";base64")
+            ? atob(encoded)
+            : decodeURIComponent(encoded);
+    }
+    catch {
+        return undefined;
+    }
+    const match = svg.match(/\sdata-qti3-strokes="([^"]*)"/);
+    if (!match?.[1])
+        return undefined;
+    try {
+        return decodeURIComponent(match[1]);
+    }
+    catch {
+        return undefined;
+    }
+}
+function drawingResponseImage(value) {
+    const raw = scalarString(value);
+    return raw?.startsWith("data:image/") ? raw : undefined;
+}
+function parseDrawingStrokePayload(raw) {
     return raw
         .split("|")
         .map((stroke) => {
@@ -2733,20 +2895,177 @@ function svgPoint(surface, event) {
         y: Math.max(0, Math.min(height, y)),
     };
 }
-function drawingBackgroundImage(interaction, width, height) {
+async function exportDrawingResponse(interaction, width, height, strokes, backgroundHref) {
+    const href = backgroundHref();
+    const mime = drawingResponseMime(interaction.object);
+    if (mime === "image/svg+xml") {
+        return svgDrawingDataUrl(interaction, width, height, strokes, await portableImageHref(href));
+    }
+    return rasterDrawingDataUrl(interaction, width, height, strokes, href, mime);
+}
+function drawingResponseMime(object) {
+    const candidates = [
+        object?.type,
+        object?.data,
+        ...(object?.sources.map((source) => source.type ?? source.src) ?? []),
+    ];
+    for (const candidate of candidates) {
+        const mime = imageMime(candidate);
+        if (mime)
+            return mime;
+    }
+    return "image/svg+xml";
+}
+function imageMime(value) {
+    if (!value)
+        return undefined;
+    const normalized = value.toLowerCase().split(";")[0] ?? "";
+    if (normalized === "image/svg+xml")
+        return "image/svg+xml";
+    if (normalized === "image/png")
+        return "image/png";
+    if (normalized === "image/jpeg" || normalized === "image/jpg")
+        return "image/jpeg";
+    if (normalized === "image/webp")
+        return "image/webp";
+    const dataMime = value.match(/^data:([^;,]+)/i)?.[1]?.toLowerCase();
+    if (dataMime)
+        return imageMime(dataMime);
+    if (/\.svg(?:[?#].*)?$/i.test(value))
+        return "image/svg+xml";
+    if (/\.png(?:[?#].*)?$/i.test(value))
+        return "image/png";
+    if (/\.jpe?g(?:[?#].*)?$/i.test(value))
+        return "image/jpeg";
+    if (/\.webp(?:[?#].*)?$/i.test(value))
+        return "image/webp";
+    return undefined;
+}
+function svgDrawingDataUrl(interaction, width, height, strokes, backgroundHref) {
+    const markup = svgDrawingMarkup(interaction, width, height, strokes, backgroundHref);
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+}
+function svgDrawingMarkup(interaction, width, height, strokes, backgroundHref) {
+    const strokePayload = serializeDrawingStrokes(strokes);
+    const background = backgroundHref && interaction.object && objectIsImage(interaction.object)
+        ? `<image href="${xmlAttribute(backgroundHref)}" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>`
+        : "";
+    const lines = strokes
+        .map((stroke) => {
+        return `<polyline points="${xmlAttribute(serializeSvgPoints(stroke.points))}" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>`;
+    })
+        .join("");
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"><metadata id="qti3-drawing-response" data-qti3-strokes="${xmlAttribute(encodeURIComponent(strokePayload))}"></metadata>${background}${lines}</svg>`;
+}
+async function rasterDrawingDataUrl(interaction, width, height, strokes, backgroundHref, mime) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d");
+    if (!context)
+        return svgDrawingDataUrl(interaction, width, height, strokes, backgroundHref);
+    if (mime === "image/jpeg") {
+        context.fillStyle = "#fff";
+        context.fillRect(0, 0, width, height);
+    }
+    if (backgroundHref && interaction.object && objectIsImage(interaction.object)) {
+        try {
+            const image = await loadCanvasImage(backgroundHref);
+            context.drawImage(image, 0, 0, width, height);
+        }
+        catch {
+            // Export the candidate marks even when the authored background cannot be rasterized.
+        }
+    }
+    context.strokeStyle = "#000";
+    context.lineWidth = 3;
+    context.lineCap = "round";
+    context.lineJoin = "round";
+    for (const stroke of strokes) {
+        const [first, ...rest] = stroke.points;
+        if (!first)
+            continue;
+        context.beginPath();
+        context.moveTo(first.x, first.y);
+        for (const point of rest)
+            context.lineTo(point.x, point.y);
+        context.stroke();
+    }
+    try {
+        return canvas.toDataURL(mime);
+    }
+    catch {
+        return svgDrawingDataUrl(interaction, width, height, strokes, backgroundHref);
+    }
+}
+function loadCanvasImage(src) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.addEventListener("load", () => resolve(image), { once: true });
+        image.addEventListener("error", () => reject(new Error(`Unable to load ${src}`)), {
+            once: true,
+        });
+        image.src = src;
+    });
+}
+async function portableImageHref(href) {
+    if (!href || href.startsWith("data:"))
+        return href;
+    try {
+        const response = await fetch(href);
+        if (!response.ok)
+            return href;
+        return await blobToDataUrl(await response.blob());
+    }
+    catch {
+        return href;
+    }
+}
+function blobToDataUrl(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.addEventListener("load", () => {
+            resolve(String(reader.result ?? ""));
+        });
+        reader.addEventListener("error", () => {
+            reject(reader.error ?? new Error("Unable to read drawing background."));
+        });
+        reader.readAsDataURL(blob);
+    });
+}
+function drawingBackgroundHref(interaction) {
     if (!interaction.object?.data || !objectIsImage(interaction.object))
         return undefined;
+    return interaction.object.data;
+}
+function drawingImageElement(href, width, height) {
     const image = document.createElementNS("http://www.w3.org/2000/svg", "image");
-    image.setAttribute("href", interaction.object.data);
+    image.setAttribute("href", href);
     image.setAttribute("width", String(width));
     image.setAttribute("height", String(height));
     image.setAttribute("preserveAspectRatio", "xMidYMid meet");
     image.setAttribute("aria-hidden", "true");
     return image;
 }
+function currentDrawingBackgroundHref(surface) {
+    return surface.querySelector("image")?.getAttribute("href") ?? undefined;
+}
 function serializeSvgPoints(points) {
     return points.map((point) => `${point.x},${point.y}`).join(" ");
 }
+function serializeDrawingStrokes(strokes) {
+    return strokes.map((stroke) => serializeDrawingStroke(stroke.points)).join(" | ");
+}
+function serializeDrawingStroke(points) {
+    return points.map((point) => `${point.x} ${point.y}`).join(" ");
+}
+function xmlAttribute(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;");
+}
 function polylineElement(points) {
     const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
     line.setAttribute("points", serializeSvgPoints(points));
@@ -3075,7 +3394,6 @@ function playerStyleElement() {
       margin-block-start: 0.75rem;
     }
 
-    .qti3-actions,
     .qti3-reorder-item,
     .qti3-token-region,
     .qti3-pair-chip,
@@ -3512,6 +3830,8 @@ function responseCount(value) {
 function maximumAllowedResponses(interaction) {
     if (!interaction)
         return undefined;
+    if (interaction.type === "media")
+        return maximumMediaPlays(interaction);
     const explicit = interaction.attributes["max-choices"] ?? interaction.attributes["max-associations"];
     if (explicit === undefined)
         return undefined;
@@ -3523,12 +3843,33 @@ function maximumAllowedResponses(interaction) {
 function minimumRequiredResponses(interaction) {
     if (!interaction)
         return 1;
+    if (interaction.type === "media")
+        return minimumMediaPlays(interaction);
     const explicit = interaction.attributes["min-choices"] ?? interaction.attributes["min-associations"];
     if (explicit === undefined)
         return 1;
     const parsed = Number(explicit);
     return Number.isInteger(parsed) && parsed >= 0 ? parsed : 1;
 }
+function minimumMediaPlays(interaction) {
+    const parsed = Number(interaction.attributes["min-plays"] ?? "0");
+    return Number.isInteger(parsed) && parsed >= 0 ? parsed : 0;
+}
+function maximumMediaPlays(interaction) {
+    const parsed = Number(interaction.attributes["max-plays"] ?? "0");
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;
+}
+function mediaPlayCount(value) {
+    const parsed = typeof value === "number" ? value : typeof value === "string" ? Number(value) : 0;
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : 0;
+}
+function parseBooleanAttribute(value) {
+    if (value === "true" || value === "1")
+        return true;
+    if (value === "false" || value === "0")
+        return false;
+    return undefined;
+}
 function matchMaxDiagnostics(responseIdentifier, interaction, response) {
     const identifiers = responseChoiceIdentifiers(response);
     if (identifiers.length === 0)