mxamber/morsetrainer.htm

## morsetrainer.htm
<!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>
	<!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>