2022-06-30 09:59:31 来源 : 软件开发网
(资料图片)
本文实例为大家分享了微信小程序实现答题功能的具体代码，供大家参考，具体内容如下
view
科普答题 共计{{nums}}道题 第{{curret}}道题 每道题{{scoreFen}}分，总计：{{nums*scoreFen}}分 {{subject.type}} {{curret}}.{{subject.title}} {{item.code}}.{{item.content}} 查看结果 答题结果 总计：{{nums}}道题 总分：{{nums*scoreFen}}分 得分：{{zongfen}}分 总计答对题：{{score}}道题 合格率 查看错题 取消 js
// pages/index2/index2.jsconst app = getApp()//打错的题目放到erroroptionlet erroroption=[]Page({ data: { shuju: [], curret: 1, //第几题 nums: "", //题库题目的总数量 isSelect: false, subject: null, scoreFen: 2, //定义每道单选题的分值 percent: 0, //进度条数量计算 userSelect: "", //用户选择的题目个数 score: 0, //用户答对的题目数量 curt: "", //如果用户有选择就更新进度条 zongfen: -1, //用户的总分 btndis: false, //最后一题checked停止 totalerrow: 0 ,//用户答错题的个数 suiji:"00", suiji1:"00", jifen:0, }, back(){ wx.navigateBack({ delta: 0, }) }, onLoad: function (options) { wx.removeStorageSync("daui") var that = this; wx.request({ url: "XXXXXXXX?page=1&rows=10", //题目接口 data: { }, header: { "content-type": "application/json" // 默认值 }, success(res) { that.setData({ //shuju:JSON.stringify(res.data.data.rows) shuju: res.data.data.rows, subject: res.data.data.rows[that.data.curret - 1], nums: res.data.data.rows.length }) } }) }, checkboxChange(e) { this.setData({ userSelect: e.detail.value }) }, submit() { wx.setStorageSync("leng1", this.data.shuju.length) //1.获取用户选项，并判空 let userSelect = this.data.userSelect; if (!userSelect || userSelect < 1) { wx.showToast({ icon: "none", title: "您还没有选择答案！", }) return } //随机数答题 var random = Math.floor(Math.random() * 10); this.setData({ suiji: random }) // console.log("出现的随机数",this.data.suiji) //2.如果用户有选择就更新进度条 let curt = this.data.curret; //2 //进度条 this.setData({ percent: (curt / this.data.shuju.length * 100).toFixed(2), }) //判断所选择的答案是否在正确答案中 let daan = this.data.subject.answer_choices; let a = [] daan.forEach(item => { a.push(item.content) }) console.log("正确答案是：", a) let leng = daan.length; console.log("多选题选择了", userSelect) //选择答案的个数和长度 let daan2 = userSelect; let leng2 = daan2.length; //3.判断用户是否答对 if(a.sort().toString()==daan2.sort().toString()){ let score = this.data.score+1; // console.log("答对了：",score) this.setData({ score:score }) }else{ //4.记录用户答错的题，帮用户查漏补缺 let subjectNon = this.data.subject; subjectNon.userSelect = userSelect; //将用户答错的题放到常量erroroption erroroption.push(subjectNon) // console.log("错题",erroroption) } //判断是否答题结束4 if(curt+1>this.data.shuju.length){ //5.在用户答完最后一道题的时候对用户进行打分 let userScore = this.data.score; let scoreFen = this.data.scoreFen; this.setData({ zongfen:scoreFen*userScore, totalerrow:erroroption.length }) wx.showToast({ icon:"none", title: "已经是最后一题了！", }) this.setData({ btndis:true }) //数据缓存 wx.setStorageSync("errodat", erroroption) //数据读取 let name = wx.getStorageSync("xingming"); let phone = wx.getStorageSync("phone"); let daui = wx.getStorageSync("daui"); let chang = this.data.shuju.length; var that = this if(daui/chang*100>=80){ let num = this.data.jifen let jifen = num+4 console.log("加4分") console.log(jifen) that.setData({ jifen:jifen }) }else if(daui/chang*100>=60){ let num = this.data.jifen console.log("加2分") let jifen = num+2 console.log(jifen) that.setData({ jifen:jifen }) }else if(daui/chang*100<60){ let num = this.data.jifen console.log("不加分") let jifen = num+1 console.log(jifen) that.setData({ jifen:jifen }) } let integral = this.data.jifen; wx.setStorageSync("integral", integral) console.log(name) console.log(phone) console.log(integral) //向后端提交数据 wx.request({ url: "url", header:{ "Content-Type":"application/x-www-form-urlencoded" }, method:"POST", data:{name:name,phone:phone,integral:integral}, success:function(res){ console.log(res.data) if (res.data.status == 0) { wx.showToast({ title: "提交失败！！！", icon: "loading", duration: 1500 }) }else{ wx.showToast({ title: "提交成功！！！",//这里打印出登录成功 icon: "success", duration: 1000 }) } }, fail:function(){ } }) return } // 数据佳佳 if (this.data.curret < this.data.shuju.length) { this.setData({ userSelect:"", subject: this.data.shuju[this.data.suiji], curret: ++this.data.curret, isSelect:false }) console.log("题目：",this.data.subject) return } }, //自定义弹框 powerDrawer: function (e) { var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu) }, util: function(currentStatu){ /* 动画部分 */ // 第1步：创建动画实例 var animation = wx.createAnimation({ duration: 200, //动画时长 timingFunction: "linear", //线性 delay: 0 //0则不延迟 }); // 第2步：这个动画实例赋给当前的动画实例 this.animation = animation; // 第3步：执行第一组动画 animation.opacity(0).rotateX(-100).step(); // 第4步：导出动画对象赋给数据对象储存 this.setData({ animationData: animation.export() }) // 第5步：设置定时器到指定时候后，执行第二组动画 setTimeout(function () { // 执行第二组动画 animation.opacity(1).rotateX(0).step(); // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象 this.setData({ animationData: animation }) //关闭 if (currentStatu == "close") { this.setData( { showModalStatus: false } ); } }.bind(this), 200) // 显示 if (currentStatu == "open") { this.setData( { showModalStatus: true } ); } }, //查看成绩 tiku(){ wx.switchTab({ url: "/pages/school/school", }) }, //6.查看错题 cuoti(){ //1.跳页之前存数据 //2.用全局变量的，将数据传给全局 //app.globalData.globalerror = erroroption; //如果页面有tabbar,跳转就要改成 wx.switchTab()跳转 wx.navigateTo({ url: "/pages/errowoption/errowoption", }) }})css
.topnav{ width: 100%; height: 160rpx; z-index: 9999; box-sizing: border-box; overflow: hidden; white-space: nowrap; position: fixed; top: 0;}.ioioi{ width: 100%; height: 160rpx;}.topnav>image{ width: 100%; height: 162rpx; position: absolute; z-index: -333;}.back{ width: 60rpx; height: 60rpx; position: absolute; left: 10rpx; top: 80rpx;}.back>image{ width: 60rpx; height: 60rpx;}.sousuo{ width: 60%; height: 64rpx; position: absolute; bottom: 20rpx; border-radius: 50rpx; color: white; font-size: 30rpx; text-align: left; line-height: 64rpx; left: 96rpx;}/* asfasfasf */page{ background-color: white;}.heat{ width: 100%; height: 140rpx;}.heatengo{ margin: auto; width: 612rpx; height: 40rpx; background-color: #ccc; border-radius: 10rpx; margin-top: 60rpx; display: flex; justify-content: space-around; border-radius: 20rpx;}.heatengo>text{ font-size: 26rpx;}.contd{ height: 400rpx; width: 100%; position: relative;}.jingdutiao{ width: 100%; height: 30rpx;}.jingdu{ color:#29aeef;}.oik{ z-index: 999; position: absolute; width: 75%; height:260rpx ; margin-left:75rpx ; margin-top: 85rpx;}.tixing{ width: 100%; height: 60rpx; text-align: center; color: black;}.bottdi{ width: 80%; height: auto; margin: auto;}.page-section-title{ text-align: left; width: 100%; height: auto;}.timu{ width: 90%; height: 70rpx; background-color: #ccc; border-radius: 20rpx; margin-top: 30rpx; line-height: 70rpx; padding: 0 25rpx; } .bottdi>button{ margin-top: 60rpx; background-color: #29aeef; color: white; width: 300rpx; border-radius: 20rpx; } .page-section{ width: 100%; height: 40rpx; display: flex; justify-content: space-around; } .cuowudemo{ width: 100%; height: 160rpx; display: flex; justify-content: space-around; margin-top: 30rpx; } /*button*/.btn { width: 75%; padding: 20rpx 0; border-radius: 20rpx; text-align: center; margin: 40rpx 10%; background: #006ead; color: #fff; } /*mask*/ .drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.75; overflow: hidden; } /*content*/ .drawer_box { width: 650rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 1001; background: #FAFAFA; margin: -150px 50rpx 0 50rpx; border-radius: 15px; } .drawer_title{ padding:15px; font: 20px "microsoft yahei"; text-align: center; font-size: 30rpx; } .drawer_content { height: 210px; overflow-y: scroll; /*超出父盒子高度可滚动*/ } .btn_ok{ padding: 10px; font: 30rpx "microsoft yahei"; text-align: center; border-top: 1px solid #E8E8EA; color: #3CC51F; } .top{ padding-top:8px; } .bottom { padding-bottom:8px; } .title { height: 30px; line-height: 30px; width: 160rpx; text-align: center; display: inline-block; font: 300 28rpx/30px "microsoft yahei"; } .input_base { border: 2rpx solid #ccc; padding-left: 10rpx; margin-right: 50rpx; } .input_h30{ height: 30px; line-height: 30px; } .input_h60{ height: 60px; } .input_view{ font: 12px "microsoft yahei"; background: #fff; color:#000; line-height: 30px; } input { font: 12px "microsoft yahei"; background: #fff; color:#000 ; } radio{ margin-right: 20px; } .grid { display: -webkit-box; display: box; } .col-0 {-webkit-box-flex:0;box-flex:0;} .col-1 {-webkit-box-flex:1;box-flex:1;} .fl { float: left;} .fr { float: right;} .jieguo{ width: 580rpx; height: 60rpx; display: flex; justify-content: space-around; background-color: #29aeef; line-height: 60rpx; border-radius: 20rpx; color: white; margin: auto; margin-top: 18rpx; } .jieguodibu{ width: 100%; height: 240rpx; display: flex; } .code{ width: 520rpx; height: 240; margin: auto; display: flex; justify-content: space-between;}.code>view{ width: 230rpx; height: 200; position: relative;}.code>view>text{ position: absolute; font-size: 24rpx; bottom: 14rpx; left: 50rpx; color: white;}.code>view>image{ width: 192rpx; height: 189rpx;} 
关于我们 加入我们 广告服务 网站地图
All Rights Reserved, Copyright 2004-2020 www.830036.com
如有意见请与我们联系 邮箱：435 227 67@qq.com
营业执照公示信息