Last active
January 18, 2022 17:19
-
-
Save PM2Ring/e78db6f103717b40b6e43e7893dd34d9 to your computer and use it in GitHub Desktop.
Simple multiplication drill app, in JavaScript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Multiplication Drill</title> | |
| </head> | |
| <body> | |
| <h3>Multiplication Drill</h3> | |
| <input id="aLo" type="number" value="2"><label for="aLo">Low A</label><br> | |
| <input id="aHi" type="number" value="99"><label for="aHi">High A</label><br> | |
| <input id="bLo" type="number" value="2"><label for="bLo">Low B</label><br> | |
| <input id="bHi" type="number" value="99"><label for="bHi">High B</label><br> | |
| <button onclick="reset()">Reset</button> | |
| <br><br> | |
| <div id="main"> | |
| <div id="quiz"></div> | |
| <input id="response" type="number" onchange="check(+this.value)"> | |
| <label for="response">Answer</label> | |
| <br><br> | |
| <div id="product"></div> | |
| </div> | |
| </body> | |
| <script> | |
| var product = 0, right = 0, wrong = 0; | |
| function ById(s){ | |
| return document.getElementById(s); | |
| } | |
| function getRandom(min, max){ | |
| return Math.floor(Math.random() * (max - min + 1) + min); | |
| } | |
| function go(){ | |
| let aLo = +ById("aLo").value, aHi = +ById("aHi").value, | |
| bLo = +ById("bLo").value, bHi = +ById("bHi").value; | |
| let a = getRandom(aLo, aHi), b = getRandom(bLo, bHi); | |
| product = a * b; | |
| ById("response").value = ""; | |
| let out = "Right: " + right + " Wrong: " + wrong + " Total: " + (right + wrong) + "\n\n"; | |
| out += a + " × " + b; | |
| ById("quiz").innerText = out; | |
| } | |
| function check(val){ | |
| ById("product").innerText = "Previous: " + product; | |
| if (val == product){ | |
| right += 1; | |
| ById("main").style = "background-color: #cfc"; | |
| } | |
| else{ | |
| wrong += 1; | |
| ById("main").style = "background-color: #fcc"; | |
| } | |
| go(); | |
| } | |
| function reset(){ | |
| right = wrong = 0; | |
| ById("main").style = "background-color: #fff"; | |
| go(); | |
| } | |
| reset(); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Live version, running on the SageMathCell server.