通過單擊重新填充對象

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(... 

要追加的問題，我的單選按鈕我用這個代碼：

$('.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]); 

要檢查我已經得到了答案：

$('#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; 
}); 

我完全現在卡住了。

Answer 1

下面是一些例子，你可以這樣做：Fiddle

創建一個函數來填充的問題和選項。添加<span>或<label>元素並更改其中的html，而不是僅使用.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]); 
    } 
} 

添加事件偵聽器運行與正確的（更新）指數函數「繼續」按鈕：

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

只要確保從您的submit處理程序刪除currentQuestion++。

Answer 2

我有衝動重組問卷，所以這裏是我的建議：

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>