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);
});

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

Answer 2

我有调整问卷重组的冲动，所以这是我的建议：

＆＃13;

rating_count = soup.find("span", attrs={'class':'rating_count'})
print rating_count

＆＃13;

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

＆＃13;

通过单击重新填充对象

2 个答案: