听写题参考答案

src/views/exercise_questions/create/components/exercises/WordDictationQuestion.vue

@@ -18,7 +18,12 @@
             <span class="question-number" title="双击切换序号类型" @dblclick="changeOptionType(data)">
               {{ computedQuestionNumber(i, data.option_number_show_mode) }}
             </span>
-            <el-input v-model="item.content" :placeholder="'输入汉字或词汇'" />
+            <el-input
+              v-loading="loading_list[i] ? loading_list[i].loadings : false"
+              v-model="item.content"
+              :placeholder="'输入汉字或词汇'"
+              @blur="handleChineseStrokes(item, i)"
+            />
             <el-input
               v-model="item.pinyin"
               :placeholder="'拼音间用空格隔开，如: ni3 hao3'"
@@ -60,12 +65,6 @@
           <SvgIcon icon-class="add-circle" size="14" /> <span>增加汉字</span>
         </span>
       </div>
-      <RichText
-        v-if="isEnable(data.property.is_enable_reference_answer)"
-        v-model="data.reference_answer"
-        :font-size="14"
-        placeholder="输入参考答案"
-      />
     </template>
 
     <template #property>
@@ -98,16 +97,6 @@
             {{ label }}
           </el-radio>
         </el-form-item>
-        <el-form-item label="参考答案">
-          <el-radio
-            v-for="{ value, label } in switchOption"
-            :key="value"
-            v-model="data.property.is_enable_reference_answer"
-            :label="value"
-          >
-            {{ label }}
-          </el-radio>
-        </el-form-item>
         <el-form-item label="分值">
           <el-radio
             v-for="{ value, label } in scoreTypeList"
@@ -146,7 +135,6 @@ import UploadAudio from '../common/UploadAudio.vue';
 import SoundRecord from '../common/SoundRecord.vue';
 import { GetStaticResources } from '@/api/app';
 import { changeOptionType, handleInputNumber, addTone } from '@/views/exercise_questions/data/common';
-import { getRandomNumber } from '@/utils/index';
 
 import {
   wordDictationData,
@@ -171,12 +159,15 @@ export default {
       loading_list: [
         {
           loading: false,
+          loadings: false,
         },
         {
           loading: false,
+          loadings: false,
         },
         {
           loading: false,
+          loadings: false,
         },
       ],
       matically_pinyin_obj: {}, // 存放转成声调的拼音
@@ -189,6 +180,7 @@ export default {
         for (let i = 0; i < val; i++) {
           let obj = {
             loading: false,
+            loadings: false,
           };
           this.loading_list.push(obj);
         }
@@ -323,6 +315,37 @@ export default {
         item.audio_file_id = '';
       }
     },
+    // 生成汉字
+    handleChineseStrokes(item, i) {
+      if (item.content.trim()) {
+        this.loading_list[i].loadings = true;
+        let content_arr = item.content.trim().split('');
+        let content_arrs = [];
+        let content_arr_strokes = [];
+        content_arr.forEach((itemc) => {
+          if (itemc.trim()) {
+            content_arrs.push(itemc.trim());
+          }
+        });
+        content_arrs.forEach((itemc, indexc) => {
+          content_arr_strokes.push(null);
+          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
+          let data = {
+            hz: itemc,
+          };
+          GetStaticResources(MethodName, data).then((res) => {
+            let obj = {
+              hz: itemc.trim(),
+              strokes: res,
+            };
+            content_arr_strokes[indexc] = obj;
+          });
+        });
+        this.loading_list[i].loadings = false;
+
+        item.hz_strokes_list = content_arr_strokes;
+      }
+    },
     /**
      * 智能识别
      * @param {String} text 识别数据

src/views/exercise_questions/data/wordDictation.js

@@ -16,6 +16,7 @@ export function getOption(content = '') {
     audio_file_id: '',
     pinyin: '',
     pinyin_item_list: [],
+    hz_strokes_list: [],
   };
 }
 // 音频生成方式类型
@@ -49,6 +50,7 @@ export function analysisRecognitionWordDictationData(arr) {
       audio_file_id: '',
       pinyin: content_item[1] ? content_item[1] : '',
       pinyin_item_list: [],
+      hz_strokes_list: [],
     });
     handleSplitPy(option_list[index]);
   });
@@ -67,14 +69,12 @@ export const wordDictationData = {
   answer: { score: 1, score_type: scoreTypeList[0].value }, // 答案
   option_list: [getOption(), getOption(), getOption()], // 选项
   file_id_list: [],
-  reference_answer: '', // 参考答案
   // 题型属性
   property: {
     stem_type: stemTypeList[1].value, // 题干类型
     question_number: '1', // 题号
     stem_question_number_font_size: fontSizeList[6], // 题干题号
     is_enable_description: switchOption[1].value, // 描述
-    is_enable_reference_answer: switchOption[0].value, // 是否开启参考答案
     score: 1, // 分值
     score_type: scoreTypeList[0].value, // 分值类型
   },

src/views/exercise_questions/preview/WordDictationPreview.vue

@@ -23,7 +23,7 @@
           </div>
           <div class="words-dic-box">
             <div v-for="(itemc, indexc) in item.imgArr" :key="indexc" class="words-dic-item">
-              <span class="pinyin">{{ item.pinyin_arr[indexc].pinyin_item }}</span>
+              <span class="pinyin" v-if="item.pinyin_arr[indexc]">{{ item.pinyin_arr[indexc].pinyin_item }}</span>
               <div
                 :class="['strockplay-newWord']"
                 @click="freeWrite(itemc ? JSON.parse(itemc) : itemc, index, indexc, item.mark)"
@@ -41,9 +41,32 @@
         </div>
       </div>
     </div>
-    <div v-if="isEnable(data.property.is_enable_reference_answer) && isShowRightAnswer" class="reference-box">
+    <div v-if="isShowRightAnswer" class="reference-box">
       <h5 class="reference-title">参考答案</h5>
-      <span class="reference-answer rich-text" v-html="sanitizeHTML(data.reference_answer)"></span>
+      <div :class="['words-box', 'words-box-dictation']">
+        <div v-for="(item, index) in option_list" :key="index" :class="['words-item']">
+          <div class="card-box">
+            <div class="words-info">
+              <span>{{ computeOptionMethods[data.option_number_show_mode](index) }} </span>
+            </div>
+            <div class="words-dic-box">
+              <template v-if="item.hz_strokes_list && item.hz_strokes_list.length > 0">
+                <div v-for="(items, indexs) in item.hz_strokes_list" :key="indexs + '_' + index" class="words-dic-item">
+                  <span class="pinyin" v-if="item.pinyin_arr[indexs]">{{ item.pinyin_arr[indexs].pinyin_item }}</span>
+                  <Strockplayredline
+                    v-if="items"
+                    :play-storkes="true"
+                    :book-text="items.hz"
+                    :target-div="'pre' + items.hz + indexs + item.content"
+                    :book-strokes="items.strokes"
+                    :class="['strockplay-newWord']"
+                  />
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div v-if="if_free_show" class="practiceBox practice-box-strock">
       <FreewriteLettle
@@ -67,11 +90,13 @@
 import { computeOptionMethods } from '@/views/exercise_questions/data/common';
 import PreviewMixin from './components/PreviewMixin';
 import FreewriteLettle from './components/common/FreewriteLettle.vue';
+import Strockplayredline from './components/common/Strockplayredline.vue';
 
 export default {
   name: 'WordDictationPreview',
   components: {
     FreewriteLettle,
+    Strockplayredline,
   },
   mixins: [PreviewMixin],
   data() {
@@ -170,9 +195,11 @@ export default {
           let obj = {
             pinyin_item: itemp,
           };
-          arr.push(null);
           item.pinyin_arr.push(obj);
         });
+        for (let i = 0; i < item.content.length; i++) {
+          arr.push(null);
+        }
         item.imgArr = arr;
         if (this.isJudgingRightWrong) {
           item.imgArr = this.answer.answer_list.find((items) => items.mark === item.mark)?.strokes_content_list;
@@ -441,10 +468,6 @@ export default {
       line-height: 32px;
       color: #4e5969;
     }
-
-    :deep p {
-      margin: 0;
-    }
   }
 }
 </style>