开发练习模块4

package-lock.json

@@ -1648,6 +1648,12 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/howler": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmmirror.com/@types/howler/-/howler-2.2.7.tgz",
+      "integrity": "sha512-PEZldwZqJJw1PWRTpupyC7ajVTZA8aHd8nB/Y0n6zRZi5u8ktYDntsHj13ltEiBRqWwF06pASxBEvCTxniG8eA==",
+      "dev": true
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -3315,6 +3321,11 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
+    "buzz": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/buzz/-/buzz-1.2.1.tgz",
+      "integrity": "sha512-eQ/I237IeAn+63i5QiooRor0tarcYbePkpyfqKjIKFmUU0m63c37Nlpjm2DmUS8ntJG3A9eCynexLUyNz+1eew=="
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.0.0.tgz",
@@ -5636,6 +5647,11 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmmirror.com/hpack.js/-/hpack.js-2.1.6.tgz",

package.json

@@ -12,13 +12,16 @@
     "@fullhuman/postcss-purgecss": "^3.0.0",
     "ant-design-vue": "^4.0.0-beta.2",
     "axios": "^1.4.0",
+    "buzz": "^1.2.1",
     "core-js": "^3.8.3",
+    "howler": "^2.2.3",
     "moment": "^2.29.4",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
+    "@types/howler": "^2.2.7",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-babel": "~5.0.0",

src/App.vue

@@ -25,6 +25,7 @@
 @import url("./assets/css/pt.css");
 @import url("./assets/css/pb.css");
 @import url("./assets/css/radius.css");
+@import url("./assets/css/tracking.css");
 * {
   padding: 0;
   margin: 0;

src/api/question/question.ts

@@ -19,12 +19,12 @@ export default {
         })
     },
     questionInfoQlist(params:{
-        classIssueName?:string
+  
         classIssue?:string
-        issueValue?:string
+        classIssueName?:string
         subject:number
-        pageNum?:number
-        pageSize?:number
+        isRand:string
+       
     }):Promise<questionApi.selectTestK14QuestionInfoList>{
         return request({
             params,

src/api/question/type.d.ts

@@ -14,6 +14,7 @@ export declare namespace questionApi {
 
     }
     interface selectTestK14QuestionInfoList extends Res {
+        total:number
         rows: {
             isError?: boolean
             isComplete?: boolean

src/components/mProblemAlert/index.vue

@@ -57,4 +57,7 @@ export default defineComponent({
 .w100vw {
   width: 100vw;
 }
+.h100vh{
+  height: 100vh;
+}
 </style>

src/hooks/exam/driverExam.ts

@@ -1,7 +1,7 @@
-import { computed, onMounted, reactive, ref, watch,onBeforeUnmount } from "vue";
+import { computed, onMounted, reactive, ref, watch, onBeforeUnmount } from "vue";
 import { openApi } from "@/api/open/type";
 import moment from 'moment';
-
+import audio from "@/utils/audio";
 export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoRes>, config = {
   watch: true,
   countDown: true
@@ -525,7 +525,13 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
     optsArr: ["√", "×"],
   }])
   const listIndex = ref(0)
+  const listPageNum = computed(() => {
+    return listIndex.value + 1
+  })
   const countDown = ref('00:45:00')
+  const playIssueAudio = ()=>{
+    audio.playAudio(list.value[listIndex.value].issuemp3)
+  }
   const getProblemTypeName = (type: number) => {
     let name = "";
     switch (type) {
@@ -567,6 +573,62 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
     } else {
       list.value[listIndex.value].userAnswer = answer;
     }
+  };
+  //用于直接出结果
+  const setUserAnswerAndRes = (answer: string) => {
+    if (list.value[listIndex.value].questionType == 3) {
+      let userAnswer = list.value[listIndex.value].userAnswer as string[];
+      console.log(userAnswer.indexOf(answer))
+      if (userAnswer.indexOf(answer) > -1) {
+        userAnswer = userAnswer.splice(userAnswer.indexOf(answer), 1)
+      } else {
+        userAnswer.push(answer);
+      }
+    } else {
+      list.value[listIndex.value].userAnswer = answer;
+    }
+    //判断对错
+    if (
+      list.value[listIndex.value].questionType !== 3 &&
+    
+      list.value[listIndex.value].userAnswer.length
+    ) {
+      const userAnswer = list.value[listIndex.value].userAnswer as string;
+      const answer = list.value[listIndex.value].answer;
+      if (answer == userAnswer) {
+        list.value[listIndex.value].isComplete = true;
+        list.value[listIndex.value].isError = false;
+        trueNum.value++;
+      } else {
+        list.value[listIndex.value].isComplete = true;
+        list.value[listIndex.value].isError = true;
+        falseNum.value++;
+      }
+    } else if (
+      list.value[listIndex.value].questionType == 3 &&
+     
+      list.value[listIndex.value].userAnswer.length
+    ) {
+      const userAnswer = Object.assign([], list.value[listIndex.value].userAnswer) as string[];
+      userAnswer.sort();
+      const answer = list.value[listIndex.value].answer.split("-");
+      answer.sort();
+      if (userAnswer.toString() == answer.toString()) {
+        list.value[listIndex.value].isComplete = true;
+        list.value[listIndex.value].isError = false;
+        trueNum.value++;
+      } else {
+        list.value[listIndex.value].isComplete = true;
+        list.value[listIndex.value].isError = true;
+        falseNum.value++;
+      }
+    }
+    //判断对错
+
+
+
+
+
   };
   const switchIndexByJudge = (index: number) => {
     let name = "";
@@ -618,7 +680,6 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
   };
   if (config.watch) {
     watch(listIndex, (newVal, oldVal) => {
-      console.log(newVal, oldVal);
       //判断对错
       if (
         list.value[oldVal].questionType !== 3 &&
@@ -703,30 +764,36 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
     timerId = window.setInterval(() => {
       examMillSeconds = examMillSeconds - 1000
       countDown.value = moment(examMillSeconds).format('00:mm:ss')
+      if (examMillSeconds === 0) {
+        window.clearInterval(timerId)
+      }
     }, 1000)
 
 
 
   })
-  onBeforeUnmount(()=>{
+  onBeforeUnmount(() => {
     window.clearInterval(timerId)
 
   })
-  
+
   return {
     falseNum,
     trueNum,
     list,
     listIndex,
     countDown,
+    listPageNum,
     setUserAnswer,
+    setUserAnswerAndRes,
     getProblemTypeName,
     getCorrectRate,
     nextProblem,
     preProblem,
     switchIndexByJudge,
     switchAnswerBySelect,
-    switchIndexBySelect
+    switchIndexBySelect,
+    playIssueAudio
 
   }
 

src/utils/audio.ts

@@ -0,0 +1,17 @@
+
+
+
+import { Howl, Howler } from 'howler';
+export default {
+    playAudio: (src: string | string[]) => {
+        const audio = new Howl({
+            src: src,
+            html5:true
+        });
+        audio.play()
+        return
+
+
+    }
+
+}

src/views/home/practiseSelect/index.vue

@@ -52,6 +52,7 @@
 import { defineComponent, ref } from "vue";
 import api from "@/api";
 export default defineComponent({
+  name:"practiseSelect",
   setup() {
     let list = ref<
       {

src/views/studySkill/index.vue

@@ -3,12 +3,22 @@
     <div class="pt30 pr30 pl30 pb30">
       <div class="w-full gray-border">
         <div class="pt30 pl30 text-left font26 pb50 bg-white">
-          <span
-            >2.避让特种车辆使其顺利通过后，车辆应该有序回到原车道继续行驶，</span
-          >
-          <div>B.错误</div>
-          <div>A.正确</div>
+          <span>{{ listIndex + 1 }}.{{ list[listIndex].issue }}</span>
+          <div v-if="list[listIndex].questionType === 1">
+            <div v-for="(item, index) in list[listIndex].optsArr" :key="index">
+              {{ switchIndexBySelect(index) }}.{{
+                item == "√" ? "正确" : "错误"
+              }}
+            </div>
+          </div>
+          <div v-if="list[listIndex].questionType !== 1">
+            <div v-for="(item, index) in list[listIndex].optsArr" :key="index">
+              {{ switchIndexBySelect(index) }}.{{ item }}
+            </div>
+          </div>
+
           <div
+            v-if="list[listIndex].isComplete && !list[listIndex].isError"
             class="inline-block pl15 pr5 mt15"
             style="background-color: #d9ffeb"
           >
@@ -18,6 +28,22 @@
             />
             <span style="color: #21a65f" class="lh60"> 恭喜！回答正确！</span>
           </div>
+          <div
+            v-if="list[listIndex].isComplete && list[listIndex].isError"
+            class="inline-block pl15 pr15 mt15 "
+            style="background-color: rgba(255, 220, 217, 1)"
+          >
+            <img
+              class="inline-block w42 h42"
+              src="@/assets/img/studySkill/cry_express.png"
+            />
+            <span v-if=" list[listIndex].questionType!==3" style="color: rgba(239, 54, 41, 1)" class="lh60">
+              正确答案是:{{switchAnswerBySelect(list[listIndex].answer,listIndex)}}</span
+            >
+            <span v-if=" list[listIndex].questionType===3" style="color: rgba(239, 54, 41, 1)" class="lh60">
+              正确答案是:{{switchAnswerBySelect(list[listIndex].answer.split('-'),listIndex)}}</span
+            >
+          </div>
           <div>
             <div
               class="mt30 w88 items-center bottom-button flex h40 justify-center"
@@ -29,18 +55,40 @@
               <span class="font16">读题</span>
             </div>
           </div>
-          <div class="flex mt15">
-            <div class="w57 lh46 bottom-button mr15">√</div>
-            <div class="w57 lh46 bottom-button">×</div>
+          <div v-if="list[listIndex].questionType === 1" class="flex mt15">
+            <div
+              @click="setUserAnswerAndRes(item)"
+              v-for="(item, index) in list[listIndex].optsArr"
+              :key="index"
+              class="w57 lh46 bottom-button mr15"
+            >
+              {{ item }}
+            </div>
+          </div>
+          <div v-if="list[listIndex].questionType !== 1" class="flex mt15">
+            <div
+              @click="setUserAnswerAndRes(item)"
+              v-for="(item, index) in list[listIndex].optsArr"
+              :key="index"
+              class="w57 lh46 bottom-button mr15"
+            >
+              {{ switchIndexBySelect(index) }}
+            </div>
           </div>
         </div>
       </div>
       <div class="w-full pt30">
         <div class="w1200 flex justify-between mr-auto ml-auto">
-          <div class="w120 lh46 bottom-button lh46">上一题</div>
-          <div class="w120 lh46 bottom-button lh46">下一题</div>
-          <div class="w120 lh46 bottom-button lh46">本题解析</div>
-          <div class="w120 lh46 bottom-button lh46">语音播报</div>
+          <div @click="preProblem()" class="w120 lh46 bottom-button lh46">
+            上一题
+          </div>
+          <div @click="nextProblem()" class="w120 lh46 bottom-button lh46">
+            下一题
+          </div>
+          <div @click="()=>{
+            alertVisible = true
+            }" class="w120 lh46 bottom-button lh46">本题解析</div>
+          <div @click="playIssueAudio()" class="w120 lh46 bottom-button lh46">语音播报</div>
           <div class="w120 lh46 bottom-button lh46">不设为错题</div>
           <div class="w120 lh46 bottom-button lh46">交卷</div>
         </div>
@@ -54,25 +102,34 @@
             <input
               class="outline-none input-border w35 h30 text-center"
               type="text"
+              :value="listPageNum"
             />
             <div class="pr2 pl2">题</div>
           </div>
 
-          <div>共 <span class="font-semibold">{{list.length}}</span> 题</div>
+          <div>
+            共 <span class="font-semibold">{{ list.length }}</span> 题
+          </div>
           <div class="align-baseline">
             <input class="" type="checkbox" />
             <span>答对自动跳转到下一题</span>
           </div>
           <div>
-            <div class="mr15 inline-block">
-              答对<span style="color: #21a65f">2</span>题
+            <div class="mr15 inline-block tracking5">
+              答对<span style="color: #21a65f">{{ trueNum }}</span
+              >题
             </div>
-            <div class="inline-block">
-              答错<span style="color: #ef3629">2</span>题
+            <div class="inline-block tracking5">
+              答错<span style="color: #ef3629">{{ falseNum }}</span
+              >题
             </div>
           </div>
           <div class=""><span class="text-black font16">正确率100%</span></div>
-          <div class=""><span class="text-black font16">进度 42%</span></div>
+          <div class="">
+            <span class="text-black font16"
+              >进度{{ ((trueNum + falseNum) * 100) / list.length }}%</span
+            >
+          </div>
           <div class="flex items-center content-center">
             <div class="mr15">
               <input class="" type="checkbox" /> <span>自动播放</span>
@@ -82,33 +139,37 @@
         </div>
       </div>
     </div>
+    <mProblemAlert v-model:visible="alertVisible" :content="list[listIndex].explainJs" title="题目解析"></mProblemAlert>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, } from "vue";
+import { defineComponent, ref } from "vue";
 import api from "@/api";
 import { openApi } from "@/api/open/type";
 import { useRoute } from "vue-router";
+import { useDriverExam } from "@/hooks/exam/driverExam";
+import mProblemAlert from '@/components/mProblemAlert/index.vue'
 export default defineComponent({
   setup() {
-    let list = ref<openApi.selectFreeQuestionInfoRes["rows"]>([]);
-    let route = useRoute()
-    api.question
-      .questionInfoQlist({
-        subject: Number(route.query.subject),
-        classIssue:'1040',
-      })
-      .then((res) => {
-        res.rows.shift()
-        list.value=res.rows
-        console.log(res);
-      });
+    let route = useRoute();
 
     return {
-      list
+     alertVisible: ref(false),
+      dialogVisible: ref(false),
+      ...useDriverExam(
+        api.question.questionInfoQlist({
+          subject: Number(route.query.subject),
+          classIssue: "1040",
+          classIssueName: "",
+          isRand: "",
+        })
+      ),
     };
   },
+  components: {
+    mProblemAlert,
+  },
 });
 </script>