修改练习题问题

src/styles/mixin.scss

@@ -14,7 +14,7 @@
   // 题干
   .stem {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     font-size: 18px;
     font-weight: bold;
     color: #34343a;

src/styles/variables.scss

@@ -1,5 +1,6 @@
 // color
 $main-color: #165dff;
+$light-main-color: #306eff;
 $main-background-color: #f7f8fa;
 $main-hover-color: #3371ff;
 $danger-color: #f53f3f;

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

@@ -27,7 +27,9 @@
         <ul>
           <li v-for="(item, i) in data.option_list" :key="i" class="content-item">
             <div v-for="(li, j) in item" :key="li.mark" class="item-cell">
-              <span class="question-number">{{ computedQuestionNumber(i, data.option_number_show_mode) }}. </span>
+              <span v-if="j === 0" class="question-number">
+                {{ computedQuestionNumber(i, data.option_number_show_mode) }}.
+              </span>
               <RichText v-model="li.content" placeholder="输入内容" :inline="true" />
               <span v-if="data.property.column_number > j + 1" class="horizontal-line"></span>
               <SvgIcon

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

@@ -12,6 +12,13 @@
 
       <RichText v-if="data.property.stem_type === stemTypeList[1].value" v-model="data.stem" placeholder="输入题干" />
 
+      <UploadAudio
+        v-show="isEnable(data.property.is_enable_listening)"
+        :file-id="data.file_id_list?.[0]"
+        @upload="upload"
+        @deleteFile="deleteFile"
+      />
+
       <div class="content">
         <el-input
           v-if="isEnable(data.property.is_enable_reference_answer)"
@@ -49,6 +56,17 @@
           </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_listening"
+            :label="value"
+          >
+            {{ label }}
+          </el-radio>
+        </el-form-item>
+
         <el-form-item label="参考答案">
           <el-radio
             v-for="{ value, label } in switchOption"
@@ -80,11 +98,15 @@
 
 <script>
 import QuestionMixin from '../common/QuestionMixin.js';
+import UploadAudio from '../common/UploadAudio.vue';
 
 import { readAloudData } from '@/views/exercise_questions/data/readAloud';
 
 export default {
   name: 'ReadAloudQuestion',
+  components: {
+    UploadAudio,
+  },
   mixins: [QuestionMixin],
   data() {
     return {

src/views/exercise_questions/data/readAloud.js

@@ -5,6 +5,7 @@ export const readAloudData = {
   type: 'read_aloud', // 题型
   stem: '', // 题干
   reference_answer: '', // 参考答案
+  file_id_list: [], // 文件 id 列表
   answer: {
     score: 0,
     score_type: scoreTypeList[0].value,
@@ -13,6 +14,7 @@ export const readAloudData = {
   property: {
     stem_type: stemTypeList[0].value, // 题干类型
     question_number: '1', // 题号
+    is_enable_listening: switchOption[0].value, // 是否开启听力
     is_enable_reference_answer: switchOption[0].value, // 是否开启参考答案
     score: 1, // 分值
     score_type: scoreTypeList[0].value, // 分值类型

src/views/exercise_questions/preview/DialoguePreview.vue

@@ -32,7 +32,11 @@
               </div>
             </template>
           </div>
-          <SoundRecordPreview v-if="item.type === 'input'" :wav-blob.sync="item.audio_file_id" type="small" />
+          <SoundRecordPreview
+            v-if="item.type === 'input' && isEnable(data.property.is_enable_voice_answer)"
+            :wav-blob.sync="item.audio_file_id"
+            type="small"
+          />
         </li>
       </ul>
     </div>
@@ -40,6 +44,7 @@
 </template>
 
 <script>
+import { isEnable } from '../data/common';
 import PreviewMixin from './components/PreviewMixin';
 import SoundRecordPreview from './components/common/SoundRecordPreview.vue';
 

src/views/exercise_questions/preview/JudgePreview.vue

@@ -12,11 +12,14 @@
 
     <ul class="option-list">
       <li
-        v-for="{ content, mark } in data.option_list"
+        v-for="({ content, mark }, i) in data.option_list"
         :key="mark"
         :class="['option-item', { active: isAnswer(mark) }]"
       >
-        <div class="option-content" v-html="sanitizeHTML(content)"></div>
+        <div class="option-content">
+          <span class="serial-number">{{ computedQuestionNumber(i, data.option_number_show_mode) }}.</span>
+          <div v-html="sanitizeHTML(content)"></div>
+        </div>
         <div class="option-type">
           <div
             v-for="option_type in data.property.option_type_list"
@@ -41,6 +44,7 @@
 
 <script>
 import { option_type_list } from '@/views/exercise_questions/data/judge';
+import { computedQuestionNumber } from '@/views/exercise_questions/data/common';
 
 import PreviewMixin from './components/PreviewMixin';
 
@@ -49,6 +53,7 @@ export default {
   mixins: [PreviewMixin],
   data() {
     return {
+      computedQuestionNumber,
       option_type_list,
     };
   },
@@ -85,11 +90,17 @@ export default {
       column-gap: 16px;
 
       .option-content {
+        display: flex;
         flex: 1;
+        column-gap: 24px;
+        align-items: center;
         padding: 12px 24px;
-        color: #706f78;
         background-color: $content-color;
         border-radius: 40px;
+
+        .serial-number {
+          color: #000;
+        }
       }
 
       .option-type {
@@ -110,7 +121,7 @@ export default {
 
           &.active {
             color: #fff;
-            background-color: #504f57;
+            background-color: $light-main-color;
           }
         }
       }

src/views/exercise_questions/preview/SelectPreview.vue

@@ -93,7 +93,7 @@ export default {
         background-color: #e7eeff;
 
         .selectionbox {
-          border-color: #306eff;
+          border-color: $light-main-color;
           border-width: 4px;
         }
       }