@webwriter/quiz 1.1.5 → 2.0.0

package/package.json

@@ -1,260 +1,126 @@
 {
-    "name": "@webwriter/quiz",
-    "version": "1.1.5",
-    "description": "Add interactive tasks (multiple choice, order, free text, highlighting, or speech input). Make a quiz out of multiple tasks.",
-    "keywords": [
-        "webwriter-widget",
-        "widget-practical",
-        "widget-lang-en",
-        "widget-lang-de",
-        "widget-lang-bg",
-        "widget-lang-cs",
-        "widget-lang-da",
-        "widget-lang-el",
-        "widget-lang-es",
-        "widget-lang-et",
-        "widget-lang-fi",
-        "widget-lang-fr",
-        "widget-lang-hu",
-        "widget-lang-id",
-        "widget-lang-it",
-        "widget-lang-ja",
-        "widget-lang-ko",
-        "widget-lang-lt",
-        "widget-lang-lv",
-        "widget-lang-nb",
-        "widget-lang-nl",
-        "widget-lang-pl",
-        "widget-lang-pt",
-        "widget-lang-ro",
-        "widget-lang-ru",
-        "widget-lang-sk",
-        "widget-lang-sl",
-        "widget-lang-sv",
-        "widget-lang-tr",
-        "widget-lang-uk",
-        "widget-lang-zh",
-        "isced2011-1",
-        "isced2011-2",
-        "isced2011-3",
-        "isced2011-4",
-        "isced2011-5",
-        "isced2011-6",
-        "isced2011-7",
-        "isced2011-8",
-        "quiz",
-        "choice",
-        "test"
-    ],
-    "license": "MIT",
-    "author": "Frederic Salmen <frederic@fsalmen.de>",
-    "scripts": {
-        "prepare": "npx @webwriter/build",
-        "dev": "npx @webwriter/build dev",
-        "localize": "lit-localize extract && npx @webwriter/build localize && lit-localize build"
+  "name": "@webwriter/quiz",
+  "version": "2.0.0",
+  "description": "Add interactive tasks (multiple choice, order, free text, highlighting, or speech input). Make a quiz out of multiple tasks.",
+  "keywords": [
+    "webwriter-widget",
+    "widget-practical",
+    "widget-lang-en",
+    "widget-lang-de",
+    "widget-lang-fr",
+    "widget-lang-es",
+    "widget-lang-it",
+    "widget-lang-nl",
+    "isced2011-1",
+    "isced2011-2",
+    "isced2011-3",
+    "isced2011-4",
+    "isced2011-5",
+    "isced2011-6",
+    "isced2011-7",
+    "isced2011-8",
+    "quiz",
+    "choice",
+    "test"
+  ],
+  "license": "MIT",
+  "author": "Frederic Salmen <frederic@fsalmen.de>",
+  "repository": "https://github.com/webwriter-app/quiz",
+  "scripts": {
+    "prepublishOnly": "npx @webwriter/build && npm run build:api",
+    "build:api": "tsc -p tsconfig.api.json",
+    "dev": "npx @webwriter/build dev",
+    "localize": "npx @lit/localize-tools extract && npx @lit/localize-tools build",
+    "localize:apply": "node scripts/apply-translations.mjs"
+  },
+  "dependencies": {
+    "@shoelace-style/shoelace": "^2.20.1",
+    "@webwriter/lit": "^2",
+    "bootstrap-icons": "^1.13.1",
+    "lit": "^3"
+  },
+  "devDependencies": {
+    "@lit/localize-tools": "^0.8",
+    "typescript": "~5.9.0"
+  },
+  "exports": {
+    "./api": {
+      "types": "./dist/api/index.d.ts",
+      "source": "./src/api/index.ts",
+      "import": "./dist/api/index.js",
+      "default": "./dist/api/index.js"
     },
-    "repository": "https://github.com/webwriter-app/quiz",
-    "dependencies": {
-        "@shoelace-style/shoelace": "^2.13.1",
-        "@shopify/draggable": "^1.1.3",
-        "@webwriter/lit": "^2.1.2",
-        "bootstrap-icons": "^1.11.3",
-        "interactjs": "^1.10.26",
-        "lit": "^3.2.0",
-        "minimasonry": "^1.3.2",
-        "sortablejs": "^1.15.2"
+    "./widgets/webwriter-quiz.*": {
+      "source": "./src/widgets/webwriter-quiz.ts",
+      "default": "./dist/widgets/webwriter-quiz.*"
     },
-    "devDependencies": {
-        "@lit/localize": "^0.12.2",
-        "@lit/localize-tools": "^0.8.0",
-        "@types/minimasonry": "^1.3.5",
-        "@types/sortablejs": "^1.15.7"
+    "./widgets/webwriter-task.*": {
+      "source": "./src/widgets/webwriter-task.ts",
+      "default": "./dist/widgets/webwriter-task.*"
     },
-    "peerDependencies": {
-        "@webwriter/phet-simulation": "^1.0.0"
+    "./widgets/webwriter-task-prompt.*": {
+      "source": "./src/widgets/webwriter-task-prompt.ts",
+      "default": "./dist/widgets/webwriter-task-prompt.*"
     },
-    "exports": {
-        "./widgets/webwriter-quiz.*": {
-            "source": "./src/widgets/webwriter-quiz.ts",
-            "default": "./dist/widgets/webwriter-quiz.*"
-        },
-        "./snippets/blank.html": "./src/snippets/blank.html",
-        "./snippets/choice.html": "./src/snippets/choice.html",
-        "./snippets/order.html": "./src/snippets/order.html",
-        "./snippets/text.html": "./src/snippets/text.html",
-        "./snippets/mark.html": "./src/snippets/mark.html",
-        "./snippets/speech.html": "./src/snippets/speech.html",
-        "./snippets/beispiel-choice.html": "./src/snippets/Beispiel-Choice.html",
-        "./snippets/beispiel-order.html": "./src/snippets/Beispiel-Order.html",
-        "./snippets/beispiel-text.html": "./src/snippets/Beispiel-Text.html",
-        "./snippets/beispiel-mark.html": "./src/snippets/Beispiel-Mark.html",
-        "./widgets/webwriter-task.*": {
-            "source": "./src/widgets/webwriter-task.ts",
-            "default": "./dist/widgets/webwriter-task.*"
-        },
-        "./widgets/webwriter-task-prompt.*": {
-            "source": "./src/widgets/webwriter-task-prompt.ts",
-            "default": "./dist/widgets/webwriter-task-prompt.*"
-        },
-        "./widgets/webwriter-task-hint.*": {
-            "source": "./src/widgets/webwriter-task-hint.ts",
-            "default": "./dist/widgets/webwriter-task-hint.*"
-        },
-        "./widgets/webwriter-task-explainer.*": {
-            "source": "./src/widgets/webwriter-task-explainer.ts",
-            "default": "./dist/widgets/webwriter-task-explainer.*"
-        },
-        "./widgets/webwriter-choice.*": {
-            "source": "./src/widgets/webwriter-choice.ts",
-            "default": "./dist/widgets/webwriter-choice.*"
-        },
-        "./widgets/webwriter-choice-item.*": {
-            "source": "./src/widgets/webwriter-choice-item.ts",
-            "default": "./dist/widgets/webwriter-choice-item.*"
-        },
-        "./widgets/webwriter-order.*": {
-            "source": "./src/widgets/webwriter-order.ts",
-            "default": "./dist/widgets/webwriter-order.*"
-        },
-        "./widgets/webwriter-order-item.*": {
-            "source": "./src/widgets/webwriter-order-item.ts",
-            "default": "./dist/widgets/webwriter-order-item.*"
-        },
-        "./widgets/webwriter-pairing.*": {
-            "source": "./src/widgets/webwriter-pairing.ts",
-            "default": "./dist/widgets/webwriter-pairing.*"
-        },
-        "./widgets/webwriter-pairing-item.*": {
-            "source": "./src/widgets/webwriter-pairing-item.ts",
-            "default": "./dist/widgets/webwriter-pairing-item.*"
-        },
-        "./widgets/webwriter-text.*": {
-            "source": "./src/widgets/webwriter-text.ts",
-            "default": "./dist/widgets/webwriter-text.*"
-        },
-        "./widgets/webwriter-mark.*": {
-            "source": "./src/widgets/webwriter-mark.ts",
-            "default": "./dist/widgets/webwriter-mark.*"
-        },
-        "./widgets/webwriter-speech.*": {
-            "source": "./src/widgets/webwriter-speech.ts",
-            "default": "./dist/widgets/webwriter-speech.*"
-        },
-        "./widgets/webwriter-cloze.*": {
-            "source": "./src/widgets/webwriter-cloze.ts",
-            "default": "./dist/widgets/webwriter-cloze.*"
-        },
-        "./widgets/webwriter-cloze-gap.*": {
-            "source": "./src/widgets/webwriter-cloze-gap.ts",
-            "default": "./dist/widgets/webwriter-cloze-gap.*"
-        },
-        "./package.json": "./package.json",
-        "./icon": "./icon.svg"
+    "./widgets/webwriter-quiz-hint.*": {
+      "source": "./src/widgets/webwriter-quiz-hint.ts",
+      "default": "./dist/widgets/webwriter-quiz-hint.*"
     },
-    "editingConfig": {
-        ".": {
-            "label": {
-                "_": "Quiz"
-            },
-            "description": {
-                "de": "Fügen Sie interaktive Aufgaben hinzu (Multiple Choice, Reihenfolge, freier Text, Hervorhebung oder Spracheingabe). Erstellen Sie ein Quiz aus mehreren Aufgaben."
-            }
-        },
-        "./widgets/webwriter-choice-item": {
-            "group": "",
-            "selectable": false,
-            "draggable": false,
-            "isolating": false,
-            "content": "(p | flow)+",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-choice": {
-            "group": "answer",
-            "content": "webwriter-choice-item+",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-order-item": {
-            "group": "",
-            "selectable": false,
-            "draggable": true,
-            "isolating": false,
-            "content": "(p | flow)+",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-order": {
-            "group": "answer",
-            "content": "webwriter-order-item+",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-pairing": {
-            "group": "answer",
-            "isolating": true,
-            "content": "webwriter-pairing-item+",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-pairing-item": {
-            "group": "",
-            "draggable": true,
-            "isolating": true,
-            "content": "picture | flow",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-text": {
-            "group": "answer",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-mark": {
-            "group": "answer inlinecontainer",
-            "defining": true,
-            "isolating": true,
-            "content": "(text | br | wbr)*",
-            "marks": "",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-speech": {
-            "group": "answer",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-cloze": {
-            "group": "answer",
-            "isolating": true,
-            "content": "p",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-cloze-gap": {
-            "group": "phrasing",
-            "inline": true,
-            "isolating": false,
-            "uninsertable": true
-        },
-        "./widgets/webwriter-task": {
-            "isolating": true,
-            "content": "webwriter-task-prompt webwriter-task-hint? answer",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-task-prompt": {
-            "group": "",
-            "defining": true,
-            "content": "(p | flow)+",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-task-hint": {
-            "group": "containerinline",
-            "defining": true,
-            "isolating": true,
-            "content": "p",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-task-explainer": {
-            "group": "",
-            "defining": true,
-            "isolating": true,
-            "content": "(p | flow)+",
-            "uninsertable": true
-        },
-        "./widgets/webwriter-quiz": {
-            "content": "webwriter-task*",
-            "uninsertable": true
-        }
-    }
-}
+    "./widgets/webwriter-true-false.*": {
+      "source": "./src/widgets/choice/webwriter-true-false.ts",
+      "default": "./dist/widgets/webwriter-true-false.*"
+    },
+    "./widgets/webwriter-choice.*": {
+      "source": "./src/widgets/choice/webwriter-choice.ts",
+      "default": "./dist/widgets/webwriter-choice.*"
+    },
+    "./widgets/webwriter-choice-item.*": {
+      "source": "./src/widgets/choice/webwriter-choice-item.ts",
+      "default": "./dist/widgets/webwriter-choice-item.*"
+    },
+    "./widgets/webwriter-order.*": {
+      "source": "./src/widgets/order/webwriter-order.ts",
+      "default": "./dist/widgets/webwriter-order.*"
+    },
+    "./widgets/webwriter-order-item.*": {
+      "source": "./src/widgets/order/webwriter-order-item.ts",
+      "default": "./dist/widgets/webwriter-order-item.*"
+    },
+    "./widgets/webwriter-speech.*": {
+      "source": "./src/widgets/speech/webwriter-speech.ts",
+      "default": "./dist/widgets/webwriter-speech.*"
+    },
+    "./widgets/webwriter-text.*": {
+      "source": "./src/widgets/webwriter-text.ts",
+      "default": "./dist/widgets/webwriter-text.*"
+    },
+    "./widgets/webwriter-mark.*": {
+      "source": "./src/widgets/webwriter-mark.ts",
+      "default": "./dist/widgets/webwriter-mark.*"
+    },
+    "./widgets/webwriter-gap.*": {
+      "source": "./src/widgets/gap/webwriter-gap.ts",
+      "default": "./dist/widgets/webwriter-gap.*"
+    },
+    "./widgets/webwriter-gap-item.*": {
+      "source": "./src/widgets/gap/webwriter-gap-item.ts",
+      "default": "./dist/widgets/webwriter-gap-item.*"
+    },
+    "./widgets/webwriter-pairing.*": {
+      "source": "./src/widgets/pairing/webwriter-pairing.ts",
+      "default": "./dist/widgets/webwriter-pairing.*"
+    },
+    "./widgets/webwriter-pairing-item.*": {
+      "source": "./src/widgets/pairing/webwriter-pairing-item.ts",
+      "default": "./dist/widgets/webwriter-pairing-item.*"
+    },
+    "./migrate.js": {
+      "source": "./src/migrate/index.ts",
+      "default": "./dist/migrate.js"
+    },
+    "./icon": "./icon.svg",
+    "./editing-config.json": "./editing-config.json",
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "customElements": "custom-elements.json"
+}

package/scripts/apply-translations.mjs

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+/**
+ * Merges translations from JSON into the XLIFF interchange files.
+ *
+ * Usage: node scripts/apply-translations.mjs <dir>
+ *
+ * Expects <dir> to contain `translations-<locale>.json` files, each mapping
+ * trans-unit id -> translated string, for the locales in lit-localize.json.
+ * Only fills targets that are missing or empty; existing targets are left
+ * alone, so hand-corrected translations survive a re-run.
+ *
+ * Run `npx @lit/localize-tools extract` before this, and
+ * `npx @lit/localize-tools build` after.
+ */
+
+import { promises as fs } from "fs";
+import { join } from "path";
+
+const XML_ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;" };
+const escapeXml = text => text.replace(/[&<>]/g, c => XML_ESCAPES[c]);
+
+/** Placeholders are `<x id="0" equiv-text="${...}"/>` in the source; translators write them back as `${...}`. */
+function encodeTarget(source, translation) {
+	const placeholders = [...source.matchAll(/<x id="(\d+)" equiv-text="([^"]*)"\/>/g)];
+	let target = escapeXml(translation);
+	for (const [, id, equivText] of placeholders) {
+		// Tolerate a placeholder wrapped in braces (`{${x}}`) — a common way for the
+		// interpolation to come back doubled — before checking it is present at all.
+		target = target.replaceAll(`{${equivText}}`, () => equivText);
+		// equiv-text is already XML-escaped in the source; compare against the escaped translation
+		if (!target.includes(equivText)) {
+			throw new Error(`missing placeholder ${equivText} in translation ${JSON.stringify(translation)}`);
+		}
+		// function replacement: `$` in the placeholder must not be read as a substitution pattern
+		target = target.replace(equivText, () => `<x id="${id}" equiv-text="${equivText}"/>`);
+	}
+	if (placeholders.length && /[{}]/.test(target.replace(/<x [^>]*\/>/g, ""))) {
+		throw new Error(`stray brace left around placeholder in ${JSON.stringify(translation)}`);
+	}
+	return target;
+}
+
+async function applyLocale(xliffDir, locale, translations) {
+	const path = join(xliffDir, `${locale}.xlf`);
+	const xliff = await fs.readFile(path, "utf8");
+	let filled = 0;
+	let skipped = 0;
+	const missing = [];
+
+	const updated = xliff.replace(/<trans-unit id="([^"]+)">([\s\S]*?)<\/trans-unit>/g, (unit, id, body) => {
+		const translation = translations[id];
+		if (translation === undefined) {
+			missing.push(id);
+			return unit;
+		}
+		if (/<target[ >]/.test(body)) {
+			skipped++;
+			return unit;
+		}
+		const source = body.match(/<source>([\s\S]*?)<\/source>/)?.[1] ?? "";
+		const target = encodeTarget(source, translation);
+		filled++;
+		return unit.replace(/(<source>[\s\S]*?<\/source>)/, `$1\n  <target>${target}</target>`);
+	});
+
+	await fs.writeFile(path, updated, "utf8");
+	return { filled, skipped, missing };
+}
+
+const dir = process.argv[2];
+if (!dir) {
+	console.error("usage: node scripts/apply-translations.mjs <dir-with-translations-*.json>");
+	process.exit(1);
+}
+
+const { targetLocales, interchange } = JSON.parse(await fs.readFile("./lit-localize.json", "utf8"));
+let failed = false;
+
+for (const locale of targetLocales) {
+	const jsonPath = join(dir, `translations-${locale}.json`);
+	let translations;
+	try {
+		translations = JSON.parse(await fs.readFile(jsonPath, "utf8"));
+	} catch {
+		console.error(`${locale}: no ${jsonPath}, skipping`);
+		failed = true;
+		continue;
+	}
+	const { filled, skipped, missing } = await applyLocale(interchange.xliffDir, locale, translations);
+	console.log(`${locale}: filled ${filled}, kept ${skipped} existing, ${missing.length} untranslated`);
+	if (missing.length) {
+		console.error(`  missing ids: ${missing.join(", ")}`);
+		failed = true;
+	}
+}
+
+process.exit(failed ? 1 : 0);

package/src/api/index.ts

@@ -0,0 +1,72 @@
+export type QuizType = {
+	packageId: string;
+	widgetPosition?: number;
+	id: string;
+	icon: string;
+	getName(): string;
+	createInstance(): HTMLElement & IWebWriterQuizType;
+};
+
+export interface IWebWriterQuizType {
+	checkValidity(): boolean;
+	reset(): void;
+	checkAnswer?(detailedFeedback: boolean): number;
+}
+
+type WebwriterQuizRegistry = {
+	version: number;
+	quizTypes: QuizType[];
+	listeners: ((types: readonly QuizType[]) => void)[];
+};
+
+declare global {
+	interface Window {
+		__wwQuizRegistry__: WebwriterQuizRegistry;
+	}
+}
+
+function getRegistry(): WebwriterQuizRegistry {
+	window.__wwQuizRegistry__ ??= { version: 1, quizTypes: [], listeners: [] };
+	return window.__wwQuizRegistry__;
+}
+
+export function getQuizTypes(): readonly QuizType[] {
+	return [...getRegistry().quizTypes];
+}
+
+export function registerQuizType(type: QuizType): void {
+	const registry = getRegistry();
+	
+	let i = 0;
+
+	// First, order by package id
+	// The @webwriter/quiz package is always first, regardless of its package id
+	if (type.packageId !== "@webwriter/quiz") {
+		while (i < registry.quizTypes.length) {
+			if (registry.quizTypes[i].packageId.localeCompare(type.packageId) >= 0) break;
+			i++;
+		}
+	}
+
+	// Then, order by widget position (ascending), and then by widget id (ascending)
+	const newPosition = type.widgetPosition ?? Infinity;
+	while (i < registry.quizTypes.length && registry.quizTypes[i].packageId === type.packageId) {
+		const currentPosition = registry.quizTypes[i].widgetPosition ?? Infinity;
+		if (currentPosition > newPosition) break;
+		// Use id as a tiebreaker (alphabetical order)
+		if (currentPosition === newPosition && registry.quizTypes[i].id.localeCompare(type.id) >= 0) break;
+		i++;
+	}
+
+	registry.quizTypes.splice(i, 0, type);
+
+	const quizTypes = getQuizTypes();
+	registry.listeners.forEach(cb => cb(quizTypes));
+}
+
+export function onQuizTypesChanged(cb: (types: readonly QuizType[]) => void): () => void {
+	const registry = getRegistry();
+	cb(getQuizTypes());
+	registry.listeners.push(cb);
+	return () => registry.listeners = registry.listeners.filter(l => l !== cb);
+}