M17: add interactive base converter

.github/workflows/build.yml

@@ -20,6 +20,8 @@ jobs:
           sudo apt-get install -y pandoc texlive-xetex calibre poppler-utils epubcheck
       - name: Check sources
         run: make check
+      - name: Test interactive tools
+        run: node tests/base-converter.test.js
       - name: Build HTML, EPUB, PDF and Kindle
         run: make all
       - name: Upload course artifacts

.github/workflows/pages.yml

@@ -32,6 +32,7 @@ jobs:
           mkdir -p _site/no _site/en
           cp build/html/no/index.html _site/no/index.html
           cp build/html/en/index.html _site/en/index.html
+          cp -R interactive _site/interactive
           cat > _site/index.html <<'EOF'
           <!doctype html>
           <html lang="en">
@@ -55,6 +56,7 @@ jobs:
               <nav>
                 <a href="no/">Norsk</a>
                 <a href="en/">English</a>
+                <a href="interactive/base-converter/">Basekonverterer</a>
               </nav>
             </main>
           </body>

interactive/base-converter/converter.js

@@ -0,0 +1,53 @@
+"use strict";
+
+const value = document.querySelector("#value");
+const base = document.querySelector("#base");
+const error = document.querySelector("#error");
+const outputs = [[2,"b2"],[8,"b8"],[10,"b10"],[16,"b16"],[36,"b36"]];
+
+function digitValue(ch) {
+  const code = ch.toUpperCase().charCodeAt(0);
+  if (code >= 48 && code <= 57) return code - 48;
+  if (code >= 65 && code <= 90) return code - 55;
+  return -1;
+}
+
+function parseInBase(text, radix) {
+  let s = text.trim();
+  if (!s) throw new Error("Skriv inn et heltall.");
+  let sign = 1n;
+  if (s[0] === "+" || s[0] === "-") {
+    if (s[0] === "-") sign = -1n;
+    s = s.slice(1);
+  }
+  if (!s) throw new Error("Tallet mangler sifre.");
+  let result = 0n;
+  for (const ch of s) {
+    const digit = digitValue(ch);
+    if (digit < 0 || digit >= radix)
+      throw new Error(`Sifferet «${ch}» er ikke gyldig i base ${radix}.`);
+    result = result * BigInt(radix) + BigInt(digit);
+  }
+  return sign * result;
+}
+
+function update() {
+  const radix = Number(base.value);
+  if (!Number.isInteger(radix) || radix < 2 || radix > 36) {
+    error.textContent = "Basen må være et heltall fra 2 til 36.";
+    outputs.forEach(([,id]) => document.querySelector("#"+id).textContent = "—");
+    return;
+  }
+  try {
+    const n = parseInBase(value.value, radix);
+    error.textContent = "";
+    for (const [r,id] of outputs)
+      document.querySelector("#"+id).textContent = n.toString(r).toUpperCase();
+  } catch (e) {
+    error.textContent = e.message;
+    outputs.forEach(([,id]) => document.querySelector("#"+id).textContent = "—");
+  }
+}
+value.addEventListener("input", update);
+base.addEventListener("input", update);
+update();

interactive/base-converter/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="no">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>EduNumbers – Basekonverterer</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<main>
+  <p><a href="../no/">← EduNumbers</a></p>
+  <h1>Basekonverterer</h1>
+  <p>Utforsk hvordan samme heltall representeres i forskjellige tallsystemer.</p>
+  <section class="tool">
+    <label for="value">Verdi</label>
+    <input id="value" value="42" autocomplete="off" spellcheck="false">
+    <label for="base">Input-base</label>
+    <input id="base" type="number" min="2" max="36" value="10">
+    <p id="error" role="alert" aria-live="polite"></p>
+    <dl>
+      <div><dt>Binær (2)</dt><dd id="b2"></dd></div>
+      <div><dt>Oktal (8)</dt><dd id="b8"></dd></div>
+      <div><dt>Desimal (10)</dt><dd id="b10"></dd></div>
+      <div><dt>Hex (16)</dt><dd id="b16"></dd></div>
+      <div><dt>Base 36</dt><dd id="b36"></dd></div>
+    </dl>
+  </section>
+  <p class="note">Verktøyet bruker JavaScript <code>BigInt</code>, slik at store heltall kan utforskes uten avrundingsfeil.</p>
+</main>
+<script src="converter.js"></script>
+</body>
+</html>

interactive/base-converter/style.css

@@ -0,0 +1,8 @@
+:root{font-family:system-ui,sans-serif;line-height:1.55;color-scheme:light dark}
+body{margin:0}main{max-width:48rem;margin:3rem auto;padding:0 1.25rem}
+.tool{display:grid;gap:.7rem;padding:1.25rem;border:1px solid #8888;border-radius:.75rem}
+input{font:inherit;padding:.55rem}.tool dl{display:grid;gap:.45rem;margin:1rem 0 0}
+.tool dl div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;border-top:1px solid #8885;padding-top:.45rem}
+dt{font-weight:600}dd{margin:0;font-family:ui-monospace,monospace;overflow-wrap:anywhere}
+#error{min-height:1.5em;margin:0;font-weight:600}.note{margin-top:1.5rem}
+a{color:inherit}

tests/base-converter.test.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const vm = require("vm");
+const source = fs.readFileSync("interactive/base-converter/converter.js", "utf8");
+const start = source.indexOf("function digitValue");
+const end = source.indexOf("function update");
+const sandbox = {};
+vm.createContext(sandbox);
+vm.runInContext(source.slice(start, end), sandbox);
+
+const cases = [
+  ["101010", 2, 42n],
+  ["52", 8, 42n],
+  ["42", 10, 42n],
+  ["2A", 16, 42n],
+  ["-2A", 16, -42n],
+  ["ZZ", 36, 1295n],
+  ["FFFFFFFFFFFFFFFF", 16, 18446744073709551615n],
+];
+for (const [text, base, expected] of cases) {
+  const actual = sandbox.parseInBase(text, base);
+  if (actual !== expected) throw new Error(`${text}/${base}: ${actual} != ${expected}`);
+}
+for (const [text, base] of [["2",2],["G",16],["",10]]) {
+  let failed = false;
+  try { sandbox.parseInBase(text, base); } catch { failed = true; }
+  if (!failed) throw new Error(`Expected rejection: ${text}/${base}`);
+}
+console.log("Base converter tests passed");