functle

@@ -7,6 +7,7 @@

         <link rel="icon" type="image/png" href="/favicon.png">

         <style>

             body { font-family: sans-serif; margin: 0; width: 100%; }

+            input:not(:checked) + #mobile { display: none; }

             #mobile td { min-width: min(16vw, 5rem); height: min(16vw, 5rem); text-align: center; }

             #plot { border: 1px solid grey; flex-shrink: 0; width: min(90vw, 25em); height: min(90vw, 25em); flex-shrink: 0; }

             #grid { border-collapse: separate; border-spacing: 3px 12px; margin-top: 10px; }

@@ -47,7 +48,7 @@

                     <li>l for natural log</li>

                     <li>+, -, *, / for basic operations</li>

                 </ul>

-                <p>Or use the grid of buttons.

+                <p>Or use the on-screen keyboard.

                 Inputs to - and / are still taken in the usual order, so "2 x -" is two minus <var>x</var>.</p>

                 <p>For example, write 1 / (sin² <var>x</var>) as "1 x s q /", or ln(2) <var>e</var><sup><var>x</var></sup> as "2 l x e *".</p>

                 <p>Your answer will be coloured as feedback.

@@ -35,7 +35,7 @@ switch (host) {

 const container = document.getElementsByClassName("container")[0];

 const message = document.getElementById("message");

 const boxes = {grey: "⬜️", yellow: "🟨", green: "🟩"};

-const congrats = ["Incredible", "Amazing", "Great", "Nice", "You got it", "Whew"];

+const congrats = ["Incredible", "Great", "Nice", "Whew"];

 const gotitButton = document.getElementById("gotit");

 if (localStorage.getItem("gotit") === "true") hideInstructions(gotitButton);

@@ -1,12 +1,11 @@

 const keyToToken = { x:"x", 1:"1", 2:"2", q:"^2", c:"^3", s:"sin", e:"exp", l:"ln", "+":"+", "-":"-", "*":"*", "/":"/" };

-const maxGuesses = 6;

+const maxGuesses = 4;

 const mobile = /Mobi|Android/i.test(navigator.userAgent);

 const buttonKeys = [["x", "1", "2", "q"], ["c", "s", "e", "l"], ["+", "-", "*", "/"]];

 const grid = document.getElementById("grid");

-if (mobile) {

+function makeKeyboard() {

     const ib = document.createElement("table");

-    ib.id = "mobile";

     for (let i = 0; i < 3; i++) {

         const r = document.createElement("tr");

         for (let j = 0; j < 4; j++) {

@@ -42,7 +41,7 @@ if (mobile) {

     sc.colSpan = buttonKeys[0].length / 2;

     lr.append(sc);

     ib.append(lr);

-    grid.after(ib);

+    return ib;

 }

 function makeButton(label, size, handler) {

@@ -95,3 +94,16 @@ document.addEventListener("keyup", e => {

         }

     }

 });

+

+const inputButtons = makeKeyboard();

+inputButtons.id = "mobile";

+grid.after(inputButtons);

+if (!mobile) {

+    const toggleLabel = document.createElement("label");

+    toggleLabel.textContent = "Show on-screen keyboard";

+    toggleLabel.htmlFor = "tosk";

+    const toggleCheck = document.createElement("input");

+    toggleCheck.id = "tosk";

+    toggleCheck.type = "checkbox";

+    inputButtons.before(toggleLabel, toggleCheck);

+}