Question: Need to take this basic code and create a quiz with the following requirements in Javascript: - Click a start button - timer starts -
Need to take this basic code and create a quiz with the following requirements in Javascript:
- Click a start button
- timer starts
- presented with question
- once answered, another question is presented
- if answer is wrong, time is subtracted from timer
- when all questions are answered or time reaches 0, game is over
- able to enter my name and add to a list of high scores at the end of the game
var quizArray = [
{ q: "QUESTION 1", a: ["A","B","C","D"] },
{ q: "QUESTION 2", a: ["A","B","C","D"] },
{ q: "QUESTION 3", a: ["A","B","C","D"] },
{ q: "QUESTION 4", a: ["A","B","C","D"] },
{ q: "QUESTION 5", a: ["A","B","C","D"] }
];
var score = 0;
var turn = 0;
const startBtn = document.getElementById("startbtn");
const mainEl = document.getElementById("mainEl")
startBtn.addEventListener("click",startBtnClickHandler);
function startBtnClickHandler() {
startBtn.style.display = "none"
mainEl.appendChild(createQuestion(turn))
turn++
}
function createQuestion(index) {
const panel = document.createElement("div");
const question = document.createElement("h3")
const answers = document.createElement("ul")
question.innerText = quizArray[index].q
panel.appendChild(question)
for (var i = 0; i < 4; i++) {
const answer = document.createElement("li")
answer.innerText = quizArray[index].a[i]
answer.addEventListener("click", answerClickHandler)
answers.appendChild(answer)
}
panel.appendChild(answers)
return panel
}
function answerClickHandler() {
mainEl.removeChild(mainEl.lastChild)
mainEl.appendChild(createQuestion(turn))
turn++
}
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
