Last active
May 20, 2021 00:23
-
-
Save mxamber/0889dab7cddcf5f93ac37ae662ad69d4 to your computer and use it in GitHub Desktop.
A primitive trainer helping learn morse. Will present characters from the Latin and Morse alphabets and display the correct equivalent after the user submits their own answer.
This file contains 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> | |
| <title>morse code trainer</title> | |
| <meta name="title" content="morse corde trainer"> | |
| <meta name="description" content="a simple morse code trainer to learn the morse alphabet"> | |
| <meta name="author" content="https://gitub.com/mxamber"> | |
| <meta charset="UTF-8"> | |
| <link rel="icon" type="data:image/png" href=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5QUSFxIo7IVdKQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABlElEQVR42u3dO46DMBRAUTOaDrZD/7wZNuA9wQahdqop0owCmfAZzpHcBb0oviKJG5paa03c1pePQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACYF/fr76waZpD3+jVHmxylc/LHcBXAAJAAAgAASAABIAAuInGs4PdARAAAkAACAABXMs0TSnnnLque1o55zRN02VmHKZeWCmlppR+XaWU0884UvrPm//uBu0xQwAbjOP48sb8rHEcTzdDABtFxOrNiYjTzTiDSx4Fd12XlmVZdU3btmme51PN8C8AASAABLBO3/cfv2aPGQLYaBiGj1+zxwwngQ6CnAM4ChbA26eCEVHbtn1aEfFnJ3N7zHAQhB+BCAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACEAACQAAIAAEgAATAfTwAMBF24efNe08AAAAASUVORK5CYII="> | |
| <script type="text/javascript"> | |
| var lastindex = -1; | |
| var alphabet_morse = [".-","-...","-.-.","-..",".","..-.","--.","....","..",".---","-.-",".-..","--","-.","---",".--.","--.-",".-.","...","-","..-","...-",".--","-..-","-.--","--..", ".----","..---","...--","....-",".....","-....","--...","---..","----.","-----"]; | |
| var alphabet_clear = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "1","2","3","4","5","6","7","8","9","0"]; | |
| // self-explanatory sleep function | |
| function sleep(ms) { | |
| const start = Date.now(); | |
| var current = Date.now(); | |
| while(current- start < ms) {current = Date.now();} | |
| } | |
| // primitive RNG (inclusive low, exclusive high) | |
| function randomInt(lowest, highest) { | |
| return Math.floor(Math.random() * (highest - lowest) + lowest); | |
| } | |
| // pick a random character to quiz | |
| function randomMorse() { | |
| // reset answer textbox | |
| document.getElementById("answer").value = ""; | |
| // pick random index different from last index | |
| var index; | |
| do { | |
| index = randomInt(0, alphabet_clear.length); | |
| } while ( index == lastindex ); | |
| lastindex = index; | |
| // select questions | |
| var q = alphabet_clear[index]; | |
| var s = alphabet_morse[index]; | |
| // in 40%, reverse mode (display morse, ask for letter) | |
| if(Math.random() > 0.6) { | |
| q = alphabet_morse[index]; | |
| s = alphabet_clear[index]; | |
| } | |
| // fill in question and solution (upper case) | |
| document.getElementById("question").value = q.toUpperCase(); | |
| document.getElementById("solution").value = s.toUpperCase(); | |
| // hide solution, make answer textbox editable | |
| document.getElementById("solution").style.color = "rgba(0,0,0,0)"; | |
| document.getElementById("answer").readOnly = false; | |
| } | |
| // test the submitted answer | |
| function testMorse() { | |
| // make answer textbox read-only during evaluation | |
| document.getElementById("answer").readOnly = true; | |
| // get answer and solution, convert to upper case (everything is upper case, case insensitivity is ensured) | |
| var answer = document.getElementById("answer").value.trim().toUpperCase(); | |
| var solution = document.getElementById("solution").value.trim().toUpperCase(); | |
| // display solution for 2s, colour indicates correct or false answer | |
| // TO DO? implement requiring a corrected answer be submitted before proceeding | |
| if(answer == solution) { | |
| document.getElementById("solution").style.color = "rgba(0,160,0,1)"; | |
| setTimeout(randomMorse, 2000); | |
| return; | |
| } else { | |
| document.getElementById("solution").style.color = "rgba(160, 0, 0, 1)"; | |
| setTimeout(randomMorse, 2000); | |
| return; | |
| } | |
| } | |
| </script> | |
| <style> | |
| html, body { | |
| height: 95%; | |
| } | |
| #center { | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| input { | |
| border: 1px solid black; | |
| font-size: xxx-large; | |
| font-family: "Comic Sans MS", "Comic Sans", cursive; | |
| width: 6em; | |
| height: 2em; | |
| vertical-align: center; | |
| text-align: center; | |
| } | |
| .readonly { | |
| background: #ddd; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="center"> | |
| <input type="textfield" id="question" class="readonly" readonly></input> | |
| <input type="textfield" id="answer" maxlength=6></input> | |
| <input type="textfield" id="solution" class="readonly" readonly></input> | |
| </div> | |
| <script> | |
| // add event listener: pressing Return key in answer textbox will submit answer for evaluation | |
| document.getElementById("answer").addEventListener("keydown", function(event) { if (event.keyCode === 13) { testMorse(); } }); | |
| // convert answer to upper case while typing | |
| document.getElementById("answer").addEventListener("keyup", function(event) { document.getElementById("answer").value = document.getElementById("answer").value.toUpperCase(); }); | |
| // display initial question | |
| randomMorse(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment