DKL9 GitList
Repositories
DKL9 home
functle
Code
Commits
Branches
Tags
Search
Tree:
02c846e
Branches
Tags
master
functle
functle.html
Tweak aesthetics
dkl9
commited
02c846e
at 2025-361 18:06:56
functle.html
Blame
History
Raw
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Functle</title> <link rel="stylesheet" href="/style.css"> <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; } #grid td { min-width: min(13vw, 5rem); height: min(13vw, 5rem); border: 1px solid #ccc; text-align: center; vertical-align: middle; font-weight: bold; transition: transform 0.3s ease; padding: 0; } .grey { background: #787c7e; } .yellow { background: #c9b458; } .green { background: #6aaa64; } #message { color: red; margin-top: 5px; } .side { margin-left: 20px; } .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 (prefers-color-scheme: dark) { .grey { background: #3a3a3c; } .yellow { background: #b59f3b; } .green { background: #538e4e; } } @media (min-aspect-ratio: 4/3) { .container { display: flex; flex-wrap: wrap; } } </style> </head> <body> <div class="container"> <section id="instructions"> <h1>How to play</h1> <p>Look at the green plot <var>y</var> = <var>f</var>(<var>x</var>) and guess the formula for <var>f</var>(<var>x</var>) in <a href="https://en.wikipedia.org/wiki/Reverse_Polish_notation#Explanation" target="_blank">postfix</a>. Type one character per number or operator:</p> <ul> <li><var>x</var>, 1, or 2 (values)</li> <li>q for "squared" (unary)</li> <li>c for "cubed" (unary)</li> <li>s for sine</li> <li>e for exp (<var>e</var> to the ...)</li> <li>l for natural log</li> <li>+, -, *, / for basic operations</li> </ul> <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. <span class="green">Green: correct, right spot.</span> <span class="yellow">Yellow: correct, wrong spot.</span> <span class="grey">Grey: not in answer</span></p> <p>Remember that 1 and 2 can be used to build other, more complicated constants. Remember how syntax narrows down your options: operators tend to be near the end, and inputs near the start. Axis ticks show <var>x</var> = ±1 and <var>y</var> = ±1.</p> <p><a href="/essays/postfix_infix.html">Why use postfix?</a></p> <p><button id="gotit" type="button">Got it</a></p> </section> <canvas id="plot" width="400" height="400"></canvas> <div class="side"> <div> <div id="message"></div> </div> <table id="grid"></table> </div> <div class="side"> <p>Questions on Functle are welcome. Email them to <a href="mailto:contact@dkl9.net">contact@dkl9.net</a>. <span style="display: none;">Avoid <a href="mailto:sucrose@dkl9.net">sucrose@dkl9.net</a>, unless you are a spambot.</span></p> <form action="/cgi-bin/feedback" method="post"> <p><label>Or write a comment — <input type="text" name="t" placeholder="comment here"> — and tell me what you think: <button type="submit" name="j" value="l">I like this</button> <button type="submit" name="j" value="d">I dislike this</button> <button type="submit" name="j" value="n">No judgment</button></p> </form> <p><a href="/">dkl9 home</a></p> </div> </div> <script src="plot.js"></script> <script src="guess.js"></script> <script src="input.js"></script> </body> </html>
