汉字格数

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

@@ -27,7 +27,18 @@
         <label class="title-little">题目：</label>
         <ul>
           <li v-for="(item, i) in data.option_list" :key="i" class="content-item">
-            <el-input v-model="item.content" maxlength="1" placeholder="输入一个汉字" />
+            <span
+              class="question-number"
+              @dblclick="changeOptionType(data)"
+              v-if="data.property.learn_type === 'dictation'"
+            >
+              {{ computedQuestionNumber(i, data.option_number_show_mode) }}.
+            </span>
+            <el-input
+              v-model="item.content"
+              :maxlength="data.property.learn_type === 'dictation' ? null : 1"
+              :placeholder="data.property.learn_type === 'dictation' ? '输入汉字或词汇' : '输入一个汉字'"
+            />
             <el-input v-model="item.pinyin" placeholder="输入拼音" />
             <UploadAudio
               v-if="data.other.audio_generation_method === 'upload'"
@@ -43,8 +54,16 @@
               <span class="auto-btn" @click="handleMatically(item)">自动生成</span>
             </div>
             <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
-            <el-input v-if="data.property.learn_type !== 'learn'" v-model="item.definition" placeholder="输入释义" />
-            <el-input v-if="data.property.learn_type !== 'learn'" v-model="item.collocation" placeholder="输入搭配" />
+            <el-input
+              v-if="data.property.learn_type !== 'dictation'"
+              v-model="item.definition"
+              placeholder="输入释义"
+            />
+            <el-input
+              v-if="data.property.learn_type !== 'dictation'"
+              v-model="item.collocation"
+              placeholder="输入搭配"
+            />
             <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
           </li>
         </ul>
@@ -110,10 +129,14 @@
             :key="value"
             v-model="data.property.learn_type"
             :label="value"
+            @change="handleChangeType"
           >
             {{ label }}
           </el-radio>
         </el-form-item>
+        <el-form-item label="田字格数" v-if="data.property.learn_type !== 'dictation'">
+          <el-input v-model="data.property.tian_number" type="number" />
+        </el-form-item>
         <el-form-item label="音频">
           <el-radio
             v-for="{ value, label } in audioGenerationMethodList"
@@ -191,6 +214,16 @@ export default {
         });
       }
     },
+    // 改变类型
+    handleChangeType() {
+      if (this.data.property.learn_type !== 'dictation') {
+        this.data.option_list.forEach((item) => {
+          if (item.content.trim()) {
+            item.content = item.content.substring(0, 1);
+          }
+        });
+      }
+    },
   },
 };
 </script>

src/views/exercise_questions/data/chinese.js

@@ -1,4 +1,4 @@
-import { stemTypeList, scoreTypeList, questionNumberTypeList } from './common';
+import { stemTypeList, scoreTypeList, questionNumberTypeList, optionTypeList } from './common';
 import { getRandomNumber } from '@/utils/index';
 
 export function getOption(content = '') {
@@ -15,7 +15,7 @@ export function getOption(content = '') {
 export const learnTypeList = [
   { value: 'paint', label: '描红' },
   { value: 'write', label: '书写' },
-  { value: 'learn', label: '笔画学习' },
+  { value: 'dictation', label: '听写' },
 ];
 
 // 音频生成方式类型
@@ -39,6 +39,7 @@ export const chineseData = {
   type: 'chinese', // 题型
   stem: '', // 题干
   description: '', // 描述
+  option_number_show_mode: optionTypeList[0].value, // 选项类型
   answer: { score: 0, score_type: scoreTypeList[0].value }, // 答案
   option_list: [getOption(), getOption(), getOption()], // 选项
   file_id_list: [],
@@ -50,6 +51,7 @@ export const chineseData = {
     score: 1, // 分值
     score_type: scoreTypeList[0].value, // 分值类型
     learn_type: learnTypeList[0].value,
+    tian_number: 8, // 田字格数
   },
   // 其他属性
   other: {

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -12,13 +12,10 @@
       <div v-for="(item, index) in data.option_list" :key="index" :class="['words-item']">
         <template v-if="item.content && item.content.trim() && item.strokes">
           <div
-            v-if="data.property.learn_type !== 'learn'"
+            v-if="data.property.learn_type !== 'dictation'"
             class="words-top"
             :style="{
-              width:
-                data.property.learn_type === 'paint'
-                  ? 64 * (writer_number + 6) + 'px'
-                  : 64 * (writer_number + 1) + 'px',
+              width: 64 * (writer_number + 1 > writer_number_yuan ? writer_number_yuan : writer_number + 1) + 'px',
             }"
           >
             <div class="words-left">
@@ -28,7 +25,7 @@
             <p class="words-right">{{ item.definition }}</p>
             <p class="words-right">{{ item.collocation }}</p>
           </div>
-          <template v-if="data.property.learn_type === 'paint'">
+          <div class="card-box" v-if="data.property.learn_type === 'paint'">
             <!-- 描红 -->
             <Strockplayredline
               :play-storkes="true"
@@ -38,16 +35,19 @@
               :class="['strock-chinese', 'border-right-none']"
             />
             <Strockred
-              v-for="itemI in 5"
+              v-for="itemI in writer_number"
               :key="itemI + data.property.learn_type"
               :book-text="item.content"
               :hanzi-color="hanzi_color"
               :reset="true"
               :target-div="'write-praT' + item.content + itemI + Math.random().toString(36).substring(2, 10)"
               :book-strokes="item.strokes"
-              :class="['strock-chinese', itemI !== 5 ? 'border-right-none' : '']"
+              :class="[
+                'strock-chinese',
+                (itemI + 1) % writer_number_yuan !== 0 && itemI !== writer_number ? 'border-right-none' : '',
+              ]"
             />
-            <div
+            <!-- <div
               v-for="(items, indexs) in item.imgArr"
               :key="indexs"
               :class="['strockplay-newWord border-left-none']"
@@ -60,9 +60,9 @@
                 :src="items.strokes_image_url"
                 alt=""
               />
-            </div>
-          </template>
-          <template v-else-if="data.property.learn_type === 'write'">
+            </div> -->
+          </div>
+          <div class="card-box" v-else-if="data.property.learn_type === 'write'">
             <!-- 书写 -->
             <Strockplayredline
               :play-storkes="true"
@@ -72,7 +72,10 @@
               :class="['strock-chinese']"
             />
             <div v-for="(items, indexs) in item.imgArr" :key="indexs" class="con-box">
-              <div :class="['strockplay-newWord border-left-none']" @click="freeWrite(items, index, indexs)">
+              <div
+                :class="['strockplay-newWord', (indexs + 1) % writer_number_yuan !== 0 ? 'border-left-none' : '']"
+                @click="freeWrite(items, index, indexs)"
+              >
                 <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
                 <img
                   v-if="!play_status && items && items.strokes_image_url"
@@ -82,8 +85,8 @@
                 />
               </div>
             </div>
-          </template>
-          <template v-else>
+          </div>
+          <div class="card-box" v-else>
             <div class="words-info">
               <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
               <span class="pinyin">{{ item.pinyin }}</span>
@@ -95,7 +98,7 @@
               :book-strokes="item.strokes"
               class="strock-chinese"
             />
-          </template>
+          </div>
         </template>
       </div>
     </div>
@@ -165,19 +168,23 @@ export default {
   methods: {
     // 初始化数据
     handleData() {
-      if (
-        document.getElementsByClassName('preview-content') &&
-        document.getElementsByClassName('preview-content')[0] &&
-        !this.writer_number
-      ) {
-        this.writer_number_yuan =
-          Math.floor((document.getElementsByClassName('preview-content')[0].clientWidth - 128) / 64) - 1;
-      }
-      if (this.data.property.learn_type === 'paint') {
-        this.writer_number = this.writer_number_yuan - 5;
-      } else {
-        this.writer_number = this.writer_number_yuan;
-      }
+      // if (
+      //   document.getElementsByClassName('preview-content') &&
+      //   document.getElementsByClassName('preview-content')[0] &&
+      //   !this.writer_number
+      // ) {
+      //   this.writer_number_yuan =
+      //     Math.floor((document.getElementsByClassName('preview-content')[0].clientWidth - 128) / 64) - 1;
+      // }
+      // if (this.data.property.learn_type === 'paint') {
+      //   this.writer_number = this.writer_number_yuan - 5;
+      // } else {
+      //   this.writer_number = this.writer_number_yuan;
+      // }
+      this.writer_number_yuan = Math.floor(
+        (document.getElementsByClassName('preview-content')[0].clientWidth - 128) / 64,
+      );
+      this.writer_number = this.data.property.tian_number ? this.data.property.tian_number * 1 : 8;
       this.data.option_list.forEach((item) => {
         if (item.content.trim()) {
           let arr = [];
@@ -254,7 +261,6 @@ export default {
       width: 100%;
       min-height: 30px;
       border: 1px solid #e81b1b;
-      border-bottom: none;
 
       .words-left {
         box-sizing: border-box;
@@ -304,6 +310,11 @@ export default {
       margin-bottom: 9px;
     }
 
+    .card-box {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
     .pinyin {
       font-family: 'League';
       font-size: 12px;
@@ -313,6 +324,7 @@ export default {
 
     .strock-chinese {
       border: 1px solid #e81b1b;
+      border-top: none;
     }
 
     .strockplay-newWord {
@@ -322,6 +334,7 @@ export default {
       width: 64px;
       height: 64px;
       border: 1px solid #e81b1b;
+      border-top: none;
 
       .character-target-bg,
       .hanzi-writer-img {