真实模拟考试修改

src/otherPages/mockExam/index.vue

@@ -393,7 +393,6 @@ export default {
       .then((res) => {
         res.rows.forEach((element) => {
           element.optsArr = element.opts.split("-");
-
           element.userAnswer = [];
         });
         that.problemListTotal = res.total;

src/pages/mockExam/components/correctAnswerMask.vue

@@ -3,27 +3,44 @@
     <div>
       <div class="dialog">
         <div class="title">
-          <span>答案提示</span>
+          <span>错题学习</span>
         </div>
         <div class="mid">
           <!-- <div class="mid-line1">亲爱的考生：</div> -->
-          <div class="mid-line2">
-              解释：{{explainJs}}
+          <div class="mid-line2">{{ no + 1 }}.{{ question.issue }}</div>
+          <div class="mt9 topic-select">
+            <div
+              v-for="(item, index) in question.optsArr"
+              :key="index"
+              class="topic-select-item"
+            >
+              {{ letter[index] }}.<span>{{ item }}</span>
+            </div>
+            <!-- <div class="topic-select-item">B.<span>xx</span></div> countdown-->
           </div>
           <!-- <div class="mid-line3" v-if="correctScore >= 90">再接再励</div> -->
-          <div class="mid-line3">技巧：{{explainJq}}</div>
+          <!-- <div class="mid-line3">技巧：{{ explainJq }}</div> -->
+        </div>
+        <div v-if="image" class="image">
+          <image
+            mode="heightFix"
+            class="answer-image"
+            :src="question.image"
+          ></image>
         </div>
         <div class="bottom">
+          <view class="answer">
+            正确答案：{{ answerLetter }}&nbsp; 您的答案：{{ userAnswerLetter }}
+          </view>
           <button
             @click="
               () => {
-                $emit('close')
+                $emit('close');
               }
             "
           >
             关闭
           </button>
-      
         </div>
       </div>
     </div>
@@ -35,6 +52,7 @@ export default {
   data() {
     return {
       option: {},
+      letter: ["A", "B", "C", "D", "E", "F"],
     };
   },
   methods: {
@@ -46,6 +64,32 @@ export default {
       });
     },
   },
+  computed: {
+    answerLetter() {
+      let arr = [];
+      if (this.question.questionType == 3) {
+        this.question.answer.split("-").forEach((element) => {
+          arr.push(this.letter[this.question.optsArr.indexOf(element)]);
+        });
+        return arr.sort().join();
+      } else {
+        return this.letter[this.question.optsArr.indexOf(this.question.answer)];
+      }
+    },
+    userAnswerLetter() {
+      let arr = [];
+      if (this.question.questionType == 3) {
+         this.question.userAnswer.forEach((element) => {
+          arr.push(this.letter[this.question.optsArr.indexOf(element)]);
+        });
+        return arr.sort().join();
+      } else {
+        return this.letter[
+          this.question.optsArr.indexOf(this.question.userAnswer)
+        ];
+      }
+    },
+  },
   // setup(props, { emit }) {
   //   const state = reactive({
   //     count: 0,
@@ -86,34 +130,50 @@ export default {
   // },
   //correct
   destroyed() {
-    window.clearInterval(this.timer);
-  },
-  mounted() {
-
+    clearInterval(this.timer);
   },
+  mounted() {},
   props: {
-    explainJs:{
-      type:String,
-      default:""
-    },
-    explainJq:{
-      type:String,
-      default:""
-    },
-    correctScore: {
+    no: {
       type: Number,
-      required: true,
-      default: 0,
+      default: 1,
+    },
+    question: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.image {
+  display: flex;
+  justify-content: center;
+  .answer-image {
+    height: 74rpx;
+  }
+}
+
 button {
   border-radius: 0;
   border: none;
 }
+.topic-select {
+  display: flex;
+  width: 100%;
+  padding-left: 10rpx;
+  padding-right: 10rpx;
+  font-size: 14rpx;
+  flex-wrap: wrap;
+}
+.topic-select-item {
+  width: 100%;
+  font-size: 14rpx;
+  text-align: left;
+}
 .mask {
   position: fixed;
   top: 0;
@@ -172,6 +232,13 @@ button {
       flex-wrap: wrap;
       align-items: flex-start;
       align-content: flex-start;
+      .answer {
+        width: 100%;
+        font-size: 12rpx;
+        line-height: 24rpx;
+        color: #d8d8d8;
+        text-indent: 1em;
+      }
 
       button:nth-child(1) {
         height: 30rpx;

src/pages/mockExam/test.vue

@@ -20,8 +20,8 @@
     ></beforeSubmitMask>
     <submitMask v-if="submitVisible" :correctScore="correctScore"></submitMask>
     <correctAnswerMask
-      :explainJq="list[listIndex].explainJq"
-      :explainJs="list[listIndex].explainJs"
+      :question="wrongQuestion"
+      :no="wrongNo"
       @close="
         () => {
           correctAnswer = false;
@@ -72,7 +72,16 @@
               </div>
             </div>
             <div class="answer">
-              <span class="answer-tip">您选择的答案：</span>
+              <text v-if="list[listIndex].questionType < 3" class="answer-tip"
+                >您选择的答案：{{
+                  findAnswerLetter(list[listIndex].userAnswer)
+                }}</text
+              >
+              <text v-if="list[listIndex].questionType == 3" class="answer-tip"
+                >您选择的答案：{{
+                  findAnswerLetter(list[listIndex].userAnswer)
+                }}</text
+              >
               <div style="display: flex; align-items: center">
                 <span>选项:</span>
                 <div class="answer-list">
@@ -80,7 +89,7 @@
                     v-for="(item, index) in list[listIndex].optsArr"
                     :key="index"
                     class="answer-list-item"
-                    @click="selectExamAnswer(item)"
+                    @click="selectExamAnswer(item, index)"
                     :class="{
                       answer_selected:
                         list[listIndex].userAnswer.includes(item),
@@ -194,11 +203,16 @@
                   @click="changeListIndex"
                 >
                   <div
+                
                     style="white-space: nowrap"
                     :data-key="index * rowNum + _index + 1"
                     class="coll-table-topic-item"
+                    :class="{
+                      'text-red': list[index * rowNum + _index].isError,
+                    }"
                   >
-                    {{ index * rowNum + _index + 1 }}
+                    {{ list[index * rowNum + _index].userAnswerLetter || "" }}
+                    <!-- {{ index * rowNum + _index + 1 }} -->
                   </div>
                 </td>
               </tr>
@@ -247,6 +261,7 @@ export default {
       headImage: "",
       carType: "",
       listIndex: 0,
+      wrongTopicIndex: 1,
       letter: ["A", "B", "C", "D", "E", "F"],
       list: [
         {
@@ -710,6 +725,13 @@ export default {
           userAnswer: "",
         },
       ],
+      wrongTopicIssue: "",
+      wrongNo: 1,
+      wrongQuestion: {},
+      wrongTopicOptsArr: [],
+      wrongTopicAnswer: [],
+      wrongTopicuserAnswer: [],
+      wrongImage: "",
       beginTimeStrap: 1646988300000,
       endTimeStrap: 164698560000,
       correctScore: 0,
@@ -743,7 +765,89 @@ export default {
       return questionTypeName;
     },
   },
+  watch: {
+    listIndex(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        if (this.list[oldVal].questionType == 3) {
+          let userAnswerLetter = [];
+          if (
+            this.list[oldVal].userAnswer &&
+            this.list[oldVal].userAnswer.sort().toString() !==
+              this.list[oldVal].answer.split("-").sort().toString()
+          ) {
+            this.$set(this.list[oldVal], "isError", true);
+            this.list[oldVal].userAnswer.forEach((element) => {
+              userAnswerLetter.push(
+                this.letter[this.list[oldVal].optsArr.indexOf(element)]
+              );
+            });
+            this.$set(
+              this.list[oldVal],
+              "userAnswerLetter",
+              userAnswerLetter.sort().join("")
+            );
+            this.correctAnswer = true;
+            this.wrongQuestion = this.list[oldVal];
+            this.wrongNo = oldVal;
+          } else {
+            this.$set(
+              this.list[oldVal],
+              "userAnswerLetter",
+              userAnswerLetter.join("")
+            );
+            this.correctAnswer = false;
+          }
+        } else if (this.list[oldVal].questionType < 3) {
+          let userAnswerLetter = [];
+          if (
+            this.list[oldVal].userAnswer &&
+            this.list[oldVal].userAnswer !== this.list[oldVal].answer
+          ) {
+            this.$set(
+              this.list[oldVal],
+              "userAnswerLetter",
+              this.letter[
+                this.list[oldVal].optsArr.indexOf(this.list[oldVal].userAnswer)
+              ]
+            );
+            this.$set(this.list[oldVal], "isError", true);
+            this.correctAnswer = true;
+            this.wrongQuestion = this.list[oldVal];
+            this.wrongNo = oldVal;
+          } else {
+            this.$set(
+              this.list[oldVal],
+              "userAnswerLetter",
+              this.letter[
+                this.list[oldVal].optsArr.indexOf(this.list[oldVal].userAnswer)
+              ]
+            );
+            this.correctAnswer = false;
+          }
+        }
+      }
+    },
+  },
   methods: {
+    findAnswerLetter(userAnswer) {
+      if (!userAnswer) {
+        return "";
+      }
+      let letter = [];
+      if (Array.isArray(userAnswer)) {
+        userAnswer.forEach((item) => {
+          letter.push(
+            this.letter[this.list[this.listIndex].optsArr.indexOf(item)]
+          );
+        });
+      } else {
+        letter.push(
+          this.letter[this.list[this.listIndex].optsArr.indexOf(userAnswer)]
+        );
+      }
+      letter.sort();
+      return letter.join(" ");
+    },
     getTimeStr(timeStrap) {
       let timer = new Date(timeStrap);
       let str = `${timer.getMinutes()}:${timer.getSeconds()}`;
@@ -768,12 +872,11 @@ export default {
       }
       this.listIndex = this.listIndex + 1;
     },
-    selectExamAnswer(item) {
+    selectExamAnswer(item, index) {
       if (this.list[this.listIndex].isComplete) {
         return;
       }
       if (this.list[this.listIndex].questionType < 3) {
-        this.correctAnswer = this.list[this.listIndex].answer !== item;
         this.$set(this.list[this.listIndex], "isComplete", true);
       }
 
@@ -821,6 +924,7 @@ export default {
     correctAnswerMask,
   },
   onLoad(option) {
+    let that = this;
     this.nickName =
       uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo").nickName;
     this.headImage =
@@ -854,7 +958,7 @@ export default {
       this.countdownTime = this.getTimeStr(this.beginTimeStrap);
       if (this.beginTimeStrap == this.endTimeStrap) {
         this.submitScore();
-        clearInterval(this.countdownTimer);
+        clearInterval(that.countdownTimer);
       }
     }, 1000);
   },
@@ -862,6 +966,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.text-red {
+  color: red;
+}
 .w-half {
   width: 50%;
 }
@@ -1087,7 +1194,7 @@ export default {
 
       div {
         font-size: 8rpx;
-    
+
         height: 20rpx;
         line-height: 20rpx;
         text-align: center;