Javascript Multiple Choice Questions not Looping

Question

Before I start, this is my first time using Stack Overflow to request some help, so if I do it incorrectly I apologise and would greatly accept feedback. The communtiy here is great :)

So, my problem is that I'm creating a multiple choice quiz. My code is:

let questionList = [{
    question: "What is your name?",
    choices: ["bill", "bob", "steve", "joe"],
    correctAnswer: "bill",
},
{
    question: "What is her name?",
    choices: ["dan", "danny", "danielle", "daniela"],
    correctAnswer: "daniela"
},
{
    question: "What is mum's name?",
    choices: ["doris", "jane", "rose", "frank"],
    correctAnswer: "rose"
},
{
    question: "What is dad's name?",
    choices: ["ian", "angus", "jack", "john"],
    correctAnswer: "ian"
},
]

function callQuestions() {
    for (let i = 0; i < questionList.length; i++) {
        document.getElementById("quiz-questions").innerHTML = questionList[i].question;
        document.getElementById("answerA").innerHTML = questionList[i].choices[0];
        document.getElementById("answerB").innerHTML = questionList[i].choices[1];
        document.getElementById("answerC").innerHTML = questionList[i].choices[2];
        document.getElementById("answerD").innerHTML = questionList[i].choices[3];
    }
}

document.getElementById("select-button").addEventListener("click", callQuestions);

In my HTML, the last question is appearing. I have a button that is supposed to call this function when I click it but it's not incrementing - it's resetting the quiz and displaying the same question.

So my questions are:

Can someone tell me why the last question is appearing and not the first? and Can someone tell me why it's not looping?

Many thanks!

Answer 1

You will have to save the state for the current question number, and increment it accordingly on the user calls.

let questionList = [{
        question: "What is your name?",
        choices: ["bill", "bob", "steve", "joe"],
        correctAnswer: "bill",
    },
    {
        question: "What is her name?",
        choices: ["dan", "danny", "danielle", "daniela"],
        correctAnswer: "daniela"
    },
    {
        question: "What is mum's name?",
        choices: ["doris", "jane", "rose", "frank"],
        correctAnswer: "rose"
    },
    {
        question: "What is dad's name?",
        choices: ["ian", "angus", "jack", "john"],
        correctAnswer: "ian"
    },
]

let currentQuestion = -1;

function callQuestions() {
    currentQuestion = currentQuestion + 1; // The first question has the zero index
    if(currentQuestion >= questionList.length) { alert("All the questions are over"); return; }

    document.getElementById("quiz-questions").innerHTML = questionList[currentQuestion].question;
    document.getElementById("answerA").innerHTML = questionList[currentQuestion].choices[0];
    document.getElementById("answerB").innerHTML = questionList[currentQuestion].choices[1];
    document.getElementById("answerC").innerHTML = questionList[currentQuestion].choices[2];
    document.getElementById("answerD").innerHTML = questionList[currentQuestion].choices[3];
}

document.getElementById("select-button").addEventListener("click", callQuestions);

<div id="quiz-questions"></div>
<div id="answerA"></div>
<div id="answerB"></div>
<div id="answerC"></div>
<div id="answerD"></div>

<button id="select-button">Change question</button>

Answer 2

document.getElementById("select-button").addEventListener("click", callQuestions);

From this line, When you click the buttons , callQuestions is called. It has loop with local variable. and now it loops through all question At last i becomes 5 document.getElementById("quiz-questions").innerHTML = questionList[i].question; so the last question is only shown

it's resetting the quiz

It is because i is local and its value is independent of your click. it's value will go from 0 to 5 when you click the button

why it's not looping?

It is looping inside callQuestions function since it is fast you are not able to see this.

Answer 3

You are looping over the array and after the loop ends it will always set the last questionList element. You have to start it from 0 and go up to the complete array but only when the user click on the Next button

You can loop again after the last question using

current = current % questionList.length;

let questionList = [{
    question: "What is your name?",
    choices: ["bill", "bob", "steve", "joe"],
    correctAnswer: "bill",
  },
  {
    question: "What is her name?",
    choices: ["dan", "danny", "danielle", "daniela"],
    correctAnswer: "daniela"
  },
  {
    question: "What is mum's name?",
    choices: ["doris", "jane", "rose", "frank"],
    correctAnswer: "rose"
  },
  {
    question: "What is dad's name?",
    choices: ["ian", "angus", "jack", "john"],
    correctAnswer: "ian"
  },
]

let current = 0;

function callQuestions() {
  document.getElementById("quiz-questions").innerHTML = questionList[current].question;
  document.getElementById("answerA").innerHTML = questionList[current].choices[0];
  document.getElementById("answerB").innerHTML = questionList[current].choices[1];
  document.getElementById("answerC").innerHTML = questionList[current].choices[2];
  document.getElementById("answerD").innerHTML = questionList[current].choices[3];
  current++;
  current = current % questionList.length;
}
document.getElementById("select-button").addEventListener("click", callQuestions);
callQuestions();

#quiz-questions {
  padding: 1rem;
}

#select-button {
  background-color: bisque;
  padding: .5rem .75rem;
  border: none;
  margin-top: 2rem;
  border-radius: 4px;
  cursor: pointer;
}

.button-wrapper{
  display: flex;
  justify-content: center;
}

<div id="quiz-questions"></div>

<ol>
  <li id="answerA"></li>
  <li id="answerB"></li>
  <li id="answerC"></li>
  <li id="answerD"></li>
</ol>

<div class="button-wrapper">
<button id="select-button">next</button>
</div>