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.

Answer 1

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.