PM2Ring/MultiplicationDrill.html

## MultiplicationDrill.html
<!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>
	<!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>