I’m working on a simple math quiz application using JavaScript, where users have to solve randomly generated math problems. I’ve written a function to handle the quiz logic and user interactions, but I’m encountering a few issues with resetting and re-generating the quiz.
const randomQuiz = (function() {
const firstPara = document.querySelector(".firstNumber");
const operatorPara = document.querySelector(".operator");
const secondPara = document.querySelector(".secondNumber");
const buttonIt = document.querySelector(".answer");
const inputAnswer = document.querySelector(".textanswer");
const container = document.querySelector(".container");
const answerGet = document.querySelector(".asnwerGet");
const didit = document.querySelector(".didit");
let randomOperator = ["*", "+", "-", "/"];
const quastion = {
firstNumber: Math.floor(Math.random() * 100),
operator: randomOperator[Math.floor(Math.random() * randomOperator.length)],
secondNumber: Math.floor(Math.random() * 100),
};
buttonIt.addEventListener("click", () => {
firstPara.textContent = quastion.firstNumber;
operatorPara.textContent = quastion.operator;
secondPara.textContent = quastion.secondNumber;
container.append(firstPara);
container.append(operatorPara);
container.append(secondPara);
});
answerGet.addEventListener("click", () => {
const answer = calculation();
if (inputAnswer.value == answer) {
console.log(`You did it`);
didit.textContent = `You did it! The answer is ${calculation()} !!!!!`;
resetGame();
} else {
console.log(`Nice try`);
console.log(`Answer is ${calculation()}`);
}
});
function calculation() {
if (quastion.operator === "-") {
return quastion.firstNumber - quastion.secondNumber;
} else if (quastion.operator === "*") {
return quastion.firstNumber * quastion.secondNumber;
} else if (quastion.operator === "+") {
return quastion.firstNumber + quastion.secondNumber;
} else if (quastion.operator === "/") {
return +(quastion.firstNumber / quastion.secondNumber).toFixed(2);
}
}
function resetGame() {
firstPara.textContent = "";
operatorPara.textContent = "";
secondPara.textContent = "";
// Here should be a mechanism to generate a new question
}
})();
My goal is everytime i get correct answer quastion will reset automatically.
but i am always getting same quastion for some reason i think problem is at buttonIt function always appending same value but how will i converting them into random ones ?
I’m also using querySelector to select DOM elements and append them to the container, but I’d like to know if there’s a more efficient approach.
The calculation function correctly computes the result based on the operator, so I believe the core logic is functioning as expected.
Thank you!
I’ve cleared the text content of the display elements, but this does not automatically generate new question values.
I tried adding new random values directly inside the resetGame function but need advice on integrating this properly.
Any suggestions or improvements to address these issues would be greatly appreciated!