Bootstrap

vue答题插件

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.nextQuestionBtncheckTestcheckTestthis.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里面计算一下点击按钮,选项样式的变化,这个可以再父组件里传值过来。

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;