Repopulating objects with a click

Question

I'm attempting to repopulate my radio buttons with the next question that is stored in my array. I'm unsure of how to remove the current question and repopulate the radio buttons with the next question.

var questionsArray = [];

//Create counters for both correct answers and current question
var correctAnswers = 0;
var currentQuestion = 0;

//Contructor Function to create questions
function Question (question, choices, answer){
    this.question = question;
    this.choices = choices;
    this.answer = answer;
}

//Question Creations
questionsArray.push(new Question(...

To append the questions to my radio buttons I've used this code:

$('.q_question').append(questionsArray[0]['question']);
//In order to be able to check what radio is click you have to change to value of the radio buttons to the correct answer.
$('.btn1').after(questionsArray[0]['choices'][0]);
$('.btn1').val(questionsArray[0]['choices'][0]);               

$('.btn2').after(questionsArray[0]['choices'][1]);
$('.btn2').val(questionsArray[0]['choices'][1]);

$('.btn3').after(questionsArray[0]['choices'][2]);
$('.btn3').val(questionsArray[0]['choices'][2]);

$('.btn4').after(questionsArray[0]['choices'][3]);
$('.btn4').val(questionsArray[0]['choices'][3]);

To check the answers I've got with:

$('#submit').on('click', function(){
    currentQuestion ++;
    var answer = $('input[name="1"]:checked').val();   //By creating the answer variable we are able to store which radio button value is submitted.
    if(answer == questionsArray[0]['answer']){
        correctAnswers ++;
        $('.jumbotron').append(answer + "?<br><br> That's correct!  You have " + correctAnswers + " out of 10 correct!");
    } else {
        $('.jumbotron').append(answer+ "? <br><br> Oh dear, that's so so wrong! You have " + correctAnswers + " out of 10 correct");
    }
    return false;
});

I'm totally stuck now.

Where is your loop to append all questions instead on just one at index 0? — Alex, Dec 12 '15 at 23:29
can you post the complete code for `questionsArray.push(new Question(...` — Daniel Kobe, Dec 12 '15 at 23:33
I haven't added it yet, this where I'm stuck. How/where do I associate the loop so that it moves forward each time a question is answered? — Devon Deason, Dec 12 '15 at 23:34
Do you want to show the result of a given answer for each question separately or do you want to check the choices once all questions have been answered in the end? — Alex, Dec 12 '15 at 23:49
My initial plan was to show the answer for each question, but I might have bit off more than I can chew with that idea. — Devon Deason, Dec 12 '15 at 23:52

score 1 · Accepted Answer · answered Dec 13 '15 at 00:03

Here's an example of something you could do: Fiddle

Create a function to populate the question and options. Add <span> or <label> elements and change the html in them instead of just using .after().

function populateQuestion(index) {
    $('.q_question').html(questionsArray[index]['question']);

    for (var i = 0; i < 4; i++) {
        $('.jumbotron').html('');
        $('.btn' + (i + 1)).val(questionsArray[index]['choices'][i]).prop('checked', false);
        $('.label' + (i + 1)).html(questionsArray[index]['choices'][i]);
    }
}

Add an event listener for the "Continue" button that runs the function with the correct (updated) index:

$('.continue').on('click', function() {
    populateQuestion(++currentQuestion);
});

Just be sure to remove currentQuestion++ from your submit handler.

This is great! Exactly what I had envisioned. Thank you! – Devon Deason Dec 13 '15 at 01:30 — Devon Deason, Dec 13 '15 at 01:30

Alex · Answer 2 · 2015-12-13T00:26:37.663

I had the urge to restructure the questionnaire, so here is my proposal:

var questions = [];

questions.push({
  question: "What does HTML stand for?",
  choices: [
    "Hyper Text Markup Language",
    "High Text Main Language",
    "Hyper Translated Modern Language"
  ],
  answer: 0
});

questions.push({
  question: "What does CSS stand for?",
  choices: [
    "C-Style-Source",
    "Cascading Style Source",
    "Cascading Style Sheets"
  ],
  answer: 2
});

questions.push({
  question: "What does JS stand for?",
  choices: [
    "JavaSource",
    "JavaScript",
    "JavaStuff"
  ],
  answer: 1
});

// create question elements
for (var i = 0; i < questions.length; i++) {

  var question = $('<div>').addClass('question');
  question.append(
    $('<div>').addClass('caption').text(questions[i].question)
  );
  
  var choices = $('<ul>').addClass('choices');
  for (var n = 0; n < questions[i].choices.length; n++) {
  
    var choice = $('<li>').addClass('choice');
    choice.append(
      $('<input>').attr('type', 'radio').attr('name', 'question' + i).val(n).attr('id', 'label_question' + i + '_' + n)
    );
    choice.append(
      $('<label>').attr('for', 'label_question' + i + '_' + n).text(questions[i].choices[n])
    );
    
    choices.append(choice);
  }
  
  question.append(choices);
  $('.questions').append(question);
}

// attach evaluation of answers
$('#submit').click(function() {
  
  var result = $('#result');
  var correctAnswers = 0;
  
  for (var i = 0; i < questions.length; i++) {
    if ( $('input[name="question' + i + '"]:checked').val() == questions[i].answer ) {
      correctAnswers += 1;
    }
  }
  
  result.text('You answered ' + correctAnswers + ' of ' + questions.length + ' questions correctly.').show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="questions">
</div>

<button id="submit" type="button">
  check answers
</button>
<div id="result" style="display: none;">
</div>

Repopulating objects with a click

2 Answers2