我使用 Vue.js 编写了以下测验,其中一切都像魅力一样......

除了我找不到解决方案的一件事,是我的代码导致了这个错误吗? 或者我需要以不同的方式处理它?

更新:现在我已经为每个元素添加了唯一的名称,正如其中一个答案所暗示的那样,第二个菜单项总是在页面加载时默认选择......有关如何解决这个问题的任何提示?

<script>

    // Create a quiz object with a title and two questions.
// A question has one or more answer, and one or more is valid.
var quiz = {
   "title":"Quizorama",
   "questions":[
      {
         "text":"Lalala",
         "audio":"TextTo-1-1.mp3",
         "responses":[
            {
               "text":"Incorrect"
            },
            {
               "text":"Incorrect"
            },
            {
               "text":"Correct",
               "correct":true
            }
         ]
      },
      {
         "text":"Something",
         "audio":"57633709.mp3",
         "responses":[
            {
               "text":"Correct",
               "correct":true
            },
            {
               "text":"Incorrect"
            },
            {
               "text":"Incorrect"
            }
         ]
      },
      {
         "text":"Question",
         "audio":"57633709.mp3",
         "responses":[
            {
               "text":"Correct",
               "correct":true
            },
            {
               "text":"Incorrect"
            },
            {
               "text":"Incorrect"
            }
         ]
      }
   ]
};


</script>


<div class="wrapper" id="page-wrapper">

    <div class="centered-content " id="content" tabindex="-1">

        <div class="row">
            <main class="site-main" id="main">


  <div id="app">
  <h1>{{ quiz.title }}</h1>
  <!-- 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 -->
     <transition name="slide-fade"> 
    <div v-show="index === questionIndex">
      <h2>{{ question.text }}</h2>
      <audio width="450" controls :src="question.audio"></audio>

      <ul>
    <li v-for="response in question.responses" 
        v-bind:correctOrNot="response.correct"
        v-bind:class="{ active: isActive }">
      <label>
             <input type="radio" 
               v-bind:value="checkResponse(response.correct)"  
               v-bind:name="nameMethod(index ,response.text, 
               questionIndex)" 
               v-model="userResponses[index]"
               > {{response.text}}
               
      </label>
    </li>
</ul>
      <!-- The two navigation buttons -->
      <!-- Note: prev is hidden on first question -->
      <!-- <button v-if="questionIndex > 0" v-on:click="prev">
        otra oportunidad?
      </button> -->
      <button v-on:click="next">
            Next pleeeeease!
          </button>

    </div>
 </transition>

  </div>
  <transition name="slide-fade"> 

  <div v-show="questionIndex === quiz.questions.length">
    <h3>
yer results are da following bro:
</h3>
    <p class="puntaje">
     {{ score() }} 
    </p>


  </div>
  </transition> 

</div>

<script>


      
new Vue({
  el: '#app',

  data: {
    quiz: quiz,
    // Store current question index
    questionIndex: 0,
    // 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),
    isActive: false,
   
  },

  // The view will trigger these methods on click
  methods: {


checkResponse: function(response){
  let checkResponseValue = response; 
  if (response == true){
    return true;
  } else {
    return false;
  }
},
nameMethod: function(index, responseText, questionIndex){
  var index = index;
  var questionIndexValue = questionIndex
  var responseText = responseText;
  var name = index + responseText+'_'+ questionIndexValue;
  return name;
},

    next: function() {    
      
      console.log(this);

      this.isActive = true;

      setTimeout(() => {
        // move to next question 
       this.questionIndex++;

       this.isActive = false;

      }, 3000);

    },

    updateMessage: function () {
      this.message = 'updated';
      },
    
    // Go to previous question
    prev: function() {
      this.questionIndex--;
    },
    editModal: function(id){
        console.log(id);
    },

    // Return "true" count in userResponses
    score: function() {
     let scorePercent = Math.round(this.userResponses.filter(function(val) { return val }).length * 100 / this.questionIndex);
     let newResult;
    
     if(scorePercent == 0 ){
      newResult =  "you suck , not even one good response mate ";
      return newResult
     }

     if(scorePercent < 30){
      newResult = scorePercent + "% Was Good, so you need to practice more mate";
      return newResult
     }

     if(scorePercent < 70){
      newResult =  scorePercent + "% yar a ducking star but there is more to improve";
      return newResult
     }

     if(scorePercent == 100){
      newResult = scorePercent + "% you are a godlike creature made flesh";
      return newResult
     }
     
      }

  }


});

</script>


<style>

p.puntaje {
    font-size: 25px;
    color: #333333;
    margin-bottom: 40px;
    background: #fce373;
    padding: 13px;
    border-radius: 100px;
    text-align: center;
}

main#main {
    margin: auto;
}
#app h1 {
    font-size: 66px;
    font-weight: 900;
    color: #b1b1b1;
}

#app h2 {
    font-size: 125px;
    color: #a282bb;
}

#app ul {
    list-style: none;
    padding: 0;
}

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all 0.5s ease;
  transition-delay: 2s;

}
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
  transition: all 0.5s ease;


}
#app button {
    background: #00BCD4;
    width: 200px;
    margin-bottom: 30px;
    border-radius: 100px;
    font-size: 17px !important;
    padding: 7px 17px;
    border: none;
}
#app li label {
    font-size: 25px;
    background: #fff2b6;
    border-radius: 100px;
    padding-left: 17px;
    padding-right: 17px;
    margin-top: 16px;
    padding-top: 5px;
    transition: all 0.5s ease;
}

#app li label:hover{
background: #fce372;
cursor:pointer;
transition: all 0.5s ease;

}

li.active label {
    background: #ee734c !important;  transition: all 0.5s ease;

}
li[correctOrNot="true"].active label {
  background: #9ad18b !important;  transition: all 0.5s ease;

}

.slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(50px);
  opacity: 0;
  transition: all 0.5s ease;

}
</style>

#1楼 票数:3 已采纳

这是一个简单的 HTML 问题。 您使用response.correct值定义单选按钮,该值对于不正确的选项是未定义的,并且对于两者也是相同的(无论它是 null 还是 false)。

你的输出可能是这样的:

<input type="radio" name="index">Incorrect
<input type="radio" name="index">Incorrect
<input type="radio" name="index" value="true">Correct

如果您有一组单选按钮并且其中几个具有相同的值(或没有),则它们基本上是相同的输入。 尝试为每个具有相同名称的单选按钮定义一个唯一值。

  ask by Herzlin translate from so

未解决问题?本站智能推荐:

2回复

如何使用单选按钮和 Vue.js 更改页面颜色?

我想选择使用带有 vuejs 的单选按钮来更改页面颜色 到目前为止我有这个 JavaScript var theme = new Vue({ el: '#theme', data: { picked: '' } }) HTML <div id="
1回复

在Vue.js中点击时切换按钮颜色

我正在使用Vue.js制作gomoku风格的游戏,但遇到了麻烦。 单击其中一个按钮时,它应该将按钮的background-color更改为绿色,然后,如果我单击另一个空旷位置,则应将background-color更改为蓝色(从而模拟每个玩家的移动)。 到目前为止,我的程序存在的问题是,当我
2回复

如何在vue.js中加载scss

// Vuejs组件 //webpack.config 我的组件仍然无法正确加载样式。 请帮忙!!
1回复

Vue.js 基于子域加载 CSS

我有一个使用 Vue cli 3 制作的 Vue js 应用程序。我在我的项目中使用了 sass loader 和 node-sass。 如果我有多个子域用于相同的代码,例如site1.mysite.com和site2.mysite.com ,我如何根据子域加载不同的 css 文件? 我已经在文
3回复

如何将Vue.js作用域样式应用于通过view-router加载的组件?

如何将Vue.js作用域样式应用于通过<view-router>加载的组件。 这是我的代码: 当我访问/posts将加载一个名为Posts的组件,在这个组件里面我有一个 问题是#admin定义的样式不适用于.action元素。 没有作用域时,这很好用。 #a
1回复

更改页面时,Vue.js活动菜单颜色不会禁用

我的网站是https://www.askarya.ir/en ,我希望能够仅将活动页面navbar li涂成红色。 和相应的CSS 此刻,即使在其他页面上,主页导航项也始终亮着,我如何才能仅激活活动页面导航项。 谢谢
1回复

Vue.js在悬停时更改子组件的CSS样式

我创建了一个“框”组件,该组件可以重复使用多次。 每个元素都有一个@mouseenter事件,父母可以监听。 我的目标是更改子元素的边框颜色。 因为我通过循环从父级声明了,所以我不能仅更改childs属性之一,但它们都可以更改 问题出在这部分: v-bind:borderCo
1回复

vue.js 在开关打开时创建输入字段

我是 Vue 的新手。 我有一个开关输入,显示关闭/打开选项。 我想在开关打开时创建输入字段,我想在开关关闭时删除输入字段。 我的代码的相关部分在这里: <label class="switch"> <input class="switch-input" type="chec