如何使用 VueJS 开发前端测验应用程序？

vue 创建测验应用程序

光盘测验添加npm 运行服务

<模板>
 <div id="应用程序">
   <h2>测验应用</h2>
   <quiz @quiz-completed="handleQuizCompleted" :key="quizKey" />
   <自定义模态
     v-show="showModal"
     标头=“恭喜！”
     subheader="你已经完成了测验！"
     ：得分=“得分”
     @reload="更新测验"
     @close="showModal = false"
   />
 </div></模板>

<模板>
 <转换名称="模态">
   <div class="modal-mask">
     <div class="modal-wrapper">
       <div class="模态容器">
         <div class="modal-header">
           <h2>{{ 标题}}</h2>
           <h3>{{ 子标题 }}</h3>
         </div>
 
         <div class="modal-body">
           <div id="分数">
             你回答了
             <span class="高亮">
               {{
                 数学.floor(
                   (score.correctlyAnsweredQuestions / score.allQuestions) *
                     100
                 )
               }}
               % 正确！
             </span>
             已回答
             <span class="高亮">
               {{ score.correctlyAnsweredQuestions }} 出
               {{ score.allQuestions }}
             </span>
             问题。
           </div>
         </div>
 
         <div class="模态页脚">
           <按钮
             id="再玩一次"
             类=“按钮页脚”
             @click="$emit('重新加载')"
           >
             再玩一次
           </按钮>
           <按钮
             id="关闭按钮"
             类=“按钮页脚”
             @click="$emit('关闭')"
           >
             关闭
           </按钮>
         </div>
       </div>
     </div>
   </div>
 </过渡></模板>
 

<模板>
 <div 类="容器">
   <div class="correctAnswers">
     你有
     <strong>{{ correctAnswers }} 正确 {{ pluralizeAnswer }}！</strong>
   </div>
   <div class="correctAnswers">
     目前在 {{ index + 1 }} 的 {{ questions.length }} 中
   </div>
 
   <h2 v-html="loading ? 'Loading...' : currentQuestion.question" ></h2>
   <!-- 只显示第一个问题 -->
   <form v-if="currentQuestion">
     <按钮
       v-for="在 currentQuestion.answers 中回答"
       :index="currentQuestion.key"
       ：键=“答案”
       v-html="答案"
       @click.prevent="handleClick"
     ></按钮>
   </表格>
 </div></模板>

异步获取问题（）{
     this.loading = true;
     //从API获取问题
     让响应=等待获取（
       “https://opentdb.com/api.php?amount=5&category=21&type=multiple”
     );
     让索引= 0；//识别单一答案
     让 data = await response.json();
     让问题 = data.results.map((问题) => {
       问题.答案= [
         问题.correct_answer,
         ...question.incorrect_answers,
       ];
       //打乱上面的数组
       for (let i = question.answers.length - 1; i > 0; i--) {
         const j = Math.floor(Math.random() * (i + 1));
         [问题.答案[i],问题.答案[j]] = [
           问题.答案[j],
           问题.答案[i],
         ];
       }
       //添加正确的答案和关键
       问题.rightAnswer = null;
       问题。关键=索引；
       索引++；
       返回问题；
     });
     this.questions = 问题；
     this.loading = false;
   },

当前问题（）{
     如果 (this.questions !== []) {
       返回 this.questions[this.index];
     }
     返回空值；
   },

正确答案（） {
     如果（this.questions && this.questions.length > 0）{
       让 streakCounter = 0;
       this.questions.forEach(函数(问题){
         如果（！question.rightAnswer）{
           返回;
         } else if (question.rightAnswer === true) {
           条纹计数器++；
         }
       });
       返回条纹计数器；
     } 别的 {
       返回 ” - ”;
     }
   },

分数（） {
     如果 (this.questions !== []) {
       返回 {
         所有问题：this.questions.length，
         回答问题：
     this.questions.reduce((count, currentQuestion) => {
           如果（currentQuestion.userAnswer）{
             // userAnswer 在用户回答问题时设置，无论是对还是错
             计数++；
           }
           返回计数；
         }, 0),
         正确回答问题：this.questions.reduce(
           （计数，当前问题）=> {
             如果（currentQuestion.rightAnswer）{
               // rightAnswer 为真，如果用户回答正确
               计数++；
             }
             返回计数；
           },
           0
         ),
       };
     } 别的 {
       返回 {
         所有问题：0，
         回答问题: 0,
         正确回答问题：0，
       };
     }
   },

手表： {
   测验完成（完成）{
     完全的 ＆＆
       设置超时（（）=> {
         this.$emit("测验完成", this.score);
       }, 3000);
   },
 },

checkCorrectAnswer（e，索引）{
     让 question = this.questions[index];
     如果（问题。用户答案）{
       如果 (this.index < this.questions.length - 1) {
         设置超时（
           功能 （） {
             这个.index += 1;
           }.bind(这个),
           3000
         );
       }
       如果（question.userAnswer === question.correct_answer）{
         /* 如果用户回答正确，则在 Button 上设置类，以动画 joyfulButton 庆祝正确答案 */
         e.target.classList.add("rightAnswer");
         /* 将 rightAnswer on question 设置为 true，计算属性可以跟踪连续 20 个问题 */
         this.questions[index].rightAnswer = true;
       } 别的 {
         /* 将用户的回答标记为错误答案 */
         e.target.classList.add("wrongAnswer");
         this.questions[index].rightAnswer = false;
         /* 显示正确答案 */
         让 correctAnswer = this.questions[index].correct_answer;
         让 allButtons = document.querySelectorAll(`[index="${index}"]`);
         allButtons.forEach(函数(按钮){
           如果（按钮。innerHTML === correctAnswer）{
             button.classList.add("showRightAnswer");
           }
         });
       }
     }
   },