Hello, I’m a student, so as I’m still trying to grasp the concepts on event listeners I’m trying to solve a project that involves solving random math problems in 30 seconds and keeping a score to each correct answer. The initial stage of the project displays a box with the operators inside an , the values being addition, subtraction, multiplication and division. Next to it a called “Go” that calls the function onclick=”startGame()” and a few instructions… all these wrapped inside a .
Once the button its clicked. It suppose to hide the
and display a which contains the Operation that was selected, the random operation, a focused input field to enter the answers, the calculator buttons to select or type your answers, the score count and the countdown timer. At time left=0, the game stops and displays the final results and a button to re-start the game again.
I’m getting confused on how to achieve this inside 1 function that gets called when the “Go” button gets clicked as there are different tasks to handled.
My main problem is syntax and how to add them inside the function (or maybe I need to do separate functions?)
Hope someone can shine some light…
I still haven’t done the code to check if the answers are correct to add to the score and when the timer gets to 0 to display final results and a re-start button.
I did not include css as is not important to the question, just styling.
This is what I have so far:
HTML
Math Facts Practice
Operation:
Addition
Subtraction
Multiplication
Division
Go
Select operation.
Press Go
How many problems can you solve in 30 seconds?
Selection
RO
1
2
3
4
5
6
7
8
9
0
CLEAR
Score:
Time left:
javascript
function startGame() {
let x = document.getElementById(“hide”);
let y = document.getElementById(“show”);
if (x.style.display === “none”) {
x.style.display = “block”;
y.style.display = “none”;
} else {
x.style.display = “none”;
y.style.display = “block”;
}
let randomNumA = Math.floor((Math.random() * 100) + 1);
let randomNumB = Math.floor((Math.random() * 100) + 1);
let sel = document.getElementById(‘random-operation’);
sel.innerHTML = ‘<h4>Operation Selection</h4><p>’ + randomNumA + operator + randomNumB + ‘</p>’;
let countdown = 30;
const countdownInterval = setInterval(() => {
countdown–;
document.getElementById(‘time’).textContent = `Time left: ${countdown} seconds`;
if (countdown === 0) {
clearInterval(countdownInterval);
document.write.getElementById(‘score’) = ‘score’;
document.write.getElementById(‘time’) = ‘countdown’;
}
}, 1000);
let operator = getElementsByTagName(‘option’);
let result = document.getElementById(‘operation-selection’);
if (operator.lenght >= 1) {
let addition = operator[0];
let subtraction = operator[1];
let multiplication = operator[2];
let division = operator[3];
if (operator == ‘addition’) {
result = randomNumA + randomNumB;
}
else if (operator == ‘subtraction’) {
result = randomNumA – randomNumB;
}
else if (operator == ‘multiplication’) {
result = randomNumA * randomNumB;
}
else {
result = randomNumA / randomNumB;
}
}
}
