Commit c9c5ae56 authored by liujiangnan's avatar liujiangnan

feat

parent 32916f24
This diff is collapsed.
......@@ -19,49 +19,44 @@
<div class="question-container" v-if="questionData">
<!-- 题干部分 -->
<div class="question-section">
<div class="question-text" v-if="questionData.question">
<h3>{{ questionData.question }}</h3>
</div>
<div class="question-content">
<div class="question-image" v-if="questionData.image_url">
<img :src="questionData.image_url" alt="题干图片">
</div>
<div class="question-image" v-if="questionData.image_url">
<img :src="questionData.image_url" alt="题干图片">
</div>
<div class="question-audio" v-if="questionData.audio_url">
<el-button size="small" type="primary" @click="toggleQuestionAudio">
<i :class="questionData.isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
{{ questionData.isPlaying ? '暂停' : '播放' }}题目音频
</el-button>
<audio ref="questionAudio" :src="questionData.audio_url" @ended="questionAudioEnded" style="display: none;"></audio>
<div class="question-text" v-if="questionData.question">
<div class="audio-icon" v-if="questionData.audio_url" @click="toggleQuestionAudio">
<i :class="questionData.isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
</div>
<audio ref="questionAudio" :src="questionData.audio_url" @ended="questionAudioEnded" style="display: none;"></audio>
<h3>{{ questionData.question }}</h3>
</div>
</div>
</div>
<!-- 选项部分 -->
<div class="options-section">
<div class="option-item"
v-for="(option, index) in questionData.options"
:key="index"
@click="toggleOption(index)"
:class="{ 'selected': selectedOptions.includes(index) }">
<div class="option-content">
<div class="option-text" v-if="option.text">
<span class="option-text-content">{{ option.text }}</span>
</div>
<div class="option-image" v-if="option.image_url">
<img :src="option.image_url" alt="选项图片">
</div>
<div class="option-audio" v-if="option.audio_url">
<el-button size="mini" type="primary" @click.stop="toggleOptionAudio(index)">
<i :class="option.isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
{{ option.isPlaying ? '暂停' : '播放' }}
</el-button>
<audio :ref="'optionAudio' + index" :src="option.audio_url" @ended="optionAudioEnded(index)" style="display: none;"></audio>
</div>
<div class="options-grid" :class="{ 'has-images': hasOptionImages, 'text-only': !hasOptionImages }">
<div class="option-item"
v-for="(option, index) in questionData.options"
:key="index"
@click="toggleOption(index)"
:class="{ 'selected': selectedOptions.includes(index) }">
<div class="option-content">
<div class="option-text">
<div class="option-label">{{ String.fromCharCode(65 + index) }}</div>
<div class="option-text-content" v-if="option.text">
<div class="audio-icon" v-if="option.audio_url" @click.stop="toggleOptionAudio(index)">
<i :class="option.isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
</div>
<audio :ref="'optionAudio' + index" :src="option.audio_url" @ended="optionAudioEnded(index)" style="display: none;"></audio>
<span>{{ option.text }}</span>
</div>
</div>
<div class="option-text">
<span class="option-label">{{ String.fromCharCode(65 + index) }}</span>
<div class="option-image" v-if="option.image_url">
<img :src="option.image_url" alt="选项图片">
</div>
</div>
</div>
</div>
......
......@@ -28,6 +28,15 @@ new Vue({
showError: false
}
},
computed: {
// 判断是否有选项包含图片
hasOptionImages() {
if (!this.questionData || !this.questionData.options) {
return false;
}
return this.questionData.options.some(option => option.image_url && option.image_url.trim() !== '');
}
},
created() {
window.courseware.getData((data) => {
if (data) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment