小程序云开发入门——问卷测评小程序实战（3）

本文主要是介绍小程序云开发入门——问卷测评小程序实战（3），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录

连续完成单选题

1.新建了一个index1的页面

2.在index1.js里面添加题库数组

3.显示题目

 4.显示当前是第几题

5.动态设置总题目数并实现动态换题

 6.添加一个做题进度条

 7.对用户选项进行判空

 8.问卷计分

连续完成单选题

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 //最后一道题时，不再往下执行了
        }

实现效果：

这篇关于小程序云开发入门——问卷测评小程序实战（3）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！