From ebadd6784b4e614a9bfe44ce4b3b993c6674f5f3 Mon Sep 17 00:00:00 2001 From: mjhayren Date: Tue, 3 Feb 2026 13:23:51 -0600 Subject: [PATCH 01/15] fixed the Graphic Gap Match - Solar System question --- bun.lock | 8 ++ .../GraphicGapMatchInteraction.svelte | 93 +++++++++++-------- .../routes/item-demo/[sample]/+page.svelte | 4 +- .../src/components/ItemBody.svelte | 8 +- 4 files changed, 73 insertions(+), 40 deletions(-) diff --git a/bun.lock b/bun.lock index 7dbedfd..ccab375 100644 --- a/bun.lock +++ b/bun.lock @@ -1950,10 +1950,14 @@ "@pie-qti/example/@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@6.2.4", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "deepmerge": "^4.3.1", "magic-string": "^0.30.21", "obug": "^2.1.0", "vitefu": "^1.1.1" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA=="], + "@pie-qti/i18n/@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="], + "@pie-qti/item-player/node-html-parser": ["node-html-parser@7.0.2", "", { "dependencies": { "css-select": "^5.1.0", "he": "1.2.0" } }, "sha512-DxodLVh7a6JMkYzWyc8nBX9MaF4M0lLFYkJHlWOiu7+9/I6mwNK9u5TbAMC7qfqDJEPX9OIoWA2A9t4C2l1mUQ=="], "@pie-qti/player-elements/@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@6.2.4", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "deepmerge": "^4.3.1", "magic-string": "^0.30.21", "obug": "^2.1.0", "vitefu": "^1.1.1" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA=="], + "@pie-qti/qti-common/@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="], + "@pie-qti/test-utils/node-html-parser": ["node-html-parser@7.0.2", "", { "dependencies": { "css-select": "^5.1.0", "he": "1.2.0" } }, "sha512-DxodLVh7a6JMkYzWyc8nBX9MaF4M0lLFYkJHlWOiu7+9/I6mwNK9u5TbAMC7qfqDJEPX9OIoWA2A9t4C2l1mUQ=="], "@pie-qti/transform-cli/node-html-parser": ["node-html-parser@7.0.2", "", { "dependencies": { "css-select": "^5.1.0", "he": "1.2.0" } }, "sha512-DxodLVh7a6JMkYzWyc8nBX9MaF4M0lLFYkJHlWOiu7+9/I6mwNK9u5TbAMC7qfqDJEPX9OIoWA2A9t4C2l1mUQ=="], @@ -2048,8 +2052,12 @@ "@pie-qti/example/@sveltejs/vite-plugin-svelte/@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@5.0.2", "", { "dependencies": { "obug": "^2.1.0" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0", "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig=="], + "@pie-qti/i18n/@types/bun/bun-types": ["bun-types@1.3.8", "", { "dependencies": { "@types/node": "*" } }, "sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q=="], + "@pie-qti/player-elements/@sveltejs/vite-plugin-svelte/@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@5.0.2", "", { "dependencies": { "obug": "^2.1.0" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0", "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig=="], + "@pie-qti/qti-common/@types/bun/bun-types": ["bun-types@1.3.8", "", { "dependencies": { "@types/node": "*" } }, "sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q=="], + "@pie-qti/transform-web/@sveltejs/vite-plugin-svelte/@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@5.0.2", "", { "dependencies": { "obug": "^2.1.0" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0", "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig=="], "read-yaml-file/js-yaml/argparse": ["argparse@1.0.10", "", { "dependencies": { "sprintf-js": "~1.0.2" } }, "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg=="], diff --git a/packages/default-components/src/plugins/graphic-gap-match/GraphicGapMatchInteraction.svelte b/packages/default-components/src/plugins/graphic-gap-match/GraphicGapMatchInteraction.svelte index 29901c4..1358f19 100644 --- a/packages/default-components/src/plugins/graphic-gap-match/GraphicGapMatchInteraction.svelte +++ b/packages/default-components/src/plugins/graphic-gap-match/GraphicGapMatchInteraction.svelte @@ -40,9 +40,31 @@ let hoveredHotspotId = $state(null); let keyboardSelectedTextId = $state(null); // Gap text selected via keyboard let announceText = $state(''); // For screen reader announcements +// Get reference to the root element for event dispatching (needed for Shadow DOM) +let rootElement: HTMLDivElement | undefined = $state(); + +// Track if we're updating from internal change (user drag) vs external (prop update) +let isInternalUpdate = false; + +$effect(() => { + // Sync with parent response changes (only if not an internal update) + if (!isInternalUpdate) { + const newPairs = Array.isArray(parsedResponse) ? [...parsedResponse] : []; + console.log('[GraphicGapMatch] Syncing pairs from response:', { parsedResponse, newPairs, parsedInteraction: parsedInteraction?.responseId }); + pairs = newPairs; + } + isInternalUpdate = false; // Reset flag +}); + +// Debug: Log when component mounts/updates $effect(() => { - // Sync with parent response changes - pairs = Array.isArray(parsedResponse) ? [...parsedResponse] : []; + console.log('[GraphicGapMatch] Component state:', { + hasInteraction: !!parsedInteraction, + responseId: parsedInteraction?.responseId, + response: parsedResponse, + pairs, + disabled + }); }); // Get the hotspot matched to a gap text @@ -80,7 +102,11 @@ function isCorrectHotspot(hotspotId: string): boolean { } function handleDragStart(gapTextId: string) { - if (disabled) return; + if (disabled) { + console.log('[GraphicGapMatch] Drag start blocked - disabled'); + return; + } + console.log('[GraphicGapMatch] Drag start:', gapTextId); draggedTextId = gapTextId; } @@ -100,7 +126,7 @@ function handleHotspotDragLeave() { } function handleHotspotDrop(event: DragEvent, hotspotId: string) { - if (disabled || !draggedTextId) return; + if (disabled || !draggedTextId || !parsedInteraction) return; event.preventDefault(); // Remove any existing pair for this gapText @@ -112,21 +138,18 @@ function handleHotspotDrop(event: DragEvent, hotspotId: string) { // Add new pair newPairs.push(`${draggedTextId} ${hotspotId}`); + isInternalUpdate = true; // Mark as internal update to prevent sync effect from overwriting pairs = newPairs; response = pairs; // Call onChange callback if provided (for Svelte component usage) onChange?.(pairs); - // Dispatch custom event for web component usage - const event2 = new CustomEvent('qti-change', { - detail: { - responseId: parsedInteraction?.responseId, - value: pairs, - timestamp: Date.now(), - }, - bubbles: true, - composed: true, - }); - dispatchEvent(event2); + // Dispatch custom event for web component usage - dispatch from rootElement to ensure it bubbles out of Shadow DOM + const valueArray = Array.isArray(pairs) ? [...pairs] : []; + if (rootElement) { + const event2 = createQtiChangeEvent(parsedInteraction.responseId, valueArray); + console.log('[GraphicGapMatch] Dispatching qti-change:', { responseId: parsedInteraction.responseId, value: valueArray, pairsLength: valueArray.length }); + rootElement.dispatchEvent(event2); + } draggedTextId = null; hoveredHotspotId = null; @@ -138,21 +161,18 @@ function clearMatch(gapTextId: string) { const gapTextName = gapTextObj?.text || 'Label'; const newPairs = pairs.filter((p) => !p.startsWith(`${gapTextId} `)); + isInternalUpdate = true; // Mark as internal update pairs = newPairs; response = pairs; // Call onChange callback if provided (for Svelte component usage) onChange?.(pairs); - // Dispatch custom event for web component usage - const event = new CustomEvent('qti-change', { - detail: { - responseId: parsedInteraction?.responseId, - value: pairs, - timestamp: Date.now(), - }, - bubbles: true, - composed: true, - }); - dispatchEvent(event); + // Dispatch custom event for web component usage - dispatch from rootElement to ensure it bubbles out of Shadow DOM + const valueArray = Array.isArray(pairs) ? [...pairs] : []; + if (rootElement) { + const event = createQtiChangeEvent(parsedInteraction.responseId, valueArray); + console.log('[GraphicGapMatch] Dispatching qti-change (clearMatch):', { responseId: parsedInteraction.responseId, value: valueArray }); + rootElement.dispatchEvent(event); + } announceText = `${gapTextName} removed from hotspot`; } @@ -213,21 +233,18 @@ function placeSelectedLabelOnHotspot(hotspotId: string) { newPairs = newPairs.filter((p) => !p.endsWith(` ${hotspotId}`)); newPairs.push(`${keyboardSelectedTextId} ${hotspotId}`); + isInternalUpdate = true; // Mark as internal update pairs = newPairs; response = pairs; // Call onChange callback if provided (for Svelte component usage) onChange?.(pairs); - // Dispatch custom event for web component usage - const event2 = new CustomEvent('qti-change', { - detail: { - responseId: parsedInteraction?.responseId, - value: pairs, - timestamp: Date.now(), - }, - bubbles: true, - composed: true, - }); - dispatchEvent(event2); + // Dispatch custom event for web component usage - dispatch from rootElement to ensure it bubbles out of Shadow DOM + const valueArray = Array.isArray(pairs) ? [...pairs] : []; + if (rootElement) { + const event2 = createQtiChangeEvent(parsedInteraction.responseId, valueArray); + console.log('[GraphicGapMatch] Dispatching qti-change (keyboard):', { responseId: parsedInteraction.responseId, value: valueArray, length: valueArray.length }); + rootElement.dispatchEvent(event2); + } announceText = `${gapTextName} placed on hotspot ${hotspotIndex + 1}`; keyboardSelectedTextId = null; @@ -260,7 +277,7 @@ function parseCoords(hotspot: { identifier: string; shape: string; coords: strin -
+
{#if !parsedInteraction}
{i18n?.t('common.errorNoData', 'No interaction data provided')}
{:else} diff --git a/packages/example/src/routes/item-demo/[sample]/+page.svelte b/packages/example/src/routes/item-demo/[sample]/+page.svelte index 410b502..db82d07 100644 --- a/packages/example/src/routes/item-demo/[sample]/+page.svelte +++ b/packages/example/src/routes/item-demo/[sample]/+page.svelte @@ -113,10 +113,12 @@ } function handleResponseChange(responseId: string, value: any) { - console.log('[Demo] Response changed:', { responseId, value }); + console.log('[Demo] Response changed:', { responseId, value, valueType: typeof value, isArray: Array.isArray(value), arrayLength: Array.isArray(value) ? value.length : 'N/A' }); responses = { ...responses, [responseId]: value }; console.log('[Demo] All responses:', responses); if (player) { + const validation = player.validateResponses(responses); + console.log('[Demo] Validation result:', validation); const canSubmit = player.canSubmitResponses(responses); console.log('[Demo] Can submit:', canSubmit); } diff --git a/packages/item-player/src/components/ItemBody.svelte b/packages/item-player/src/components/ItemBody.svelte index b0e58eb..b16abd7 100644 --- a/packages/item-player/src/components/ItemBody.svelte +++ b/packages/item-player/src/components/ItemBody.svelte @@ -181,6 +181,7 @@ // Handle qti:change events from web components function handleQtiChange(event: CustomEvent) { + console.log('[ItemBody] Received qti-change event:', event.detail); const { responseId, value } = event.detail; handleResponseChange(responseId, value); } @@ -190,10 +191,15 @@ let rootEl: HTMLDivElement | null = $state(null); $effect(() => { if (!rootEl) return; - const handler = (e: Event) => handleQtiChange(e as CustomEvent); + const handler = (e: Event) => { + console.log('[ItemBody] Event listener triggered:', e.type, e.target, (e as CustomEvent).detail); + handleQtiChange(e as CustomEvent); + }; const el = rootEl; // Capture reference for cleanup + console.log('[ItemBody] Adding qti-change listener to rootEl'); el.addEventListener('qti-change', handler as EventListener); return () => { + console.log('[ItemBody] Removing qti-change listener from rootEl'); el.removeEventListener('qti-change', handler as EventListener); }; }); From 7ad0fb8dc03c6482c70d7eed90e0bb8aea6fcb47 Mon Sep 17 00:00:00 2001 From: mjhayren Date: Tue, 3 Feb 2026 13:52:46 -0600 Subject: [PATCH 02/15] shaped up items selected value and results rollup Found an issue in the hottext inteaction - multiple selections item type. Changed the value of 0/3 to 0/4 being theres 4 options in total to select Also fixed the results rollup for all items so that when you test it out, it increases number of attempts, whether it was completed or not --- .../src/plugins/hottext/HottextInteraction.svelte | 2 +- packages/item-player/src/core/Player.ts | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/default-components/src/plugins/hottext/HottextInteraction.svelte b/packages/default-components/src/plugins/hottext/HottextInteraction.svelte index cbe1c22..499e377 100644 --- a/packages/default-components/src/plugins/hottext/HottextInteraction.svelte +++ b/packages/default-components/src/plugins/hottext/HottextInteraction.svelte @@ -218,7 +218,7 @@
Selected: - {selectedIds.length} / {parsedInteraction.maxChoices} + {selectedIds.length} / {parsedInteraction.hottextChoices.length}
{#if selectedIds.length > 0} diff --git a/packages/item-player/src/core/Player.ts b/packages/item-player/src/core/Player.ts index dd808e2..423b0e4 100644 --- a/packages/item-player/src/core/Player.ts +++ b/packages/item-player/src/core/Player.ts @@ -206,10 +206,21 @@ export class Player { } } + // Execute outcome processing if present (runs after responseProcessing) this.execOutcomeProcessingProgram(); + // For non-adaptive items, update completionStatus and numAttempts after processing + if (!this.isAdaptive()) { + // Set completionStatus to 'completed' for non-adaptive items (single submission) + this.ctx.setValue('completionStatus', qtiValue('identifier', 'single', 'completed')); + // Increment numAttempts for non-adaptive items (tracks total submissions, including retries) + const currentAttempts = this.getNumAttempts(); + this.ctx.setValue('numAttempts', qtiValue('integer', 'single', currentAttempts + 1)); + } + const outcomes = this.collectOutcomes(); + const score = Number(outcomes.SCORE ?? 0); const maxScore = Number(outcomes.MAXSCORE ?? 1); const completionStatus = (outcomes.completionStatus as CompletionStatus | undefined) ?? 'not_attempted'; From 13a62b69ac3702d9b369cdfe116347fed1feecd0 Mon Sep 17 00:00:00 2001 From: mjhayren Date: Wed, 4 Feb 2026 08:40:49 -0600 Subject: [PATCH 03/15] Drawing Interaction complete, all Multilingual items working All multilingual items working, debugging still in place. This is good for a PR, moving on to the "Other Items" --- bun.lock | 5 + .../shared/components/DrawingCanvas.svelte | 14 ++- packages/example/package.json | 1 + .../example/src/lib/drawing-image-cache.ts | 51 ++++++++++ packages/example/src/lib/drawing-scoring.ts | 98 +++++++++++++++++++ .../src/lib/sample-items-i18n/en-US.ts | 28 +++++- packages/example/src/lib/sample-items.ts | 28 +++++- .../routes/item-demo/[sample]/+page.svelte | 7 ++ packages/item-player/src/core/Player.ts | 15 +++ 9 files changed, 243 insertions(+), 4 deletions(-) create mode 100644 packages/example/src/lib/drawing-image-cache.ts create mode 100644 packages/example/src/lib/drawing-scoring.ts diff --git a/bun.lock b/bun.lock index ccab375..f12c6d7 100644 --- a/bun.lock +++ b/bun.lock @@ -175,6 +175,7 @@ "@pie-qti/logger": "workspace:*", "@pie-qti/player-elements": "workspace:*", "@pie-qti/qti-common": "workspace:*", + "@pie-qti/qti-processing": "workspace:*", "@pie-qti/typeset-katex": "workspace:*", "@pie-qti/web-component-loaders": "workspace:*", "@tiptap/core": "^3.14.0", @@ -1888,6 +1889,8 @@ "zimmerframe": ["zimmerframe@1.1.4", "", {}, "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ=="], + "@acme/likert-scale-plugin/@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="], + "@aws-crypto/sha1-browser/@smithy/util-utf8": ["@smithy/util-utf8@2.3.0", "", { "dependencies": { "@smithy/util-buffer-from": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A=="], "@aws-crypto/sha256-browser/@smithy/util-utf8": ["@smithy/util-utf8@2.3.0", "", { "dependencies": { "@smithy/util-buffer-from": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A=="], @@ -2000,6 +2003,8 @@ "unzipper/fs-extra": ["fs-extra@11.3.3", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg=="], + "@acme/likert-scale-plugin/@types/bun/bun-types": ["bun-types@1.3.8", "", { "dependencies": { "@types/node": "*" } }, "sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q=="], + "@aws-crypto/sha1-browser/@smithy/util-utf8/@smithy/util-buffer-from": ["@smithy/util-buffer-from@2.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA=="], "@aws-crypto/sha256-browser/@smithy/util-utf8/@smithy/util-buffer-from": ["@smithy/util-buffer-from@2.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA=="], diff --git a/packages/default-components/src/shared/components/DrawingCanvas.svelte b/packages/default-components/src/shared/components/DrawingCanvas.svelte index e467cae..904b641 100644 --- a/packages/default-components/src/shared/components/DrawingCanvas.svelte +++ b/packages/default-components/src/shared/components/DrawingCanvas.svelte @@ -139,8 +139,20 @@ } function commitValue() { - if (!canvasEl) return; + if (!canvasEl || !ctx) return; const dataUrl = canvasEl.toDataURL('image/png'); + + // Extract ImageData synchronously from canvas and cache it + // This allows the custom operator to access pixel data without async image loading + if (typeof window !== 'undefined' && (window as any).__drawingImageCache) { + try { + const imageData = ctx.getImageData(0, 0, canvasEl.width, canvasEl.height); + (window as any).__drawingImageCache.cacheImageData(dataUrl, imageData); + } catch (e) { + console.warn('[DrawingCanvas] Failed to cache image data:', e); + } + } + const size = dataUrlSize(dataUrl); const response: QTIFileResponse = { name: `drawing-${responseId}.png`, diff --git a/packages/example/package.json b/packages/example/package.json index 06ec0ab..697d8c7 100644 --- a/packages/example/package.json +++ b/packages/example/package.json @@ -28,6 +28,7 @@ "@pie-qti/item-player": "workspace:*", "@pie-qti/player-elements": "workspace:*", "@pie-qti/qti-common": "workspace:*", + "@pie-qti/qti-processing": "workspace:*", "@pie-qti/typeset-katex": "workspace:*", "@pie-qti/web-component-loaders": "workspace:*", "@tiptap/core": "^3.14.0", diff --git a/packages/example/src/lib/drawing-image-cache.ts b/packages/example/src/lib/drawing-image-cache.ts new file mode 100644 index 0000000..f1b2520 --- /dev/null +++ b/packages/example/src/lib/drawing-image-cache.ts @@ -0,0 +1,51 @@ +/** + * Cache for decoded drawing image data + * + * This cache stores ImageData extracted directly from canvas elements. + * The data is cached by dataUrl so the custom operator can access it synchronously. + */ + +export interface CachedImageData { + data: Uint8ClampedArray; + width: number; + height: number; +} + +const imageDataCache = new Map(); + +/** + * Store ImageData for a given dataUrl + */ +export function cacheImageData(dataUrl: string, imageData: ImageData): void { + imageDataCache.set(dataUrl, { + data: imageData.data, + width: imageData.width, + height: imageData.height, + }); +} + +/** + * Retrieve cached ImageData for a given dataUrl + */ +export function getCachedImageData(dataUrl: string): CachedImageData | null { + return imageDataCache.get(dataUrl) || null; +} + +/** + * Clear the cache (useful for testing or cleanup) + */ +export function clearImageDataCache(): void { + imageDataCache.clear(); +} + +/** + * Expose cache on window for DrawingCanvas component to access + * This allows the default-components package to cache image data without direct dependency + */ +if (typeof window !== 'undefined') { + (window as any).__drawingImageCache = { + cacheImageData, + getCachedImageData, + clearImageDataCache, + }; +} diff --git a/packages/example/src/lib/drawing-scoring.ts b/packages/example/src/lib/drawing-scoring.ts new file mode 100644 index 0000000..5cdc407 --- /dev/null +++ b/packages/example/src/lib/drawing-scoring.ts @@ -0,0 +1,98 @@ +/** + * Custom QTI operator for drawing interaction scoring + * + * Checks if a drawing contains at least some drawn content (non-white pixels) + */ + +import type { QtiValue } from '@pie-qti/qti-processing'; +import { qtiValue } from '@pie-qti/qti-processing'; +import { getCachedImageData } from './drawing-image-cache.js'; + +/** + * Custom operator: drawing.hasLine + * + * Returns 1.0 if the drawing contains at least 50 non-white/non-transparent pixels, + * otherwise returns 0.0 + */ +export function hasLineOperator(args: QtiValue[], meta: { class?: string; definition?: string }): QtiValue { + if (args.length === 0) { + return qtiValue('float', 'single', 0.0); + } + + const response = args[0]; + + console.log('[Drawing Scoring] Response received:', JSON.stringify(response, null, 2)); + console.log('[Drawing Scoring] Response kind:', response.kind); + console.log('[Drawing Scoring] Response baseType:', response.baseType); + console.log('[Drawing Scoring] Response value:', response.value); + console.log('[Drawing Scoring] Response value type:', typeof response.value); + + // Extract dataUrl from response + let dataUrl: string | null = null; + + if (response.kind === 'value' && response.baseType === 'file') { + const value = response.value; + console.log('[Drawing Scoring] Processing file value:', value); + + if (value && typeof value === 'object') { + // Check if it's a QTIFileResponse object + if ('dataUrl' in value) { + dataUrl = (value as any).dataUrl; + console.log('[Drawing Scoring] Found dataUrl in object:', dataUrl?.substring(0, 50) + '...'); + } else { + // Try to stringify and parse if it's a Proxy or similar + try { + const stringified = JSON.stringify(value); + const parsed = JSON.parse(stringified); + if (parsed && typeof parsed === 'object' && 'dataUrl' in parsed) { + dataUrl = parsed.dataUrl; + console.log('[Drawing Scoring] Found dataUrl after stringify/parse'); + } + } catch (e) { + console.log('[Drawing Scoring] Failed to stringify value:', e); + } + } + } else if (typeof value === 'string' && value.startsWith('data:')) { + dataUrl = value; + console.log('[Drawing Scoring] Found dataUrl as string'); + } + } + + if (!dataUrl) { + console.log('[Drawing Scoring] No dataUrl found in response. Full response:', response); + return qtiValue('float', 'single', 0.0); + } + + // Get cached ImageData (extracted synchronously from canvas) + const cached = getCachedImageData(dataUrl); + if (!cached) { + console.log('[Drawing Scoring] No cached image data found for dataUrl'); + return qtiValue('float', 'single', 0.0); + } + + // Check for non-white pixels + const { data, width, height } = cached; + const totalPixels = width * height; + let nonWhitePixels = 0; + const threshold = 50; // Minimum number of non-white pixels to consider a line drawn + + // Check each pixel (RGBA format: 4 bytes per pixel) + for (let i = 0; i < data.length; i += 4) { + const r = data[i]; + const g = data[i + 1]; + const b = data[i + 2]; + const a = data[i + 3]; + + // Consider pixel non-white if: + // - Alpha is significant (> 10) + // - AND color is not white/very light (any channel < 240) + if (a > 10 && (r < 240 || g < 240 || b < 240)) { + nonWhitePixels++; + } + } + + console.log(`[Drawing Scoring] Found ${nonWhitePixels} non-white pixels out of ${totalPixels} total`); + + const hasLine = nonWhitePixels >= threshold; + return qtiValue('float', 'single', hasLine ? 1.0 : 0.0); +} diff --git a/packages/example/src/lib/sample-items-i18n/en-US.ts b/packages/example/src/lib/sample-items-i18n/en-US.ts index 679797d..c59093e 100644 --- a/packages/example/src/lib/sample-items-i18n/en-US.ts +++ b/packages/example/src/lib/sample-items-i18n/en-US.ts @@ -905,7 +905,7 @@ export const ITEMS_EN_US: Record = { - 0.0 + 1.0 @@ -919,6 +919,27 @@ export const ITEMS_EN_US: Record = { + + + + + + + + + 1.0 + + + 1.0 + + + + + 0.0 + + + + `, }, 'hottext-multiple': { @@ -1002,6 +1023,11 @@ export const ITEMS_EN_US: Record = { 0 + + + 1.0 + +

Geology: Arrange the geological layers in order from bottom to top.

diff --git a/packages/example/src/lib/sample-items.ts b/packages/example/src/lib/sample-items.ts index b6839be..e222494 100644 --- a/packages/example/src/lib/sample-items.ts +++ b/packages/example/src/lib/sample-items.ts @@ -1964,7 +1964,7 @@ export const DRAWING_INTERACTION = ` - 0.0 + 1.0 @@ -1979,7 +1979,26 @@ export const DRAWING_INTERACTION = ` - + + + + + + + + 1.0 + + + 1.0 + + + + + 0.0 + + + + `; export const MEDIA_INTERACTION_AUDIO = ` @@ -2760,6 +2779,11 @@ export const GRAPHIC_ORDER_INTERACTION = ` 0 + + + 1.0 + +

Geology: Arrange the geological layers in order from bottom to top.

diff --git a/packages/example/src/routes/item-demo/[sample]/+page.svelte b/packages/example/src/routes/item-demo/[sample]/+page.svelte index db82d07..69fdc44 100644 --- a/packages/example/src/routes/item-demo/[sample]/+page.svelte +++ b/packages/example/src/routes/item-demo/[sample]/+page.svelte @@ -22,6 +22,10 @@ import * as PanelResize from './lib/panel-resize'; import { loadSessionFromServer, saveSessionToServer } from './lib/session-api'; import type { SessionData } from './lib/types'; + // Initialize drawing image cache (sets up window.__drawingImageCache) + import '$lib/drawing-image-cache'; + // Import custom operator for drawing scoring + import { hasLineOperator } from '$lib/drawing-scoring'; // Get i18n provider from context (set in root layout) const i18nContext = getContext<{ value: SvelteI18nProvider | null }>('i18n'); @@ -71,6 +75,9 @@ itemXml: xml, role: selectedRole, security: getSecurityConfig(), + customOperators: { + 'drawing.hasLine': hasLineOperator, + }, }); // Register default components with the player's registry diff --git a/packages/item-player/src/core/Player.ts b/packages/item-player/src/core/Player.ts index 423b0e4..0b1c673 100644 --- a/packages/item-player/src/core/Player.ts +++ b/packages/item-player/src/core/Player.ts @@ -1096,6 +1096,17 @@ export class Player { return raw as QtiValue; } + // For file types, preserve QTIFileResponse objects directly + if (baseType === 'file') { + if (cardinality === 'multiple' || cardinality === 'ordered') { + const arr = Array.isArray(raw) ? raw : [raw]; + // For file types, preserve objects (QTIFileResponse) directly + return qtiValue(baseType, cardinality, arr.filter((v) => v !== null && v !== undefined)); + } + // For single file, preserve the object directly + return qtiValue(baseType, cardinality, raw); + } + if (cardinality === 'multiple' || cardinality === 'ordered') { const arr = Array.isArray(raw) ? raw : [raw]; const coerced = arr @@ -1122,6 +1133,10 @@ export class Player { if (d.value.kind === 'value') out[d.identifier] = d.value.value; else if (d.value.kind === 'null') out[d.identifier] = null; } + // Ensure MAXSCORE always has a value (fallback to 1.0 if null or missing) + if (out.MAXSCORE === null || out.MAXSCORE === undefined) { + out.MAXSCORE = 1.0; + } return out; } From a63a469b13205b4ebfaa209d224dafaa532d7d7f Mon Sep 17 00:00:00 2001 From: mjhayren Date: Thu, 5 Feb 2026 08:00:43 -0600 Subject: [PATCH 04/15] updated scoring of Draw Interaction item --- .../shared/components/DrawingCanvas.svelte | 22 +++-- .../example/src/lib/drawing-image-cache.ts | 51 ----------- packages/example/src/lib/drawing-scoring.ts | 87 ++++++------------- .../routes/item-demo/[sample]/+page.svelte | 2 - packages/item-player/src/index.ts | 2 + packages/item-player/src/types/index.ts | 10 +++ .../item-player/src/utils/drawingUtils.ts | 73 ++++++++++++++++ 7 files changed, 125 insertions(+), 122 deletions(-) delete mode 100644 packages/example/src/lib/drawing-image-cache.ts create mode 100644 packages/item-player/src/utils/drawingUtils.ts diff --git a/packages/default-components/src/shared/components/DrawingCanvas.svelte b/packages/default-components/src/shared/components/DrawingCanvas.svelte index 904b641..b09a834 100644 --- a/packages/default-components/src/shared/components/DrawingCanvas.svelte +++ b/packages/default-components/src/shared/components/DrawingCanvas.svelte @@ -142,15 +142,13 @@ if (!canvasEl || !ctx) return; const dataUrl = canvasEl.toDataURL('image/png'); - // Extract ImageData synchronously from canvas and cache it - // This allows the custom operator to access pixel data without async image loading - if (typeof window !== 'undefined' && (window as any).__drawingImageCache) { - try { - const imageData = ctx.getImageData(0, 0, canvasEl.width, canvasEl.height); - (window as any).__drawingImageCache.cacheImageData(dataUrl, imageData); - } catch (e) { - console.warn('[DrawingCanvas] Failed to cache image data:', e); - } + // Extract ImageData synchronously from canvas and include it in the response + // This allows custom operators to analyze drawing content without async image loading + let canvasImageData: globalThis.ImageData | undefined; + try { + canvasImageData = ctx.getImageData(0, 0, canvasEl.width, canvasEl.height); + } catch (e) { + console.warn('[DrawingCanvas] Failed to extract image data:', e); } const size = dataUrlSize(dataUrl); @@ -160,6 +158,12 @@ size, lastModified: Date.now(), dataUrl, + // Include ImageData if available (for drawing analysis in custom operators) + imageData: canvasImageData ? { + data: canvasImageData.data, + width: canvasImageData.width, + height: canvasImageData.height, + } : undefined, }; onChange(response); announceText = translations.updated; diff --git a/packages/example/src/lib/drawing-image-cache.ts b/packages/example/src/lib/drawing-image-cache.ts deleted file mode 100644 index f1b2520..0000000 --- a/packages/example/src/lib/drawing-image-cache.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * Cache for decoded drawing image data - * - * This cache stores ImageData extracted directly from canvas elements. - * The data is cached by dataUrl so the custom operator can access it synchronously. - */ - -export interface CachedImageData { - data: Uint8ClampedArray; - width: number; - height: number; -} - -const imageDataCache = new Map(); - -/** - * Store ImageData for a given dataUrl - */ -export function cacheImageData(dataUrl: string, imageData: ImageData): void { - imageDataCache.set(dataUrl, { - data: imageData.data, - width: imageData.width, - height: imageData.height, - }); -} - -/** - * Retrieve cached ImageData for a given dataUrl - */ -export function getCachedImageData(dataUrl: string): CachedImageData | null { - return imageDataCache.get(dataUrl) || null; -} - -/** - * Clear the cache (useful for testing or cleanup) - */ -export function clearImageDataCache(): void { - imageDataCache.clear(); -} - -/** - * Expose cache on window for DrawingCanvas component to access - * This allows the default-components package to cache image data without direct dependency - */ -if (typeof window !== 'undefined') { - (window as any).__drawingImageCache = { - cacheImageData, - getCachedImageData, - clearImageDataCache, - }; -} diff --git a/packages/example/src/lib/drawing-scoring.ts b/packages/example/src/lib/drawing-scoring.ts index 5cdc407..453a46e 100644 --- a/packages/example/src/lib/drawing-scoring.ts +++ b/packages/example/src/lib/drawing-scoring.ts @@ -2,17 +2,24 @@ * Custom QTI operator for drawing interaction scoring * * Checks if a drawing contains at least some drawn content (non-white pixels) + * + * This operator uses the imageData property from QTIFileResponse, which is + * extracted synchronously from the canvas when the drawing is committed. */ import type { QtiValue } from '@pie-qti/qti-processing'; import { qtiValue } from '@pie-qti/qti-processing'; -import { getCachedImageData } from './drawing-image-cache.js'; +import type { QTIFileResponse } from '@pie-qti/item-player'; +import { analyzeDrawing } from '@pie-qti/item-player'; /** * Custom operator: drawing.hasLine * * Returns 1.0 if the drawing contains at least 50 non-white/non-transparent pixels, * otherwise returns 0.0 + * + * The operator reads imageData directly from the QTIFileResponse object, + * which is included when DrawingCanvas commits a drawing. */ export function hasLineOperator(args: QtiValue[], meta: { class?: string; definition?: string }): QtiValue { if (args.length === 0) { @@ -21,78 +28,38 @@ export function hasLineOperator(args: QtiValue[], meta: { class?: string; defini const response = args[0]; - console.log('[Drawing Scoring] Response received:', JSON.stringify(response, null, 2)); - console.log('[Drawing Scoring] Response kind:', response.kind); - console.log('[Drawing Scoring] Response baseType:', response.baseType); - console.log('[Drawing Scoring] Response value:', response.value); - console.log('[Drawing Scoring] Response value type:', typeof response.value); - - // Extract dataUrl from response - let dataUrl: string | null = null; + // Extract QTIFileResponse from QtiValue + let fileResponse: QTIFileResponse | null = null; if (response.kind === 'value' && response.baseType === 'file') { const value = response.value; - console.log('[Drawing Scoring] Processing file value:', value); - if (value && typeof value === 'object') { - // Check if it's a QTIFileResponse object - if ('dataUrl' in value) { - dataUrl = (value as any).dataUrl; - console.log('[Drawing Scoring] Found dataUrl in object:', dataUrl?.substring(0, 50) + '...'); - } else { - // Try to stringify and parse if it's a Proxy or similar - try { - const stringified = JSON.stringify(value); - const parsed = JSON.parse(stringified); - if (parsed && typeof parsed === 'object' && 'dataUrl' in parsed) { - dataUrl = parsed.dataUrl; - console.log('[Drawing Scoring] Found dataUrl after stringify/parse'); - } - } catch (e) { - console.log('[Drawing Scoring] Failed to stringify value:', e); + // Handle QTIFileResponse object (preserved by Player.coerceToDeclarationValue) + if (value && typeof value === 'object' && 'dataUrl' in value) { + fileResponse = value as QTIFileResponse; + } else { + // Try to parse if it's been stringified + try { + const stringified = JSON.stringify(value); + const parsed = JSON.parse(stringified); + if (parsed && typeof parsed === 'object' && 'dataUrl' in parsed) { + fileResponse = parsed as QTIFileResponse; } + } catch (e) { + // Value is not a valid file response } - } else if (typeof value === 'string' && value.startsWith('data:')) { - dataUrl = value; - console.log('[Drawing Scoring] Found dataUrl as string'); } } - if (!dataUrl) { - console.log('[Drawing Scoring] No dataUrl found in response. Full response:', response); - return qtiValue('float', 'single', 0.0); - } - - // Get cached ImageData (extracted synchronously from canvas) - const cached = getCachedImageData(dataUrl); - if (!cached) { - console.log('[Drawing Scoring] No cached image data found for dataUrl'); + if (!fileResponse) { + console.log('[Drawing Scoring] No valid file response found'); return qtiValue('float', 'single', 0.0); } - // Check for non-white pixels - const { data, width, height } = cached; - const totalPixels = width * height; - let nonWhitePixels = 0; - const threshold = 50; // Minimum number of non-white pixels to consider a line drawn - - // Check each pixel (RGBA format: 4 bytes per pixel) - for (let i = 0; i < data.length; i += 4) { - const r = data[i]; - const g = data[i + 1]; - const b = data[i + 2]; - const a = data[i + 3]; - - // Consider pixel non-white if: - // - Alpha is significant (> 10) - // - AND color is not white/very light (any channel < 240) - if (a > 10 && (r < 240 || g < 240 || b < 240)) { - nonWhitePixels++; - } - } + // Use library utility to analyze drawing + const hasLine = analyzeDrawing(fileResponse, 50); - console.log(`[Drawing Scoring] Found ${nonWhitePixels} non-white pixels out of ${totalPixels} total`); + console.log(`[Drawing Scoring] Drawing analysis result: ${hasLine ? 'has line' : 'no line'}`); - const hasLine = nonWhitePixels >= threshold; return qtiValue('float', 'single', hasLine ? 1.0 : 0.0); } diff --git a/packages/example/src/routes/item-demo/[sample]/+page.svelte b/packages/example/src/routes/item-demo/[sample]/+page.svelte index 69fdc44..c31d31e 100644 --- a/packages/example/src/routes/item-demo/[sample]/+page.svelte +++ b/packages/example/src/routes/item-demo/[sample]/+page.svelte @@ -22,8 +22,6 @@ import * as PanelResize from './lib/panel-resize'; import { loadSessionFromServer, saveSessionToServer } from './lib/session-api'; import type { SessionData } from './lib/types'; - // Initialize drawing image cache (sets up window.__drawingImageCache) - import '$lib/drawing-image-cache'; // Import custom operator for drawing scoring import { hasLineOperator } from '$lib/drawing-scoring'; diff --git a/packages/item-player/src/index.ts b/packages/item-player/src/index.ts index 29a0dad..6af03fa 100644 --- a/packages/item-player/src/index.ts +++ b/packages/item-player/src/index.ts @@ -13,6 +13,8 @@ export { } from './core/ComponentRegistry.js'; export * from './core/constants.js'; export * from './core/declarations.js'; +// Export drawing utilities +export * from './utils/drawingUtils.js'; // Export ItemRenderer for framework-agnostic rendering export { createItemRenderer, diff --git a/packages/item-player/src/types/index.ts b/packages/item-player/src/types/index.ts index 909d23b..e7af37a 100644 --- a/packages/item-player/src/types/index.ts +++ b/packages/item-player/src/types/index.ts @@ -89,6 +89,16 @@ export interface QTIFileResponse { lastModified: number; /** Base64 data URL, e.g. data:application/pdf;base64,... */ dataUrl: string; + /** + * Optional ImageData extracted from canvas (for drawing interactions). + * This allows custom operators to analyze drawing content synchronously + * without needing to decode the dataUrl asynchronously. + */ + imageData?: { + data: Uint8ClampedArray; + width: number; + height: number; + }; } export interface ModalFeedback { diff --git a/packages/item-player/src/utils/drawingUtils.ts b/packages/item-player/src/utils/drawingUtils.ts new file mode 100644 index 0000000..381ebc6 --- /dev/null +++ b/packages/item-player/src/utils/drawingUtils.ts @@ -0,0 +1,73 @@ +/** + * Drawing analysis utilities for QTI drawing interactions + * + * These utilities help analyze drawing content for scoring purposes. + * They work with ImageData extracted from canvas elements. + */ + +import type { QTIFileResponse } from '../types/index.js'; + +/** + * Check if a drawing contains at least some drawn content (non-white pixels) + * + * @param imageData - ImageData from canvas (RGBA format, 4 bytes per pixel) + * @param threshold - Minimum number of non-white pixels to consider a line drawn (default: 50) + * @returns true if the drawing contains at least threshold non-white pixels + */ +export function hasLine( + imageData: { data: Uint8ClampedArray; width: number; height: number }, + threshold: number = 50 +): boolean { + const { data } = imageData; + let nonWhitePixels = 0; + + // Check each pixel (RGBA format: 4 bytes per pixel) + for (let i = 0; i < data.length; i += 4) { + const r = data[i]; + const g = data[i + 1]; + const b = data[i + 2]; + const a = data[i + 3]; + + // Consider pixel non-white if: + // - Alpha is significant (> 10) + // - AND color is not white/very light (any channel < 240) + if (a > 10 && (r < 240 || g < 240 || b < 240)) { + nonWhitePixels++; + } + } + + return nonWhitePixels >= threshold; +} + +/** + * Get ImageData from a QTIFileResponse if available + * + * @param fileResponse - QTIFileResponse object (may contain imageData) + * @returns ImageData if available, null otherwise + */ +export function getImageDataFromResponse( + fileResponse: QTIFileResponse | null | undefined +): { data: Uint8ClampedArray; width: number; height: number } | null { + if (!fileResponse?.imageData) { + return null; + } + return fileResponse.imageData; +} + +/** + * Analyze a drawing response to determine if it contains drawn content + * + * @param fileResponse - QTIFileResponse from drawing interaction + * @param threshold - Minimum number of non-white pixels (default: 50) + * @returns true if drawing contains content, false otherwise + */ +export function analyzeDrawing( + fileResponse: QTIFileResponse | null | undefined, + threshold: number = 50 +): boolean { + const imageData = getImageDataFromResponse(fileResponse); + if (!imageData) { + return false; + } + return hasLine(imageData, threshold); +} From c980e1ce5a6a337625e2583cfb879e351d9b5675 Mon Sep 17 00:00:00 2001 From: mjhayren Date: Mon, 9 Feb 2026 09:28:27 -0600 Subject: [PATCH 05/15] fixed media Interaction - audio counts --- .../src/plugins/media/MediaInteraction.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/default-components/src/plugins/media/MediaInteraction.svelte b/packages/default-components/src/plugins/media/MediaInteraction.svelte index 0c5f5f9..3bae200 100644 --- a/packages/default-components/src/plugins/media/MediaInteraction.svelte +++ b/packages/default-components/src/plugins/media/MediaInteraction.svelte @@ -154,10 +154,10 @@
{/if} - {#if parsedInteraction.maxPlays > 0} + {#if parsedInteraction.minPlays > 0 && !hasMetMinPlays}
Remaining: - {Math.max(0, parsedInteraction.maxPlays - playCount)} + {Math.max(0, parsedInteraction.minPlays - playCount)}
{/if}
From bd3cc089ffb3866bfb679dbc8c7ba064ac5bd4c0 Mon Sep 17 00:00:00 2001 From: mjhayren Date: Fri, 13 Feb 2026 09:59:07 -0600 Subject: [PATCH 06/15] all test items working, commit prior to refactor --- bun.lock | 12 ++-- .../gap-match/GapMatchInteraction.svelte | 35 +++++++--- .../CustomInteractionFallback.svelte | 2 +- .../shared/components/MatchDragDrop.svelte | 47 +++++++------- .../src/shared/utils/pairHelpers.ts | 41 +++++++++--- .../src/lib/sample-items-edge-cases.ts | 14 ++-- packages/example/src/lib/sample-items.ts | 12 +++- .../routes/item-demo/[sample]/+page.svelte | 65 +++++++++++++++++-- .../[sample]/components/QuestionPanel.svelte | 9 ++- packages/i18n/src/locales/en-US.ts | 2 +- packages/item-player/src/core/Player.ts | 10 +++ 11 files changed, 180 insertions(+), 69 deletions(-) diff --git a/bun.lock b/bun.lock index f12c6d7..02fc03f 100644 --- a/bun.lock +++ b/bun.lock @@ -1889,7 +1889,7 @@ "zimmerframe": ["zimmerframe@1.1.4", "", {}, "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ=="], - "@acme/likert-scale-plugin/@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="], + "@acme/likert-scale-plugin/@types/bun": ["@types/bun@1.3.9", "", { "dependencies": { "bun-types": "1.3.9" } }, "sha512-KQ571yULOdWJiMH+RIWIOZ7B2RXQGpL1YQrBtLIV3FqDcCu6FsbFUBwhdKUlCKUpS3PJDsHlJ1QKlpxoVR+xtw=="], "@aws-crypto/sha1-browser/@smithy/util-utf8": ["@smithy/util-utf8@2.3.0", "", { "dependencies": { "@smithy/util-buffer-from": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A=="], @@ -1953,13 +1953,13 @@ "@pie-qti/example/@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@6.2.4", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "deepmerge": "^4.3.1", "magic-string": "^0.30.21", "obug": "^2.1.0", "vitefu": "^1.1.1" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA=="], - "@pie-qti/i18n/@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="], + "@pie-qti/i18n/@types/bun": ["@types/bun@1.3.9", "", { "dependencies": { "bun-types": "1.3.9" } }, "sha512-KQ571yULOdWJiMH+RIWIOZ7B2RXQGpL1YQrBtLIV3FqDcCu6FsbFUBwhdKUlCKUpS3PJDsHlJ1QKlpxoVR+xtw=="], "@pie-qti/item-player/node-html-parser": ["node-html-parser@7.0.2", "", { "dependencies": { "css-select": "^5.1.0", "he": "1.2.0" } }, "sha512-DxodLVh7a6JMkYzWyc8nBX9MaF4M0lLFYkJHlWOiu7+9/I6mwNK9u5TbAMC7qfqDJEPX9OIoWA2A9t4C2l1mUQ=="], "@pie-qti/player-elements/@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@6.2.4", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "deepmerge": "^4.3.1", "magic-string": "^0.30.21", "obug": "^2.1.0", "vitefu": "^1.1.1" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA=="], - "@pie-qti/qti-common/@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="], + "@pie-qti/qti-common/@types/bun": ["@types/bun@1.3.9", "", { "dependencies": { "bun-types": "1.3.9" } }, "sha512-KQ571yULOdWJiMH+RIWIOZ7B2RXQGpL1YQrBtLIV3FqDcCu6FsbFUBwhdKUlCKUpS3PJDsHlJ1QKlpxoVR+xtw=="], "@pie-qti/test-utils/node-html-parser": ["node-html-parser@7.0.2", "", { "dependencies": { "css-select": "^5.1.0", "he": "1.2.0" } }, "sha512-DxodLVh7a6JMkYzWyc8nBX9MaF4M0lLFYkJHlWOiu7+9/I6mwNK9u5TbAMC7qfqDJEPX9OIoWA2A9t4C2l1mUQ=="], @@ -2003,7 +2003,7 @@ "unzipper/fs-extra": ["fs-extra@11.3.3", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg=="], - "@acme/likert-scale-plugin/@types/bun/bun-types": ["bun-types@1.3.8", "", { "dependencies": { "@types/node": "*" } }, "sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q=="], + "@acme/likert-scale-plugin/@types/bun/bun-types": ["bun-types@1.3.9", "", { "dependencies": { "@types/node": "*" } }, "sha512-+UBWWOakIP4Tswh0Bt0QD0alpTY8cb5hvgiYeWCMet9YukHbzuruIEeXC2D7nMJPB12kbh8C7XJykSexEqGKJg=="], "@aws-crypto/sha1-browser/@smithy/util-utf8/@smithy/util-buffer-from": ["@smithy/util-buffer-from@2.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA=="], @@ -2057,11 +2057,11 @@ "@pie-qti/example/@sveltejs/vite-plugin-svelte/@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@5.0.2", "", { "dependencies": { "obug": "^2.1.0" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0", "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig=="], - "@pie-qti/i18n/@types/bun/bun-types": ["bun-types@1.3.8", "", { "dependencies": { "@types/node": "*" } }, "sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q=="], + "@pie-qti/i18n/@types/bun/bun-types": ["bun-types@1.3.9", "", { "dependencies": { "@types/node": "*" } }, "sha512-+UBWWOakIP4Tswh0Bt0QD0alpTY8cb5hvgiYeWCMet9YukHbzuruIEeXC2D7nMJPB12kbh8C7XJykSexEqGKJg=="], "@pie-qti/player-elements/@sveltejs/vite-plugin-svelte/@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@5.0.2", "", { "dependencies": { "obug": "^2.1.0" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0", "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig=="], - "@pie-qti/qti-common/@types/bun/bun-types": ["bun-types@1.3.8", "", { "dependencies": { "@types/node": "*" } }, "sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q=="], + "@pie-qti/qti-common/@types/bun/bun-types": ["bun-types@1.3.9", "", { "dependencies": { "@types/node": "*" } }, "sha512-+UBWWOakIP4Tswh0Bt0QD0alpTY8cb5hvgiYeWCMet9YukHbzuruIEeXC2D7nMJPB12kbh8C7XJykSexEqGKJg=="], "@pie-qti/transform-web/@sveltejs/vite-plugin-svelte/@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@5.0.2", "", { "dependencies": { "obug": "^2.1.0" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0", "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig=="], diff --git a/packages/default-components/src/plugins/gap-match/GapMatchInteraction.svelte b/packages/default-components/src/plugins/gap-match/GapMatchInteraction.svelte index 76c9fa6..dcfa28f 100644 --- a/packages/default-components/src/plugins/gap-match/GapMatchInteraction.svelte +++ b/packages/default-components/src/plugins/gap-match/GapMatchInteraction.svelte @@ -37,29 +37,44 @@ // Track cleanup functions for event listeners to prevent memory leaks let cleanupFunctions: (() => void)[] = []; - function handleGapChange(gapId: string, wordId: string) { - // Remove any existing pair for this gap - const newPairs = pairs.filter((p: string) => !p.endsWith(` ${gapId}`)); + function getMatchMax(wordId: string): number { + const gt = parsedInteraction?.gapTexts?.find((g) => g.identifier === wordId); + return gt?.matchMax ?? 1; + } - // If this word is already used in another gap, move it (remove its previous assignment). - const withoutWord = newPairs.filter((p: string) => !p.startsWith(`${wordId} `)); + function handleGapChange(gapId: string, wordId: string) { + // Remove any existing pair for this gap (each gap holds one word) + let newPairs = pairs.filter((p: string) => !p.endsWith(` ${gapId}`)); + + // For reusable words (matchMax=0 or >1): don't remove other placements. For matchMax=1: move the word. + const matchMax = getMatchMax(wordId); + const currentCount = newPairs.filter((p: string) => p.startsWith(`${wordId} `)).length; + if (matchMax === 1 || (matchMax > 0 && currentCount >= matchMax)) { + // Single-use or at limit: remove this word from other gaps (move) + newPairs = newPairs.filter((p: string) => !p.startsWith(`${wordId} `)); + } // Add new pair if a word was selected if (wordId) { - withoutWord.push(`${wordId} ${gapId}`); + const newPair = `${wordId} ${gapId}`; + if (!newPairs.includes(newPair)) { + newPairs.push(newPair); + } } - response = withoutWord; + response = newPairs; // Call onChange callback if provided (for Svelte component usage) - onChange?.(withoutWord); + onChange?.(newPairs); // Dispatch event for web component usage - event will bubble up to the host element if (rootElement) { - rootElement.dispatchEvent(createQtiChangeEvent(parsedInteraction?.responseId, withoutWord)); + rootElement.dispatchEvent(createQtiChangeEvent(parsedInteraction?.responseId, newPairs)); } } function isWordUsed(wordId: string): boolean { - return pairs.some((p: string) => p.startsWith(wordId)); + const matchMax = parsedInteraction?.gapTexts?.find((g) => g.identifier === wordId)?.matchMax ?? 1; + const count = pairs.filter((p: string) => p.startsWith(`${wordId} `)).length; + return matchMax > 0 ? count >= matchMax : false; // matchMax=0 means unlimited, never "used" } function getSelectedWord(gapId: string): string { diff --git a/packages/default-components/src/shared/components/CustomInteractionFallback.svelte b/packages/default-components/src/shared/components/CustomInteractionFallback.svelte index 147623c..114625f 100644 --- a/packages/default-components/src/shared/components/CustomInteractionFallback.svelte +++ b/packages/default-components/src/shared/components/CustomInteractionFallback.svelte @@ -47,7 +47,7 @@
-
{i18n?.t('interactions.custom.unsupported') ?? 'Unsupported customInteraction'}
+
{i18n?.t('interactions.custom.unsupported') ?? 'Custom Interaction (Currently Unsupported)'}
This item contains a vendor-specific interaction. This player does not execute custom interactions.
diff --git a/packages/default-components/src/shared/components/MatchDragDrop.svelte b/packages/default-components/src/shared/components/MatchDragDrop.svelte index 59bbc36..c80a073 100644 --- a/packages/default-components/src/shared/components/MatchDragDrop.svelte +++ b/packages/default-components/src/shared/components/MatchDragDrop.svelte @@ -7,7 +7,7 @@ import type { AssociableChoice } from '@pie-qti/item-player'; import type { I18nProvider } from '@pie-qti/i18n'; -import { createOrUpdatePair, getSourceForTarget, getTargetForSource, removePairBySource } from '../utils/pairHelpers.js'; +import { createOrUpdatePair, getSourceForTarget, getTargetsForSource, removePairBySource } from '../utils/pairHelpers.js'; import { touchDrag } from '../utils/touchDragHelper.js'; import DragHandle from './DragHandle.svelte'; import '../styles/shared.css'; @@ -136,63 +136,64 @@ function clearMatch(sourceId: string) { {i18n?.t('interactions.match.dragFromHere') ?? 'Drag from here:'} {#each sourceSet as source (source.identifier)} - {@const matchedTarget = getTargetForSource(pairs, source.identifier)} - {@const targetItem = matchedTarget ? targetSet.find((t) => t.identifier === matchedTarget) : null} + {@const matchedTargets = getTargetsForSource(pairs, source.identifier)} + {@const targetItems = matchedTargets.map((tid) => targetSet.find((t) => t.identifier === tid)).filter(Boolean)} {@const isSelected = keyboardSelectedSourceId === source.identifier} - {@const correctTarget = getTargetForSource(correctPairs, source.identifier)} - {@const isCorrect = correctTarget !== null} + {@const correctTargets = getTargetsForSource(correctPairs, source.identifier)} + {@const isCorrect = correctTargets.length > 0} + {@const canDragMore = matchedTargets.length < (source.matchMax ?? 1)}
- {#if matchedTarget && !disabled} + {#if matchedTargets.length > 0 && !disabled}
@@ -77,14 +74,14 @@
- {i18n?.t('transform.admin.plugins.vendorExtensions', 'Vendor Extensions')} + {(i18n?.t('transform.admin.plugins.vendorExtensions') ?? 'Vendor Extensions')}
{totalExtensions}
-
{i18n?.t('transform.admin.plugins.extensionsRegistered', 'Registered')}
+
{(i18n?.t('transform.admin.plugins.extensionsRegistered') ?? 'Registered')}
-
{i18n?.t('transform.admin.plugins.storageBackend', 'Storage Backend')}
+
{(i18n?.t('transform.admin.plugins.storageBackend') ?? 'Storage Backend')}
{data.storageInfo.backend}
{data.storageInfo.type}
@@ -94,24 +91,21 @@

- {i18n?.t('transform.admin.plugins.installedPlugins', 'Installed Transform Plugins')} + {(i18n?.t('transform.admin.plugins.installedPlugins') ?? 'Installed Transform Plugins')}

- {i18n?.t( - 'transform.admin.plugins.pluginsDescription', - 'These plugins handle transformations between different formats' - )} + {(i18n?.t('transform.admin.plugins.pluginsDescription') ?? 'These plugins handle transformations between different formats')}

- - - - - + + + + + @@ -136,7 +130,7 @@ @@ -151,13 +145,10 @@

- {i18n?.t('transform.admin.plugins.vendorExtensionPoints', 'Vendor Extension Points')} + {(i18n?.t('transform.admin.plugins.vendorExtensionPoints') ?? 'Vendor Extension Points')}

- {i18n?.t( - 'transform.admin.plugins.extensionsDescription', - 'Vendor-specific extensions registered in plugins' - )} + {(i18n?.t('transform.admin.plugins.extensionsDescription') ?? 'Vendor-specific extensions registered in plugins')}

@@ -180,13 +171,10 @@

- {i18n?.t('transform.admin.plugins.availableExtensionPoints', 'Available Extension Points')} + {(i18n?.t('transform.admin.plugins.availableExtensionPoints') ?? 'Available Extension Points')}

- {i18n?.t( - 'transform.admin.plugins.configureExtensions', - 'Configure these via config.json or environment variables' - )} + {(i18n?.t('transform.admin.plugins.configureExtensions') ?? 'Configure these via config.json or environment variables')}

@@ -194,7 +182,7 @@
- {i18n?.t('transform.admin.plugins.storageBackends', 'Storage Backends')} ({data.extensionPoints.storageBackends.length} available) + {(i18n?.t('transform.admin.plugins.storageBackends') ?? 'Storage Backends')} ({data.extensionPoints.storageBackends.length} available)
@@ -203,10 +191,7 @@ {/each}

- {i18n?.t( - 'transform.admin.plugins.storageDescription', - 'Choose where to store sessions and transformed content' - )} + {(i18n?.t('transform.admin.plugins.storageDescription') ?? 'Choose where to store sessions and transformed content')}

@@ -215,7 +200,7 @@
- {i18n?.t('transform.admin.plugins.transformFormats', 'Transform Formats')} ({data.extensionPoints.transformFormats.length} supported) + {(i18n?.t('transform.admin.plugins.transformFormats') ?? 'Transform Formats')} ({data.extensionPoints.transformFormats.length} supported)
@@ -224,10 +209,7 @@ {/each}

- {i18n?.t( - 'transform.admin.plugins.formatsDescription', - 'Supported input and output formats for transformations' - )} + {(i18n?.t('transform.admin.plugins.formatsDescription') ?? 'Supported input and output formats for transformations')}

@@ -236,7 +218,7 @@
- {i18n?.t('transform.admin.plugins.vendorExtensionTypes', 'Vendor Extension Types')} ({data.extensionPoints.vendorExtensionTypes.length} types) + {(i18n?.t('transform.admin.plugins.vendorExtensionTypes') ?? 'Vendor Extension Types')} ({data.extensionPoints.vendorExtensionTypes.length} types)
@@ -245,10 +227,7 @@ {/each}

- {i18n?.t( - 'transform.admin.plugins.vendorTypesDescription', - 'Customize transformation behavior for specific vendors' - )} + {(i18n?.t('transform.admin.plugins.vendorTypesDescription') ?? 'Customize transformation behavior for specific vendors')}

@@ -257,7 +236,7 @@
- {i18n?.t('transform.admin.plugins.uiThemes', 'UI Themes')} ({data.extensionPoints.themes.length} + {(i18n?.t('transform.admin.plugins.uiThemes') ?? 'UI Themes')} ({data.extensionPoints.themes.length} available)
@@ -267,10 +246,7 @@ {/each}

- {i18n?.t( - 'transform.admin.plugins.themesDescription', - 'Customize the application appearance' - )} + {(i18n?.t('transform.admin.plugins.themesDescription') ?? 'Customize the application appearance')}

@@ -279,7 +255,7 @@
- {i18n?.t('transform.admin.plugins.locales', 'Locales')} ({data.extensionPoints.locales.length} + {(i18n?.t('transform.admin.plugins.locales') ?? 'Locales')} ({data.extensionPoints.locales.length} supported)
@@ -289,10 +265,7 @@ {/each}

- {i18n?.t( - 'transform.admin.plugins.localesDescription', - 'Add translations for different languages' - )} + {(i18n?.t('transform.admin.plugins.localesDescription') ?? 'Add translations for different languages')}

@@ -316,28 +289,25 @@ >
-

{i18n?.t('transform.admin.plugins.howToConfigure', 'How to Configure')}

+

{(i18n?.t('transform.admin.plugins.howToConfigure') ?? 'How to Configure')}

- {i18n?.t( - 'transform.admin.plugins.configureVia', - 'Configure plugins and extensions through these methods:' - )} + {(i18n?.t('transform.admin.plugins.configureVia') ?? 'Configure plugins and extensions through these methods:')}

  • - {i18n?.t('transform.admin.plugins.envVar', 'Environment variable')}: + {(i18n?.t('transform.admin.plugins.envVar') ?? 'Environment variable')}: PIE_QTI_CONFIG=/path/to/config.json
  • - {i18n?.t('transform.admin.plugins.configFile', 'Config file')}: - {i18n?.t('transform.admin.plugins.seeExample', 'See')} + {(i18n?.t('transform.admin.plugins.configFile') ?? 'Config file')}: + {(i18n?.t('transform.admin.plugins.seeExample') ?? 'See')} config.example.json - {i18n?.t('transform.admin.plugins.forStructure', 'for structure')} + {(i18n?.t('transform.admin.plugins.forStructure') ?? 'for structure')}
  • - {i18n?.t('transform.admin.plugins.directCode', 'Direct code')}: - {i18n?.t('transform.admin.plugins.registerIn', 'Register in')} + {(i18n?.t('transform.admin.plugins.directCode') ?? 'Direct code')}: + {(i18n?.t('transform.admin.plugins.registerIn') ?? 'Register in')} src/hooks.server.ts
{i18n?.t('transform.admin.plugins.pluginName', 'Plugin Name')}{i18n?.t('transform.admin.plugins.format', 'Format')}{i18n?.t('transform.admin.plugins.priority', 'Priority')}{i18n?.t('transform.admin.plugins.version', 'Version')}{i18n?.t('transform.admin.plugins.status', 'Status')}{(i18n?.t('transform.admin.plugins.pluginName') ?? 'Plugin Name')}{(i18n?.t('transform.admin.plugins.format') ?? 'Format')}{(i18n?.t('transform.admin.plugins.priority') ?? 'Priority')}{(i18n?.t('transform.admin.plugins.version') ?? 'Version')}{(i18n?.t('transform.admin.plugins.status') ?? 'Status')}
{plugin.version} - {i18n?.t('transform.admin.plugins.active', 'Active')} + {(i18n?.t('transform.admin.plugins.active') ?? 'Active')}