DKL9 GitList
Repositories
DKL9 home
functle
Code
Commits
Branches
Tags
Search
Tree:
c4793cc
Branches
Tags
master
functle
functle.html
Improve instructions, export score, split code
dkl9
commited
c4793cc
at 2025-209 17:28:24
functle.html
Blame
History
Raw
<!DOCTYPE html> <html> <head> <title>Functle</title> <style> body { font-family: sans-serif; } #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, 4rem); height: min(13vw, 4rem); 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; } .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> </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>. Use 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>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><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"> TODO: comments and questions ... </div> --> </div> <script src="guess.js"></script> <script src="plot.js"></script> <script src="input.js"></script> </body> </html>
