javascript - 带分数的 Vue.JS 测验 - 2 个答案有效，3 个答案无效

Question

我有一个测验/调查，其分数是用 Vue.js 编写的。

在此示例中，只有 1 个正确答案，最后会显示您的分数，并且重定向会将您带到另一个页面(不包含在本演示中)。

当问题有 3 个答案时，您无法选择第一个单选按钮，它会直接跳转到第二个答案。

什么原因导致这种行为？

https://codepen.io/bucky208/pen/LMQvxr

// Create a quiz object with a title and questions.
// A question has one or more answer, and one or more is valid.
var quiz = 
 {
 	title: 'Reachers',
	questions: [
		{
			text: "Wat stuurt het verkoopgesprek het meest?",
			responses: [
				{text: "De vraag"}, 
				{text: "Het antwoord", correct: true}, 
			]
		},
		{
		    text: "Welke argumenten overtuigen het meest ?",
		    responses: [
		        {text: "Rationele"}, 
		        {text: "Emotionele", correct: true}, 
			]
		},
		{
		    text: "In een sector met hevige concurrentie tussen evenwaardige leveranciers. Wat zal uiteindelijk het meest de doorslag geven bij de uiteindelijke keuze van de klant?",
	      	responses: [		
		        {text: "Logistie"}, 
		        {text: "Contact"}, 
		        {text: "Prijs", correct: true}, 
			]
		},
		{
		    text: "In hoeveel percent van de gevallen is het bezwaar “U bent te duur” ook effectief de oorzaak waarom men niet bij u koopt ?",
	      	responses: [
	        	{text: "90%"}, 
	    	    {text: "50%"}, 
    		    {text: "10%", correct: true}, 
			]
		},
		{
	    	text: "Waar hebt u als verkoper het meeste aan ?",
	     	responses: [
	    	    {text: "U krijgt direct bij aankomst een koffie"}, 
    		    {text: "Tijdens het gesprek wordt u na enige tijd een koffie aangeboden", correct: true}, 
			]
		},
		{
		    text: "Wat is voor de klant het belangrijkste criterium om u te aanzien als volwaardige gesprekspartner ?",
	      	responses: [
	        	{text: "Uw vlotheid en charme"}, 
	    	    {text: "Uw vakkennis"}, 
    		    {text: "Uw voorbereiding", correct: true}, 
			]
		},
		{
	    	text: "Welke klanten hebben voorrang voor elk bedrijf ?",
	    	responses: [
	    	    {text: "De bestaande klanten"}, 
    		    {text: "De potentiële klanten", correct: true}, 
			]
		},
		{
	    	text: "Hoe kondigt u best prijsverhogingen aan ?",
	    	responses: [
	    	    {text: "U denkt mee met de klant en onderhandelt"}, 
    		    {text: "U presenteert ze als voldongen feiten", correct: true}, 
			]
		},
		{
	     	text: "Bij de aanvang van het verkoopgesprek vertelt de klant dat hij heel tevreden is 	van huidige leverancier. Wat doet u ?",
		    responses: [		
		        {text: "U luistert en gaat er niet op in."}, 
		        {text: "U haalt uw argumenten naar boven waarom klanten voor u en uw bedrijf kiezen", correct: true}, 
			]
		},
		{
		    text: "Tijdens het verkoopgesprek vertelt de klant dat hij een probleem heeft bij zijn huidige leverancier. Wat doet u ?",
	      	responses: [
	        	{text: "U haalt uw eigen argumenten naar boven"}, 
	    	    {text: "U doet niets"}, 
    		    {text: "U diept het probleem verder uit.", correct: true}, 
			]
		},
		{
	      	text: "Na verloop van tijd wordt u bevriend met de klant. Deze ontwikkeling is in uw:",
	      	responses: [
	    	    {text: "Voordeel"}, 
    		    {text: "Nadeel", correct: true}, 
			]
		},
		{
      		text: "Wat is de juiste volgorde waarin u uw presentatie opbouwt ?",
	      	responses: [
	        	{text: "1. Uzelf verkopen 2. Uw producten verkopen 3. Uw bedrijf verkopen"}, 
	    	    {text: "1. Uw producten verkopen 2. Uw bedrijf verkopen 3. Uzelf verkopen"}, 
    		    {text: "1. Uzelf verkopen 2. Uw bedrijf verkopen 3. Uw producten verkopen", correct: true}, 
			]
		},
		{
	      	text: "Als puntje bij paaltje komt kies ik uiteindelijk voor:",
	      	responses: [
	    	    {text: "Mijn klant"}, 
    		    {text: "Mijn bedrijf", correct: true}, 
			]
		},
		{
      		text: "Het beste wapen tegen prijsdruk is:",
	      	responses: [
	        	{text: "Scherpe prijzen"}, 
	    	    {text: "De relatie met de klant"}, 
    		    {text: "Argumenten", correct: true},
			]
		},
		{
      		text: "Om projecten te verkopen, met meerdere stakeholder binnen het bedrijf, hanteer ik best de volgende bezoekvolgorde:",
      		responses: [
		        {text: "Eerst de eigenaar, dan management en tenslotte uitvoerende personeel"}, 
		        {text: "Eerst uitvoerend personeel, daarna management en tot slot de eigenaar"}, 
		        {text: "Eerst management, daarna de eigenaar en tot slot uitvoerend personeel", correct: true}, 
			]
		},
	]
};

/*
var quiz = 
 {
 	title: 'Reachers',
	questions: [
		{
			text: "Wat stuurt het verkoopgesprek het meest?",
			responses: [
				{text: "De vraag"}, 
				{text: "Het antwoord", correct: true}, 
			]
    }
	]
};
*/
      
new Vue({
  el: '#app',
  data: {
    quiz: quiz,
    // Store current question index
    questionIndex: 0,
    show: false,
    // An array initialized with "false" values for each question
    // It means: "did the user answered correctly to the question n?" "no".
    userResponses: Array(quiz.questions.length).fill(false),
  },
  // The view will trigger these methods on click
  methods: {
    checkbutton: function() {
      this.show = true;
    },
    // Go to next question
    next: function() {
      this.questionIndex++;
      this.show = false;
      console.log("next");
      if(this.questionIndex === this.quiz.questions.length) {
        if(this.score() <= 5) {
          window.location = "/score-0-tot-5/";
          console.log("5 of minder");
        } else if(this.score() > 5 && this.score() <= 10) {
          window.location = "/score-5-tot-10/";
          onsole.log("tussen 5 en 10");
        } else if(this.score() > 10) {
          window.location = "/score-10-tot-15/";
          onsole.log("10 of meer");
        }
      }
    },
    // Go to previous question
    prev: function() {
      this.questionIndex--;
    },
    // Return "true" count in userResponses
    score: function() {
      return this.userResponses.filter(function(val) { return val }).length;
    }
  }
});

<div id="app">
  <!-- index is used to check with current question index -->
  <div v-for="(question, index) in quiz.questions">
    <!-- Hide all questions, show only the one with index === to current question index -->
    <div v-show="index === questionIndex">
      <h4>{{index+1}}. {{ question.text }}</h4>
      <ol>
        <li v-for="response in question.responses">
          <label>
            <!-- The radio button has three new directives -->
            <!-- v-bind:value sets "value" to "true" if the response is correct -->
            <!-- v-bind:name sets "name" to question index to group answers by question -->
            <!-- v-model creates binding with userResponses -->
            <input type="radio" 
                   v-bind:value="response.correct" 
                   v-bind:name="index" 
                   v-model="userResponses[index]" v-on:click="checkbutton"> {{response.text}}
          </label>
        </li>
      </ol>
      <!-- The two navigation buttons -->
      <!-- Note: prev is hidden on first question -->
      <button v-if="questionIndex > 0" v-on:click="prev">
        Vorige
      </button>
      <button v-on:click="next" v-show="show">
        Volgende
      </button>
      <button v-on:click="next" v-show="!show" disabled>
        Volgende
      </button>
    </div>
  </div>
  <div v-show="questionIndex === quiz.questions.length">
    <h2>
    Bedankt voor uw tijd
  </h2>
    <p>
      Uw score is: {{ score() }} / {{ quiz.questions.length }}, we sturen U nu door naar een andere pagina...
    </p>
    
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

亲切的问候，

马克西姆

Answer 1

因为有 3 个选项，您就有 2 个具有相同值的项目，如下图所示:

responses 数组中的每个项目都应该有不同的值，因此我建议您为其添加另一个属性，并仅使用 Correct 属性来检查正确的值回答。