functle

@@ -6,13 +6,20 @@

             body { font-family: sans-serif; }

             #plot { border: 1px solid grey; flex-shrink: 0; height: 400px; }

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

-            #grid td { min-width: 40px; height: 40px; border: 1px solid #ccc; text-align: center; vertical-align: middle; font-weight: bold; }

+            #grid td { min-width: 60px; height: 60px; border: 1px solid #ccc; text-align: center; vertical-align: middle; font-weight: bold; transition: transform 0.3s ease; }

             .grey { background: #3a3a3c; color: white; }

             .yellow { background: #b59f3b; color: white; }

             .green { background: #538e4e; color: white; }

             #message { color: red; margin-top: 5px; }

             .side { margin-left: 20px; }

-            #guessInput { width: 6em; }

+            .shake { animation: shake 0.3s; }

+            @keyframes shake {

+                0% { transform: translateX(0); }

+                25% { transform: translateX(-5px); }

+                50% { transform: translateX(5px); }

+                75% { transform: translateX(-5px); }

+                100% { transform: translateX(0); }

+            }

             @media (min-aspect-ratio: 4/3) { .container { display: flex; } }

             @media (prefers-color-scheme: dark) { body { color: white; background-color: black; } }

         </style>

@@ -22,8 +29,6 @@

             <canvas id="plot" width="400" height="400"></canvas>

             <div class="side">

                 <div>

-                    <input id="guessInput" placeholder="token1 token2 ... token5">

-                    <button id="submitBtn">Guess</button>

                     <div id="message"></div>

                 </div>

                 <table id="grid"></table>

@@ -34,7 +39,7 @@

                 Functions here are made of values <var>x</var>, 1, and 2, modified by functions ^2 (square), ^3 (cube), sin, exp, and ln, combined by operators +, -, *, /.</p>

                 <p>Enter your answer in postfix (reverse Polish) notation.

                 For example, express 1 - <var>x</var> / (sin <var>x</var>) as "1 x x sin / -".</p>

-                <p>The correct answer will be six tokens.

+                <p>The correct answer will be five tokens.

                 Numerically equivalent rearranged answers will be accepted.</p>

                 <p>Enhanced from a prototype by ChatGPT o4-mini.</p>

             </div>

@@ -47,6 +52,153 @@

             };

             const allTokens = [...allowed.terminals, ...allowed.unary, ...allowed.binary];

             const tl = 5;

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

+            const target = generateExpr();

+            const maxGuesses = 6;

+            const width = 400, height = 400;

+            const ctx = document.getElementById("plot").getContext("2d");

+            const bound = 10;

+            const xs = [];

+            const targetYs = [];

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

+                const x = bound * (2 * i / width - 1);

+                xs.push(x);

+                const yv = evalPostfix(target, x);

+                targetYs.push(yv);

+            }

+            const clampLow = 1.5;

+            const clampHigh = 20;

+            let yMin = Math.min(...targetYs);

+            let yMax = Math.max(...targetYs);

+            if (isNaN(yMin) || yMin < -clampHigh) yMin = -clampHigh;

+            else if (yMin > -clampLow) yMin = -clampLow;

+            if (isNaN(yMax) || yMax > clampHigh) yMax = clampHigh;

+            else if (yMax < clampLow) yMax = clampLow;

+            const guessYsList = [];

+            const darkTheme = matchMedia('(prefers-color-scheme: dark)').matches;

+

+            function shakeRow(row) {

+                row.classList.remove("shake");

+                void row.offsetWidth;

+                row.classList.add("shake");

+            }

+

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

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

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

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

+                    const td = document.createElement("td");

+                    tr.appendChild(td);

+                }

+                grid.appendChild(tr);

+            }

+

+            let currentRow = 0;

+            let currentInput = [];

+            redrawAll();

+

+            document.addEventListener("keydown", e => {

+                const row = grid.rows[currentRow];

+                if (e.key === "Backspace") {

+                    if (currentInput.length > 0) {

+                        currentInput.pop();

+                        row.cells[currentInput.length].textContent = "";

+                    } else {

+                        shakeRow(row);

+                    }

+                } else if (e.key === "Enter") {

+                    submitGuess();

+                } else if (keyToToken.hasOwnProperty(e.key)) {

+                    if (currentInput.length < tl) {

+                        const token = keyToToken[e.key];

+                        currentInput.push(token);

+                        const c = row.cells[currentInput.length - 1];

+                        c.style.fontSize = `${3.5 - 0.5 * token.length}em`;

+                        c.textContent = token;

+                    } else {

+                        shakeRow(row);

+                    }

+                }

+            });

+

+            function submitGuess() {

+                const row = grid.rows[currentRow];

+                document.getElementById("message").textContent = "";

+                if (currentInput.length !== tl) {

+                    document.getElementById("message").textContent = `Use exactly ${tl} tokens.`;

+                    shakeRow(row);

+                    return;

+                }

+                for (const t of currentInput) {

+                    if (!allTokens.includes(t)) {

+                        document.getElementById("message").textContent = "Invalid token: " + t;

+                        shakeRow(row);

+                        return;

+                    }

+                }

+                let ys;

+                try {

+                    ys = xs.map(x => evalPostfix(currentInput, x));

+                } catch (e) {

+                    document.getElementById("message").textContent = "Syntax error.";

+                    shakeRow(row);

+                    return;

+                }

+                guessYsList.push(ys);

+                redrawAll();

+                const close = closeEnough(ys, targetYs);

+                animateFlip(currentInput, close);

+                if (close) {

+                    setTimeout(() => fillRow(currentInput, "green"), 300 * tl);

+                    return;

+                }

+                currentRow++;

+                currentInput = [];

+                if (currentRow >= 6) return;

+            }

+

+            function animateFlip(tokens, close) {

+                const row = grid.rows[currentRow];

+                const colors = Array(tl);

+                if (close) {

+                    colors.fill("green");

+                } else {

+                    const freq = {};

+                    for (const t of target) freq[t] = (freq[t] || 0) + 1;

+                    colors.fill("grey");

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

+                        if (tokens[i] === target[i]) {

+                            colors[i] = "green";

+                            freq[tokens[i]]--;

+                        }

+                    }

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

+                        if (colors[i] === "grey" && freq[tokens[i]] > 0) {

+                            colors[i] = "yellow";

+                            freq[tokens[i]]--;

+                        }

+                    }

+                }

+                tokens.forEach((token, i) => {

+                    const cell = row.cells[i];

+                    setTimeout(() => {

+                        cell.style.transform = "rotateX(90deg)";

+                        setTimeout(() => {

+                            cell.classList.add(colors[i]);

+                            cell.style.transform = "rotateX(0deg)";

+                        }, 150);

+                    }, 150 * i);

+                });

+            }

+

+            function fillRow(tokens, cls) {

+                const row = grid.rows[currentRow];

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

+                    const cell = row.cells[i];

+                    cell.textContent = tokens[i];

+                    cell.classList.add(cls);

+                }

+            }

             function evalPostfix(tokens, x) {

                 const s = [];

@@ -98,31 +250,6 @@

                 }

             }

-            const target = generateExpr();

-            const maxGuesses = 6;

-            let currentRow = 0;

-            const width = 400, height = 400;

-            const ctx = document.getElementById("plot").getContext("2d");

-            const bound = 10;

-            const xs = [];

-            const targetYs = [];

-            for (let i = 0; i <= width; i++) {

-                const x = bound * (2 * i / width - 1);

-                xs.push(x);

-                const yv = evalPostfix(target, x);

-                targetYs.push(yv);

-            }

-            const clampLow = 1.5;

-            const clampHigh = 20;

-            let yMin = Math.min(...targetYs);

-            let yMax = Math.max(...targetYs);

-            if (isNaN(yMin) || yMin < -clampHigh) yMin = -clampHigh;

-            else if (yMin > -clampLow) yMin = -clampLow;

-            if (isNaN(yMax) || yMax > clampHigh) yMax = clampHigh;

-            else if (yMax < clampLow) yMax = clampLow;

-            const guessYsList = [];

-            const darkTheme = matchMedia('(prefers-color-scheme: dark)').matches;

-

             function drawAxes() {

                 ctx.clearRect(0, 0, width, height);

                 ctx.beginPath();

@@ -165,69 +292,6 @@

                 guessYsList.forEach((ys, idx) => drawCurve(ys, "red", (idx < guessYsList.length - 1) ? 1 : 4));

             }

-            redrawAll();

-            

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

-            for (let i = 0; i < maxGuesses; i++) {

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

-                for (let j = 0; j < tl; j++) {

-                    const td = document.createElement("td");

-                    tr.appendChild(td);

-                }

-                grid.appendChild(tr);

-            }

-            

-            document.getElementById("submitBtn").onclick = () => {

-                const inp = document.getElementById("guessInput").value.trim().split(/\s+/);

-                document.getElementById("message").textContent = "";

-                if (inp.length !== tl) {

-                    document.getElementById("message").textContent = `Use exactly ${tl} tokens.`;

-                    return;

-                }

-                for (const t of inp) {

-                    if (!allTokens.includes(t)) {

-                        document.getElementById("message").textContent = "Invalid token: " + t;

-                        return;

-                    }

-                }

-                let ys;

-                try {

-                    ys = xs.map(x => evalPostfix(inp, x));

-                } catch (e) {

-                    document.getElementById("message").textContent = "Syntax error.";

-                    return;

-                }

-                if (closeEnough(ys, targetYs)) {

-                    fillRow(inp, "green");

-                    document.getElementById("submitBtn").disabled = true;

-                    return;

-                }

-                markRow(inp);

-                guessYsList.push(ys);

-                redrawAll();

-                currentRow++;

-                if (currentRow >= maxGuesses) {

-                    document.getElementById("submitBtn").disabled = true;

-                }

-            };

-            

-            function closeEnough(a, b) {

-                for (let i = 0; i < a.length; i++) {

-                    if (isNaN(a[i]) && !isNaN(b[i])) return false;

-                    if (Math.abs(a[i] - b[i]) > 0.1 * (Math.abs(b[i]) + 1)) return false;

-                }

-                return true;

-            }

-            

-            function fillRow(tokens, cls) {

-                const row = grid.rows[currentRow];

-                for (let i = 0; i < tl; i++) {

-                    const cell = row.cells[i];

-                    cell.textContent = tokens[i];

-                    cell.classList.add(cls);

-                }

-            }

-            

             function markRow(tokens) {

                 const freq = {};

                 for (const t of target) freq[t] = (freq[t] || 0) + 1;

@@ -254,6 +318,14 @@

             function mapX(x) { return (x + bound) / (2 * bound) * width; }

             function mapY(y) { return height - (y - yMin) / (yMax - yMin) * height; }

+

+            function closeEnough(a, b) {

+                for (let i = 0; i < a.length; i++) {

+                    if (isNaN(a[i]) && !isNaN(b[i])) return false;

+                    if (Math.abs(a[i] - b[i]) > 0.1 * (Math.abs(b[i]) + 1)) return false;

+                }

+                return true;

+            }

         </script>

     </body>

 </html>