目录
连续完成单选题
1.新建了一个index1的页面
2.在index1.js里面添加题库数组
3.显示题目
4.显示当前是第几题
5.动态设置总题目数并实现动态换题
6.添加一个做题进度条
7.对用户选项进行判空
8.问卷计分
我这里在题库了添加了三道有关心理测试的题目
//题库 const titles = [{ title: '1.当周围嘈杂时,我很难专注于一项困难的任务', options: [{ code: '1', option: '几乎从不' }, { code: '2', option: '有时' }, { code: '3', option: '经常' }, { code: '4', option: '总是' } ] }, { title: '2. 当我需要专心和解决问题时,我很难集中注意力', options: [{ code: '1', option: '几乎从不' }, { code: '2', option: '有时' }, { code: '3', option: '经常' }, { code: '4', option: '总是' } ] }, { title: '3.当我正在努力做事时,仍会被周围的事情分心', options: [{ code: '1', option: '几乎从不' }, { code: '2', option: '有时' }, { code: '3', option: '经常' }, { code: '4', option: '总是' } ] } ]
渲染传送数据
Page({ data:{ subject:null, }, //一进页面就会执行的生命周期 onl oad() { let subject=titles[0] console.log('subject',subject) this.setData({ subject:subject }) }, radioChange(e){ console.log(e.detail.value) } })
显示题目,并将选中的答案对应的值进行记录
<view>题目:</view> <view>{{subject.title}}</view> <radio-group bindchange="radioChange"> <view wx:for="{{subject.options}}" wx:key="index"> <radio value="{{item.code}}"/> <text>{{item.option}}</text> </view> </radio-group> <button type="primary" bindtap="next">下一题</button>
效果图:
题目上方添加布局和对应样式
<view class="tip">当前第{{current}}题/共3题</view>
.tip{ text-align: center; color: chocolate; margin: 15rpx; font-size: 42rpx; }
每点击一次下一题按钮,记录当前题数的current进行动态传值
点击了一次后的current,但题目还没发生变换
设置动态值total,同时给单选的属性checked设为动态值isSelect
<view class="tip">当前第{{current}}题/共{{total}}题</view>
初始化动态值
total的动态值由题目的数组长度决定
如果到最后一个题了,给用户弹窗提示,且再执行换题操作。
换题操作实现起来也很简单,动态变化subject即可。
注意:每点击一次下一题按钮,单选的选择属性要设为false,否则回默认保存上一题的选择操作!
//切换到下一题 next() { //切换显示第几题 let number = this.data.current+1 if(number>titles.length){ wx.showToast({ title: '已经是最后一题了', icon:'none' }) return //最后一道题时,不再往下执行了 } //切换题目,注意数组下标从0开始 let subject = titles[number-1] this.setData({ subject:subject, current: number, isSelect:false }) }
实现效果:
利用progress组件progress | 微信开放文档 (qq.com)
定义进度条的布局和样式
<progress class="pro" percent="{{percent}}" border-radius="20" stroke-width="20"></progress>
.pro{ margin: 20rpx; }
初始化动态值percent后,进行动态传值
实现效果:
初始化用户的选择为空
如果没做选择,设置弹窗,并不再继续执行(写在next函数里的最前面)
//不做选择,就设置弹窗 let userChoose = this.data.userSelect if (!userChoose) { wx.showToast({ icon: 'error', title: '请做选择', }) return }
实现效果:
初始化用户得分userScore为0,用来累积用户得分
将用户选择转化对应的得分,并累加(这里把代码添加到了进度条这里)
//切换显示第几题并计分 let number = this.data.current + 1 let score = parseInt(userChoose) //将用户选择转为相应的得分 this.setData({ percent: ((number - 1) / titles.length) * 100, userScore: this.data.userScore + score //得分累计 }) console.log('此题用户得分:', score) console.log('用户总得分:', this.data.userScore)
测试结果:
最后在用户答完最后一道题的时候,给一个总得分反馈。
换句话说,也就是说只有最后一道题答完才能出现总分,前面不能出现,所以我们需要用到wx:if,条件可以将totalScore的初始值设为-1,最后将累积的userScore赋值给totalScore,所以totalScore>-1时可见。
<view wx:if="{{totalScore>-1}}" class="defen">您的得分为:{{totalScore}}分</view>
if (number > titles.length) { //统计最终得分 this.setData({ totalScore:this.data.userScore }) //给出最后一题的弹窗警告 wx.showToast({ title: '已经是最后一题了', icon: 'none' }) return //最后一道题时,不再往下执行了 }
实现效果: