实现阅读理解单选题
场景:四级/六级/考研中都有阅读理解题型,我们来实现一个单选题组件,每道题只能选择一次,选择错误自动出现正确答案。
本例所用的数据结构
question: [
{
answer: 0,
option: [
'string1',
'string2',
'string3',
'string4'
]
},
{
answer: 2,
option: [
'string1',
'string2',
'string3',
'string4'
]
}
],
组件开发
前端界面
<template>
<div class="question-container">
<div class="question-cell_box" v-for="(q, qIndex) in question" :key="`${q.answer}-${qIndex}`">
<p class="box-header"> {{ `第${qIndex + 1}题` }}</p>
<ul class="box-option_container">
<li
class="box-option_item"
v-for="(opt, index) in q.option"
:key="`${opt}-${index}`"
:ref="`${qIndex}-${index}`"
@click="selectOption(q.answer, index, qIndex)"
>{{ String.fromCharCode(64 + index + 1) }}. {{ opt }} </li>
</ul>
</div>
</div>
</template>
样式
.question-container {
width: 375px;
border: 1px solid #E5E5E5;
border-radius: 4px;
margin: 0 auto;
}
.question-container .question-cell_box {
background: #F5F5F5;
padding: 0 20px 20px;
margin: 20px;
}
.box-header {
border-bottom: 1px solid #E5E5E5;
line-height: 30px;
padding-top: 8px;
}
.box-option_container {
list-style: none;
padding-inline-start: 0;
}
.box-option_item {
border: 1px solid #E5E5E5;
margin: 8px 0;
border-radius: 4px;
background: #FFFFFF;
padding: 8px 12px;
cursor: pointer;
text-align: left;
}
.correct {
background: #409EFF;
color: #FFFFFF;
}
.error {
background: #FFFFFF;
color: red;
}
实现交互
selectOption (correct, index, qIndex) {
// 此处加限制的目的是选过的题不能再选
if (this.selectIndex !== '') {
const historyArr = JSON.parse(window.localStorage.getItem('history'))
const i = historyArr.findIndex((val) => val.qIndex === qIndex)
if (i !== -1) {
return false
}
}
this.selectIndex = index
this.history.push({
qIndex: qIndex,
answer: correct
})
window.localStorage.setItem('history', JSON.stringify(this.history))
const optionItem = this.$refs[`${qIndex}-${index}`][0]
if (correct === index) {
optionItem.className = optionItem.className.concat(' correct')
}
if (correct !== index) {
const correctItem = this.$refs[`${qIndex}-${correct}`][0]
correctItem.className = correctItem.className.concat(' correct')
optionItem.className = optionItem.className.concat(' error')
}
}
效果截图
未选择状态
第1题选择正确则直接显示正确选项样式,第2题选择错误显示正确答案,并用红色标红样式来标记错误答案。
如果大佬们有更好的方法,欢迎评论区探讨哦~~