Question

我正在尝试使用javascript构建一个多项选择测试，它一次显示一个问题（淡入下一个问题）。在所有问题都得到解答后，根据您的答案，它会为您提供结果。实际问题的结果不需要仅显示该分数的分数和解释，因为结果将是一堆文本。

例如：

得分0-20 =结果1
21-50 =结果2
51-60 =结果3
61-80 =结果4
81 - 100 =结果5

下面是我的代码，如何更改它以便没有答案“正确”它只是在测验结束时根据上述分数的范围给出文本结果？

使用Javascript：

 (function() {
var questions = [{
question: "Question1",
choices: ["choice1", "choice2", "choice3"],
correctAnswer:0
}, {
question: "Question2",
choices: ["choice1", "choice2", "choice3"],
correctAnswer: 4
}, {
question: "Question3",
choices: ["choice1", "choice2", "choice3"],
correctAnswer: 0
}, {
question: "Question4",
choices: ["choice1", "choice2", "choice3"]
correctAnswer: 3
}, {
question: "Question5",
choices: ["choice1", "choice2", "choice3"],
correctAnswer: 4
}];

var questionCounter = 0; //Tracks question number
var selections = []; //Array containing user choices
var quiz = $('#quiz'); //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])) {
  alert('Please make a selection!');
} else {
  questionCounter++;
  displayNext();
}
});

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

 // Animates buttons on hover
 $('.button').on('mouseenter', function () {
 $(this).addClass('active');
 });
 $('.button').on('mouseleave', function () {
 $(this).removeClass('active');
 });

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

  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="radio" 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() {
  var score = $('<p>',{id: 'question'});

  var numCorrect = 0;
  for (var i = 0; i < selections.length; i++) {
  if (selections[i] === questions[i].correctAnswer) {
    numCorrect++;
  }
}

score.append('You got ' + numCorrect + ' questions out of ' +
             questions.length + ' right!!!');
return score;
}
})();

HTML：

<div class="col-md-6" style="padding:10px;">
<h4 class="text-center lead" style="color:#333;font-size:28px;"> Relationship Test </h4>
<div class="test">
<a id="update" href="index.html" class="pull-right"><i style="color:#333;" class="glyphicon glyphicon-repeat glyphicon-repeat-animate"></i></a> 

<p id="quiz" class="lead quiz-1" style="color:#333;padding:20px;"> </p> 
</div>
 <div style="margin-top:5px;">

<a type="" id="next" href="#tellme" class="button btn btn-block testbuttons"  onclick="" >Next </a>
<a type="" id="prev" href="#tellme" class="button btn btn-block testbuttons"  onclick="" >Previous </a>
<a type="" id="start" href="#tellme" class="button btn btn-block testbuttons"  onclick="" >Start Over </a>
</div>
</div>

Answer 1

以下是您的问题的回答可能具有的重量＆＃34;确定0-100范围内的最终结果以及介于两者之间的内容：

var questions = [
    {
        question: "Question1",
        choices: [
                    "choice1",
                    "choice2",
                    "choice3"
                    ],
        weights: [10, 7, 3]
    },
    {
        question: "Question2",
        choices: [
                    "choice1",
                    "choice2",
                    "choice3"
                    ],
        weights: [3, 10, 7]
    },
    {
        question: "Question3",
        choices: [
                    "choice1":10,
                    "choice2":0,
                    "choice3":10
                    ],
        weights: [10, 0, 10]
    },
    {
        question: "Question4",
        choices: [
                    "choice1",
                    "choice2",
                    "choice3"
                    ],
        weights: [3, 10, 7]
    },
    {
        question: "Question5",
        choices: [
                    "choice1",
                    "choice2",
                    "choice3"
                    ],
        weights: [10, 3, 7]
    }
];

我所做的是取最高分，即100分，并将其除以问题I给出的数量，在这种情况下为5，然后将每个问题的20分不等（并且＆＃ 39;重要的是在答案之间，给予最好的＆＃34;最好的＆＃34;回答，少了或0点到最差＆＃34;答案。

注意我总是确保任何给定问题中的所有要点都等于20，以便每个问题的选择都是＆＃34;公平＆＃34;在确定分数。我希望能解决“没有正确答案”的问题。你的问题的一部分。

更新：我已更新代码，以便更轻松地处理答案。

在＆＃34; new＆＃34;版本，你有一个＆＃34;权重＆＃34;对于每个问题的数组，权重数字应该对应于每个＆＃34;选择＆＃34;分别。在您的申请中，每个问题都应该按原样处理：

获取＆＃34;问题＆＃34;值并将其显示在HTML标记中。从＆＃34;选择中获取选择＆＃34;数组并将它们显示在HTML选择选项标记内，如下例所示：

<select id="response">
    <option value="10">Best answer</option>
    <option value="7">Moderate answer</option>
    <option value="3">Worst answer</option>
</select>

重量值应该在每个选项的value="x"中，就像上面的例子一样。您可以使用jQuery中的each()函数（我假设您正在使用Bootstrap，因此您已经拥有它）来遍历问题。

每个问题＆＃34;提交＆＃34;按钮应调用您的choose()函数，该函数应更新以检索value="x"值并将其添加到selections[]数组。

您应该更新displayScore()函数，以便以这种方式总结selections[]数组中的值：

var total = 0;
for (var i = 0; i < selections.length; i++) {
    total += selections[i];
}

使用total和if else if将if变量与结果范围（0-20,21-40,41-60,61-80,81-100）进行比较它应该return文本＆＃34;解释＆＃34;你想给分数，也许分数本身。

最后，您只需要在HTML标记内使用displayScore()打印document.write()的结果，以便向用户显示结果。

Answer 2

我分叉了你的笔：http://codepen.io/anon/pen/XXKeaN 想想我已经修好了。

请查看答案，其中包含选择的价值。 checkAnswer（）函数计算这个，特别是这一行

score = score + quiz[currentQuestion].answer[i];

输出结束，只显示一个单一的分数。

如何将javascript测验结果更改为基于权重的评分？

2 个答案: