Question

我有一个简单的测验，其中仅包含六个使用jquery的问题，一切正常，

这是jsfiddle：quiz demo

最终结果界面看起来像这样

我希望根据用户正确使用的问题来检查最终结果的复选框假设用户正确回答了四个问题，最终用户界面应如下所示

这是我的解决方法

function identity_number_change(identity_number){
$.ajax({
type:'GET',
url:'{{url("hotel/transfers/find_passenger/")}}'+'/'+identity_number,
success:function(data){                                     
document.getElementById('first_name[]').value = data.first_name;
},

// JavaScript Document
$(document).ready(function() {
  "use strict";

  var questions = [{
      question: "Whois usa president?",
      choices: ['Trump', 'Biden'],
      correctAnswer: 0
    }, {
      question: "What is the capital of Australia?",
      choices: ["Melbourne", "Sydney", ],
      correctAnswer: 1
    }, {
      question: "Who is the prime minister of the U.K.?",
      choices: ['Tony Blair', 'Kane'],
      correctAnswer: 0
    }, {
      question: "What is the first perfect number?",
      choices: [38, 6, 0],
      correctAnswer: 0
    },
    {
      question: "two plus 1?",
      choices: [1, 2, 3],
      correctAnswer: 1
    },
    {
      question: "Is kenyain africa?",
      choices: ['Yes', 'No'],
      correctAnswer: 0
    }
  ];

  var questionCounter = 0; //Tracks question number
  var selections = []; //Array containing user choices
  var quiz = $('.content'); //Quiz div object

  // Display initial question
  displayNext();

  // Click handler for the 'next' button
  $('#next').on('click', function(e) {
    e.preventDefault();

    // Suspend click listener during fade animation
    if (quiz.is(':animated')) {
      return false;
    }
    choose();

    // If no user selection, progress is stopped
    if (isNaN(selections[questionCounter])) {
      $('#warning').text('Please make a selection!');
    } else {
      questionCounter++;
      displayNext();
      $('#warning').text('');
    }
  });

  // Click handler for the 'prev' button
  $('#prev').on('click', function(e) {
    e.preventDefault();

    if (quiz.is(':animated')) {
      return false;
    }
    choose();
    questionCounter--;
    displayNext();
  });

  // Click handler for the 'Start Over' button
  $('#start').on('click', function(e) {
    e.preventDefault();

    if (quiz.is(':animated')) {
      return false;
    }
    questionCounter = 0;
    selections = [];
    displayNext();
    $('#start').hide();
  });

  // Creates and returns the div that contains the questions and 
  // the answer selections
  function createQuestionElement(index) {
    var qElement = $('<div>', {
      id: 'question'
    });

    var header = $('<h2>Question ' + (index + 1) + ':</h2>');
    qElement.append(header);

    var question = $('<p>').append(questions[index].question);
    qElement.append(question);

    var radioButtons = createRadios(index);
    qElement.append(radioButtons);
    // this is new
    var warningText = $('<p id="warning">');
    qElement.append(warningText);

    return qElement;

  }

  // Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="checkbox" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
      radioList.append(item);
    }
    return radioList;
  }

  // Reads the user selection and pushes the value to an array
  function choose() {
    selections[questionCounter] = +$('input[name="answer"]:checked').val();
  }

  // Displays next requested element
  function displayNext() {
    quiz.fadeOut(function() {
      $('#question').remove();

      if (questionCounter < questions.length) {
        var nextQuestion = createQuestionElement(questionCounter);
        quiz.append(nextQuestion).fadeIn();
        if (!(isNaN(selections[questionCounter]))) {
          $('input[value=' + selections[questionCounter] + ']').prop('checked', true);
        }

        // Controls display of 'prev' button
        if (questionCounter === 1) {
          $('#prev').show();
        } else if (questionCounter === 0) {

          $('#prev').hide();
          $('#next').show();
        }
      } else {
        var scoreElem = displayScore();
        quiz.append(scoreElem).fadeIn();
        $('#next').hide();
        $('#prev').hide();
        $('#start').show();
      }
    });
  }

  // Computes score and returns a paragraph element to be displayed
  function displayScore() {
    console.log(selections);
    var score = $('<h3>', {
      id: 'question'
    });
    $("#result-input").removeClass('hide-input');
    $("#result-input").addClass('show-input');
    var numCorrect = 0;
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }
    // Calculate score and display relevant message
    var percentage = numCorrect / questions.length;
    if (percentage >= 0.9) {
      score.append('Incredible! You got ' + numCorrect + ' out of ' +
        questions.length + ' questions right!');
    } else if (percentage >= 0.7) {
      score.append('Good job! You got ' + numCorrect + ' out of ' +
        questions.length + ' questions right!');
    } else if (percentage >= 0.5) {
      score.append('You got ' + numCorrect + ' out of ' +
        questions.length + ' questions right.');
    } else {
      score.append('You only got ' + numCorrect + ' out of ' +
        questions.length + ' right. Want to try again?');
    }
    return score;
  }
});

我需要做什么才能实现自己想要的？任何帮助或建议将不胜感激

Answer 1

在displayScore（）函数内部，您可以选中整个结果复选框，并将它们另存为变量。像这样：var checkbox = $('#result-input li').children();

然后，在循环中检查答案是否正确并嵌套在if语句中，使用迭代器变量（i）从集合中选择一个复选框，并将其属性设置为checked。像这样：$(checkbox[i]).prop('checked', true);

以下是更新的功能：

  // Computes score and returns a paragraph element to be displayed
  function displayScore() {
  console.log(selections);
    var score = $('<h3>',{id: 'question'});
    $("#result-input").removeClass('hide-input');
    $("#result-input").addClass('show-input');
    var numCorrect = 0;
    // Selects collection of checkboxes
    var checkbox = $('#result-input li').children();
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
        // Selects single checkbox and sets it to checked if answer is correct.
        $(checkbox[i]).prop('checked', true);
      }
    }
    // Calculate score and display relevant message
    var percentage = numCorrect / questions.length;
    if (percentage >= 0.9){
        score.append('Incredible! You got ' + numCorrect + ' out of ' +
                 questions.length + ' questions right!');
    }

    else if (percentage >= 0.7){
        score.append('Good job! You got ' + numCorrect + ' out of ' +
                 questions.length + ' questions right!');
    }

    else if (percentage >= 0.5){
        score.append('You got ' + numCorrect + ' out of ' +
                 questions.length + ' questions right.');
    }

    else {
        score.append('You only got ' + numCorrect + ' out of ' +
                 questions.length + ' right. Want to try again?');
    }
    return score;
  }
});

实际上，您只需添加两行代码就可以实现这一目标。

我会提出一些改进您的应用程序的建议：

对于问题，请选择选项单选按钮而不是复选框，因为复选框允许用户选择多个问题。
当用户单击“重新开始”按钮时，隐藏结果复选框。

Answer 2

您必须在for循环内的if语句中添加else。然后，在else语句中，将一个类添加到复选框$(checkbox[i]).addClass(‘wrongAnswer’);

使用CSS，您可以为该类.wrongAnswer设置复选框样式，以使其中带有减号。

如何使用jQuery创建测验结果

2 个答案: