回答问题

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

@@ -59,6 +59,7 @@ import ListenSelectQuestion from './exercises/ListenSelectQuestion.vue';
 import ListenJudgeQuestion from './exercises/ListenJudgeQuestion.vue';
 import ListenFillQuestion from './exercises/ListenFillQuestion.vue';
 import WordCardQuestion from './exercises/WordCardQuestion.vue';
+import AnswerQuestion from './exercises/AnswerQuestion.vue';
 
 export default {
   name: 'CreateMain',
@@ -81,6 +82,7 @@ export default {
     ListenJudgeQuestion,
     ListenFillQuestion,
     WordCardQuestion,
+    AnswerQuestion,
   },
   provide() {
     return {
@@ -121,6 +123,7 @@ export default {
         listen_judge: ListenJudgeQuestion,
         listen_fill: ListenFillQuestion,
         word_card: WordCardQuestion,
+        answer_question: AnswerQuestion,
       },
     };
   },

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

@@ -0,0 +1,128 @@
+<template>
+  <QuestionBase>
+    <template #content>
+      <div class="stem">
+        <el-input
+          v-if="data.property.stem_type === stemTypeList[0].value"
+          v-model="data.stem"
+          rows="3"
+          resize="none"
+          type="textarea"
+          placeholder="输入题干"
+        />
+
+        <RichText v-if="data.property.stem_type === stemTypeList[1].value" v-model="data.stem" placeholder="输入题干" />
+
+        <el-input
+          v-show="isEnable(data.property.is_enable_description)"
+          v-model="data.description"
+          rows="3"
+          resize="none"
+          type="textarea"
+          placeholder="输入文段"
+        />
+        <UploadAudio :file-id="data.file_id_list?.[0]" @upload="upload" @deleteFile="deleteFile" />
+        <el-input
+          v-if="isEnable(data.property.is_enable_reference_answer)"
+          v-model="data.reference_answer"
+          type="textarea"
+          rows="3"
+          placeholder="输入参考答案"
+        />
+      </div>
+    </template>
+
+    <template #property>
+      <el-form :model="data.property">
+        <el-form-item label="题干">
+          <el-radio
+            v-for="{ value, label } in stemTypeList"
+            :key="value"
+            v-model="data.property.stem_type"
+            :label="value"
+          >
+            {{ label }}
+          </el-radio>
+        </el-form-item>
+        <el-form-item label="题号">
+          <el-input v-model="data.property.question_number" />
+        </el-form-item>
+        <el-form-item label-width="45px">
+          <el-radio
+            v-for="{ value, label } in questionNumberTypeList"
+            :key="value"
+            v-model="data.other.question_number_type"
+            :label="value"
+          >
+            {{ 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_description"
+            :label="value"
+          >
+            {{ 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"
+            :key="value"
+            v-model="data.property.score_type"
+            :label="value"
+          >
+            {{ label }}
+          </el-radio>
+        </el-form-item>
+        <el-form-item label-width="45px">
+          <el-input-number
+            v-model="data.property.score"
+            :min="0"
+            :step="data.property.score_type === scoreTypeList[0].value ? 1 : 0.1"
+          />
+        </el-form-item>
+      </el-form>
+    </template>
+  </QuestionBase>
+</template>
+
+<script>
+import QuestionMixin from '../common/QuestionMixin.js';
+import UploadAudio from '../common/UploadAudio.vue';
+
+import { answerQuestionData } from '@/views/exercise_questions/data/answerQuestion';
+
+export default {
+  name: 'ReadAloudQuestion',
+  components: { UploadAudio },
+  mixins: [QuestionMixin],
+  data() {
+    return {
+      data: JSON.parse(JSON.stringify(answerQuestionData)),
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.stem {
+  border-bottom-width: 0 !important;
+}
+</style>

src/views/exercise_questions/create/index.vue

@@ -87,6 +87,7 @@ import ListenSelectPreview from '../preview/ListenSelectPreview.vue';
 import ListenFillPreview from '../preview/ListenFillPreview.vue';
 import ListenJudgePreview from '../preview/ListenJudgePreview.vue';
 import WordCardPreview from '../preview/WordCardPreview.vue';
+import AnswerQuestionPreview from '../preview/AnswerQuestionPreview.vue';
 
 export default {
   name: 'CreateExercise',
@@ -109,6 +110,7 @@ export default {
     ListenFillPreview,
     ListenJudgePreview,
     WordCardPreview,
+    AnswerQuestionPreview,
   },
   provide() {
     return {
@@ -149,6 +151,7 @@ export default {
         listen_fill: ListenFillPreview,
         listen_judge: ListenJudgePreview,
         word_card: WordCardPreview,
+        answer_question: AnswerQuestionPreview,
       },
     };
   },

src/views/exercise_questions/data/answerQuestion.js

@@ -0,0 +1,26 @@
+import { stemTypeList, questionNumberTypeList, scoreTypeList, switchOption } from './common';
+
+// 朗读题数据模板
+export const answerQuestionData = {
+  type: 'answer_question', // 题型
+  stem: '', // 题干
+  description: '', // 描述
+  file_id_list: [], // 文件 id 列表
+  answer: {
+    score: 0,
+    score_type: scoreTypeList[0].value,
+  }, // 答案
+  // 题型属性
+  property: {
+    stem_type: stemTypeList[0].value, // 题干类型
+    question_number: '1', // 题号
+    is_enable_reference_answer: switchOption[0].value, // 是否开启参考答案
+    is_enable_description: switchOption[0].value, // 是否启用描述
+    score: 1, // 分值
+    score_type: scoreTypeList[0].value, // 分值类型
+  },
+  // 其他属性
+  other: {
+    question_number_type: questionNumberTypeList[0].value, // 题号类型
+  },
+};

src/views/exercise_questions/data/common.js

@@ -22,6 +22,7 @@ export const questionTypeOption = [
       { label: '听说训练', value: 'repeat' },
       { label: '看图说话', value: 'talk_picture' },
       { label: '对话题', value: 'dialogue' },
+      { label: '回答问题', value: 'answer_question' },
     ],
   },
   {

src/views/exercise_questions/preview/AnswerQuestionPreview.vue

@@ -0,0 +1,61 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="answerquestion-preview">
+    <div class="stem">
+      <span class="question-number">{{ data.property.question_number }}.</span>
+      <span v-html="sanitizeHTML(data.stem)"></span>
+    </div>
+
+    <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>
+
+    <AudioPlay v-if="data.file_id_list.length > 0" :file-id="data.file_id_list[0]" />
+
+    <SoundRecordPreview :wav-blob.sync="answer.answer_list[0].voice_file_id" />
+    <div v-if="isEnable(data.property.is_enable_reference_answer)" class="reference-box">
+      <h5 class="reference-title">参考答案</h5>
+      <span class="reference-answer" v-html="sanitizeHTML(data.reference_answer)"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+import PreviewMixin from './components/PreviewMixin';
+import SoundRecordPreview from './components/common/SoundRecordPreview.vue';
+
+export default {
+  name: 'ReadAloudPreview',
+  components: {
+    SoundRecordPreview,
+  },
+  mixins: [PreviewMixin],
+  created() {
+    this.$set(this.answer.answer_list, 0, { voice_file_id: '' });
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.answerquestion-preview {
+  @include preview;
+
+  :deep .sound-record-wrapper {
+    justify-content: center;
+  }
+
+  .reference-box {
+    padding: 12px;
+    background: #f9f8f9;
+
+    .reference-title {
+      margin: 0 0 10px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 32px;
+      color: #4e5969;
+    }
+  }
+}
+</style>