vue答题插件

迷南。 2022-11-03 04:23 230阅读 0赞

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