What I'm trying to do:
- after the first question is displayed and one of the choices is clicked the correct answer is shown AND THEN it displays the next question with the next set of choices for that question
Problem:
- once I click the first set of choices, the correct answer is displayed and the next question comes up but it still has the same set of choices from the previous question and clicking them just keeps displaying the answer from the last question as well.
I'm pretty new to this so I'm sure my code isn't written to well but thanks in advance!
// Array of the questions, choices, and answers for the quiz.
var quizQuestions = [
{
question: "What method would you use to create a DOM object Element?",
choices: [".getAttribute()", ".createElement()", ".getElementById", ".setAttribute()"],
answer: ".createElement()"
},
{
question: "What are variables used for?",
choices: ["Iterating over arrays", "Linking a JavaScript file to your html", "Storing data", "Performing specific tasks"],
answer: "Storing data"
},
{
question: "When declaring a function, what comes after the keyword 'function'?",
choices: ["()", ";", "/", "++"],
answer: "()"
},
{
question: "What would you use if you wanted to execute a block of code a set number of times?",
choices: ["While loop", "Math.random()", "For loop", "Switch statement"],
answer: "For loop"
},
{
question: "Using the word 'break' will stop the code execution inside the switch block.",
choices: ["True", "False"],
Answer: "True"
}
];
// Buttons
var highScoresButtonEl = document.querySelector(".high-scores");
var startQuizEl = document.querySelector(".quiz-button");
var choicesButtonEl = document.querySelector(".choices");
var introTextEl = document.querySelector(".intro-text");
var questionsEl = document.querySelector(".questions");
var choicesEl = document.querySelector(".choices");
var answerEl = document.querySelector(".answer")
var timerEl = document.querySelector(".timer");
var choicesListEl = document.createElement("ul");
choicesListEl.setAttribute("class", "choices");
choicesEl.appendChild(choicesListEl);
// Button that starts the timer, displays the first question and the first set of choices.
startQuizEl.addEventListener("click", function() {
document.querySelector(".intro-text").style.visibility = "hidden";
startQuizEl.style.visibility = "hidden";
startTimer();
displayQuestions();
displayChoices();
})
// When the any of the choices are clicked, the correct answer is displayed below them.
choicesButtonEl.addEventListener("click", function () {
displayAnswer();
})
// Incriments each question in the array of objects.
var q = 0;
function displayQuestions () {
questionsEl.textContent = quizQuestions[q].question;
q++
}
currentQuestion = 0;
// Turns the choices from the array into an unordered list
function displayChoices () {
for (i = 0; i < quizQuestions[0].choices.length; i++){
var li = document.createElement("li");
li.textContent = quizQuestions[0].choices[i];
li.id = i
choicesListEl.appendChild(li);
}
}
// Takes answer from the array of objects and places it as a paragraph below the unordered list of choices.
function displayAnswer () {
var p = document.createElement("p");
p.textContent = quizQuestions[0].answer;
p.id = i
answerEl.appendChild(p); <header>
<ul>
<li><button class="high-scores" id="high-scores">High Scores</button></li>
<li class="timer"></li>
</ul>
</header>
<main>
<div class="intro-text">
<h1>Timed Coding Quiz</h1>
<p>Come test your coding knowledge with this timed coding quiz! Everytime you answer a questoin incorrectly,
8 seconds is deducted from your total time! Good luck!</p>
</main>
</div>
<section class="quiz-content">
<button class="quiz-button" id="quiz-button" type="submit">Start Quiz</button>
<div class="questions" id="questions"></div>
<div class="choices" id="choices"></div>
<div class="answer" id="answer"></div>
</section>