1.分析数据结构
return [
{
id:1,
type:'radio',
number:1,
title:'1生物大灭绝是指大规模的集群灭绝,生物灭绝又叫生物绝种。历史上一共有几次大灭绝?',
imageList:['https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1588056060&di=67dc5595a44e90101f524bae2273cc0a&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'],
question_option:[
{id:1,name:'A',content:'一次',active:0},
{id:2,name:'B',content:'二次',active:0},
{id:3,name:'C',content:'三次',active:0},
{id:4,name:'D',content:'四次',active:0},
]
}
]
题型应该分为三个类型,单选多选,填空。因此应该在页面内传值给子组件,子组件设置在props接受,并在created生命周期内赋值给data 里的this.newOptList
2,题干分为三部分,题目序号,题目类型,题目内容,因此分别使用id和type进行判断,在data中初始化showQuestionIndex当前题号,isEnd是否为最后一题。题目内容应该判断是否为选择题,选择和填空分来来,选择题选项需要遍历,并设置一个动态的:data-id=“item.id”。
3.method中应该有这样几个方法checkOption选择option选项。因为涉及到单选和多选,因此在写一个方法,checkActive用来进行选中样式的逻辑
参数就是e.currentTarget.dataset.id(将数据中的active选项改为选中提交答案是通过这个判断的)。checkOption调用checjactive然后返回数据,包括当前题目的id和选项的id然后通过this.
e
m
i
t
(
"
c
h
e
c
k
O
p
t
i
o
n
,
o
p
t
"
)
;
返
回
数
据
到
父
组
件
。
4.
下
一
题
n
e
x
t
Q
u
e
s
t
i
o
n
B
t
n
方
法
。
判
断
一
下
是
否
选
中
,
填
空
题
是
否
有
答
案
因
此
写
一
个
方
法
c
h
e
c
k
T
e
s
t
。
调
用
完
c
h
e
c
k
T
e
s
t
后
构
建
返
回
数
据
,
并
判
断
是
否
为
最
后
一
题
如
果
不
是
是
最
后
一
题
就
题
号
加
一
,
触
发
事
件
t
h
i
s
.
emit("checkOption,opt");返回数据到父组件。 4.下一题nextQuestionBtn方法。判断一下是否选中,填空题是否有答案因此写一个方法checkTest。调用完checkTest后构建返回数据,并判断是否为最后一题如果不是是最后一题就题号加一, 触发事件this.
emit("checkOption,opt");返回数据到父组件。4.下一题nextQuestionBtn方法。判断一下是否选中,填空题是否有答案因此写一个方法checkTest。调用完checkTest后构建返回数据,并判断是否为最后一题如果不是是最后一题就题号加一,触发事件this.emit(“nextAnswer”,opt);
如果加一之后就相等了就把isend改为true,当最后一题的时候就执行formatKey,并把构建的数据
let opt = {
current_id: this.showQuestionIndex,
isEnd: this.isEnd
}
作为参数传过去。
5.总的答案整理
formatKey 新建两个数组,
let newAnswer = []
let formatCheck_res = []
一个存放题目行管相关内容,另外一个存放答案相关内容。
对数据进行map循环,在循环里面再建数组并进行判断为选择还是填空,并将循环的数据存放到数组里。选择题需要写一个map循环选项。
最后将结果push到formatCheck_res
然后
newAnswer.push({
id: item.id,
type: item.type,
number: item.number,
title: item.title,
keyRes: key_res,
})
最后把两个数组放到opt里执行this.$emit(‘nextAnswer’,opt)。
其余的应该在computed里面计算一下点击按钮,选项样式的变化,这个可以再父组件里传值过来。