1

配列に保存されている次の質問でラジオ ボタンを再設定しようとしています。現在の質問を削除して、ラジオ ボタンに次の質問を再入力する方法がわかりません。 

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

私は今完全に立ち往生しています。

4

2 に答える 2

1

これはあなたができることの例です: Fiddle

質問とオプションを入力する関数を作成します。<span>または要素を追加<label>して、.html を使用する代わりにそれらの 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

于 2015-12-13T00:03:15.207 に答える
0

アンケートを再構成したいという衝動に駆られたので、ここに私の提案を示します。

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>

于 2015-12-13T00:19:59.433 に答える