@lernapps/app-templates 0.0.1 → 0.1.0

package/dist/render-BJey0bwl.mjs

@@ -0,0 +1,540 @@
+import { i as inLanguage, l as textsIn, s as localeOf, t as escape } from "./html-mffkHGHh.mjs";
+import { i as materialIn, n as markerOf } from "./block-BK_ohsH1.mjs";
+import { translator } from "@lernapps/tooling/i18n";
+// runtime/shared/questions/messages/de.json
+var de_default = {
+	check: "Prüfen",
+	next: "Nächste Frage",
+	right: "Richtig!",
+	wrong: "Leider nicht richtig.",
+	incomplete: "Antworte zuerst: Wähle, tippe oder ordne alles zu.",
+	tryAgain: "Versuche es noch einmal oder lass dir die Lösung zeigen.",
+	lookAgain: "Lies dazu noch einmal den Text über der Aufgabe.",
+	missingRight: "Es fehlt noch mindestens eine richtige Antwort.",
+	showSolution: "Lösung",
+	"true": "Stimmt",
+	"false": "Stimmt nicht",
+	yourAnswer: "Deine Antwort",
+	choose: "bitte wählen",
+	place: "Platz {place}",
+	orderHint: "Gib jedem Eintrag seinen Platz: 1 für den ersten.",
+	matchHint: "Wähle zu jedem Eintrag das Passende.",
+	solution: "Lösung",
+	rightAnswer: "Richtige Antwort:",
+	statementTrue: "Die Aussage stimmt.",
+	statementFalse: "Die Aussage stimmt nicht.",
+	tolerance: "(erlaubte Abweichung: {tolerance})",
+	rightOption: "richtige Antwort",
+	yourChoice: "deine Wahl",
+	moreReading: "Mehr dazu:"
+};
+// runtime/shared/questions/question.ts
+/** The right entries a learner can choose from: those of the pairs, then the distractors. A chosen index counts into this list. */
+const rightEntries = (question) => [...question.pairs.map((pair) => pair.right), ...question.distractors ?? []];
+/**
+* The pairs that `pairsFrom: "material"` takes from the first labelled figure of the material: left the marker of a
+* label, right its text. A marker is the same in every language. Without `pairsFrom` there are none to take.
+*/
+function materialPairs(question) {
+	if (question.pairsFrom === void 0) return void 0;
+	return ((question.material?.find((block) => block.type === "labelled-figure"))?.labels ?? []).map((label, index) => {
+		const marker = markerOf(label, index);
+		return {
+			left: typeof label.text === "string" ? marker : Object.fromEntries(Object.keys(label.text).map((lang) => [lang, marker])),
+			right: label.text
+		};
+	});
+}
+/** The question types. */
+const QUESTION_TYPES = [
+	"single-choice",
+	"multiple-choice",
+	"true-false",
+	"number",
+	"ordering",
+	"matching"
+];
+/** Each learner text of a question with its place in it: ["options", 1, "info"]. */
+function questionTexts(question) {
+	const texts = [
+		{
+			path: ["text"],
+			text: question.text
+		},
+		{
+			path: ["explanation"],
+			text: question.explanation
+		},
+		...question.links.map((link, index) => ({
+			path: [
+				"links",
+				index,
+				"title"
+			],
+			text: link.title
+		})),
+		...question.hint === void 0 ? [] : [{
+			path: ["hint"],
+			text: question.hint
+		}]
+	];
+	switch (question.type) {
+		case "single-choice":
+		case "multiple-choice":
+			question.options.forEach((option, index) => {
+				texts.push({
+					path: [
+						"options",
+						index,
+						"text"
+					],
+					text: option.text
+				});
+				texts.push({
+					path: [
+						"options",
+						index,
+						"info"
+					],
+					text: option.info
+				});
+				if (option.link) texts.push({
+					path: [
+						"options",
+						index,
+						"link",
+						"title"
+					],
+					text: option.link.title
+				});
+			});
+			break;
+		case "number":
+			if (question.unit !== void 0) texts.push({
+				path: ["unit"],
+				text: question.unit
+			});
+			question.mistakes?.forEach((mistake, index) => texts.push({
+				path: [
+					"mistakes",
+					index,
+					"message"
+				],
+				text: mistake.message
+			}));
+			break;
+		case "ordering":
+			question.items.forEach((item, index) => texts.push({
+				path: ["items", index],
+				text: item
+			}));
+			break;
+		case "matching":
+			(question.pairsFrom === void 0 ? question.pairs : []).forEach((pair, index) => {
+				texts.push({
+					path: [
+						"pairs",
+						index,
+						"left"
+					],
+					text: pair.left
+				});
+				texts.push({
+					path: [
+						"pairs",
+						index,
+						"right"
+					],
+					text: pair.right
+				});
+			});
+			question.distractors?.forEach((text, index) => texts.push({
+				path: ["distractors", index],
+				text
+			}));
+	}
+	return texts;
+}
+/** Each link's address of a question with its place in it: ["links", 0, "url"]. */
+function questionAddresses(question) {
+	const options = question.type === "single-choice" || question.type === "multiple-choice" ? question.options : [];
+	return [...question.links.map((link, index) => ({
+		path: [
+			"links",
+			index,
+			"url"
+		],
+		text: link.url
+	})), ...options.flatMap((option, index) => option.link === void 0 ? [] : [{
+		path: [
+			"options",
+			index,
+			"link",
+			"url"
+		],
+		text: option.link.url
+	}])];
+}
+/** The question in `lang`: each text and address from its map, a plain string as it is; without its examples. */
+function questionIn(question, lang) {
+	const t = (text) => inLanguage(text, lang);
+	const link = (value) => ({
+		title: t(value.title),
+		url: t(value.url)
+	});
+	const base = {
+		id: question.id,
+		text: t(question.text),
+		explanation: t(question.explanation),
+		links: question.links.map(link),
+		...question.hint === void 0 ? {} : { hint: t(question.hint) },
+		...question.material === void 0 ? {} : { material: materialIn(question.material, lang) }
+	};
+	switch (question.type) {
+		case "single-choice":
+		case "multiple-choice": return {
+			...base,
+			type: question.type,
+			options: question.options.map((option) => ({
+				text: t(option.text),
+				correct: option.correct,
+				info: t(option.info),
+				...option.link === void 0 ? {} : { link: link(option.link) }
+			}))
+		};
+		case "true-false": return {
+			...base,
+			type: question.type,
+			answer: question.answer
+		};
+		case "number": return {
+			...base,
+			type: question.type,
+			answer: question.answer,
+			tolerance: question.tolerance,
+			...question.unit === void 0 ? {} : { unit: t(question.unit) },
+			...question.mistakes === void 0 ? {} : { mistakes: question.mistakes.map((mistake) => ({
+				answer: mistake.answer,
+				message: t(mistake.message)
+			})) }
+		};
+		case "ordering": return {
+			...base,
+			type: question.type,
+			items: question.items.map(t)
+		};
+		case "matching": return {
+			...base,
+			type: question.type,
+			pairs: (materialPairs(question) ?? question.pairs).map((pair) => ({
+				left: t(pair.left),
+				right: t(pair.right)
+			})),
+			...question.distractors === void 0 ? {} : { distractors: question.distractors.map(t) }
+		};
+	}
+}
+/** The id of a question's element on the page, and its address (#frage-<id>). */
+const questionId = (question) => `frage-${question.id}`;
+/** A number as a learner types it: comma or point as decimal sign, spaces, the unit after it. */
+function parseNumber(input, unit) {
+	let text = input.trim();
+	if (unit !== void 0 && text.endsWith(unit)) text = text.slice(0, -unit.length);
+	text = text.replace(/[\s ]/g, "").replace(",", ".");
+	if (!/^[+\-−]?(\d+\.?\d*|\.\d+)$/.test(text)) return void 0;
+	return Number(text.replace("−", "-"));
+}
+const isIndexList = (answer) => Array.isArray(answer);
+/** Whether `value` is within the tolerance of `target`, with a little slack for decimal rounding. */
+const within = (value, target, tolerance) => Math.abs(value - target) <= tolerance + 1e-9;
+/** Whether `answer` is the right answer to `question`; an answer of the wrong shape is not. */
+function isCorrect(question, answer) {
+	switch (question.type) {
+		case "single-choice": return typeof answer === "number" && question.options[answer]?.correct === true;
+		case "multiple-choice": {
+			if (!isIndexList(answer)) return false;
+			const chosen = new Set(answer);
+			return question.options.every((option, index) => option.correct === chosen.has(index));
+		}
+		case "true-false": return answer === question.answer;
+		case "number": {
+			if (typeof answer !== "string") return false;
+			const value = parseNumber(answer, question.unit);
+			return value !== void 0 && within(value, question.answer, question.tolerance);
+		}
+		case "ordering": return isIndexList(answer) && answer.length === question.items.length && answer.every((place, i) => place === i);
+		case "matching": return isIndexList(answer) && answer.length === question.pairs.length && answer.every((pair, i) => pair === i);
+	}
+}
+/**
+* Why `answer` to `question` is wrong, as specifically as the question says it: for a choice the background of each
+* wrong option the learner chose (with the option), for a number the message of the typical mistake it matches; else
+* the question's hint. None for a right answer, nor when the question says nothing more.
+*/
+function wrongReasons(question, answer) {
+	if (isCorrect(question, answer)) return [];
+	const specific = [];
+	if (question.type === "single-choice" || question.type === "multiple-choice") {
+		const chosen = typeof answer === "number" ? [answer] : isIndexList(answer) ? answer : [];
+		for (const index of chosen) {
+			const option = question.options[index];
+			if (option !== void 0 && !option.correct && option.info !== "") specific.push({
+				option: option.text,
+				text: option.info
+			});
+		}
+	}
+	if (question.type === "number" && typeof answer === "string") {
+		const value = parseNumber(answer, question.unit);
+		const mistake = value === void 0 ? void 0 : question.mistakes?.find((candidate) => within(value, candidate.answer, question.tolerance));
+		if (mistake !== void 0) specific.push({ text: mistake.message });
+	}
+	if (specific.length > 0) return specific;
+	return question.hint === void 0 ? [] : [{ text: question.hint }];
+}
+/** Whether a multiple-choice answer chose only right options, but not all of them. */
+const missesRight = (question, answer) => question.type === "multiple-choice" && isIndexList(answer) && answer.every((index) => question.options[index]?.correct === true) && !isCorrect(question, answer);
+/** Whether the learner has answered at all: something chosen, typed or placed everywhere. */
+function isComplete(question, answer) {
+	if (answer === void 0) return false;
+	switch (question.type) {
+		case "single-choice": return typeof answer === "number";
+		case "multiple-choice": return isIndexList(answer) && answer.length > 0;
+		case "true-false": return typeof answer === "boolean";
+		case "number": return typeof answer === "string" && parseNumber(answer, question.unit) !== void 0;
+		case "ordering":
+		case "matching": return isIndexList(answer) && answer.every((value) => Number.isInteger(value) && value >= 0);
+	}
+}
+/** The right answer, as a learner would give it. */
+function rightAnswer$1(question) {
+	switch (question.type) {
+		case "single-choice": return question.options.findIndex((option) => option.correct);
+		case "multiple-choice": return question.options.flatMap((option, index) => option.correct ? [index] : []);
+		case "true-false": return question.answer;
+		case "number": return String(question.answer).replace(".", ",");
+		case "ordering": return question.items.map((_item, index) => index);
+		case "matching": return question.pairs.map((_pair, index) => index);
+	}
+}
+/** A complete answer that is wrong, as a learner might give it. */
+function wrongAnswer(question) {
+	switch (question.type) {
+		case "single-choice": return question.options.findIndex((option) => !option.correct);
+		case "multiple-choice": {
+			const right = question.options.flatMap((option, index) => option.correct ? [index] : []);
+			const wrong = question.options.findIndex((option) => !option.correct);
+			return wrong >= 0 ? [...right, wrong].sort((a, b) => a - b) : right.slice(1);
+		}
+		case "true-false": return !question.answer;
+		case "number": return String(question.answer + question.tolerance + Math.max(1, Math.abs(question.answer))).replace(".", ",");
+		case "ordering": return question.items.map((_item, index) => question.items.length - 1 - index);
+		case "matching": return question.pairs.map((_pair, index) => (index + 1) % question.pairs.length);
+	}
+}
+/** A small seeded random generator (mulberry32): the same seed gives the same order everywhere. */
+function random(seed) {
+	let state = seed >>> 0;
+	return () => {
+		state = state + 1831565813 >>> 0;
+		let t = state;
+		t = Math.imul(t ^ t >>> 15, t | 1);
+		t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+/** A number from a text, to derive a seed per question. */
+function hash(text) {
+	let value = 2166136261;
+	for (let i = 0; i < text.length; i++) value = Math.imul(value ^ text.charCodeAt(i), 16777619);
+	return value >>> 0;
+}
+/** The indices 0..length-1 in an order given by `seed`. */
+function shuffled(length, seed) {
+	const next = random(seed);
+	const order = Array.from({ length }, (_value, index) => index);
+	for (let i = order.length - 1; i > 0; i--) {
+		const j = Math.floor(next() * (i + 1));
+		[order[i], order[j]] = [order[j] ?? j, order[i] ?? i];
+	}
+	return order;
+}
+/**
+* The order in which the page shows the items of an ordering or the right entries of a matching question: mixed,
+* the same on every build, and never the right order itself.
+*/
+function mixed(length, id) {
+	for (let attempt = 0;; attempt++) {
+		const order = shuffled(length, hash(`${id}#${attempt}`));
+		if (length < 2 || order.some((value, index) => value !== index)) return order;
+	}
+}
+// runtime/shared/questions/render.ts
+/** The texts of a question for learners in each language it has them: an app may declare only these languages. */
+const QUESTION_MESSAGES = {
+	de: de_default,
+	en: {
+		check: "Check",
+		next: "Next question",
+		right: "Right!",
+		wrong: "Sorry, that is not right.",
+		incomplete: "Answer first: choose, type or match everything.",
+		tryAgain: "Try again, or show the solution.",
+		lookAgain: "Read the text above the exercise again.",
+		missingRight: "At least one right answer is still missing.",
+		showSolution: "Solution",
+		"true": "True",
+		"false": "False",
+		yourAnswer: "Your answer",
+		choose: "please choose",
+		place: "Place {place}",
+		orderHint: "Give each entry its place: 1 for the first.",
+		matchHint: "Choose the match for each entry.",
+		solution: "Solution",
+		rightAnswer: "Right answer:",
+		statementTrue: "The statement is true.",
+		statementFalse: "The statement is false.",
+		tolerance: "(allowed difference: {tolerance})",
+		rightOption: "right answer",
+		yourChoice: "your choice",
+		moreReading: "More on it:"
+	}
+};
+/** The question's texts in `lang`; German for a language it does not have. */
+const questionMessagesIn = (lang) => textsIn(QUESTION_MESSAGES, lang);
+const languages = /* @__PURE__ */ new Map();
+function questionWords(lang = "de") {
+	let found = languages.get(lang);
+	if (found === void 0) {
+		const locale = localeOf(lang);
+		found = {
+			t: translator(questionMessagesIn(lang), locale),
+			numbers: new Intl.NumberFormat(locale, { maximumFractionDigits: 10 })
+		};
+		languages.set(lang, found);
+	}
+	return found;
+}
+function controls(question, { t }, format) {
+	const name = questionId(question);
+	switch (question.type) {
+		case "single-choice":
+		case "multiple-choice": {
+			const type = question.type === "single-choice" ? "radio" : "checkbox";
+			return question.options.map((option, index) => `<label class="question-option"><input type="${type}" name="${name}" value="${index}"> <span>${format(option.text)}</span></label>`).join("\n");
+		}
+		case "true-false": return [true, false].map((value) => `<label class="question-option"><input type="radio" name="${name}" value="${value}"> <span>${t(value ? "true" : "false")}</span></label>`).join("\n");
+		case "number": return [
+			`<label class="question-number">${t("yourAnswer")}`,
+			`<input type="text" inputmode="decimal" autocomplete="off" name="${name}"${question.unit === void 0 ? "" : ` aria-describedby="${name}-unit"`}>`,
+			question.unit === void 0 ? "" : `<span id="${name}-unit">${format(question.unit)}</span>`,
+			`</label>`
+		].join(" ");
+		case "ordering": {
+			const places = question.items.map((_item, place) => `<option value="${place}">${t("place", { place: place + 1 })}</option>`).join("");
+			return [
+				`<p class="question-hint">${t("orderHint")}</p>`,
+				`<ul class="question-pairs">`,
+				...mixed(question.items.length, question.id).map((index) => `<li><label><span>${format(question.items[index] ?? "")}</span> <select name="${name}-${index}" data-item="${index}"><option value="">${t("choose")}</option>${places}</select></label></li>`),
+				`</ul>`
+			].join("\n");
+		}
+		case "matching": {
+			const entries = rightEntries(question);
+			const rights = mixed(entries.length, question.id).map((index) => `<option value="${index}">${escape(entries[index] ?? "")}</option>`).join("");
+			return [
+				`<p class="question-hint">${t("matchHint")}</p>`,
+				`<ul class="question-pairs">`,
+				...question.pairs.map((pair, index) => `<li><label><span>${format(pair.left)}</span> <select name="${name}-${index}" data-left="${index}"><option value="">${t("choose")}</option>${rights}</select></label></li>`),
+				`</ul>`
+			].join("\n");
+		}
+	}
+}
+/**
+* One question with its controls, the button to check it, the place of its feedback and, hidden until it is answered,
+* what the learner learns about it (the same as its solution). The engine's startQuestion makes it live; without
+* JavaScript the button stays hidden.
+*/
+function renderQuestion(question, { element = "div", next = false, lang = "de", textHtml, materialHtml, explanationHtml, format = escape } = {}) {
+	const words = questionWords(lang);
+	const { t } = words;
+	const id = questionId(question);
+	const nextButton = next ? ` <button type="button" class="question-next" hidden>${t("next")}</button>` : "";
+	return [
+		`<${element} class="question" id="${id}" data-id="${question.id}" data-type="${question.type}">`,
+		`<form class="question-form" novalidate>`,
+		`<fieldset>`,
+		`<legend class="question-text">${textHtml ?? format(question.text)}</legend>`,
+		...materialHtml === void 0 || materialHtml === "" ? [] : [`<div class="question-material">${materialHtml}</div>`],
+		controls(question, words, format),
+		`</fieldset>`,
+		`<div class="question-feedback" role="status"></div>`,
+		`<div class="question-reveal" hidden>`,
+		renderSolution(question, {
+			lang,
+			format,
+			...explanationHtml === void 0 ? {} : { explanationHtml }
+		}),
+		`</div>`,
+		`<p class="question-actions" hidden><button type="submit" class="question-check">${t("check")}</button>${nextButton}</p>`,
+		`</form>`,
+		`</${element}>`
+	].join("\n");
+}
+/** The right answer as the solution states it, in `lang`: the right options, the number, the order, the pairs. */
+function answerText(question, lang = "de", format = escape) {
+	return rightAnswerText(question, questionWords(lang), format);
+}
+function rightAnswerText(question, { t, numbers }, format) {
+	switch (question.type) {
+		case "single-choice":
+		case "multiple-choice": return question.options.filter((option) => option.correct).map((option) => format(option.text)).join("; ");
+		case "true-false": return t(question.answer ? "statementTrue" : "statementFalse");
+		case "number": {
+			const unit = question.unit === void 0 ? "" : ` ${format(question.unit)}`;
+			const tolerance = question.tolerance > 0 ? ` ${t("tolerance", { tolerance: `${numbers.format(question.tolerance)}${unit}` })}` : "";
+			return `${numbers.format(question.answer)}${unit}${tolerance}`;
+		}
+		case "ordering": return question.items.map((item, index) => `${index + 1}. ${format(item)}`).join(", ");
+		case "matching": return question.pairs.map((pair) => `${format(pair.left)} – ${format(pair.right)}`).join("; ");
+	}
+}
+/** A link to another site: opened like any link, never loaded before a click, without access to this page. */
+const external = (link) => `<a href="${escape(link.url)}" rel="noopener">${escape(link.title)}</a>`;
+/** Every option with its background, the right ones marked; the engine marks the learner's choice. */
+function optionInfo(question, words, format) {
+	const { t } = words;
+	if (question.type !== "single-choice" && question.type !== "multiple-choice") return `<p><strong>${t("rightAnswer")}</strong> ${rightAnswerText(question, words, format)}</p>`;
+	return [
+		`<ul class="question-infos">`,
+		...question.options.map((option, index) => [
+			`<li class="question-info${option.correct ? " question-info-right" : ""}" data-option="${index}">`,
+			`<p class="question-info-head"><strong>${format(option.text)}</strong>${option.correct ? ` <span class="question-badge question-badge-right">${t("rightOption")}</span>` : ""}</p>`,
+			option.info === "" ? "" : `<p>${format(option.info)}</p>`,
+			option.link === void 0 ? "" : `<p>${external(option.link)}</p>`,
+			`</li>`
+		].join("")),
+		`</ul>`
+	].join("\n");
+}
+/**
+* What the learner learns about a question, its solution: the right answer (the right options marked), each option's
+* background, the explanation, further reading. A fragment without ids, e.g. for a <details>.
+*/
+function renderSolution(question, { lang = "de", explanationHtml, format = escape } = {}) {
+	const words = questionWords(lang);
+	const links = question.links.length === 0 ? [] : [
+		`<p class="question-more">${words.t("moreReading")}</p>`,
+		`<ul class="question-links">`,
+		...question.links.map((link) => `<li>${external(link)}</li>`),
+		`</ul>`
+	];
+	const explanation = explanationHtml ?? (question.explanation === "" ? "" : `<p class="question-explanation">${format(question.explanation)}</p>`);
+	return [
+		optionInfo(question, words, format),
+		explanation,
+		...links
+	].filter((part) => part !== "").join("\n");
+}
+export { wrongAnswer as C, shuffled as S, de_default as T, questionIn as _, renderQuestion as a, rightAnswer$1 as b, hash as c, materialPairs as d, missesRight as f, questionId as g, questionAddresses as h, questionMessagesIn as i, isComplete as l, parseNumber as m, answerText as n, renderSolution as o, mixed as p, external as r, QUESTION_TYPES as s, QUESTION_MESSAGES as t, isCorrect as u, questionTexts as v, wrongReasons as w, rightEntries as x, random as y };