单击重新填充对象

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" 按钮添加一个事件侦听器，该按钮使用正确的（更新的）索引运行函数：

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

单击重新填充对象

Repopulating objects with a click

javascript

arrays

jquery

repopulation