标签:code 题目 option 测评 title 程序 number subject 问卷
目录
连续完成单选题
1.新建了一个index1的页面
2.在index1.js里面添加题库数组
我这里在题库了添加了三道有关心理测试的题目
//题库
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: '总是'
}
]
}
]
3.显示题目
渲染传送数据
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>
效果图:
4.显示当前是第几题
题目上方添加布局和对应样式
<view class="tip">当前第{{current}}题/共3题</view>
.tip{
text-align: center;
color: chocolate;
margin: 15rpx;
font-size: 42rpx;
}
每点击一次下一题按钮,记录当前题数的current进行动态传值
点击了一次后的current,但题目还没发生变换
5.动态设置总题目数并实现动态换题
设置动态值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
})
}
实现效果:
6.添加一个做题进度条
利用progress组件progress | 微信开放文档 (qq.com)
定义进度条的布局和样式
<progress class="pro" percent="{{percent}}" border-radius="20" stroke-width="20"></progress>
.pro{
margin: 20rpx;
}
初始化动态值percent后,进行动态传值
实现效果:
7.对用户选项进行判空
初始化用户的选择为空
如果没做选择,设置弹窗,并不再继续执行(写在next函数里的最前面)
//不做选择,就设置弹窗
let userChoose = this.data.userSelect
if (!userChoose) {
wx.showToast({
icon: 'error',
title: '请做选择',
})
return
}
实现效果:
8.问卷计分
初始化用户得分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 //最后一道题时,不再往下执行了
}
实现效果:
标签:code,题目,option,测评,title,程序,number,subject,问卷 来源: https://blog.csdn.net/TaylorZ9826/article/details/123112368
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。