微信小程序满意度调查问卷答题类小程序实现

最近暂时不用忍受学业压力，可以干一些自己想干的事情，由于接的小程序的锅太多，决定好好学习一下小程序，本次主要学习了答题问卷小程序的制作，涉及到题目切换、答案上传以及简单的完成情况判断等场景，本次设计特点是题库与页面分离。

界面设置

首页

答题页面1

答题界面2
功能描述
在主页中点击对应的按钮进入对应的答题页面。
答题界面包括题目、选项、上/下一题、当前题号等，并且，第一题时【上一题】按钮禁用；最后一题时【下一题】变为【提交】
每题之间横向切换（使用了微信小程序中的swiper组件）
答题完成后判断是否有未答题，若有，则返回至第一道未答题，如全部答完则将答案提交至云开发中的数据库进行保存
代码

<!--miniprogram/pages/testSAS/testSAS.wxml-->
<view class='container'><swiper class='sheet' current='{{id}}'><block wx:for="{{qnaire}}"><swiper-item><form bindsubmit='submit'><view class='naire'><view class='question'>{{item.question}}</view><!--view class='border' /--><radio-group class='radio-group' name='answer' bindchange='radioChange'><label class='radio'><radio value="A" color='#fcbe39' />{{item.option.a}}</label><label class='radio'><radio value="B" color='#fcbe39' />{{item.option.b}}</label><label class='radio'><radio value="C" color='#fcbe39' />{{item.option.c}}</label><label class='radio'><radio value="D" color='#fcbe39' />{{item.option.d}}</label></radio-group></view><view class='button-group'><button class='button' hover-class='none' bindtap='lastq' disabled='{{id==0}}'>上一题</button><button wx:if="{{id<19}}" class='button' hover-class='none' form-type='submit' bindtap='nextq'>下一题</button><button wx:else class='button' hover-class='none' form-type='submit' bindtap='formSubmit'>提交</button></view><view class='id'>{{id+1}}/{{qnaire.length}}</view></form></swiper-item></block></swiper></view>

此处本来是没有打算使用swiper组件的，由于直接使用wx:for会导致全部题目出现在同一个页面上；不使用循环语句，改用[id]直接进行下标索引会造成radio选中后切换题目选中状态不变，使用checked也无法解决问题，因此改为使用swiper组件。

在使用swiper时，目前还不清楚为什么当把题号显示代码<view class='id'>{{id+1}}/{{qnaire.length}}</view>写在block块和swiper块之后会无法显示，所以保持它随swiper-item一起切换。

/* miniprogram/pages/testSAS/testSAS.wxss */
page {background: #fcbe3960;display: flex;flex-direction: column;justify-content: flex-start;
}.sheet {background: #fff;border-radius: 36rpx;margin-top: 160rpx;width: 84%;height: 580rpx;display: flex;flex-direction: column;justify-content: flex-start;
}
.naire {height: 420rpx;
}
.question {font-size: 36rpx;font-weight: bold;margin-top: 40rpx;margin-left: 32rpx;
}
.border {height: 2rpx;width: 90%;background-color: #d4d4d4;margin: 16rpx auto;
}
.radio-group {display: flex;flex-direction: column;font-size: 30rpx;text-indent: 14rpx;margin-top: 40rpx;
}
.radio {margin-bottom: 14rpx;
}
.button-group {display: flex;flex-direction: row;width: 80%;margin: auto;justify-content: space-between;
}
.button {background: #fcbe39;border-radius: 100rpx;font-size: 30rpx;line-height: 52rpx;height: 52rpx;width: 172rpx;font-weight: bold;color: #fff;
}
.button::after {border: 0;
}
.id {text-align: center;font-size: 24rpx;color: #c2c2c2;margin: auto;margin-top: 20rpx;
}

题库：

const qnaire = [{"question": "1. 我觉得比平时容易紧张或着急","option": {"a": "没有或很少时间","b": "小部分时间","c": "相当多时间","d": "绝大部分或全部时间"}},{"question": "2. 我无缘无故在感到害怕","option": {"a": "没有或很少时间","b": "小部分时间","c": "相当多时间","d": "绝大部分或全部时间"}},{"question": "3. 我容易心里烦乱或感到惊恐","option": {"a": "没有或很少时间","b": "小部分时间","c": "相当多时间","d": "绝大部分或全部时间"}},
// …省略… //{"question": "19. 我容易入睡并且一夜睡得很好","option": {"a": "没有或很少时间","b": "小部分时间","c": "相当多时间","d": "绝大部分或全部时间"}},{"question": "20. 我作恶梦","option": {"a": "没有或很少时间","b": "小部分时间","c": "相当多时间","d": "绝大部分或全部时间"}}
]module.exports = {qnaire: qnaire
}

核心代码：

const db = wx.cloud.database()
const qnaire = require("./sas.js")  //导入题库
var ans = new Array(20)  //答案数组初始化，会在onload函数中赋初值""data: {qnaire: qnaire.qnaire,answer: ans,id: 19
}radioChange: function (e) {console.log(e.detail.value)
}nextq: function () {if (this.data.id < 19) {this.setData({id: this.data.id + 1,})}
}lastq: function (e) {if (this.data.id != 0) {this.setData({id: this.data.id - 1,})}
}submit: function (e) {console.log(e.detail.value);var a = e.detail.value.answer;var id = this.data.id;ans[id] = a;this.setData({answer: ans,})console.log(this.data.answer);}//判断答题完成情况
formSubmit: function() {var finish;var i = 0;var _this = this;while (i < 20) {if (ans[i] == "") {finish = 'false';break;} else {finish = 'true';}i++;}if (finish == 'false') {wx.showModal({title: '无法提交',content: '您还有部分题目未完成，请检查后重新提交',showCancel: false,confirmColor: '#fcbe39',confirmText: "好的",success(res) {_this.setData({id: i,})}})} else {wx.showLoading({title: '加载中',})setTimeout(function () {wx.hideLoading({success(res) {_this.answer2db();wx.navigateBack({delta: 1})}})}, 2000)}
}//将用户完成的答案数组上传至云数据库
answer2db: function() {db.collection('SAS').add({data: {answer: this.data.answer},success(res) {console.log(res._id);},fail(res) {wx.showToast({icon: 'none',title: '新增记录失败'})console.error('[数据库] [新增记录] 失败：', err)}})
}

主要学习内容：
swiper的使用
js的模块引入
js中循环语句的写法（原来和c++一样啊…）
仍需改进的问题：
禁用按钮图标样式
radio图标为自带的对勾图标，只能实现颜色的改变，还无法改变图标样式，【猜测需要自己重新使用view视图写新模块】
需实现更可靠的交互能力，有的时候开发者工具会报错，说代码中可能存在死循环
————————————————
版权声明：本文为CSDN博主「实验室小彩笔」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43896241/article/details/92833984

微信小程序满意度调查问卷答题类小程序实现相关推荐

小程序实战—答题类小程序
让我们在项目实战中学习微信小程序开发!(关注我,获取更多小程序~) 你玩过百万英雄.冲顶大会吗?这种答题类的小程序(前端)其实很简单... 今天就给大家介绍这样的可以霸占头条的答题类小程序 1.先看效 ...
调查问卷_员工满意度调查问卷
亲爱的员工伙伴: 在公司"XXXXXX"的经营环境里,每一位员工都是公司的内部顾客,公司为了更能让您满意,并藉此完善公司各方面管理,请您填写一份满意度问卷,为公司管理和发展赐予您的 ...
java程序分为哪两大类_JAVA程序基础(第1-2章分类)复习-1
JAVA基础理论辅助消化练习题 (蓝色的不做) 练习一(类java程序) 1.J ava是低级语言还是高级语言? 2.J ava是面向对象的程序设计语言吗? 3. J ava是编译型的计算机语言还是解 ...
微信小程序 - 满意度调查评价功能，表情图片打分评分组件（非星星评分组件，类似抖音商品满意度好评、中评、差评评价功能）代码干净整洁注释详细无 BUG，无任何第三方插件依赖，完整功能实例源码插件
前言网上的教程组件代码写的太多,而且功能不好用,主要都存在图片切换时 "闪烁" 的问题. 实现了适用于微信小程序的表情图片满意度评价功能(评分组件),高效无 BUG 没有任何插 ...
微信小程序实现调查问卷表单
微信小程序问卷调查表单功能演示: 20220408_202155 index.wxml <view id="container-top"> <view id=& ...
答题类小程序（数学题类） 2018/4/27更新
项目地址: https://github.com/Silverados/We-MathAnswerPage 自从一个月前更新完,期间虽然一直都在写代码,但是前端展示部分交给了另外一个同学写,自己跑去写 ...
忧心文案小程序第二版+前端/鸡汤类小程序源码
忧心文案毒鸡汤美图壁纸小程序源码,用的别人的API接口,全自动采集更新资源,无需管理. 后台为PHP语言,只能管理前台广告,没有其他功能. 源码直接安装即可,后台账户:admin 密码:123456 ...
基于web的满意度调查问卷源码设计方案
问卷调查系统应用于各行各业,对于企业的数据回收统计分析战略决策起到至关作用.而现有的问卷调查系统大都是在线使用并将数据保存在第三方服务器上.这种模式每年都要缴纳费用并且数据安全性得不到保证.所以说每个 ...
员工满意度调查问卷----团队管理应该关注员工的这些事宜
我很明确自己的工作目标.岗位职责和工作流程. 非常同意同意一般不同意非常不同意对于公司使命的达成,我的工作是重要的. 非常同意同意一般不同意非常不同意我的工作带给我很多成就感. ...

微信小程序满意度调查问卷答题类小程序实现

微信小程序满意度调查问卷答题类小程序实现相关推荐

最新文章

热门文章

微信小程序 满意度调查问卷答题类小程序实现

微信小程序 满意度调查问卷答题类小程序实现相关推荐

最新文章

热门文章

微信小程序满意度调查问卷答题类小程序实现

微信小程序满意度调查问卷答题类小程序实现相关推荐