Commit c9c5ae56 authored by liujiangnan's avatar liujiangnan

feat

parent 32916f24
This diff is collapsed.
...@@ -19,49 +19,44 @@ ...@@ -19,49 +19,44 @@
<div class="question-container" v-if="questionData"> <div class="question-container" v-if="questionData">
<!-- 题干部分 --> <!-- 题干部分 -->
<div class="question-section"> <div class="question-section">
<div class="question-text" v-if="questionData.question"> <div class="question-content">
<h3>{{ questionData.question }}</h3> <div class="question-image" v-if="questionData.image_url">
</div> <img :src="questionData.image_url" alt="题干图片">
</div>
<div class="question-image" v-if="questionData.image_url"> <div class="question-text" v-if="questionData.question">
<img :src="questionData.image_url" alt="题干图片"> <div class="audio-icon" v-if="questionData.audio_url" @click="toggleQuestionAudio">
</div> <i :class="questionData.isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
</div>
<div class="question-audio" v-if="questionData.audio_url"> <audio ref="questionAudio" :src="questionData.audio_url" @ended="questionAudioEnded" style="display: none;"></audio>
<el-button size="small" type="primary" @click="toggleQuestionAudio"> <h3>{{ questionData.question }}</h3>
<i :class="questionData.isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i> </div>
{{ questionData.isPlaying ? '暂停' : '播放' }}题目音频
</el-button>
<audio ref="questionAudio" :src="questionData.audio_url" @ended="questionAudioEnded" style="display: none;"></audio>
</div> </div>
</div> </div>
<!-- 选项部分 --> <!-- 选项部分 -->
<div class="options-section"> <div class="options-section">
<div class="option-item" <div class="options-grid" :class="{ 'has-images': hasOptionImages, 'text-only': !hasOptionImages }">
v-for="(option, index) in questionData.options" <div class="option-item"
:key="index" v-for="(option, index) in questionData.options"
@click="toggleOption(index)" :key="index"
:class="{ 'selected': selectedOptions.includes(index) }"> @click="toggleOption(index)"
<div class="option-content"> :class="{ 'selected': selectedOptions.includes(index) }">
<div class="option-text" v-if="option.text"> <div class="option-content">
<span class="option-text-content">{{ option.text }}</span> <div class="option-text">
</div> <div class="option-label">{{ String.fromCharCode(65 + index) }}</div>
<div class="option-text-content" v-if="option.text">
<div class="option-image" v-if="option.image_url"> <div class="audio-icon" v-if="option.audio_url" @click.stop="toggleOptionAudio(index)">
<img :src="option.image_url" alt="选项图片"> <i :class="option.isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
</div> </div>
<audio :ref="'optionAudio' + index" :src="option.audio_url" @ended="optionAudioEnded(index)" style="display: none;"></audio>
<div class="option-audio" v-if="option.audio_url"> <span>{{ option.text }}</span>
<el-button size="mini" type="primary" @click.stop="toggleOptionAudio(index)"> </div>
<i :class="option.isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i> </div>
{{ option.isPlaying ? '暂停' : '播放' }}
</el-button>
<audio :ref="'optionAudio' + index" :src="option.audio_url" @ended="optionAudioEnded(index)" style="display: none;"></audio>
</div>
<div class="option-text"> <div class="option-image" v-if="option.image_url">
<span class="option-label">{{ String.fromCharCode(65 + index) }}</span> <img :src="option.image_url" alt="选项图片">
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -28,6 +28,15 @@ new Vue({ ...@@ -28,6 +28,15 @@ new Vue({
showError: false 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() { created() {
window.courseware.getData((data) => { window.courseware.getData((data) => {
if (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