wrap up i18n

Author: chillenious

bun.lock

@@ -9,6 +9,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./generators/manifest-generator": {
+      "types": "./dist/generators/manifest-generator.d.ts",
+      "import": "./dist/generators/manifest-generator.js"
     }
   },
   "scripts": {

packages/pie-to-qti2/package.json

@@ -7,9 +7,12 @@
 
 import { v4 as uuid } from 'uuid';
 import type {
+  AssessmentResource,
   ImsManifest,
+  ItemResource,
   ManifestGenerationOptions,
   ManifestInput,
+  PassageResource,
   Resource,
   ResourceDependency,
 } from '../types/manifest.js';
@@ -41,11 +44,16 @@ export function buildManifest(input: ManifestInput): ImsManifest {
   // Add passage resources first (items depend on them)
   if (input.passages && input.passages.length > 0) {
     for (const passage of input.passages) {
+      // Add language metadata if locale is specified
+      const metadata = passage.locale
+        ? { ...passage.metadata, language: passage.locale }
+        : passage.metadata;
+
       resources.push({
         identifier: passage.id,
         type: passage.type || 'imsqti_item_xmlv2p2',
         href: passage.filePath,
-        metadata: passage.metadata,
+        metadata,
         files: passage.files?.map(f => ({ href: f })),
       });
     }
@@ -62,11 +70,16 @@ export function buildManifest(input: ManifestInput): ImsManifest {
       }
     }
 
+    // Add language metadata if locale is specified
+    const metadata = item.locale
+      ? { ...item.metadata, language: item.locale }
+      : item.metadata;
+
     resources.push({
       identifier: item.id,
       type: item.type || 'imsqti_item_xmlv2p2',
       href: item.filePath,
-      metadata: item.metadata,
+      metadata,
       files: item.files?.map(f => ({ href: f })),
       dependencies: dependencies.length > 0 ? dependencies : undefined,
     });
@@ -84,11 +97,16 @@ export function buildManifest(input: ManifestInput): ImsManifest {
         }
       }
 
+      // Add language metadata if locale is specified
+      const metadata = assessment.locale
+        ? { ...assessment.metadata, language: assessment.locale }
+        : assessment.metadata;
+
       resources.push({
         identifier: assessment.id,
         type: assessment.type || 'imsqti_assessment_xmlv2p2',
         href: assessment.filePath,
-        metadata: assessment.metadata,
+        metadata,
         files: assessment.files?.map(f => ({ href: f })),
         dependencies: dependencies.length > 0 ? dependencies : undefined,
       });
@@ -154,9 +172,23 @@ export function manifestToXml(manifest: ImsManifest): string {
     // Metadata (if provided)
     if (resource.metadata) {
       lines.push('      <metadata>');
+
+      // Special handling for IMS LOM language (must be in lom/general structure)
+      if (resource.metadata.language) {
+        lines.push('        <imsmd:lom>');
+        lines.push('          <imsmd:general>');
+        lines.push('            <imsmd:language>' + escapeXml(String(resource.metadata.language)) + '</imsmd:language>');
+        lines.push('          </imsmd:general>');
+        lines.push('        </imsmd:lom>');
+      }
+
+      // Other metadata fields
       for (const [key, value] of Object.entries(resource.metadata)) {
-        lines.push(`        <imsmd:${key}>${escapeXml(String(value))}</imsmd:${key}>`);
+        if (key !== 'language') {
+          lines.push(`        <imsmd:${key}>${escapeXml(String(value))}</imsmd:${key}>`);
+        }
       }
+
       lines.push('      </metadata>');
     }
 
@@ -310,3 +342,114 @@ export function generateAssessmentManifest(
 
   return generateManifest(input);
 }
+/**
+ * Generate manifest for multilingual content package
+ *
+ * Convenience function that expands base identifiers into locale-suffixed resources.
+ * This is purely a helper - you can achieve the same result by calling `generateManifest()`
+ * directly with locale-suffixed identifiers. The locale system works generically with
+ * any identifier pattern.
+ *
+ * Each generated resource:
+ * - Gets a locale-suffixed identifier (e.g., "item.en-US", "item.es-ES")
+ * - Automatically receives IMS LOM language metadata
+ * - Works with the same fallback system as manually-created resources
+ *
+ * @param input Multilingual manifest input
+ * @returns Manifest XML string
+ *
+ * @example
+ * ```typescript
+ * // Using convenience function
+ * const manifest = generateMultilingualManifest({
+ *   baseItems: [{
+ *     baseId: "simple-choice",
+ *     locales: {
+ *       "en-US": { filePath: "items/simple-choice.en-US.xml" },
+ *       "es-ES": { filePath: "items/simple-choice.es-ES.xml" }
+ *     }
+ *   }]
+ * });
+ *
+ * // Equivalent manual approach (no special multilingual mode)
+ * const manifest = generateManifest({
+ *   items: [
+ *     { id: "simple-choice.en-US", filePath: "items/simple-choice.en-US.xml", locale: "en-US" },
+ *     { id: "simple-choice.es-ES", filePath: "items/simple-choice.es-ES.xml", locale: "es-ES" }
+ *   ]
+ * });
+ * ```
+ */
+export function generateMultilingualManifest(input: {
+  baseItems: Array<{
+    baseId: string;
+    locales: Record<string, { filePath: string; dependencies?: string[] }>;
+  }>;
+  basePassages?: Array<{
+    baseId: string;
+    locales: Record<string, { filePath: string }>;
+  }>;
+  baseAssessments?: Array<{
+    baseId: string;
+    locales: Record<string, { filePath: string; dependencies?: string[] }>;
+  }>;
+  options?: ManifestGenerationOptions;
+}): string {
+  const items: ItemResource[] = [];
+  const passages: PassageResource[] = [];
+  const assessments: AssessmentResource[] = [];
+
+  // Expand passages with locale variants
+  if (input.basePassages) {
+    for (const basePassage of input.basePassages) {
+      for (const [locale, data] of Object.entries(basePassage.locales)) {
+        passages.push({
+          id: `${basePassage.baseId}.${locale}`,
+          filePath: data.filePath,
+          locale,
+        });
+      }
+    }
+  }
+
+  // Expand items with locale variants
+  for (const baseItem of input.baseItems) {
+    for (const [locale, data] of Object.entries(baseItem.locales)) {
+      // Map dependencies to locale-specific identifiers if they exist
+      const dependencies = data.dependencies?.map(depId => `${depId}.${locale}`);
+
+      items.push({
+        id: `${baseItem.baseId}.${locale}`,
+        filePath: data.filePath,
+        dependencies,
+        locale,
+      });
+    }
+  }
+
+  // Expand assessments with locale variants
+  if (input.baseAssessments) {
+    for (const baseAssessment of input.baseAssessments) {
+      for (const [locale, data] of Object.entries(baseAssessment.locales)) {
+        // Map dependencies to locale-specific identifiers
+        const dependencies = data.dependencies?.map(depId => `${depId}.${locale}`);
+
+        assessments.push({
+          id: `${baseAssessment.baseId}.${locale}`,
+          filePath: data.filePath,
+          dependencies,
+          locale,
+        });
+      }
+    }
+  }
+
+  const manifestInput: ManifestInput = {
+    items,
+    passages,
+    assessments: assessments.length > 0 ? assessments : undefined,
+    options: input.options,
+  };
+
+  return generateManifest(manifestInput);
+}

packages/pie-to-qti2/src/generators/manifest-generator.ts

@@ -180,6 +180,9 @@ export interface ItemResource {
 
   /** Metadata */
   metadata?: Record<string, any>;
+
+  /** Locale for this specific variant (e.g., "en-US", "es-ES") */
+  locale?: string;
 }
 
 /**
@@ -200,6 +203,9 @@ export interface PassageResource {
 
   /** Metadata */
   metadata?: Record<string, any>;
+
+  /** Locale for this specific variant (e.g., "en-US", "es-ES") */
+  locale?: string;
 }
 
 /**
@@ -223,4 +229,7 @@ export interface AssessmentResource {
 
   /** Metadata */
   metadata?: Record<string, any>;
+
+  /** Locale for this specific variant (e.g., "en-US", "es-ES") */
+  locale?: string;
 }

packages/pie-to-qti2/src/types/manifest.ts

@@ -1,6 +1,7 @@
 <script lang="ts">
 
 	import { registerDefaultComponents } from '@pie-qti/qti2-default-components';
+	// @ts-expect-error - Svelte-check can't resolve workspace subpath exports, but runtime works correctly
 	import { ItemBody } from '@pie-qti/qti2-item-player/components';
 	import { Player, type QTIRole } from '@pie-qti/qti2-item-player';
 	import type { I18nProvider } from '@pie-qti/qti2-i18n';

packages/qti2-assessment-player/src/components/ItemRenderer.svelte

@@ -158,9 +158,9 @@
 		<div part="helper" class="qti-associate-helper alert alert-info">
 			<span class="text-sm">
 				{#if selectedForPairing}
-					Click another item to create an association (or click again to deselect)
+					{i18n?.t('interactions.associate.clickAnotherOrDeselect') ?? 'Click another item to create an association (or click again to deselect)'}
 				{:else}
-					Click two items to create an association between them
+					{i18n?.t('interactions.associate.clickToAssociate') ?? 'Click two items to create an association between them'}
 				{/if}
 			</span>
 		</div>

packages/qti2-default-components/src/plugins/associate/AssociateInteraction.svelte

@@ -29,6 +29,9 @@
 	// Rendered prompt container - we keep the original HTML structure and insert live gap targets.
 	let promptContainer: HTMLDivElement | undefined = $state();
 
+	// 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}`));
@@ -86,6 +89,10 @@
 	function renderPromptWithGaps() {
 		if (!promptContainer || !parsedInteraction?.promptText) return;
 
+		// Clean up any existing event listeners before creating new ones
+		cleanupFunctions.forEach(cleanup => cleanup());
+		cleanupFunctions = [];
+
 		// Replace placeholders with marker spans so we can keep the original HTML structure.
 		const html = parsedInteraction.promptText.replace(/\[GAP:([^\]]+)\]/g, (_m, gapId) => {
 			const safe = String(gapId).replace(/"/g, '"');
@@ -113,47 +120,64 @@
 
 			const selected = getSelectedWord(gapId);
 			if (selected) {
-				btn.textContent = getWordText(selected);
+				const word = getWordText(selected);
+				btn.textContent = word;
 				btn.removeAttribute('data-empty');
-				btn.setAttribute('aria-label', `Blank ${gapId}, filled with ${getWordText(selected)}. Click to clear.`);
+				const filledAriaLabel = i18n?.t('interactions.gapMatch.filledGapAriaLabel', { gapId, word }) ?? `Blank ${gapId}, filled with ${word}. Click to clear.`;
+				btn.setAttribute('aria-label', filledAriaLabel);
 			} else {
 				// Keep the gap visually blank (no letters), but still accessible.
 				btn.textContent = '';
 				btn.setAttribute('data-empty', 'true');
-				btn.setAttribute('aria-label', `Blank ${gapId}. Drop an answer here.`);
+				const ariaLabel = i18n?.t('interactions.gapMatch.blankGapAriaLabel', { gapId }) ?? `Blank ${gapId}. Drop an answer here.`;
+				btn.setAttribute('aria-label', ariaLabel);
 			}
 			if (disabled) btn.setAttribute('aria-disabled', 'true');
 
-			btn.addEventListener('dragenter', (e) => {
+			const onDragEnter = (e: DragEvent) => {
 				if (disabled) return;
 				e.preventDefault();
 				btn.classList.add('is-dragover');
-			});
+			};
 
-			btn.addEventListener('dragover', (e) => {
+			const onDragOver = (e: DragEvent) => {
 				if (disabled) return;
 				e.preventDefault();
 				btn.classList.add('is-dragover');
-			});
+			};
 
-			btn.addEventListener('dragleave', () => {
+			const onDragLeave = () => {
 				btn.classList.remove('is-dragover');
-			});
+			};
 
-			btn.addEventListener('drop', (e) => {
+			const onDrop = (e: DragEvent) => {
 				if (disabled) return;
 				e.preventDefault();
 				btn.classList.remove('is-dragover');
 				const wordId = e.dataTransfer?.getData('text/plain') ?? '';
 				if (!wordId) return;
 				handleGapChange(gapId, wordId);
-			});
+			};
 
-			// Click-to-clear for usability (and touch devices).
-			btn.addEventListener('click', () => {
+			const onClick = () => {
 				if (disabled) return;
 				const current = getSelectedWord(gapId);
 				if (current) handleGapChange(gapId, '');
+			};
+
+			btn.addEventListener('dragenter', onDragEnter);
+			btn.addEventListener('dragover', onDragOver);
+			btn.addEventListener('dragleave', onDragLeave);
+			btn.addEventListener('drop', onDrop);
+			btn.addEventListener('click', onClick);
+
+			// Store cleanup functions to remove event listeners later
+			cleanupFunctions.push(() => {
+				btn.removeEventListener('dragenter', onDragEnter);
+				btn.removeEventListener('dragover', onDragOver);
+				btn.removeEventListener('dragleave', onDragLeave);
+				btn.removeEventListener('drop', onDrop);
+				btn.removeEventListener('click', onClick);
 			});
 
 			ph.replaceWith(btn);