vue 創(chuàng)建測驗(yàn)應(yīng)用程序

光盤測驗(yàn)添加npm 運(yùn)行服務(wù)

<模板>
 <div id="應(yīng)用程序">
   <h2>測驗(yàn)應(yīng)用</h2>
   <quiz @quiz-completed="handleQuizCompleted" :key="quizKey" />
   <自定義模態(tài)
     v-show="showModal"
     標(biāo)頭=“恭喜！”
     subheader="你已經(jīng)完成了測驗(yàn)！"
     ：得分=“得分”
     @reload="更新測驗(yàn)"
     @close="showModal = false"
   />
 </div></模板>

<模板>
 <轉(zhuǎn)換名稱="模態(tài)">
   <div class="modal-mask">
     <div class="modal-wrapper">
       <div class="模態(tài)容器">
         <div class="modal-header">
           <h2>{{ 標(biāo)題}}</h2>
           <h3>{{ 子標(biāo)題 }}</h3>
         </div>
 
         <div class="modal-body">
           <div id="分?jǐn)?shù)">
             你回答了
             <span class="高亮">
               {{
                 數(shù)學(xué).floor(
                   (score.correctlyAnsweredQuestions / score.allQuestions) *
                     100
                 )
               }}
               % 正確！
             </span>
             已回答
             <span class="高亮">
               {{ score.correctlyAnsweredQuestions }} 出
               {{ score.allQuestions }}
             </span>
             問題。
           </div>
         </div>
 
         <div class="模態(tài)頁腳">
           <按鈕
             id="再玩一次"
             類=“按鈕頁腳”
             @click="$emit('重新加載')"
           >
             再玩一次
           </按鈕>
           <按鈕
             id="關(guān)閉按鈕"
             類=“按鈕頁腳”
             @click="$emit('關(guān)閉')"
           >
             關(guān)閉
           </按鈕>
         </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獲取問題
     讓響應(yīng)=等待獲?。?br/>       “https://opentdb.com/api.php?amount=5&category=21&type=multiple”
     );
     讓索引= 0；//識別單一答案
     讓 data = await response.json();
     讓問題 = data.results.map((問題) => {
       問題.答案= [
         問題.correct_answer,
         ...question.incorrect_answers,
       ];
       //打亂上面的數(shù)組
       for (let i = question.answers.length - 1; i > 0; i--) {
         const j = Math.floor(Math.random() * (i + 1));
         [問題.答案[i],問題.答案[j]] = [
           問題.答案[j],
           問題.答案[i],
         ];
       }
       //添加正確的答案和關(guān)鍵
       問題.rightAnswer = null;
       問題。關(guān)鍵=索引；
       索引++；
       返回問題；
     });
     this.questions = 問題；
     this.loading = false;
   },

當(dāng)前問題（）{
     如果 (this.questions !== []) {
       返回 this.questions[this.index];
     }
     返回空值；
   },

正確答案（） {
     如果（this.questions && this.questions.length > 0）{
       讓 streakCounter = 0;
       this.questions.forEach(函數(shù)(問題){
         如果（！question.rightAnswer）{
           返回;
         } else if (question.rightAnswer === true) {
           條紋計(jì)數(shù)器++；
         }
       });
       返回條紋計(jì)數(shù)器；
     } 別的 {
       返回 ” - ”;
     }
   },

分?jǐn)?shù)（） {
     如果 (this.questions !== []) {
       返回 {
         所有問題：this.questions.length，
         回答問題：
     this.questions.reduce((count, currentQuestion) => {
           如果（currentQuestion.userAnswer）{
             // userAnswer 在用戶回答問題時設(shè)置，無論是對還是錯
             計(jì)數(shù)++；
           }
           返回計(jì)數(shù)；
         }, 0),
         正確回答問題：this.questions.reduce(
           （計(jì)數(shù)，當(dāng)前問題）=> {
             如果（currentQuestion.rightAnswer）{
               // rightAnswer 為真，如果用戶回答正確
               計(jì)數(shù)++；
             }
             返回計(jì)數(shù)；
           },
           0
         ),
       };
     } 別的 {
       返回 {
         所有問題：0，
         回答問題: 0,
         正確回答問題：0，
       };
     }
   },

手表： {
   測驗(yàn)完成（完成）{
     完全的 ＆＆
       設(shè)置超時（（）=> {
         this.$emit("測驗(yàn)完成", this.score);
       }, 3000);
   },
 },

checkCorrectAnswer（e，索引）{
     讓 question = this.questions[index];
     如果（問題。用戶答案）{
       如果 (this.index < this.questions.length - 1) {
         設(shè)置超時（
           功能 （） {
             這個.index += 1;
           }.bind(這個),
           3000
         );
       }
       如果（question.userAnswer === question.correct_answer）{
         /* 如果用戶回答正確，則在 Button 上設(shè)置類，以動畫 joyfulButton 慶祝正確答案 */
         e.target.classList.add("rightAnswer");
         /* 將 rightAnswer on question 設(shè)置為 true，計(jì)算屬性可以跟蹤連續(xù) 20 個問題 */
         this.questions[index].rightAnswer = true;
       } 別的 {
         /* 將用戶的回答標(biāo)記為錯誤答案 */
         e.target.classList.add("wrongAnswer");
         this.questions[index].rightAnswer = false;
         /* 顯示正確答案 */
         讓 correctAnswer = this.questions[index].correct_answer;
         讓 allButtons = document.querySelectorAll(`[index="${index}"]`);
         allButtons.forEach(函數(shù)(按鈕){
           如果（按鈕。innerHTML === correctAnswer）{
             button.classList.add("showRightAnswer");
           }
         });
       }
     }
   },