javascript - 通过单击重新填充对象

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

这是你可以做的一个例子：小提琴

创建一个函数来填充问题和选项。添加<span>or<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);
});

请务必currentQuestion++从您的submit处理程序中删除。

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>