@lernapps/app-templates 0.0.0-stage → 0.1.0

package/dist/contract-PONpxJtd.mjs

@@ -0,0 +1,52 @@
+// runtime/interactive/contract.ts
+/** The milliseconds from one tick to the next: the runtime calls tick(state, TICK) every TICK ms. */
+const TICK = 20;
+/** The property of the app's element that holds the state, for the end-to-end tests. */
+const STATE_PROPERTY = "lernappsState";
+/**
+* The global of the end-to-end tests' clock: when the page has it (an object, set before the client module runs),
+* the runtime starts no interval and puts on it tick(count), which calls tick(state, TICK) count times, the same as
+* count intervals would. Only the tests set it; for a learner, time passes on its own.
+*/
+const CLOCK_PROPERTY = "lernappsClock";
+/** The inputs of a step, its keys as key inputs. */
+function inputsOf(step) {
+	return step.inputs !== void 0 ? [...step.inputs] : (step.keys ?? []).map((key) => ({
+		kind: "key",
+		key
+	}));
+}
+/** An input as a playthrough's problem names it: a key as its JSON text, an action with its name and value. */
+function inputText(input) {
+	if (input.kind === "key") return JSON.stringify(input.key);
+	return `action ${JSON.stringify(input.name)}${input.value === void 0 ? "" : ` ${JSON.stringify(input.value)}`}`;
+}
+/** What a step does, as a playthrough's problem names it: its inputs, then its ticks. */
+function doingText(step) {
+	const ticks = step.ticks === void 0 ? [] : [`${step.ticks} tick${step.ticks === 1 ? "" : "s"}`];
+	return [...inputsOf(step).map(inputText), ...ticks];
+}
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/**
+* Where `actual` differs from `expected`: the path of the first difference, with the value found there, or undefined
+* when it matches. An object expects only the fields it names (each compared in the same way); anything else, a list
+* too, is compared as a whole.
+*/
+function mismatch(actual, expected, path = []) {
+	if (isRecord(expected)) {
+		if (!isRecord(actual)) return {
+			path: [...path],
+			actual
+		};
+		for (const [key, value] of Object.entries(expected)) {
+			const found = mismatch(actual[key], value, [...path, key]);
+			if (found !== void 0) return found;
+		}
+		return;
+	}
+	return JSON.stringify(actual) === JSON.stringify(expected) ? void 0 : {
+		path: [...path],
+		actual
+	};
+}
+export { inputText as a, doingText as i, STATE_PROPERTY as n, inputsOf as o, TICK as r, mismatch as s, CLOCK_PROPERTY as t };

package/dist/e2e-BiMI-pCL.mjs

@@ -0,0 +1,89 @@
+import { l as textsIn } from "./html-mffkHGHh.mjs";
+import { g as questionId, t as QUESTION_MESSAGES } from "./render-BJey0bwl.mjs";
+import { expect } from "playwright/test";
+// runtime/shared/questions/e2e.ts
+/** The question's own texts in `lang`. */
+const messagesOf = (lang) => textsIn(QUESTION_MESSAGES, lang);
+const question = (page, item) => page.locator(`#${questionId(item)}`);
+/** Gives `answer` to the question through its controls, as a learner does, on a page in `lang`. */
+async function answerQuestion(page, item, answer, lang = "de") {
+	await giveAnswer(page, item, answer);
+	await question(page, item).getByRole("button", { name: messagesOf(lang).check }).click();
+}
+/** Puts `answer` into the controls of the question, as a learner does, without checking it. */
+async function giveAnswer(page, item, answer) {
+	const form = question(page, item);
+	switch (item.type) {
+		case "single-choice":
+		case "multiple-choice":
+		case "true-false": {
+			const values = typeof answer === "object" ? answer.map(String) : [String(answer)];
+			for (const value of values) await form.locator(`input[value="${value}"]`).check();
+			break;
+		}
+		case "number":
+			await form.locator("input").fill(String(answer));
+			break;
+		case "ordering":
+		case "matching": {
+			if (typeof answer !== "object") throw new Error(`${item.id}: an ${item.type} answer is a list`);
+			const key = item.type === "ordering" ? "item" : "left";
+			for (const [index, value] of answer.entries()) await form.locator(`select[data-${key}="${index}"]`).selectOption(String(value));
+			break;
+		}
+	}
+}
+/** What the learner learns about a question shows in `where`: each option's background, the explanation, the links. */
+async function expectBackground(where, item) {
+	if (item.type === "single-choice" || item.type === "multiple-choice") for (const option of item.options) {
+		await expect(where.getByText(option.info, { exact: true })).toBeVisible();
+		if (option.link) await expect(where.locator(`a[href="${option.link.url}"]`).first()).toBeVisible();
+	}
+	await expect(where.getByText(item.explanation, { exact: true })).toBeVisible();
+	for (const link of item.links) {
+		const anchor = where.locator(`a[href="${link.url}"]`).first();
+		await expect(anchor).toBeVisible();
+		await expect(anchor).toHaveAttribute("rel", "noopener");
+	}
+}
+/** After an answer, the learner sees the feedback without scrolling back; it has the focus, the next button follows. */
+async function expectFeedbackInView(page, item) {
+	const feedback = question(page, item).locator(".question-feedback");
+	const top = await feedback.evaluate((element) => element.getBoundingClientRect().top);
+	const height = await page.evaluate(() => innerHeight);
+	expect(top, "the top of the feedback is in the viewport").toBeGreaterThanOrEqual(0);
+	expect(top, "the top of the feedback is in the viewport").toBeLessThan(height);
+	await expect(feedback).toBeFocused();
+}
+/** What a question shows besides its text (its material) is on the page, between the text and the answers; images load. */
+async function expectMaterial(page, item, { loaded = true } = {}) {
+	const blocks = item.material ?? [];
+	const area = question(page, item).locator(".question-material");
+	if (blocks.length === 0) {
+		await expect(area).toHaveCount(0);
+		return;
+	}
+	await expect(area).toBeVisible();
+	const count = (type) => blocks.filter((block) => block.type === type).length;
+	for (const [type, selector] of [
+		["text", ".block-text"],
+		["formula", ".block-formula"],
+		["figure", ".block-figure:not(.block-labelled)"],
+		["labelled-figure", ".block-labelled"],
+		["table", ".block-table"],
+		["quote", ".block-quote"],
+		["code", ".block-code"]
+	]) await expect(area.locator(selector), `${item.id}: the ${type} blocks`).toHaveCount(count(type));
+	const withCredit = blocks.filter((block) => "licence" in block && block.licence !== void 0).length;
+	await expect(area.locator(".block-credit")).toHaveCount(withCredit);
+	const images = blocks.filter((block) => "image" in block && block.image !== void 0);
+	const pictures = area.locator("img");
+	await expect(pictures).toHaveCount(images.length);
+	for (const [index, block] of images.entries()) {
+		const picture = pictures.nth(index);
+		await expect(picture).toHaveAttribute("alt", block.type === "figure" || block.type === "labelled-figure" ? block.alt : "");
+		if (!loaded) continue;
+		await expect.poll(() => picture.evaluate((element) => element.complete && element.naturalWidth > 0), { message: `${item.id}: image ${index + 1} loads` }).toBe(true);
+	}
+}
+export { giveAnswer as a, expectMaterial as i, expectBackground as n, question as o, expectFeedbackInView as r, answerQuestion as t };

package/dist/engine-BqF2Vffn.mjs

@@ -0,0 +1,136 @@
+import { l as textsIn } from "./html-mffkHGHh.mjs";
+import { S as shuffled, c as hash, f as missesRight, l as isComplete, t as QUESTION_MESSAGES, u as isCorrect, w as wrongReasons } from "./render-BJey0bwl.mjs";
+import { translator } from "@lernapps/tooling/i18n";
+import { moveFocus } from "@lernapps/tooling/a11y";
+// runtime/shared/questions/engine.ts
+/** The learner's answer as the form holds it; undefined when nothing is given yet. */
+function readAnswer(question, form) {
+	const checked = [...form.querySelectorAll("input:checked")].map((input) => input.value);
+	switch (question.type) {
+		case "single-choice": return checked[0] === void 0 ? void 0 : Number(checked[0]);
+		case "multiple-choice": return checked.map(Number);
+		case "true-false": return checked[0] === void 0 ? void 0 : checked[0] === "true";
+		case "number": return form.querySelector("input")?.value ?? "";
+		case "ordering":
+		case "matching": {
+			const key = question.type === "ordering" ? "item" : "left";
+			const answer = [];
+			for (const select of form.querySelectorAll(`select[data-${key}]`)) answer[Number(select.dataset[key])] = select.value === "" ? -1 : Number(select.value);
+			return answer;
+		}
+	}
+}
+/** The indices of the options the learner chose, for the question types with options. */
+function chosenOptions(question, answer) {
+	if (question.type !== "single-choice" && question.type !== "multiple-choice") return [];
+	return typeof answer === "number" ? [answer] : typeof answer === "object" ? [...answer] : [];
+}
+/**
+* Makes one rendered question (`item`, the element of renderQuestion) live: the button to check it shows; a complete
+* answer gets its feedback, with a wrong one the most specific reason the question gives (the diagnosis, the
+* background of each wrong option chosen, a number's typical mistake, else its hint). Then the solution shows: the
+* background of every option with the right ones and the learner's choice marked, the explanation and further
+* reading; the controls are locked, the button to the next question shows if there is one, and the focus moves to the
+* feedback. With `retry`, a wrong answer keeps the controls open and offers "Lösung zeigen" instead. An incomplete
+* answer is asked to be completed.
+*/
+function startQuestion(item, question, options = {}) {
+	const t = translator(textsIn(QUESTION_MESSAGES, options.lang ?? "de"));
+	const form = item.querySelector("form");
+	const feedback = item.querySelector(".question-feedback");
+	const check = item.querySelector(".question-check");
+	const next = item.querySelector(".question-next");
+	if (!form || !feedback || !check) return;
+	const doc = item.ownerDocument;
+	const fieldset = item.querySelector("fieldset");
+	if (options.seed !== void 0 && fieldset && (question.type === "single-choice" || question.type === "multiple-choice")) {
+		const labels = [...fieldset.querySelectorAll(".question-option")];
+		for (const index of shuffled(labels.length, options.seed ^ hash(question.id))) {
+			const label = labels[index];
+			if (label) fieldset.append(label);
+		}
+	}
+	const actions = item.querySelector(".question-actions");
+	if (actions) actions.hidden = false;
+	let solve;
+	if (options.retry === true) {
+		solve = doc.createElement("button");
+		solve.type = "button";
+		solve.className = "question-solve";
+		solve.textContent = t("showSolution");
+		solve.hidden = true;
+		check.after(" ", solve);
+	}
+	let said = [];
+	const line = (text, option) => {
+		said.push(option === void 0 ? text : `${option}: ${text}`);
+		const why = doc.createElement("p");
+		why.className = "question-diagnosis";
+		if (option !== void 0) {
+			const name = doc.createElement("strong");
+			if (options.format) name.innerHTML = `${options.format(option)}:`;
+			else name.textContent = `${option}:`;
+			why.append(name, " ");
+		}
+		if (options.format) why.insertAdjacentHTML("beforeend", options.format(text));
+		else why.append(text);
+		feedback.append(why);
+	};
+	let answered = false;
+	let last;
+	/** The solution: every option's background, the right ones marked, the learner's last choice marked too. */
+	const reveal = () => {
+		answered = true;
+		const solution = item.querySelector(".question-reveal");
+		for (const index of last === void 0 ? [] : chosenOptions(question, last)) {
+			const option = solution?.querySelector(`[data-option="${index}"]`);
+			if (!option) continue;
+			option.classList.add("question-info-chosen");
+			const badge = doc.createElement("span");
+			badge.className = "question-badge question-badge-chosen";
+			badge.textContent = t("yourChoice");
+			option.querySelector(".question-info-head")?.append(" ", badge);
+		}
+		if (solution) solution.hidden = false;
+		for (const control of form.querySelectorAll("input, select")) control.disabled = true;
+		check.hidden = true;
+		if (solve) solve.hidden = true;
+		if (next) next.hidden = false;
+		options.onReveal?.();
+	};
+	form.addEventListener("submit", (event) => {
+		event.preventDefault();
+		if (answered) return;
+		const answer = readAnswer(question, form);
+		if (!isComplete(question, answer)) {
+			feedback.textContent = t("incomplete");
+			feedback.className = "question-feedback";
+			return;
+		}
+		last = answer;
+		said = [];
+		const right = isCorrect(question, answer);
+		feedback.className = `question-feedback ${right ? "question-right" : "question-wrong"}`;
+		feedback.textContent = t(right ? "right" : "wrong");
+		if (!right) {
+			const diagnosis = options.diagnose?.(answer);
+			const reasons = diagnosis !== void 0 ? [{ text: diagnosis }] : wrongReasons(question, answer).filter((reason) => options.retry === true || reason.option === void 0);
+			for (const reason of reasons) line(reason.text, reason.option);
+			const missing = missesRight(question, answer);
+			if (diagnosis === void 0 && missing) line(t("missingRight"));
+			if (options.retry === true && reasons.length === 0 && !missing) line(t("lookAgain"));
+		}
+		const told = said.join(" ");
+		if (!right && options.retry === true) line(t("tryAgain"));
+		options.onAnswer?.(answer, right, told);
+		if (right || options.retry !== true) reveal();
+		else if (solve) solve.hidden = false;
+		moveFocus(feedback);
+	});
+	solve?.addEventListener("click", () => {
+		if (answered) return;
+		reveal();
+		moveFocus(item.querySelector(".question-reveal") ?? feedback);
+	});
+}
+export { startQuestion as n, readAnswer as t };