CODEWITHSUNDEEP
javascriptfor-loop
HappyHobbit
HappyHobbit

Reputation: 33

For Loops for multiple choice questions?

Building a quiz. I have 4 multiple choice options I want to populate with JS. Each choice has text, and a corresponding icon. I have the questions section working, but I can't seem to get the choices working. I'm trying to iterate through the 4 options (each option has a data value assigned to it that at the end, determines your answer) but I can't access the choices out of the nested array, even when I'm just console.log(questions[0][1]); Any suggestions? Should I be using a different kind of for loop? Should I break up the array and loop through everything separately(which doesn't seem very efficient)?

let questions = [{
    question: "Do you mind crowds?",
    icons: {
      choice1: "Q1_A.svg",
      choice2: "Q1_B.svg",
      choice3: "Q1_C.svg",
      choice4: "Q1_D.svg",
    },
    choices: {
      choice1: "Crowds don't bother me",
      choice2: "I prefer to get off the beaten path",
      choice3: "I don't care either way",
      choice4: "Crowds mean there is something worth looking at",
    }
  },
  {
    question: "Where would you like to stay on your trip?",
    icons: {
      choice1: "Q2_A.svg",
      choice2: "Q2_B.svg",
      choice3: "Q2_C.svg",
      choice4: "Q2_D.svg",
    },
    choices: {
      choice1: "Crowds don't bother me",
      choice2: "I prefer to get off the beaten path",
      choice3: "I don't care either way",
      choice4: "Crowds mean there is something worth looking at",
    }
  },
  {
    question: "What activities do you enjoy?",
    icons: {
      choice1: "Q3_A.svg",
      choice2: "Q3_B.svg",
      choice3: "Q3_C.svg",
      choice4: "Q3_D.svg",
    },
    choices: {
      choice1: "Crowds don't bother me",
      choice2: "I prefer to get off the beaten path",
      choice3: "I don't care either way",
      choice4: "Crowds mean there is something worth looking at",
    }
  }
];

//Convert to an array, so you can use array functions on it
const choice = Array.from(document.getElementsByClassName('choice_text'));

choicesCounter = 0;

choicesLoop = () => {
  choice.forEach(choice => {
    const number = choice.dataset['number'];
    choice.innerHTML = questions.choices['choice' + number];
    choicesCounter++;
  });
};
<div class="multiple-choice-container">
  <div class="choice_container">
    <p class="choice_icon" data-number='1'>A</p>
    <p class="choice_text" data-number='1'> Choice 1</p>
  </div>
  <div class="choice_container ">
    <p class="choice_icon" data-number='2'>B</p>
    <p class="choice_text" data-number='2'> Choice 2</p>
  </div>
  <div class="choice_container">
    <p class="choice_icon" data-number='3'>C</p>
    <p class="choice_text" data-number='3'> Choice 3</p>
  </div>
  <div class="choice_container">
    <p class="choice_icon" data-number='4'>D</p>
    <p class="choice_text" data-number='4'> Choice 4</p>
  </div>
</div>

Upvotes: 1

Views: 532

Answers (1)

Jamiec
Jamiec

Reputation: 136124

You'll need to pass the question number you're displaying into your choicesLoop (or perhaps thats what choicesCounter was in your code but you forgot to use it in the right place)

choicesLoop = (questionId) => {
  choice.forEach(choice => {
    const number = choice.dataset['number'];
    choice.innerHTML = questions[questionId].choices['choice' + number];
    choicesCounter++;
  });
};

or

choicesLoop = () => {
  choice.forEach(choice => {
    const number = choice.dataset['number'];
    choice.innerHTML = questions[choicesCounter].choices['choice' + number];
    choicesCounter++;
  });
};


let questions = [{
    question: "Do you mind crowds?",
    icons: {
      choice1: "Q1_A.svg",
      choice2: "Q1_B.svg",
      choice3: "Q1_C.svg",
      choice4: "Q1_D.svg",
    },
    choices: {
      choice1: "Crowds don't bother me",
      choice2: "I prefer to get off the beaten path",
      choice3: "I don't care either way",
      choice4: "Crowds mean there is something worth looking at",
    }
  },
  {
    question: "Where would you like to stay on your trip?",
    icons: {
      choice1: "Q2_A.svg",
      choice2: "Q2_B.svg",
      choice3: "Q2_C.svg",
      choice4: "Q2_D.svg",
    },
    choices: {
      choice1: "Crowds don't bother me",
      choice2: "I prefer to get off the beaten path",
      choice3: "I don't care either way",
      choice4: "Crowds mean there is something worth looking at",
    }
  },
  {
    question: "What activities do you enjoy?",
    icons: {
      choice1: "Q3_A.svg",
      choice2: "Q3_B.svg",
      choice3: "Q3_C.svg",
      choice4: "Q3_D.svg",
    },
    choices: {
      choice1: "Crowds don't bother me",
      choice2: "I prefer to get off the beaten path",
      choice3: "I don't care either way",
      choice4: "Crowds mean there is something worth looking at",
    }
  }
];

//Convert to an array, so you can use array functions on it
const choice = Array.from(document.getElementsByClassName('choice_text'));

choicesCounter = 0;

choicesLoop = (questionId) => {
  choice.forEach(choice => {
    const number = choice.dataset['number'];
    choice.innerHTML = questions[questionId].choices['choice' + number];
    choicesCounter++;
  });
};

choicesLoop(0)
<div class="multiple-choice-container">
  <div class="choice_container">
    <p class="choice_icon" data-number='1'>A</p>
    <p class="choice_text" data-number='1'> Choice 1</p>
  </div>
  <div class="choice_container ">
    <p class="choice_icon" data-number='2'>B</p>
    <p class="choice_text" data-number='2'> Choice 2</p>
  </div>
  <div class="choice_container">
    <p class="choice_icon" data-number='3'>C</p>
    <p class="choice_text" data-number='3'> Choice 3</p>
  </div>
  <div class="choice_container">
    <p class="choice_icon" data-number='4'>D</p>
    <p class="choice_text" data-number='4'> Choice 4</p>
  </div>
</div>

Upvotes: 3

Related Questions