@lernapps/app-templates 0.0.1 → 0.1.0

package/dist/explainer-islands.mjs

@@ -0,0 +1,197 @@
+import { c as addressOf, d as numberFromAddress, f as randomTaskNumber, n as ASSESSMENT_TASK_EVENT, p as taskNumber, r as ASSESSMENT_UNPACKED_EVENT, s as SHOWN_EVENT, t as ASSESSMENT_ANSWER_EVENT, u as nextTaskNumber } from "./tasks-DADUYy52.mjs";
+import { createSSRApp, h, nextTick, ref, shallowRef } from "vue";
+// runtime/explainer/islands.ts
+/** A text that is not empty, trimmed, or undefined. */
+const textOf = (value) => typeof value === "string" && value.trim() !== "" ? value.trim() : void 0;
+/** The feedback on an answer, with the reason of a wrong one, in place of the one before, with the focus. */
+function showFeedback(feedback, correct, reason) {
+	feedback.className = `question-feedback ${correct ? "question-right" : "question-wrong"}`;
+	feedback.textContent = (correct ? feedback.dataset["right"] : feedback.dataset["wrong"]) ?? "";
+	if (!correct && typeof reason === "string" && reason.trim() !== "") {
+		const why = feedback.ownerDocument.createElement("span");
+		why.className = "question-diagnosis";
+		why.textContent = reason;
+		feedback.append(" ", why);
+	}
+	feedback.tabIndex = -1;
+	feedback.focus();
+}
+/** The nojs text as a text description under the running component: folded, one click opens it. */
+function foldCaption(element, nojs) {
+	const doc = element.ownerDocument;
+	const details = doc.createElement("details");
+	const summary = doc.createElement("summary");
+	summary.textContent = element.dataset["caption"] ?? "";
+	details.append(summary, ...nojs.childNodes);
+	nojs.replaceChildren(details);
+	nojs.classList.add("explainer-caption");
+}
+/** The index of the typical mistake `answer` makes, from 0, compared as JSON; undefined for none. */
+function mistakeOf(logic, task, answer, props) {
+	const mistakes = logic.mistakes?.(task, props);
+	if (!Array.isArray(mistakes)) return void 0;
+	const index = mistakes.findIndex((mistake) => mistake !== void 0 && JSON.stringify(mistake) === JSON.stringify(answer));
+	return index < 0 ? void 0 : index;
+}
+/**
+* Mounts an exercise component of a self-assessment: the task of the seed it gives, each answer judged as it changes
+* and sent on, no "Prüfen".
+*/
+function assess(element, island, component, props, logic) {
+	const lang = element.ownerDocument.documentElement.lang || "de";
+	const seeds = JSON.parse(element.dataset["seeds"] ?? "[1]");
+	const seed = ref(seeds[0] ?? 1);
+	const round = ref(0);
+	const declaresChecked = element.dataset["checked"] !== void 0;
+	/** What the answer the component has now gives: null for none, an incomplete one, or one its logic cannot read. */
+	const judge = (answer) => {
+		if (answer === void 0) return null;
+		try {
+			const task = logic.generate(seed.value, props);
+			const correct = logic.check(task, answer) === true;
+			const message = correct ? void 0 : textOf(logic.reason?.(task, answer, props, lang));
+			const shown = logic.show === void 0 ? void 0 : textOf(logic.show(answer, task, props, lang));
+			const mistake = correct ? void 0 : mistakeOf(logic, task, answer, props);
+			return {
+				correct,
+				...shown === void 0 ? {} : { answer: shown },
+				...message === void 0 ? {} : { message },
+				...mistake === void 0 ? {} : { mistake }
+			};
+		} catch {
+			return null;
+		}
+	};
+	const onAnswer = (answer) => {
+		element.dispatchEvent(new CustomEvent(ASSESSMENT_ANSWER_EVENT, {
+			bubbles: true,
+			detail: judge(answer)
+		}));
+	};
+	const app = createSSRApp({ render: () => h(component, {
+		...props,
+		seed: seed.value,
+		key: round.value,
+		...declaresChecked ? { checked: false } : {},
+		onAnswer
+	}) });
+	app.config.idPrefix = element.id || "aufgabe";
+	app.mount(island);
+	const given = Number(element.dataset["seed"]);
+	if (given > 0) {
+		seed.value = given;
+		round.value += 1;
+	}
+	element.addEventListener(ASSESSMENT_TASK_EVENT, (event) => {
+		seed.value = event.detail.seed;
+		round.value += 1;
+	});
+}
+/** Hydrates one component in place, with the logic module of an exercise component. */
+async function hydrate(element, load, loadLogic) {
+	const island = element.querySelector(".explainer-island");
+	const nojs = element.querySelector(":scope > .explainer-nojs");
+	if (!island) return;
+	const props = JSON.parse(element.querySelector(":scope > script.explainer-component-props")?.textContent ?? "{}");
+	const feedback = element.querySelector(":scope > .question-feedback");
+	const { default: component } = await load();
+	if (element.dataset["exercise"] === void 0 || loadLogic === void 0) createSSRApp(component, props).mount(island);
+	else if (element.dataset["assessment"] !== void 0) assess(element, island, component, props, await loadLogic());
+	else {
+		const logic = await loadLogic();
+		const lang = element.ownerDocument.documentElement.lang || "de";
+		const form = element.querySelector(":scope > form.explainer-component-form");
+		const actions = form?.querySelector(":scope > .question-actions");
+		const check = actions?.querySelector(".question-check");
+		const seeds = JSON.parse(element.dataset["seeds"] ?? "[1]");
+		const count = Math.max(seeds.length, 1);
+		const seed = ref(seeds[0] ?? 1);
+		const answer = shallowRef(void 0);
+		const checked = ref(false);
+		const sync = () => {
+			if (check) check.disabled = answer.value === void 0 || checked.value;
+		};
+		const onAnswer = (value) => {
+			answer.value = value;
+			checked.value = false;
+			sync();
+		};
+		const declaresChecked = element.dataset["checked"] !== void 0;
+		createSSRApp({ render: () => h(component, {
+			...props,
+			seed: seed.value,
+			key: seed.value,
+			...declaresChecked ? { checked: checked.value } : {},
+			onAnswer
+		}) }).mount(island);
+		form?.addEventListener("submit", (event) => {
+			event.preventDefault();
+			if (answer.value === void 0 || checked.value) return;
+			const task = logic.generate(seed.value, props);
+			const correct = logic.check(task, answer.value) === true;
+			const message = correct ? void 0 : textOf(logic.reason?.(task, answer.value, props, lang));
+			const shown = logic.show === void 0 ? void 0 : textOf(logic.show(answer.value, task, props, lang));
+			checked.value = true;
+			sync();
+			nextTick(() => {
+				if (feedback) showFeedback(feedback, correct, message);
+			});
+			element.dispatchEvent(new CustomEvent("explainer-answered", {
+				bubbles: true,
+				detail: {
+					correct,
+					...shown === void 0 ? {} : { answer: shown },
+					...message === void 0 ? {} : { message }
+				}
+			}));
+		});
+		if (actions) actions.hidden = false;
+		sync();
+		const id = element.id;
+		const from = numberFromAddress(location.href, id);
+		let current = from === void 0 ? randomTaskNumber(count) : taskNumber(from, count);
+		history.replaceState(history.state, "", addressOf(location.href, id, current));
+		const controls = element.querySelector(":scope > .explainer-task-controls");
+		const number = controls?.querySelector(".explainer-task-number");
+		const show = () => {
+			seed.value = seeds[current - 1] ?? current;
+			answer.value = void 0;
+			checked.value = false;
+			sync();
+			if (number) number.textContent = (number.dataset["template"] ?? "{n}").replace("{n}", String(current));
+		};
+		show();
+		if (controls) controls.hidden = false;
+		controls?.querySelector(".explainer-new-task")?.addEventListener("click", () => {
+			current = nextTaskNumber(current, count);
+			history.replaceState(history.state, "", addressOf(location.href, id, current));
+			show();
+			if (feedback) {
+				feedback.className = "question-feedback";
+				feedback.textContent = "";
+			}
+			number?.focus();
+			element.dispatchEvent(new CustomEvent(SHOWN_EVENT, { bubbles: true }));
+		});
+	}
+	island.hidden = false;
+	if (nojs) {
+		if (element.dataset["nojs"] === "caption") foldCaption(element, nojs);
+		else nojs.hidden = true;
+	}
+	element.dataset["hydrated"] = "";
+}
+/** Hydrates every component of the page. */
+function startIslands(components, logics = {}, root = document) {
+	const start = () => {
+		for (const element of root.querySelectorAll(".explainer-component:not([data-started])")) {
+			element.dataset["started"] = "";
+			const name = element.dataset["component"] ?? "";
+			const load = components[name];
+			if (load) hydrate(element, load, logics[name]);
+		}
+	};
+	start();
+	if (root.querySelector("template.explainer-assessment-template")) root.addEventListener(ASSESSMENT_UNPACKED_EVENT, start, { once: true });
+}
+export { startIslands };