paperlint 14.4.0 → 14.5.0

package/skills/build-label-page/scripts/label-page-translations.test.ts

@@ -0,0 +1,371 @@
+/**
+ * A second language for the page's own words (#394): what `translations` must cover, what the page
+ * is handed, and that the ids and the key do not depend on it.
+ */
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { test } from "vitest";
+import { z } from "zod";
+import {
+  ITEMS,
+  QUESTIONS,
+  build,
+  config,
+  run,
+  setup,
+} from "../../../test/label-page-kit.ts";
+
+/** The questions of the kit's page in Russian: every question and every answer, by id and value. */
+const RU = {
+  title: "Разметьте",
+  labels: { how_to: "📖 Как отвечать", for_example: "Например: " },
+  questions: {
+    label: {
+      text: "Это верно?",
+      short: "верно?",
+      options: {
+        yes: { label: "Да", example: "Сортировка вернула 1, 2, 3." },
+        no: { label: "Нет", example: "Сортировка вернула 3, 1, 2." },
+      },
+    },
+    boundary: {
+      text: "Ясный случай или пограничный?",
+      options: {
+        clear: { label: "Ясный", example: "Пустой список." },
+        boundary: { label: "Пограничный", example: "Два равных ключа." },
+      },
+    },
+  },
+};
+const withRu = (over: Record<string, unknown> = {}) =>
+  config({ translations: { ru: RU }, ...over });
+
+/** The page's data: the JSON the template is filled with. */
+const dataOf = (page: string): unknown =>
+  JSON.parse(
+    String(
+      page
+        .split('<script type="application/json" id="data">')[1]
+        ?.split("</script>")[0],
+    ).replaceAll("<\\/", "</"),
+  );
+const Data = z
+  .object({ lang: z.string(), translations: z.record(z.string(), z.unknown()) })
+  .loose();
+
+/** What the page is handed for Russian: the kit's labels with RU's over them, and every question. */
+function expectedRu() {
+  const [label, boundary] = QUESTIONS;
+  assert.ok(label !== undefined && boundary !== undefined);
+  const inRu = (qid: "label" | "boundary", value: string) =>
+    qid === "label"
+      ? RU.questions.label.options[value === "yes" ? "yes" : "no"]
+      : RU.questions.boundary.options[value === "clear" ? "clear" : "boundary"];
+  return {
+    title: RU.title,
+    intro: "",
+    labels: {
+      place: "{id} · {n} of {total}",
+      line: "Line",
+      line_part: "{line} · part {part} of {of}",
+      repeat: "Card {index} of {of}",
+      practice_example: "",
+      hidden: "lines {from}–{to}",
+      hidden_one: "line {from}",
+      wait: "⏳ You can answer in {s} s",
+      ...RU.labels,
+    },
+    questions: [
+      {
+        id: "label",
+        text: "Это верно?",
+        short: "верно?",
+        options: label.options.map((o) => ({
+          value: o.value,
+          ...inRu("label", o.value),
+        })),
+      },
+      {
+        id: "boundary",
+        text: "Ясный случай или пограничный?",
+        options: boundary.options.map((o) => ({
+          value: o.value,
+          ...inRu("boundary", o.value),
+        })),
+      },
+    ],
+  };
+}
+/** The keys a built page's data has, of `names`. */
+const dataKeys = (page: string, names: readonly string[]) =>
+  names.filter((k) =>
+    Object.hasOwn(z.object({}).loose().parse(dataOf(page)), k),
+  );
+
+test("🔴 a translation hands the page each language's words whole, and leaves the key byte for byte as without it", () => {
+  const plain = setup("lang-plain", config());
+  const translated = setup("lang-ru", withRu());
+  const { page } = build(translated);
+  const keyOf = (dir: string) =>
+    readFileSync(join(dir, "out", "key.json"), "utf8");
+  const data = Data.parse(dataOf(page));
+  assert.deepEqual(
+    [
+      data.lang,
+      data.translations,
+      dataKeys(build(plain).page, ["lang", "translations"]),
+    ],
+    // Guards: a page without translations carries neither key, so it is as it was.
+    ["en", { ru: expectedRu() }, []],
+  );
+  assert.equal(keyOf(translated), keyOf(plain));
+});
+
+test("🔴 a page that names its language without translations keeps it, and still carries no translations", () => {
+  const page = build(setup("lang-only", config({ lang: "de" }))).page;
+  assert.deepEqual(
+    [
+      z.object({ lang: z.string() }).loose().parse(dataOf(page)).lang,
+      dataKeys(page, ["lang", "translations"]),
+    ],
+    ["de", ["lang"]],
+  );
+});
+
+/** RU with an intro, a reason prompt on «no» and a card question naming the marked line. */
+const RU_FULL = {
+  ...RU,
+  intro: "Отвечайте как знаете.",
+  situation_question: "Строка {n} верна?",
+  questions: {
+    ...RU.questions,
+    label: {
+      ...RU.questions.label,
+      options: {
+        ...RU.questions.label.options,
+        no: { ...RU.questions.label.options.no, ask_why: "Почему?" },
+      },
+    },
+  },
+};
+/** A German page with an intro, a reason prompt and a card that asks in its own words, and RU_FULL. */
+function fullConfig() {
+  const [label, boundary] = QUESTIONS;
+  assert.ok(label !== undefined && boundary !== undefined);
+  const [first, ...rest] = ITEMS;
+  return config({
+    lang: "de",
+    intro: "Answer as you know.",
+    questions: [
+      {
+        ...label,
+        options: [
+          label.options[0],
+          { ...label.options[1], ask_why: "Why not?" },
+        ],
+      },
+      boundary,
+    ],
+    translations: { ru: RU_FULL },
+    items: [
+      {
+        ...first,
+        situation: { question: "Is line 3 correct?" },
+        excerpt: { lines: [{ n: 3, text: "x = 1", mark: true }] },
+      },
+      ...rest,
+    ],
+  });
+}
+const FullData = z
+  .object({
+    lang: z.string(),
+    translations: z.object({
+      ru: z
+        .object({
+          intro: z.string(),
+          situation_question: z.string(),
+          questions: z.array(z.unknown()),
+        })
+        .loose(),
+    }),
+  })
+  .loose();
+
+test("🔴 the page's own language may be named, and an intro, a reason prompt and a card's own question are translated with it", () => {
+  const data = FullData.parse(
+    dataOf(build(setup("lang-full", fullConfig())).page),
+  );
+  const ru = data.translations.ru;
+  assert.deepEqual(
+    [data.lang, ru.intro, ru.situation_question, ru.questions[0]],
+    [
+      "de",
+      RU_FULL.intro,
+      RU_FULL.situation_question,
+      {
+        id: "label",
+        text: "Это верно?",
+        short: "верно?",
+        options: [
+          { value: "yes", ...RU.questions.label.options.yes },
+          { value: "no", ...RU_FULL.questions.label.options.no },
+        ],
+      },
+    ],
+  );
+});
+
+/** The kit's page with its Russian words changed by `ru`, and more of the config by `over`. */
+const refusedWith = (
+  ru: Record<string, unknown>,
+  over: Record<string, unknown> = {},
+) => withRu({ translations: { ru: { ...RU, ...ru } }, ...over });
+const ruQuestion = (
+  qid: "label" | "boundary",
+  change: Record<string, unknown>,
+) => ({
+  questions: { ...RU.questions, [qid]: { ...RU.questions[qid], ...change } },
+});
+const ruOptions = (options: Record<string, unknown>) =>
+  ruQuestion("label", { options });
+const situated = (excerpt: boolean) => ({
+  items: ITEMS.map((i, n) =>
+    n === 0
+      ? {
+          ...i,
+          situation: { question: "Is it correct?" },
+          ...(excerpt
+            ? { excerpt: { lines: [{ n: 3, text: "x", mark: true }] } }
+            : {}),
+        }
+      : i,
+  ),
+});
+
+/** A page whose first question asks why on «no». */
+function asksWhy() {
+  const [label] = QUESTIONS;
+  assert.ok(label !== undefined);
+  return [
+    {
+      ...label,
+      options: [label.options[0], { ...label.options[1], ask_why: "Why?" }],
+    },
+    QUESTIONS[1],
+  ];
+}
+/** Configs only the translation checks refuse, each with its refusal. */
+const REFUSALS: readonly (readonly [
+  string,
+  Record<string, unknown>,
+  string,
+])[] = [
+  [
+    "own",
+    withRu({ translations: { en: RU } }),
+    "translations.en: is the page's own language (`lang` is 'en') — translate into another one",
+  ],
+  [
+    "no-question",
+    refusedWith({ questions: { label: RU.questions.label } }),
+    "translations.ru.questions.boundary: is required and missing — every question of the page is translated",
+  ],
+  [
+    "stray-question",
+    refusedWith({
+      questions: { ...RU.questions, ghost: RU.questions.label },
+    }),
+    "translations.ru.questions.ghost: not a question of this page (label, boundary)",
+  ],
+  [
+    "no-answer",
+    refusedWith(ruOptions({ yes: RU.questions.label.options.yes })),
+    "translations.ru.questions.label.options.no: is required and missing — every answer is translated",
+  ],
+  [
+    "stray-answer",
+    refusedWith(
+      ruOptions({
+        ...RU.questions.label.options,
+        maybe: { label: "Может", example: "e" },
+      }),
+    ),
+    "translations.ru.questions.label.options.maybe: not one of yes, no",
+  ],
+  [
+    "same-label",
+    refusedWith(
+      ruOptions({
+        ...RU.questions.label.options,
+        no: { label: " да ", example: "e" },
+      }),
+    ),
+    "translations.ru.questions.label.options.no.label: ' да ' reads the same as options.yes.label — each button needs its own label",
+  ],
+  [
+    "no-why",
+    withRu({ questions: asksWhy() }),
+    "translations.ru.questions.label.options.no.ask_why: is required and missing — this answer asks why",
+  ],
+  [
+    "stray-why",
+    refusedWith(
+      ruOptions({
+        ...RU.questions.label.options,
+        no: { ...RU.questions.label.options.no, ask_why: "Почему?" },
+      }),
+    ),
+    "translations.ru.questions.label.options.no.ask_why: is never shown — the page has no text it translates",
+  ],
+  [
+    "no-intro",
+    withRu({ intro: "Answer." }),
+    "translations.ru.intro: is required and missing — the page has an `intro`",
+  ],
+  [
+    "stray-intro",
+    refusedWith({ intro: "Отвечайте." }),
+    "translations.ru.intro: is never shown — the page has no text it translates",
+  ],
+  [
+    "no-situation",
+    withRu(situated(true)),
+    "translations.ru.situation_question: is required and missing — items[0].situation asks the first question in the card's own words",
+  ],
+  [
+    "stray-situation",
+    refusedWith({ situation_question: "Верно?" }),
+    "translations.ru.situation_question: is never shown — the page has no text it translates",
+  ],
+  [
+    "line-without-code",
+    refusedWith({ situation_question: "Строка {n} верна?" }, situated(false)),
+    "translations.ru.situation_question: names the marked line, and items[0] has no `excerpt` — add it, or write the question without `{n}` and `{line}`",
+  ],
+];
+/** Build `cfg` in a folder of its own; the exit status and what it printed. */
+const tryBuild = (name: string, cfg: Record<string, unknown>) => {
+  const dir = setup(name, cfg);
+  return run(["build", join(dir, "items.json"), join(dir, "out")]);
+};
+
+test("🔴 a translation that leaves out or invents a question, an answer, an intro, a reason prompt or a card's question stops the build, by path", () => {
+  const cases = REFUSALS;
+  assert.deepEqual(
+    cases.map(([name, cfg]) =>
+      tryBuild(`lang-refused-${name}`, cfg).out.trim(),
+    ),
+    cases.map(([, , why]) => `REFUSED: ${why}`),
+  );
+  // Guards: the same card question with its marked line in the code, and one without `{n}` on a
+  // card without code, both build.
+  assert.deepEqual(
+    [
+      refusedWith({ situation_question: "Строка {n} верна?" }, situated(true)),
+      refusedWith({ situation_question: "Верно?" }, situated(false)),
+    ].map((cfg, n) => tryBuild(`lang-situated-${String(n)}`, cfg).status),
+    [0, 0],
+  );
+});

package/skills/build-label-page/scripts/page-template.html

@@ -143,6 +143,9 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
 .match.no { color: var(--bad); }
 .who { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); }
 .who button { width: auto; min-height: 44px; border: 0; color: var(--accent); padding: 0 4px; }
+/* The language switch: small buttons side by side under the title, the picked one pressed. */
+.langs { display: flex; gap: 8px; }
+.langs button { width: auto; min-width: 56px; min-height: 44px; text-align: center; }
 </style>
 <main id="app"><p class="muted">Loading…</p></main>
 <script type="application/json" id="data">__DATA__</script>
@@ -182,6 +185,34 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
   var WHY_PAUSE_MS = 800;
 
   try { if (localStorage.getItem("label-filter") === "next") state.filter = "next"; } catch (e) {}
+  var BASE = { title: DATA.title, intro: DATA.intro, labels: DATA.labels, questions: DATA.questions };
+  // ── the page's own words, in the language picked (DATA.translations, #394) ─────────────────
+  // Only the page's words change: the quote, the code and every note on a card stay as built.
+  var LANGS = DATA.translations ? [DATA.lang].concat(Object.keys(DATA.translations)) : [];
+  state.lang = DATA.lang || "en";
+  try {
+    var said = localStorage.getItem("label-lang");
+    if (LANGS.indexOf(said) !== -1) state.lang = said;
+  } catch (e) {}
+  function words() { return state.lang === DATA.lang || !DATA.translations ? BASE : DATA.translations[state.lang]; }
+  function Qs() { return words().questions; }
+  function pickLang(lang) {
+    state.lang = lang;
+    try { localStorage.setItem("label-lang", lang); } catch (e) {}
+    render();
+  }
+  // One button per language, its tag on it ("EN", "RU"); the one picked is pressed.
+  function langSwitch() {
+    var row = mark(el("div", "langs"), "lang-switch", { lang: state.lang, langs: LANGS });
+    LANGS.forEach(function (lang) {
+      var b = mark(el("button", "", lang.toUpperCase()), "lang-option", { lang: lang });
+      b.type = "button";
+      b.setAttribute("aria-pressed", String(state.lang === lang));
+      b.addEventListener("click", function () { pickLang(lang); });
+      row.appendChild(b);
+    });
+    return row;
+  }
   // ── who is answering (DATA.answerers): each answerer's documents are "<answerer>~<id>" ─────
   // "~" is outside the build's name pattern, so no answerer, item, group or practice id holds it.
   var SEP = "~";
@@ -240,7 +271,7 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
   function unsaved(id) { return !state.answers[id] && state.firstSeconds[id] === undefined; }
   function locked(id) { return MIN_SECONDS > 0 && unsaved(id) && dwellMs(id) < MIN_SECONDS * 1000; }
   function waitSeconds(id) { return Math.ceil((MIN_SECONDS * 1000 - dwellMs(id)) / 1000); }
-  function waitText(id) { return fill(DATA.labels.wait, { s: waitSeconds(id) }); }
+  function waitText(id) { return fill(words().labels.wait, { s: waitSeconds(id) }); }
   // The seconds stored with an item: those of its first save, kept on every later write.
   function secondsOf(id) {
     var d = state.answers[id];
@@ -341,11 +372,11 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
     return d[qid];
   }
   function needsWhy(q, v) { return (DATA.allowed.needs_why[q.id] || []).indexOf(v) !== -1; }
-  function questionOf(qid) { return DATA.questions.filter(function (q) { return q.id === qid; })[0]; }
+  function questionOf(qid) { return Qs().filter(function (q) { return q.id === qid; })[0]; }
   // What an item still needs: an answer, or the reason its answer asks for (named "<short> (why)").
   function missingFor(id) {
     var a = answersOf(id), r = reasonsOf(id);
-    return DATA.questions.map(function (q) {
+    return Qs().map(function (q) {
       if (!valid(DATA.allowed.questions[q.id], a[q.id])) return q;
       if (needsWhy(q, a[q.id]) && !(r[q.id] || "").trim()) {
         return { id: q.id, text: q.text + " (why)", short: (q.short || q.text) + " (why)" };
@@ -373,12 +404,12 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
   }
   function practiceMissing(pid) {
     var a = practiceAnswers(pid);
-    return DATA.questions.filter(function (q) { return !valid(DATA.allowed.questions[q.id], a[q.id]); });
+    return Qs().filter(function (q) { return !valid(DATA.allowed.questions[q.id], a[q.id]); });
   }
   function practiceAnswered(p) { return practiceMissing(p.id).length === 0; }
   function practiceMatched(p) {
     var a = practiceAnswers(p.id);
-    return DATA.questions.every(function (q) { return a[q.id] === p.expected[q.id]; });
+    return Qs().every(function (q) { return a[q.id] === p.expected[q.id]; });
   }
   function practiceOpen() { return !DATA.practice.items.every(practiceAnswered); }
   function groupDone(g) { return familiarity(g) !== undefined && groupItems(g).every(function (i) { return itemDone(i.id); }); }
@@ -540,7 +571,7 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
       if (o.icon) b.appendChild(el("span", "icon", o.icon));
       b.appendChild(el("span", "label", o.label));
       if (notes && notes[o.value]) b.appendChild(mark(rich("span", "sub", notes[o.value]), "answer-sub", { question: qid, value: o.value }));
-      if (withExamples && o.example) b.appendChild(rich("span", "ex", DATA.labels.practice_example + o.example));
+      if (withExamples && o.example) b.appendChild(rich("span", "ex", words().labels.practice_example + o.example));
       b.type = "button";
       b.setAttribute("aria-pressed", String(current === o.value));
       b.disabled = disabled;
@@ -589,7 +620,7 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
     var shown = itemsShown();
     if (MIN_SECONDS && unsaved(item.id)) card.setAttribute("data-id", item.id);
     mark(card, "item", { id: item.id, index: shown.indexOf(item) + 1, total: shown.length });
-    card.appendChild(el("div", "id", fill(DATA.labels.place, { id: item.id, n: shown.indexOf(item) + 1, total: shown.length })));
+    card.appendChild(el("div", "id", fill(words().labels.place, { id: item.id, n: shown.indexOf(item) + 1, total: shown.length })));
     var ctx = termsOf(item);
     evidence(card, item, ctx);
     var a = answersOf(item.id);
@@ -602,7 +633,7 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
       var note = ask.appendChild(mark(el("p", "gate", waitText(item.id)), "wait", { id: item.id, seconds: waitSeconds(item.id) }));
       state.gates[item.id] = { note: note, buttons: Array.prototype.slice.call(ask.querySelectorAll(".opts button")) };
     }
-    DATA.questions.forEach(function (q) {
+    Qs().forEach(function (q) {
       var o = q.options.filter(function (x) { return x.value === a[q.id] && x.ask_why; })[0];
       if (!o) return;
       card.appendChild(el("p", "q", o.ask_why));
@@ -716,7 +747,7 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
       if (prev && l.n > prev.n + 1) {
         var from = prev.n + 1, to = l.n - 1;
         pre.appendChild(mark(codeRow(" gap", "\u22ee", "", withGutter,
-          fill(from === to ? DATA.labels.hidden_one : DATA.labels.hidden, { from: from, to: to })).row, "gap", { from: from, to: to }));
+          fill(from === to ? words().labels.hidden_one : words().labels.hidden, { from: from, to: to })).row, "gap", { from: from, to: to }));
       }
       var r = codeRow((l.mark ? " hit" : "") + (l.context ? " ctx" : ""), (l.mark ? "\u25b6" : "") + l.n,
         l.gutter, withGutter, l.text);
@@ -936,11 +967,11 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
     if (item.quote) card.appendChild(quoteBlock(item, ctx));
     if (item.body !== undefined) {
       var body = rich("p", "body", item.body);
-      card.appendChild(DATA.labels.body ? row(DATA.labels.body, body) : body);
+      card.appendChild(words().labels.body ? row(words().labels.body, body) : body);
     }
-    if (item.repeat && item.repeat.of > 1) card.appendChild(el("p", "muted", fill(DATA.labels.repeat, item.repeat)));
+    if (item.repeat && item.repeat.of > 1) card.appendChild(el("p", "muted", fill(words().labels.repeat, item.repeat)));
     if (item.code) card.appendChild(codeBlock(item.code));
-    if (item.unit) card.appendChild(row(item.unit.of > 1 ? fill(DATA.labels.line_part, { line: DATA.labels.line, part: item.unit.part, of: item.unit.of }) : DATA.labels.line,
+    if (item.unit) card.appendChild(row(item.unit.of > 1 ? fill(words().labels.line_part, { line: words().labels.line, part: item.unit.part, of: item.unit.of }) : words().labels.line,
       markedLine(item.unit)));
     // A rule the item names, with what it does in the linter's own words (looked up at build time).
     (item.rules || []).forEach(function (r) {
@@ -959,13 +990,21 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
     var o = q.options.filter(function (x) { return x.value === v; })[0];
     return o ? o.label : v;
   }
+  // A card's own wording of the first question, or the translation's, with `{n}` its marked line's number.
+  function situationQuestion(item) {
+    var own = words().situation_question;
+    if (own === undefined) return situated("p", "q", item.situation.question, item.situation.line);
+    var hit = item.excerpt && item.excerpt.lines.filter(function (l) { return l.mark; })[0];
+    var line = hit ? { n: hit.n, text: hit.text.trim() } : null;
+    return situated("p", "q", line ? fill(own, { n: line.n }) : own, line);
+  }
   // One question per screen: the answered ones stay as a line (with "Change"), and only one question
   // is asked: the one being changed, else the first unanswered.
   function askOne(card, a, editing, onPick, onChange, off, withExamples, item) {
-    var open = DATA.questions.filter(function (q) { return !valid(DATA.allowed.questions[q.id], a[q.id]); });
-    var asked = DATA.questions.filter(function (q) { return q.id === editing; })[0] || open[0];
+    var open = Qs().filter(function (q) { return !valid(DATA.allowed.questions[q.id], a[q.id]); });
+    var asked = Qs().filter(function (q) { return q.id === editing; })[0] || open[0];
     var situation = item.situation, notes = item.answer_notes || {};
-    DATA.questions.forEach(function (q) {
+    Qs().forEach(function (q) {
       if (q === asked || !valid(DATA.allowed.questions[q.id], a[q.id])) return;
       var line = el("p", "answered", (q.short || q.text) + ": " + labelOf(q, a[q.id]) + " ");
       if (onChange) {
@@ -980,7 +1019,7 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
     if (!asked) return null;
     var ask = el("div", "ask");
     // A card's situation asks the page's first question in its own words; the others keep theirs.
-    ask.appendChild(mark(situation && asked === DATA.questions[0] ? situated("p", "q", situation.question, situation.line) : rich("p", "q", asked.text),
+    ask.appendChild(mark(situation && asked === Qs()[0] ? situationQuestion(item) : rich("p", "q", asked.text),
       "question", { question: asked.id }));
     ask.appendChild(options(asked.options, a[asked.id], function (v) { onPick(asked, v); }, off, withExamples, notes[asked.id], asked.id));
     card.appendChild(ask);
@@ -990,18 +1029,19 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
   function howTo() {
     var sec = el("section");
     var body = sec;
-    if (practiceOpen()) sec.appendChild(el("h2", "", "📖 How to answer"));
+    var heading = words().labels.how_to;
+    if (practiceOpen()) sec.appendChild(el("h2", "", heading));
     else {
       body = sec.appendChild(el("details"));
-      body.appendChild(el("summary", "", "📖 How to answer"));
+      body.appendChild(el("summary", "", heading));
     }
-    DATA.questions.forEach(function (q) {
-      body.appendChild(el("p", "q", q.text));
+    Qs().forEach(function (q) {
+      body.appendChild(mark(el("p", "q", q.text), "how-to-question", { question: q.id }));
       var list = el("div", "examples");
       q.options.forEach(function (o) {
-        var row = el("div", "example");
+        var row = mark(el("div", "example"), "how-to-answer", { question: q.id, value: o.value });
         row.appendChild(el("b", "", (o.icon ? o.icon + " " : "") + o.label));
-        row.appendChild(rich("span", "muted", "For example: " + o.example));
+        row.appendChild(rich("span", "muted", words().labels.for_example + o.example));
         list.appendChild(row);
       });
       body.appendChild(list);
@@ -1016,7 +1056,7 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
     var a = practiceAnswers(p.id);
     askOne(card, a, undefined, function (q, v) { answerPractice(p.id, q.id, v); }, null, off, true, p);
     if (practiceAnswered(p)) {
-      var expected = DATA.questions.map(function (q) { return labelOf(q, p.expected[q.id]); }).join(" · ");
+      var expected = Qs().map(function (q) { return labelOf(q, p.expected[q.id]); }).join(" · ");
       card.appendChild(rich("p", practiceMatched(p) ? "status saved" : "quote",
         (practiceMatched(p) ? "Matched. " : "Not matched. Expected: " + expected + ". ") + p.why));
     }
@@ -1134,8 +1174,10 @@ button.more { width: auto; min-height: 44px; border: 0; color: var(--accent); pa
     app.textContent = "";
     var top = el("header", "top");
     app.appendChild(top);
-    top.appendChild(el("h1", "", DATA.title));
-    if (DATA.intro) top.appendChild(el("p", "muted", DATA.intro));
+    try { document.documentElement.lang = state.lang; } catch (e) {}
+    top.appendChild(el("h1", "", words().title));
+    if (LANGS.length) top.appendChild(langSwitch());
+    if (words().intro) top.appendChild(el("p", "muted", words().intro));
     if (state.store === "none") {
       top.appendChild(el("div", "banner",
         "Answers cannot be saved in this view, so it is read-only. Open the page from the claude.ai " +