GCLS_Page_Exercise/src/views/exercise_questions/preview/ShortAnswerPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="readaloud-preview">
    <div class="stem">
      <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
        {{ questionNumberEndIsBracket(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="isEnable(data.property.is_enable_listening) && data.file_id_list.length > 0"
      :file-id="data.file_id_list[0]"
      :show-slider="true"
    />

    <el-input
      v-model="answer.answer_list[0].text"
      :disabled="disabled"
      type="textarea"
      :autosize="{ minRows: 6, maxRows: 36 }"
    />
    <SoundRecordPreview :wav-blob.sync="answer.answer_list[0].audio_file_id" />

    <div v-if="disabled" class="reference-answer">
      <div class="title">参考答案</div>
      <div>{{ data.reference_answer }}</div>
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import SoundRecordPreview from './components/common/SoundRecordPreview.vue';

export default {
  name: 'ShortAnswerPreview',
  components: {
    SoundRecordPreview,
  },
  mixins: [PreviewMixin],
  created() {
    this.$set(this.answer.answer_list, 0, { text: '', audio_file_id: '' });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.readaloud-preview {
  @include preview;

  .reference-answer {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    white-space: pre;
    background-color: $content-color;

    .title {
      color: #4e5969;
    }
  }
}
</style>