<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="game-box">
<div class="question" style="display: flex;">
<h1 id="num1">0</h1>
<h1>
x
</h1>
<h1 id="num2">0</h1>
</div>
<input type="text" id="result" placeholder="Your answer">
<br>
<button onclick="checkAnswer()">Check Answer</button>
<br>
<img src="off.jpg" id="img" alt="">
</div>
<script>
function startGame() {
document.getElementById("num1").innerHTML = Math.floor(Math.random() * 10);
document.getElementById("num2").innerHTML = Math.floor(Math.random() * 10);
document.getElementById("result").value = "";
}
function checkAnswer() {
const num1 = parseInt(document.getElementById("num1").innerHTML);
const num2 = parseInt(document.getElementById("num2").innerHTML);
const result = parseInt(document.getElementById("result").value);
const img = document.getElementById("img");
if (result === num1 * num2) {
img.src = "on.jpg";
} else {
img.src = "off.jpg";
}
setTimeout(startGame, 1000);
}
startGame();
</script>
</body>
</html>
copy and paste