做题的核心模块开发

src/api/open/type.d.ts

@@ -6,7 +6,9 @@ interface Res {
 export declare namespace openApi {
     interface selectFreeQuestionInfoRes extends Res {
         rows: {
-            userAnswer:string|string[]
+            isError?: boolean
+            isComplete?:boolean
+            userAnswer: string | string[]
             optsArr: string[]
             answer: string
             answerkeyword: string

src/views/driverExam/index.vue

@@ -68,6 +68,7 @@
                 </div>
               </div>
               <div class="coll">
+                <!-- 侧边栏列表 -->
                 <table border="0" class="coll-table-topic">
                   <tr :key="index" v-for="(item, index) in list.length / 10">
                     <td
@@ -84,7 +85,7 @@
                       "
                     >
                       <div
-                        v-if="list[listIndex].questionType==1"
+                        v-if="list[index * 10 + _index].questionType == 1"
                         style="white-space: nowrap"
                         :data-key="index * 10 + _index + 1"
                         class="coll-table-topic-item text-black"
@@ -94,8 +95,8 @@
                       >
                         {{ list[index * 10 + _index].userAnswer || "" }}
                       </div>
-                       <div
-                        v-if="list[listIndex].questionType!=1"
+                      <div
+                        v-if="list[index * 10 + _index].questionType != 1"
                         style="white-space: nowrap"
                         :data-key="index * 10 + _index + 1"
                         class="coll-table-topic-item text-black"
@@ -103,7 +104,12 @@
                           'text-red': list[index * 10 + _index].isError,
                         }"
                       >
-                        {{ switchAnswerBySelect(list[index * 10 + _index].userAnswer) || "" }}
+                        {{
+                          switchAnswerBySelect(
+                            list[index * 10 + _index].userAnswer,
+                            index * 10 + _index
+                          )
+                        }}
                       </div>
                     </td>
                   </tr>
@@ -132,7 +138,7 @@
               class="ml90 font-bold inline-block"
             >
               您选择的答案：{{
-                switchAnswerBySelect(list[listIndex].userAnswer)
+                switchAnswerBySelect(list[listIndex].userAnswer, listIndex)
               }}
             </div>
           </div>
@@ -194,7 +200,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
+import { defineComponent, ref, onMounted, watch } from "vue";
 import mProblemAlert from "@/components/mProblemAlert/index.vue";
 import mProblemDialog from "@/components/mProblemDialog/index.vue";
 import api from "@/api";
@@ -203,6 +209,8 @@ export default defineComponent({
   name: "driverExam",
   setup() {
     let listIndex = ref(0);
+    let falseNum = ref(0);
+    let trueNum = ref(0);
     let list = ref<openApi.selectFreeQuestionInfoRes["rows"]>([
       {
         createTime: "2022-10-09 15:05:43",
@@ -748,8 +756,11 @@ export default defineComponent({
     };
     let setUserAnswer = (answer: string) => {
       if (list.value[listIndex.value].questionType == 3) {
-        if (typeof answer !== "string") {
-          let userAnswer = list.value[listIndex.value].userAnswer as string[];
+        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 {
@@ -789,21 +800,80 @@ export default defineComponent({
       }
       return name;
     };
-    let switchAnswerBySelect = (answer: string | string[]) => {
+    let switchAnswerBySelect = (answer: string | string[], index: number) => {
       let select = "";
       if (Array.isArray(answer)) {
         answer.forEach((item) => {
           select += switchIndexBySelect(
-            list.value[listIndex.value].optsArr.indexOf(item)
+            list.value[index].optsArr.indexOf(item)
           );
         });
       } else {
+        // console.log( list.value[index],index)
         select += switchIndexBySelect(
-          list.value[listIndex.value].optsArr.indexOf(answer)
+          list.value[index].optsArr.indexOf(answer)
         );
       }
       return select;
     };
+    watch(listIndex, (newVal, oldVal) => {
+      console.log(newVal, oldVal);
+      //判断对错
+      if (
+        list.value[oldVal].questionType !== 3 &&
+        !list.value[oldVal].isComplete &&
+        list.value[oldVal].userAnswer.length
+      ) {
+        let userAnswer = list.value[oldVal].userAnswer as string;
+        let answer = list.value[oldVal].answer;
+        if (answer == userAnswer) {
+          list.value[oldVal].isComplete = true;
+          list.value[oldVal].isError = false;
+          trueNum.value++;
+        } else {
+          list.value[oldVal].isComplete = true;
+          list.value[oldVal].isError = true;
+          falseNum.value++;
+        }
+      } else if (
+        list.value[oldVal].questionType == 3 &&
+        !list.value[oldVal].isComplete &&
+        list.value[oldVal].userAnswer.length
+      ) {
+        let userAnswer = list.value[oldVal].userAnswer as string[];
+        userAnswer.sort();
+        let answer = list.value[oldVal].answer.split("-");
+        answer.sort();
+        if (userAnswer.toString() == answer.toString()) {
+          list.value[oldVal].isComplete = true;
+          list.value[oldVal].isError = false;
+          trueNum.value++;
+        } else {
+          list.value[oldVal].isComplete = true;
+          list.value[oldVal].isError = true;
+          falseNum.value++;
+        }
+      }
+      //判断对错
+      //提示
+      if (
+        list.value[oldVal].isError &&
+        list.value[oldVal].questionType !== 1 &&
+        list.value[oldVal].isComplete
+      ) {
+        alert(
+          "正确答案：" + switchAnswerBySelect(list.value[oldVal].answer, oldVal)
+        );
+      } else if (
+        list.value[oldVal].isError &&
+        list.value[oldVal].questionType == 1 &&
+        list.value[oldVal].isComplete
+      ) {
+        alert("正确答案：" + list.value[oldVal].answer);
+      }
+      //提示
+    });
+
     //  let switchIndexToLetter = (index: number) => {
     //   let name = "";
     //   switch (index) {
@@ -825,7 +895,7 @@ export default defineComponent({
     onMounted(() => {
       api.open
         .questionInfoSelectFreeQuestionInfo({
-          subject: 1,
+          subject: 4,
         })
         .then((res) => {
           res.rows.forEach((element) => {
@@ -844,6 +914,8 @@ export default defineComponent({
       dialogVisible: ref(false),
       list: list,
       listIndex,
+      falseNum,
+      trueNum,
       nextProblem,
       preProblem,
       getProblemTypeName,
@@ -862,6 +934,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.text-red {
+  color: red;
+}
 .pr23vw {
   padding-right: 23vw;
 }

src/views/studySkill/index.vue

@@ -8,7 +8,10 @@
           >
           <div>B.错误</div>
           <div>A.正确</div>
-          <div class="inline-block pl15 pr5 mt15" style="background-color: #d9ffeb">
+          <div
+            class="inline-block pl15 pr5 mt15"
+            style="background-color: #d9ffeb"
+          >
             <img
               class="inline-block w42 h42"
               src="@/assets/img/studySkill/smile_express.png"
@@ -48,7 +51,10 @@
         >
           <div class="flex items-center">
             <div class="pr2 pl2">转到</div>
-            <input class="outline-none input-border w35 h30 text-center" type="text" />
+            <input
+              class="outline-none input-border w35 h30 text-center"
+              type="text"
+            />
             <div class="pr2 pl2">题</div>
           </div>
 
@@ -68,7 +74,9 @@
           <div class=""><span class="text-black font16">正确率100%</span></div>
           <div class=""><span class="text-black font16">进度 42%</span></div>
           <div class="flex items-center content-center">
-            <div class="mr15"><input class="" type="checkbox" /> <span>自动播放</span></div>
+            <div class="mr15">
+              <input class="" type="checkbox" /> <span>自动播放</span>
+            </div>
             <div><input class="" type="checkbox" /> <span>提示红字</span></div>
           </div>
         </div>
@@ -78,16 +86,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import api from '@/api'
+import { defineComponent, ref } from "vue";
+import api from "@/api";
+import { openApi } from "@/api/open/type";
 export default defineComponent({
   setup() {
-    api.open.questionInfoSelectFreeQuestionInfo({
-      subject:4
-    }).then(res=>{
-      console.log(res)
+    let list = ref<openApi.selectFreeQuestionInfoRes["rows"]>([]);
+    api.open
+      .questionInfoSelectFreeQuestionInfo({
+        subject: 4,
+      })
+      .then((res) => {
+        list.value=res.rows
+        console.log(res);
+      });
 
-    })
     return {};
   },
 });