完成选择题界面的设计。
代码如下:
<template>
<div style="min-height: 100%;display: flex;width: 100%">
<el-container style="width: 100%;">
<el-header style="background-color: rgb(255,255,255)">
<testHeader />
</el-header>
<el-container style="display: flex;flex-direction: row" >
<el-aside :width="sideWidth+'px'" style="height: 100%" >
<testAside />
</el-aside>
<div id="app1">
<el-main style="padding: 20px;">
<h1>选择题测试</h1>
<div v-if="currentIndex < questions.length">
<p>{{ questions[currentIndex].question }}</p>
<div>
<button
v-for="(option, index) in questions[currentIndex].options"
:key="index"
:class="{ 'selected': selectedOption === index }"
@click="selectOption(index)"
:disabled="isSubmitted"
>
{{ String.fromCharCode(65 + index) }}. {{ option }}
</button>
</div>
<button @click="submitAnswer" :disabled="selectedOption === null || isSubmitted">
{{ isSubmitted ? '已提交' : '提交' }}
</button>
<p v-if="isSubmitted" :style="{ color: isCorrect ? 'green' : 'red' }">
{{ isCorrect ? '恭喜您,回答正确!' : '很遗憾,回答错误!' }}
</p>
<p v-if="isSubmitted">
解析:{{ questions[currentIndex].explanation }}
</p>
<button v-if="isSubmitted && currentIndex < questions.length - 1" @click="nextQuestion">
下一题
</button>
<div v-if="isSubmitted && currentIndex === questions.length - 1">
<h2>测试完成!</h2>
<p>您总共答对 {{ correctAnswers }} 道题目。</p>
<button @click="resetTest">重新开始测试</button>
</div>
</div>
</el-main>
</div>
</el-container>
</el-container>
</div>
</template>
<script>
// 引入所需的组件
import testAside from "@/components/learnAside.vue";
import testHeader from "@/components/learnHeader.vue";
import { Notebook } from '@element-plus/icons-vue'
export default {
name: 'App1',
components: {
testAside,
testHeader
},
data() {
return {
currentIndex: 0,
correctAnswers: 0,
isCorrect: false,
selectedOption: null,
isSubmitted: false,
questions: [
{
question: 'HTML 是什么?',
options: [
'一种用于创建网页的标记语言',
'一种编程语言',
'一种脚本语言',
'以上说法都不正确'
],
answer: 0,
explanation: 'HTML (Hypertext Markup Language) 是一种用于创建网页的标记语言。它定义了网页的结构和内容,包括文本、图像、链接等元素。HTML 是构建网页的基础,是 Web 开发的核心技术之一。'
},
{
question: 'HTML 文档的基本结构包括哪些部分?',
options: [
'头部(head)和主体(body)',
'只有主体(body)',
'只有标题(title)',
'以上说法都不正确'
],
answer: 0,
explanation: 'HTML 文档的基本结构包括头部(head)和主体(body)两个主要部分。头部用于定义文档的元数据,如网页标题、编码格式等;主体用于定义网页的内容和结构,如文本、图像、链接等。'
},
{
question: 'HTML 中常用的标签有哪些?',
options: [
'标题标签(h1-h6)、段落标签(p)、链接标签(a)、图像标签(img)等',
'只有基本的文本标签',
'只有自定义的标签',
'以上说法都不正确'
],
answer: 0,
explanation: 'HTML 中常用的标签包括标题标签(h1-h6)、段落标签(p)、链接标签(a)、图像标签(img)等。这些预定义的标签可以帮助开发者快速构建网页结构和内容。HTML 5还引入了更多语义化的标签,如header、nav、article等。'
}
]
}
},
methods: {
selectOption(index) {
this.selectedOption = index
},
submitAnswer() {
if (this.selectedOption !== null && !this.isSubmitted) {
const question = this.questions[this.currentIndex]
if (question.answer === this.selectedOption) {
this.isCorrect = true
this.correctAnswers++
} else {
this.isCorrect = false
}
this.isSubmitted = true
}
},
nextQuestion() {
this.currentIndex++
this.selectedOption = null
this.isSubmitted = false
this.isCorrect = false
},
resetTest() {
this.currentIndex = 0
this.correctAnswers = 0
this.isCorrect = false
this.selectedOption = null
this.isSubmitted = false
}
}
}
</script>
<style>
#app1 {
display: flex;
width: 950px;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 0px;
top: 50%;
left: 50%;
transform: translate(25%, 15%);
}
button {
margin: 10px; /* 控制按钮之间的间距 */
padding: 10px 20px; /* 控制按钮内部的空间 */
font-size: 16px; /* 控制按钮中文本的大小 */
border: 1px solid #ccc; /* 控制按钮边框 */
border-radius: 5px; /* 控制按钮边框的圆角 */
/* 移除默认的vertical-align: baseline,以确保按钮底部对齐 */
vertical-align: top;
white-space: normal; /* 允许按钮内的文本换行 */
width: 200px;
height: 100px;
}
button.selected {
background-color: #2196F3;
color: #fff;
}
button:hover {
background-color: #ccc;
cursor: pointer;
}
</style>
效果图如下:
这里展示回答正确界面:
这里展示回答错误界面:
其中也包含了重新开始测试按钮。