I'm trying to dynamically generate questions and answers in a quiz game. The questions/answers are held in an array of objects and are supposed to be generated one after another inside of a div. When the user clicks on an answer, then the next question is generated. For now there are 5 questions and the problem is that after the first two questions are generated, the 3rd one gets skipped over, the 4th one is generated, and then the 5th gets skipped. When I submit an answer for the second question, it appears in the console that the 2nd and 3rd question were answered, even though the 3rd question never appeared on the page.
here is the javascript-
const questions = [
{
question: "Where was the first attempted allied invasion of France?",
choices: ['Normandy', 'Nice', 'Dieppe', "Bourdeaux"],
answer: "Dieppe"
},
{
question: "Which American general was in charge of the pacific campaign?",
choices: ["George Patton", "Omar Bradley", "George Marshall", "Douglas MacArthur"],
answer: "Douglas MacArthur"
},
{
question: "When was VE day?",
choices: ["April", "May", "June", "July"],
answer: "May"
},
{
question: "Which of these was considered the largest tank battle in history?",
choices: ["Battle of the Bulge", "D-Day", "Kursk", "Stalingrad", "Market Garden"],
answer: "Kursk"
},
{
question: "When did the war start?",
choices: ["1939", "1938", "1941", "1944"],
answer: "1939"
}
]
let questionIndex = 0;
//function to start the game//
const startGame = () => {
$('.start-btn').hide()
$('.game-header').hide()
$('.container').show();
renderQuestion()
}
const renderQuestion = () => {
$('#question').text(questions[questionIndex].question);
$('#answer1').text(questions[questionIndex].choices[0])
$('#answer2').text(questions[questionIndex].choices[1])
$('#answer3').text(questions[questionIndex].choices[2])
$('#answer4').text(questions[questionIndex].choices[3])
$('.btn').click(function () {
let response = $(this).text()
console.log(response)
checkAnswer(response)
})
}
//function to set the timer
//function to end the quiz
//function to save high score
const checkAnswer = (response) => {
if (response === questions[questionIndex].answer) {
window.alert('CORRECT!')
} else {
window.alert('INCORRECT!')
}
questionIndex++
console.log(questionIndex)
renderQuestion()
}
$('.start-btn').click(startGame)
I believe the problem has to do with the "questionIndex" variable that I declared after the question array. At the bottom of the checkAnswer function, I have questionIndex++ which is supposed to cycle through all the questions, but I'm not sure what I'm getting wrong.
and here is the html-
<body>
<div class="timer">
Time left
</div>
<div class="game-header">
<h1>Welcome to the WWII trivia game!</h1>
<h2>Answer all the questions before the time runs out and check your score in the end!</h2>
</div>
<button class="start-btn">Start!</button>
<div class="container">
<div id="question-container" class="hide">
<div id="question">""</div>
<div class="answers">
<button id='answer1' class="btn">Answer 1</button>
<button id='answer2' class="btn">Answer 2</button>
<button id='answer3' class="btn">Answer 3</button>
<button id='answer4' class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="start-btn" class="start-btn btn hide">Next</button>
</div>
</div>
<script src="script.js"></script>
</body>
So to conclude, I'm trying to cycle through all the questions and corresponding answers in the array so that they are generated one after another in the quiz game. as of now, the 3rd and 5th questions are being omitted. Appreciate any help :)
