拼音题判断空答案

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -59,7 +59,11 @@
                   :class="[
                     'item-con',
                     active_index_str === 0 + '-' + indexc ? 'active' : '',
-                    isJudgingRightWrong && !con_preview[0].user_answer[indexc].is_right ? 'error' : '',
+                    isJudgingRightWrong &&
+                    con_preview[0].user_answer[indexc].is_right !== '' &&
+                    !con_preview[0].user_answer[indexc].is_right
+                      ? 'error'
+                      : '',
                     data.property.fun_type === 'show' ? 'item-con-in' : '',
                   ]"
                   @click="
@@ -77,23 +81,12 @@
                 <span
                   v-for="(itemi, indexi) in itemc"
                   :key="indexi"
-                  :class="[
-                    'items-con',
-                    active_index_str === 0 + '-' + indexc + '-' + indexi ? 'active' : '',
-                    isJudgingRightWrong &&
-                    !con_preview[0].user_answer[indexc].is_right &&
-                    con_preview[0].user_answer[indexc].select_index_submit === indexi
-                      ? 'error'
-                      : '',
-                    isJudgingRightWrong &&
-                    !con_preview[0].user_answer[indexc].is_right &&
-                    con_preview[0].user_answer[indexc].right_index === indexi
-                      ? 'right'
-                      : '',
-                  ]"
+                  :class="['items-con', active_index_str === 0 + '-' + indexc + '-' + indexi ? 'active' : '']"
                   @click="handleSelectItemTone(0, indexc, indexi, con_preview[0].item_con_yuan[indexc][indexi])"
                   >{{ itemi }}</span
                 >
+                <!-- 拼音之间增加一点间隙 -->
+                <span v-if="indexc !== con_preview[0].item_con.length - 1" style="opacity: 0">a</span>
               </span>
             </template>
           </div>
@@ -170,7 +163,7 @@
         :analysis-list="data.analysis_list"
         @closeAnswerAnalysis="closeAnswerAnalysis"
       >
-        <div v-if="data.property.fun_type === 'input'" slot="right-answer" class="right-answer">
+        <div v-if="data.property.fun_type !== 'show'" slot="right-answer" class="right-answer">
           <div
             class="content-box"
             :class="[data.property.arrange_type === 'horizontal' ? 'content-box-flex' : 'content-box-vertical']"
@@ -193,7 +186,7 @@
                 <!-- 拼音输入 -->
                 <template v-if="data.property.fun_type === 'input'">
                   <span
-                    v-for="(itemc, indexc) in con_preview"
+                    v-for="(itemc, indexc) in con_preview_right"
                     :key="indexc"
                     :class="['item-con', itemc.type === 'input' ? 'right' : '']"
                   >
@@ -201,18 +194,95 @@
                       v-if="itemc.type === 'input'"
                       v-model="itemc.answer"
                       :disabled="true"
-                      :style="[{ width: Math.max(20, itemc.con.length * 10) + 'px' }]"
+                      :style="[{ width: Math.max(20, itemc.answer.length * 10) + 'px' }]"
                       class="item-input"
                     />
                     <span v-else>{{ itemc.con }}</span>
                   </span>
                 </template>
+                <template v-else-if="data.property.answer_mode === 'select'">
+                  <span
+                    v-for="(itemc, indexc) in data.matically_pinyin_str[data.mark].split(' ')"
+                    :key="indexc"
+                    :class="['item-con', active_index_str_right === 0 + '-' + indexc ? 'active' : '']"
+                    @click="
+                      if (data.property.fun_type === 'show') return;
+                      con_preview_right[0].item_active_index = indexc;
+                      active_index_str_right = 0 + '-' + indexc;
+                    "
+                  >
+                    {{ itemc }}
+                  </span>
+                  <!-- <span
+                    v-for="(itemc, indexc) in con_preview_right[0].item_con"
+                    :key="indexc"
+                    :class="[
+                      'item-con',
+                      active_index_str === 0 + '-' + indexc ? 'active' : '',
+                      data.property.fun_type === 'show' ? 'item-con-in' : '',
+                    ]"
+                    @click="
+                      if (data.property.fun_type === 'show') return;
+                      con_preview_right[0].item_active_index = indexc;
+                      active_index_str = 0 + '-' + indexc;
+                    "
+                  >
+                    {{ itemc }}
+                  </span> -->
+                </template>
+                <template v-else>
+                  <span
+                    v-for="(itemc, indexc) in data.matically_pinyin_str[data.mark].split(' ')"
+                    :key="indexc"
+                    class="items-box"
+                  >
+                    <span
+                      v-for="(itemi, indexi) in itemc"
+                      :key="indexi"
+                      :class="['items-con', active_index_str_right === 0 + '-' + indexc + '-' + indexi ? 'active' : '']"
+                      @click="
+                        handleSelectItemTone(0, indexc, indexi, con_preview_right[0].item_con_yuan[indexc][indexi])
+                      "
+                      >{{ itemi }}</span
+                    >
+                    <!-- 拼音之间增加一点间隙 -->
+                    <span
+                      v-if="indexc !== data.matically_pinyin_str[data.mark].split(' ').length - 1"
+                      style="opacity: 0"
+                      >a</span
+                    >
+                  </span>
+                </template>
               </div>
               <AudioPlay
                 v-if="data.audio_file_id && data.property.audio_position === 'back'"
                 :file-id="data.audio_file_url"
               />
             </div>
+            <div v-if="data.property.fun_type === 'mark'" class="tone-box">
+              <span
+                v-for="({ img, value }, j) in toneList"
+                :key="j"
+                :class="[
+                  'tone',
+                  (isJudgingRightWrong &&
+                    con_preview_right[0].user_answer[con_preview_right[0].item_active_index].right_answer === value &&
+                    con_preview_right[0].user_answer[con_preview_right[0].item_active_index].select_index_submit !==
+                      con_preview_right[0].user_answer[con_preview_right[0].item_active_index].right_answer &&
+                    data.property.answer_mode === 'select') ||
+                  (isJudgingRightWrong &&
+                    data.property.answer_mode === 'label' &&
+                    con_preview_right[0].user_answer[con_preview_right[0].item_active_index].right_answer === value &&
+                    con_preview_right[0].user_answer[con_preview_right[0].item_active_index].right_index ===
+                      con_preview_right[0].user_answer[con_preview_right[0].item_active_index].select_index &&
+                    select_item_index === 0)
+                    ? 'right'
+                    : '',
+                ]"
+              >
+                <SvgIcon :icon-class="img" />
+              </span>
+            </div>
           </div>
         </div>
       </AnswerAnalysis>
@@ -248,6 +318,7 @@ export default {
         // { value: '0', label: '轻声', img: 'neutral-tone' },
       ],
       con_preview: [],
+      con_preview_right: [], // 查看答案是显示的
       tone_data: [
         ['ā', 'á', 'ǎ', 'à', 'a'],
         ['ō', 'ó', 'ǒ', 'ò', 'o'],
@@ -266,6 +337,7 @@ export default {
       ],
       final_con: '',
       active_index_str: '', // 高亮索引的字符串
+      active_index_str_right: '', // 查看答案时高亮索引
       active_letter: '', // 选中字母的值
       active_letter_index: 0, // 选择字母索引
       select_item_index: 0, // 小题索引
@@ -294,11 +366,12 @@ export default {
     },
   },
   created() {
-    // console.log(this.data);
+    console.log(this.data);
     if (
       this.data.property.fun_type !== 'show' ||
-      (this.data.property.fun_type === 'show' && this.data.answer_list && this.data.answer_list.length > 0) ||
-      (this.data.analysis_list && this.data.analysis_list.length > 0)
+      (this.data.property.fun_type === 'show' &&
+        ((this.data.answer_list && this.data.answer_list.length > 0) ||
+          (this.data.analysis_list && this.data.analysis_list.length > 0)))
     ) {
       this.isShowAnswers = true;
     } else {
@@ -558,15 +631,26 @@ export default {
       if (this.data.property.fun_type === 'show') {
         return;
       }
-      this.con_preview[0].item_active_index = indexc;
-      this.con_preview[0].user_answer[indexc].select_index = indexi;
-      this.active_index_str = `${i}-${indexc}-${indexi}`;
-      this.active_letter = itemi;
-      this.active_letter_index = indexi;
-      this.select_item_index = i;
+      if (this.isJudgingRightWrong) {
+        this.con_preview_right[0].item_active_index = indexc;
+        this.con_preview_right[0].user_answer[indexc].select_index = indexi;
+        this.active_index_str_right = `${i}-${indexc}-${indexi}`;
+      } else {
+        this.con_preview[0].item_active_index = indexc;
+        this.con_preview[0].user_answer[indexc].select_index = indexi;
+        this.active_index_str = `${i}-${indexc}-${indexi}`;
+        this.select_item_index = i;
+        this.active_letter = itemi;
+        this.active_letter_index = indexi;
+      }
     },
     // 判断对错
     judgeRight() {
+      let active_index_old = 0;
+      this.active_index_str_right = '';
+      if (this.con_preview.length > 0) {
+        active_index_old = this.con_preview[0].item_active_index;
+      }
       this.show_preview = false;
 
       let answer_list_item = this.answer.answer_list.filter((items) => this.data.mark === items.mark);
@@ -646,14 +730,16 @@ export default {
           item_con_yuan: JSON.parse(JSON.stringify(con_arr)),
           mark: this.data.mark,
           user_answer,
-          item_active_index: 0,
+          item_active_index: active_index_old,
           active_letter: '',
           user_res_arr,
           all_right:
-            JSON.stringify(answer_list_item[0].value) === JSON.stringify(this.data.answer.answer_list[0].value),
+            answer_list_item[0].value.length === this.data.answer.answer_list[0].value.length &&
+            answer_list_item[0].value.every((value, index) => value === this.data.answer.answer_list[0].value[index]),
         };
         this.con_preview.push(obj);
       }
+      this.con_preview_right = JSON.parse(JSON.stringify(this.con_preview));
 
       setTimeout(() => {
         this.show_preview = true;