Please add comments to my code. ----------------------------------------------------- let currProblem = 1; let currScore = 0; let answer; function updateScoreAndQuestion() { let problem = document.getElementsByClassName("currentProblem")[0]; problem.innerText = currProblem.toString(); let score = document.getElementsByClassName("currentScore")[0]; score.innerText = currScore.toString(); if(currProblem <= 10) { newProblem(); } else { let hide = document.querySelectorAll('.show-hide'); hide.forEach(element => { element.style.display = "none"; currProblem = 10; problem.innerText = currProblem.toString(); }) } } function start() { let answers = document.querySelectorAll("li"); answers.forEach(element => { element.addEventListener("click", event => { let choice = element.innerText; if(choice.toString() === answer.toString()) { currScore++; } currProblem++; updateScoreAndQuestion(); }) }); } function newProblem() { let left_operand = Math.floor(Math.random()*Math.floor(10)); let right_operand = Math.floor(Math.random()*Math.floor(10)); answer = left_operand * right_operand; updateDisplayProblem([left_operand, right_operand]); } function updateDisplayProblem(operands) { let displayProblem = document.getElementsByClassName("expression show-hide")[0]; displayProblem.innerText = operands[0] + " * " + operands[1]; let answers = document.querySelectorAll("li"); let possibleAnswers = []; possibleAnswers.push(operands[0] * operands[1]); while(possibleAnswers.length < 4) { let choice = Math.floor(Math.random()*Math.floor(81)); if(!possibleAnswers.includes(choice)) { possibleAnswers.push(choice); } } possibleAnswers = possibleAnswers.sort(function (a, b) {return Math.random() - 0.5}); for(let i = 0; i < answers.length; i++) { answers[i].innerText = possibleAnswers[i]; } } document.addEventListener("DOMContentLoaded", event => { start(); newProblem(); let startOver = document.getElementById("btnStartOver"); // resets score and sets problem to 1 startOver.addEventListener("click", event => { currProblem = 1; currScore = 0; // updates score and gives out new question updateScoreAndQuestion(); newProblem(); let show = document.querySelectorAll('.show-hide'); show.forEach(element => { element.style.display = "block"; }); }); })
Please add comments to my code.
-----------------------------------------------------
let currProblem = 1;
let currScore = 0;
let answer;
function updateScoreAndQuestion() {
let problem = document.getElementsByClassName("currentProblem")[0];
problem.innerText = currProblem.toString();
let score = document.getElementsByClassName("currentScore")[0];
score.innerText = currScore.toString();
if(currProblem <= 10) {
newProblem();
} else {
let hide = document.querySelectorAll('.show-hide');
hide.forEach(element => {
element.style.display = "none";
currProblem = 10;
problem.innerText = currProblem.toString();
})
}
}
function start() {
let answers = document.querySelectorAll("li");
answers.forEach(element => {
element.addEventListener("click", event => {
let choice = element.innerText;
if(choice.toString() === answer.toString()) {
currScore++;
}
currProblem++;
updateScoreAndQuestion();
})
});
}
function newProblem() {
let left_operand = Math.floor(Math.random()*Math.floor(10));
let right_operand = Math.floor(Math.random()*Math.floor(10));
answer = left_operand * right_operand;
updateDisplayProblem([left_operand, right_operand]);
}
function updateDisplayProblem(operands) {
let displayProblem = document.getElementsByClassName("expression show-hide")[0];
displayProblem.innerText = operands[0] + " * " + operands[1];
let answers = document.querySelectorAll("li");
let possibleAnswers = [];
possibleAnswers.push(operands[0] * operands[1]);
while(possibleAnswers.length < 4) {
let choice = Math.floor(Math.random()*Math.floor(81));
if(!possibleAnswers.includes(choice)) {
possibleAnswers.push(choice);
}
}
possibleAnswers = possibleAnswers.sort(function (a, b) {return Math.random() - 0.5});
for(let i = 0; i < answers.length; i++) {
answers[i].innerText = possibleAnswers[i];
}
}
document.addEventListener("DOMContentLoaded", event => {
start();
newProblem();
let startOver = document.getElementById("btnStartOver");
// resets score and sets problem to 1
startOver.addEventListener("click", event => {
currProblem = 1;
currScore = 0;
// updates score and gives out new question
updateScoreAndQuestion();
newProblem();
let show = document.querySelectorAll('.show-hide');
show.forEach(element => {
element.style.display = "block";
});
});
})
Step by step
Solved in 2 steps
