Browse Source

调整对话题,一句话可以多个填空

dusenyao 1 year ago
parent
commit
97b9bb4211

+ 19 - 3
src/views/exercise_questions/create/components/exercises/DialogueQuestion.vue

@@ -148,14 +148,30 @@ export default {
               }
               preName = name;
               let content = match[2];
-              let isFill = /^_{3,}$/.test(content);
+              let reg = /_{3,}/;
+              let isFill = reg.test(content);
+              let fillList = [];
+              if (isFill) {
+                content = content.replace(/(_{3,})/g, '###$1###');
+                fillList = content
+                  .split('###')
+                  .filter((item) => item)
+                  .map((content) => {
+                    let isInput = reg.test(content);
+
+                    return {
+                      content: isInput ? '' : content,
+                      mark: getRandomNumber(),
+                      type: isInput ? 'input' : 'text',
+                    };
+                  });
+              }
 
               return {
                 name,
-                content: isFill ? '' : content,
+                content: isFill ? fillList : content,
                 direction,
                 audio_file_id: '',
-                mark: isFill ? getRandomNumber() : '',
                 type: isFill ? 'input' : 'text',
               };
             }

+ 14 - 6
src/views/exercise_questions/preview/DialoguePreview.vue

@@ -22,9 +22,14 @@
               {{ item.content }}
             </template>
             <template v-else>
-              <el-input v-model="item.content" :class="[item.direction === 'row' ? 'is_left' : 'is_right']" /><span
-                >。</span
-              >
+              <div v-for="(li, j) in item.content" :key="j">
+                <template v-if="li.type === 'input'">
+                  <el-input v-model="li.content" :class="[item.direction === 'row' ? 'is_left' : 'is_right']" />
+                </template>
+                <template v-else>
+                  {{ li.content }}
+                </template>
+              </div>
             </template>
           </div>
           <SoundRecordPreview v-if="item.type === 'input'" :wav-blob.sync="item.audio_file_id" type="small" />
@@ -52,12 +57,12 @@ export default {
       handler(val) {
         if (!val) return;
         this.answer.answer_list = val
-          .map(({ type, mark, content, audio_file_id }) => {
+          .map(({ type, content, audio_file_id }) => {
             if (type === 'text') return;
+
             return {
-              content,
+              content: content.filter((item) => item.type === 'input'),
               audio_file_id,
-              mark,
             };
           })
           .filter((item) => item);
@@ -95,7 +100,9 @@ export default {
           align-items: center;
           justify-content: center;
           width: 40px;
+          min-width: 40px;
           height: 40px;
+          min-height: 40px;
           font-size: 12px;
           font-weight: bold;
           color: #fff;
@@ -104,6 +111,7 @@ export default {
 
         .content {
           display: flex;
+          flex-wrap: wrap;
           align-items: flex-end;
           padding: 8px 16px;
           color: #000;