Quiz Troubleshooting: Understanding Why Your Quiz Isn't Progressing to the Next Question

Question

Quiz Troubleshooting: Understanding Why Your Quiz Isn't Progressing to the Next Question

I've been working on creating a quiz with branching logic - you can check out my progress in this Fiddle. I've looked into similar projects like those discussed here and here, but their solutions didn't quite fit what I needed for my quiz since I'm sticking to plain Javascript.

The structure of my quiz employs a tree-like system. For instance, the first question might be about wine preference, leading to further sub-questions based on the initial answer. The ultimate goal is to guide the user toward a specific result.

However, the issue that I'm facing is getting stuck before being able to present the second set of questions and choices.

I suspect that there might be an error within my questions array object variable.

Although I successfully linked my buttons to the initial labels (white and red) inside the beginQuiz function to access the top level of the tree, I encounter difficulties when attempting to delve deeper into the array - resulting in an undefined error message.

For instance (within the showQuestion function):

topBtn.innerHTML = questions[questionIndex].question.choices.label;
bottomBtn.innerHTML = questions[questionIndex].question.choices.label;

After selecting one of the choice buttons, the question area displays 'undefined'.

This is the error thrown: Uncaught TypeError: Cannot read properties of undefined (reading 'question')

While I can successfully fetch the first question and choices using the beginQuiz function, I seem unable to progress to the subsequent set. What could I be missing?

How can I advance to display and interact with the next batch of questions and labels?

Thank you in advance for any assistance provided.

const questions = [
  {
    question: {
      text: 'What type of wine do you like?',
      choices: [
        {
          label: 'white',
          path: 1,
          question: {
            text: 'I prefer...',
            choices: [
              {
                label: 'sparkling',
                path: 11,
              },
              {
                label: 'still',
                path: 12,
              },
            ],
          },
        },
        {
          label: 'red',
          path: 2,
          question: {
            text: 'I prefer...',
            choices: [
              {
                label: 'sparkling',
                path: 21,
              },
              {
                label: 'still',
                path: 22,
              },
            ],
          },
        },
      ],
    },
  },
];

topBtn.addEventListener('click', nextQuestion);
bottomBtn.addEventListener('click', nextQuestion);
restartBtn.addEventListener('click', restart);

let questionIndex = 0;

function beginQuiz() {
  let questionIndex = 0;
  questionText.innerHTML = questions[questionIndex].question.text;
  topBtn.innerHTML = questions[questionIndex].question.choices[0].label;
  topBtn.addEventListener('click', () => {
    if (questionIndex < 2) {
      nextQuestion();
    }
  });
  bottomBtn.innerHTML = questions[questionIndex].question.choices[1].label;
  bottomBtn.addEventListener('click', () => {
    if (questionIndex < 2) {
      nextQuestion();
    }
  });
}

beginQuiz();

function showQuestion() {
  questionText.innerHTML = questions[questionIndex];
  topBtn.innerHTML = questions[questionIndex].question.choices.label;
  bottomBtn.innerHTML = questions[questionIndex].question.choices.label;
}

function nextQuestion() {
  questionIndex++;
  showQuestion();
}

javascript arrays object multidimensional-array branch

Answer 1

Answer №1

const restartBtn = document.getElementById('restart');
const topBtn = document.getElementById('top-btn');
const bottomBtn = document.getElementById('bottom-btn');
const questionText = document.querySelector('.question');
const choiceText = document.querySelector('.choices');
const resultText = document.querySelector('.result');

const quizData = [
  {
    question: { 
      text: 'What is your favorite type of wine?',
      choices: [
        {
          label: 'white',
          path: 1,
          question: {
            text: 'Preference...',
            choices: [
              {
                label: 'sparkling',
                path: 11,
              },
              {
                label: 'still',
                path: 12,
              },
            ],
          },
        },
        {
          label: 'red',
          path: 2,
          question: {
            text: 'Preference...',
            choices: [
              {
                label: 'sparkling',
                path: 21,
              },
              {
                label: 'still',
                path: 22,
              },
            ],
          },
        },
      ],
    }, // index 0
  },
    {
    question: { 
      text: 'Another question for you?',
      choices: [
        {
          label: 'my answer here',
          path: 1,
          question: {
            text: 'Preference...',
            choices: [
              {
                label: 'sparkling',
                path: 11,
              },
              {
                label: 'still',
                path: 12,
              },
            ],
          },
        },
        {
          label: 'another response',
          path: 2,
          question: {
            text: 'Preference...',
            choices: [
              {
                label: 'sparkling',
                path: 21,
              },
              {
                label: 'still',
                path: 22,
              },
            ],
          },
        },
      ],
    }, // index 1
  },
];

topBtn.addEventListener('click', nextQuestion);
bottomBtn.addEventListener('click', nextQuestion);
restartBtn.addEventListener('click', restart);

let questionIndex = 0;

function startQuiz() {
  let questionIndex = 0;
  console.log(questionIndex, "index");
  questionText.innerHTML = quizData[questionIndex].question.text;
  console.log(quizData[questionIndex], "test");
  topBtn.innerHTML = quizData[questionIndex].question.choices[0].label;
  topBtn.addEventListener('click', () => {
    if (questionIndex < 3) {
      nextQuestion();
    }
  });
  bottomBtn.innerHTML = quizData[questionIndex].question.choices[1].label;
  bottomBtn.addEventListener('click', () => {
    if (questionIndex < 3) {
      nextQuestion();
    }
  });
}

startQuiz();

function displayQuestion() {
  questionText.innerHTML = quizData[questionIndex].question.text;
 
  topBtn.innerHTML = quizData[questionIndex].question.choices[0].label;
  bottomBtn.innerHTML = quizData[questionIndex].question.choices[1].label;
   console.log(quizData[questionIndex].question.choices[0].label, " questionText.innerHTML");
}

function nextQuestion() {
  questionIndex++;
  displayQuestion();
}


function restart() {
  questionIndex = 0;
  currentQuestion = 0;
  document.getElementById('question').style.display = 'block';
  document.getElementById('choices').style.display = 'block';
  document.getElementById('result').style.display = 'none';
  topBtn.classList.remove('hide');
  bottomBtn.classList.remove('hide');
  startQuiz();
}

function findProperty(obj, prop) {
  let result = [];
  function recursivelyFindProp(o, keyToBeFound) {
    Object.keys(o).forEach(function (key) {
      if (typeof o[key] === 'object') {
        recursivelyFindProp(o[key], keyToBeFound);
      } else {
        if (key === keyToBeFound) result.push(o[key]);
      }
    });
  }
  recursivelyFindProp(obj, prop);
  return result;
}

console.log(findProperty(quizData, 'label'));
console.log(findProperty(quizData, 'text'));
console.log(findProperty(quizData, 'path'));

body {
    background-color: darkkhaki;
    font-family: serif;
}
h1 {
    color: white;
    text-align: center;
}

.container {
  background-color: darkgoldenrod;
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fafafa;
  padding: 20px;
  border: 2px solid #fff;
  border-radius: 20px;
}

.question {
    font-size: 2em;
    width: 90%;
    height: auto;
    margin: auto;
    border-radius: 6px;
    text-align: center;
}
.choices {
    font-family: Courier, serif;
    color: white;
    margin-top: 2em;
}
.choice {
    cursor: pointer;
    font-size: 2em;
    text-align: center;
}

.btn {
  background-color: transparent;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  border: 3px solid #fff;
  border-radius: 10px;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.5s ease;
}

.btn:hover {
  background-color: #fff;
  color: darkgoldenrod;
}

<body>
    <header><h1>Wine chooser</h1></header>
    <!--Quiz Box -->
    <div class="container">
        <div class="question" id="question"></div>
        <div class="choices" id="choices"></div>
          <button class="btn" id="top-btn"></button>
          <button class="btn" id="bottom-btn"></button>
          <div class="result" id="result"></div>
        </div>
      <div class="controls">
        <button class="btn btn-restart" id="restart">Restart</button>
      </div>

    <script src="test3.js"></script>
  </body>

Answer 2

const restartBtn = document.getElementById('restart');
const topBtn = document.getElementById('top-btn');
const bottomBtn = document.getElementById('bottom-btn');
const questionText = document.querySelector('.question');
const choiceText = document.querySelector('.choices');
const resultText = document.querySelector('.result');

const quizData = [
  {
    question: { 
      text: 'What is your favorite type of wine?',
      choices: [
        {
          label: 'white',
          path: 1,
          question: {
            text: 'Preference...',
            choices: [
              {
                label: 'sparkling',
                path: 11,
              },
              {
                label: 'still',
                path: 12,
              },
            ],
          },
        },
        {
          label: 'red',
          path: 2,
          question: {
            text: 'Preference...',
            choices: [
              {
                label: 'sparkling',
                path: 21,
              },
              {
                label: 'still',
                path: 22,
              },
            ],
          },
        },
      ],
    }, // index 0
  },
    {
    question: { 
      text: 'Another question for you?',
      choices: [
        {
          label: 'my answer here',
          path: 1,
          question: {
            text: 'Preference...',
            choices: [
              {
                label: 'sparkling',
                path: 11,
              },
              {
                label: 'still',
                path: 12,
              },
            ],
          },
        },
        {
          label: 'another response',
          path: 2,
          question: {
            text: 'Preference...',
            choices: [
              {
                label: 'sparkling',
                path: 21,
              },
              {
                label: 'still',
                path: 22,
              },
            ],
          },
        },
      ],
    }, // index 1
  },
];

topBtn.addEventListener('click', nextQuestion);
bottomBtn.addEventListener('click', nextQuestion);
restartBtn.addEventListener('click', restart);

let questionIndex = 0;

function startQuiz() {
  let questionIndex = 0;
  console.log(questionIndex, "index");
  questionText.innerHTML = quizData[questionIndex].question.text;
  console.log(quizData[questionIndex], "test");
  topBtn.innerHTML = quizData[questionIndex].question.choices[0].label;
  topBtn.addEventListener('click', () => {
    if (questionIndex < 3) {
      nextQuestion();
    }
  });
  bottomBtn.innerHTML = quizData[questionIndex].question.choices[1].label;
  bottomBtn.addEventListener('click', () => {
    if (questionIndex < 3) {
      nextQuestion();
    }
  });
}

startQuiz();

function displayQuestion() {
  questionText.innerHTML = quizData[questionIndex].question.text;
 
  topBtn.innerHTML = quizData[questionIndex].question.choices[0].label;
  bottomBtn.innerHTML = quizData[questionIndex].question.choices[1].label;
   console.log(quizData[questionIndex].question.choices[0].label, " questionText.innerHTML");
}

function nextQuestion() {
  questionIndex++;
  displayQuestion();
}


function restart() {
  questionIndex = 0;
  currentQuestion = 0;
  document.getElementById('question').style.display = 'block';
  document.getElementById('choices').style.display = 'block';
  document.getElementById('result').style.display = 'none';
  topBtn.classList.remove('hide');
  bottomBtn.classList.remove('hide');
  startQuiz();
}

function findProperty(obj, prop) {
  let result = [];
  function recursivelyFindProp(o, keyToBeFound) {
    Object.keys(o).forEach(function (key) {
      if (typeof o[key] === 'object') {
        recursivelyFindProp(o[key], keyToBeFound);
      } else {
        if (key === keyToBeFound) result.push(o[key]);
      }
    });
  }
  recursivelyFindProp(obj, prop);
  return result;
}

console.log(findProperty(quizData, 'label'));
console.log(findProperty(quizData, 'text'));
console.log(findProperty(quizData, 'path'));

body {
    background-color: darkkhaki;
    font-family: serif;
}
h1 {
    color: white;
    text-align: center;
}

.container {
  background-color: darkgoldenrod;
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fafafa;
  padding: 20px;
  border: 2px solid #fff;
  border-radius: 20px;
}

.question {
    font-size: 2em;
    width: 90%;
    height: auto;
    margin: auto;
    border-radius: 6px;
    text-align: center;
}
.choices {
    font-family: Courier, serif;
    color: white;
    margin-top: 2em;
}
.choice {
    cursor: pointer;
    font-size: 2em;
    text-align: center;
}

.btn {
  background-color: transparent;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  border: 3px solid #fff;
  border-radius: 10px;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.5s ease;
}

.btn:hover {
  background-color: #fff;
  color: darkgoldenrod;
}

<body>
    <header><h1>Wine chooser</h1></header>
    <!--Quiz Box -->
    <div class="container">
        <div class="question" id="question"></div>
        <div class="choices" id="choices"></div>
          <button class="btn" id="top-btn"></button>
          <button class="btn" id="bottom-btn"></button>
          <div class="result" id="result"></div>
        </div>
      <div class="controls">
        <button class="btn btn-restart" id="restart">Restart</button>
      </div>

    <script src="test3.js"></script>
  </body>

Answer 3

Answer №2

When I manually specify the index as [0] in my code:

questionText.innerHTML = questions[0].question.text;
topBtn.innerHTML = questions[0].question.choices[0].label;

I can retrieve the first question and its corresponding choices/answers.

However, if I try this with [1]:

questionText.innerHTML = questions[1].question.text;
topBtn.innerHTML = questions[1].question.choices[0].label;

I receive 'undefined' as the output!

This suggests that there may be an issue with how the data structures are set up and accessed. It seems that index 1 is currently empty.

Additionally, there appears to be a missing step in assigning index numbers for labels, specifically at line 121 in the jsfiddle script.

 questionText.innerHTML = questions[questionIndex].question.text;

 topBtn.innerHTML = 
 questions[questionIndex].question.choices[0].label;
 bottomBtn.innerHTML = 
 questions[questionIndex].question.choices[1].label;

Answer 4

When I manually specify the index as [0] in my code:

questionText.innerHTML = questions[0].question.text;
topBtn.innerHTML = questions[0].question.choices[0].label;

I can retrieve the first question and its corresponding choices/answers.

However, if I try this with [1]:

questionText.innerHTML = questions[1].question.text;
topBtn.innerHTML = questions[1].question.choices[0].label;

I receive 'undefined' as the output!

This suggests that there may be an issue with how the data structures are set up and accessed. It seems that index 1 is currently empty.

Additionally, there appears to be a missing step in assigning index numbers for labels, specifically at line 121 in the jsfiddle script.

 questionText.innerHTML = questions[questionIndex].question.text;

 topBtn.innerHTML = 
 questions[questionIndex].question.choices[0].label;
 bottomBtn.innerHTML = 
 questions[questionIndex].question.choices[1].label;

Quiz Troubleshooting: Understanding Why Your Quiz Isn't Progressing to the Next Question

Answer №1

Answer №2

Similar questions

I am struggling to understand how to make use of ajax and php to reload data for pagination

Commit the incorrect file name with the first letter capitalized

Guide on preventing access to a website's JavaScript file or concealing specific data within it

Top Method for Initiating AJAX Request on WebForms Page

Utilizing d3.csv to load CSV data into an nvd3 multiBar Chart demonstration (in JSON format)

Import an array in Python from a text file formatted in ASCII style

What is the best way to implement a Fibonacci sequence using a for...of loop?

Angular UI Router allows for the resolution of data before a state

Developing a continuous running test loop

Error: Jquery unrecognized - syntax issue

The value of the comment box with the ID $(CommentBoxId) is not being captured

The issue with AngularJS Routing is that it fails to refresh the menu items when the URL and views are being

Having trouble retrieving data from an array within a JSON object

Implementing a pre-defined value for ajax in ajax programming for beginners

how to assign a value to a field automatically in PHP

JavaScript controller with numerous dependencies in AngularJS

Spotfire: Changing a URL in an input field after it has been entered by the user

A step-by-step guide on extracting nested ASP.NET DataGrid values with JavaScript

Switching code from using .hover() to using .click() while still maintaining the functionality of both.orChanging code to switch

Conceal certain values within an array