选择声调答案回显

src/views/exercise_questions/preview/ChooseTonePreview.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="choosetone-preview">
+  <div v-if="show_preview" class="choosetone-preview">
     <div class="stem">
       <span class="question-number">{{ data.property.question_number }}.</span>
       <span v-html="sanitizeHTML(data.stem)"></span>
@@ -11,12 +11,19 @@
       <li v-for="(item, i) in data.option_list" :key="i" :class="['option-item']">
         <span>{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
         <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" />
-        <div class="option-content">
+        <div
+          class="option-content"
+          :class="[isJudgingRightWrong ? (con_preview[i].all_right ? 'all-right' : 'has-error') : '']"
+        >
           <template v-if="data.property.answer_mode === 'select'">
             <span
               v-for="(itemc, indexc) in con_preview[i].item_con"
               :key="indexc"
-              :class="['item-con', active_index_str === i + '-' + indexc ? 'active' : '']"
+              :class="[
+                'item-con',
+                active_index_str === i + '-' + indexc ? 'active' : '',
+                isJudgingRightWrong && !con_preview[i].user_answer[indexc].is_right ? 'error' : '',
+              ]"
               @click="
                 con_preview[i].item_active_index = indexc;
                 active_index_str = i + '-' + indexc;
@@ -53,6 +60,11 @@
                   select_item_index === i
                 ? 'active'
                 : '',
+            con_preview[i].user_answer[con_preview[i].item_active_index].right_answer === value &&
+            con_preview[i].user_answer[con_preview[i].item_active_index].select_tone !==
+              con_preview[i].user_answer[con_preview[i].item_active_index].right_answer
+              ? 'right'
+              : '',
           ]"
           @click="chooseTone(con_preview[i], value, i)"
         >
@@ -107,6 +119,7 @@ export default {
       active_letter_index: 0, // 选择字母索引
       select_item_index: 0, // 小题索引
       show_tips: false, // 是否显示答题提示
+      show_preview: false,
     };
   },
   watch: {
@@ -118,6 +131,13 @@ export default {
       deep: true,
       immediate: true,
     },
+    isJudgingRightWrong: {
+      handler(val) {
+        if (!val) return;
+        this.judgeRight();
+      },
+      immediate: true,
+    },
   },
   created() {
     // this.handleData();
@@ -132,10 +152,8 @@ export default {
         this.active_index_str = `${i}-${item.item_active_index}-${this.active_letter_index}`;
         this.handleReplaceTone(this.active_letter + value);
         setTimeout(() => {
-          // item.item_con[item.item_active_index][this.active_letter_index] = this.final_con;
           let new_con = item.item_con_yuan[item.item_active_index].split(this.active_letter);
           item.item_con[item.item_active_index] = new_con[0] + this.final_con + new_con[1];
-          // this.active_letter = this.final_con;
           this.$forceUpdate();
           this.answer.answer_list[i].value[item.item_active_index] =
             new_con[0] + this.active_letter + value + new_con[1];
@@ -153,6 +171,7 @@ export default {
     // 处理数据
     handleData() {
       this.con_preview = [];
+      this.show_preview = false;
       if (!this.isJudgingRightWrong) {
         this.answer.answer_list = [];
       }
@@ -185,8 +204,10 @@ export default {
         }
         this.con_preview.push(obj);
       });
+      this.show_preview = true;
+      console.log(this.con_preview);
     },
-    handleReplaceTone(e) {
+    handleReplaceTone(e, arr, index, resArr) {
       this.$nextTick(() => {
         let value = e;
         this.resArr = [];
@@ -194,10 +215,28 @@ export default {
           let reg = /\s+/g;
           let valueArr = value.split(reg);
           valueArr.forEach((item) => {
-            this.handleValue(item);
+            this.handleValue(item, resArr);
           });
           let str = '';
           setTimeout(() => {
+            if (resArr) {
+              resArr.forEach((item) => {
+                str += ' ';
+                item.forEach((sItem) => {
+                  if (sItem.number && sItem.con) {
+                    let number = Number(sItem.number);
+                    let con = sItem.con;
+                    let word = this.addTone(number, con);
+                    str += word;
+                  } else if (sItem.number) {
+                    str += sItem.number;
+                  } else if (sItem.con) {
+                    str += ` ${sItem.con} `;
+                  }
+                });
+              });
+              arr[index] = str.trim();
+            }
             this.resArr.forEach((item) => {
               str += ' ';
               item.forEach((sItem) => {
@@ -218,7 +257,7 @@ export default {
         }
       });
     },
-    handleValue(valItem) {
+    handleValue(valItem, resArr) {
       let reg = /\d/;
       let reg2 = /[A-Za-zü]+\d/g;
       let numList = [];
@@ -242,7 +281,13 @@ export default {
       } else {
         numList = [];
       }
-      if (numList.length === 0) {
+      if (resArr) {
+        if (numList.length === 0) {
+          resArr.push([{ con: valItem }]);
+        } else {
+          resArr.push(numList);
+        }
+      } else if (numList.length === 0) {
         this.resArr.push([{ con: valItem }]);
       } else {
         this.resArr.push(numList);
@@ -288,6 +333,54 @@ export default {
       this.active_letter_index = indexi;
       this.select_item_index = i;
     },
+    // 判断对错
+    judgeRight() {
+      this.con_preview = [];
+      this.show_preview = false;
+      this.data.option_list.forEach((item, index) => {
+        let con_arr = JSON.parse(JSON.stringify(item.content_view));
+        let user_answer = [];
+        let user_select = [];
+        let user_res_arr = [];
+        con_arr.forEach((items, indexs) => {
+          user_answer.push({
+            select_tone: this.answer.answer_list[index].value[indexs],
+            select_letter: '',
+            select_index: '',
+            is_right:
+              this.answer.answer_list[index].value[indexs] === this.data.answer.answer_list[index].value[indexs],
+            right_answer: this.data.answer.answer_list[index].value[indexs],
+          });
+          user_res_arr.push([]);
+          user_select.push('');
+
+          this.handleReplaceTone(
+            items + this.answer.answer_list[index].value[indexs],
+            user_select,
+            indexs,
+            user_res_arr[indexs],
+          );
+        });
+        let obj = {
+          item_con: user_select,
+          item_con_yuan: JSON.parse(JSON.stringify(con_arr)),
+          mark: item.mark,
+          user_answer,
+          item_active_index: 0,
+          active_letter: '',
+          user_res_arr,
+          all_right:
+            JSON.stringify(this.answer.answer_list[index].value) ===
+            JSON.stringify(this.data.answer.answer_list[index].value),
+        };
+        this.con_preview.push(obj);
+      });
+      setTimeout(() => {
+        this.show_preview = true;
+      }, 100);
+
+      console.log(this.con_preview);
+    },
   },
 };
 </script>
@@ -314,10 +407,20 @@ export default {
       margin-right: 5%;
 
       .option-content {
-        padding: 12px 24px;
+        padding: 10px 22px;
         color: #706f78;
         background-color: $content-color;
+        border: 1px solid $content-color;
         border-radius: 40px;
+
+        &.all-right {
+          background-color: $right-bc-color;
+          border-color: $right-bc-color;
+        }
+
+        &.has-error {
+          border-color: $error-color;
+        }
       }
 
       .item-con,
@@ -326,6 +429,10 @@ export default {
         color: #000;
         cursor: pointer;
 
+        &.error {
+          color: $error-color;
+        }
+
         &.active {
           color: #2f6fec;
         }
@@ -349,6 +456,12 @@ export default {
           background: #dfe9fd;
           border-radius: 16px;
         }
+
+        &.right {
+          color: $right-color;
+          background-color: $right-bc-color;
+          border-radius: 16px;
+        }
       }
     }
   }

src/views/exercise_questions/preview/EssayQuestionPreview.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="essayquestion-preview" v-if="show_preview">
+  <div v-if="show_preview" class="essayquestion-preview">
     <div class="stem">
       <span class="question-number">{{ data.property.question_number }}.</span>
       <span v-html="sanitizeHTML(data.stem)"></span>
@@ -15,8 +15,8 @@
       placeholder="请输入"
       :maxlength="1000"
       show-word-limit
-      @input="handleInput"
       :readonly="isJudgingRightWrong"
+      @input="handleInput"
     />
     <SoundRecordPreview
       :disabled="isJudgingRightWrong"
@@ -29,9 +29,9 @@
       :upload-type="'*'"
       :file-id-list="answer.answer_list[0].accessory_file_id_list"
       upload-title="上传附件："
+      :disabled="isJudgingRightWrong"
       @upload="handleUpload"
       @deleteFile="handleDelete"
-      :disabled="isJudgingRightWrong"
     />
     <div v-if="isEnable(data.property.is_enable_reference_answer) && isShowRightAnswer" class="reference-box">
       <h5 class="reference-title">参考答案</h5>

src/views/exercise_questions/preview/WritePictruePreview.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="writepicture-preview" v-if="show_preview">
+  <div v-if="show_preview" class="writepicture-preview">
     <div class="stem">
       <span class="question-number">{{ data.property.question_number }}.</span>
       <span v-html="sanitizeHTML(data.stem)"></span>
@@ -12,21 +12,21 @@
       v-html="sanitizeHTML(data.description)"
     ></div>
     <div class="content">
-      <div class="content-item" v-for="(item, index) in data.option_list" :key="index">
+      <div v-for="(item, index) in data.option_list" :key="index" class="content-item">
         <el-image
           v-if="pic_list[item.picture_file_id]"
           style="width: 370px; height: 238px"
           :src="pic_list[item.picture_file_id]"
           fit="contain"
-          @click="active_index = index"
           :class="[active_index !== index ? 'not-active' : '']"
+          @click="active_index = index"
         />
         <h3 class="pic-title" v-html="sanitizeHTML(item.picture_title)"></h3>
         <p class="pic-info" v-html="sanitizeHTML(item.picture_info)"></p>
       </div>
     </div>
 
-    <div class="content-right" v-if="answer.answer_list[active_index]">
+    <div v-if="answer.answer_list[active_index]" class="content-right">
       <el-input
         v-model="answer.answer_list[active_index].text"
         rows="12"
@@ -35,13 +35,14 @@
         placeholder="请输入"
         :maxlength="data.property.word_num"
         show-word-limit
-        @input="handleInput"
         :readonly="isJudgingRightWrong"
+        @input="handleInput"
       />
     </div>
     <template v-if="isEnable(data.property.is_enable_upload_accessory)">
       <!-- 上传附件 -->
       <UploadFiles
+        v-if="answer.answer_list[active_index]"
         :disabled="isJudgingRightWrong"
         :fille-number="999"
         file-type-name="文件"
@@ -50,7 +51,6 @@
         upload-title="上传附件："
         @upload="handleUpload"
         @deleteFile="handleDelete"
-        v-if="answer.answer_list[active_index]"
       />
     </template>
     <template v-if="isEnable(data.property.is_enable_sample_text) && isShowRightAnswer">