微信小程序實現(xiàn)答題功能
更新時間:2022年06月30日 08:51:45 作者:kleinBlue.
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)答題功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)答題功能的具體代碼,供大家參考,具體內容如下
view
<view class="topnav"> ? <image src="../../image/top.jpg"></image> ? <view class="back" bindtap="back"><image src="../../image/left.png"></image></view> ? <view class="sousuo"> ? ?科普答題 ? </view> </view> <view class="ioioi"></view> <!-- 問答 --> <!--pages/wenda/wenda.wxml-->? <view class="heat"> ? <view class="heatengo"> ? ? <text>共計{{nums}}道題</text> ? ? <text>第{{curret}}道題</text> ? ? <text>每道題{{scoreFen}}分,總計:{{nums*scoreFen}}分</text> ? </view> </view> <view class="jingdutiao">? ? ? <progress class="jingdu" font-size="24rpx" ? percent="{{percent}}" ?color="#29aeef" show-info stroke-width="8" border-radius="5" ></progress> ? </view> <view class="contd"> ? <!-- <image src="../../image/cont.png"></image> --> ? <view class="oik"> ? ? ?<view class="tixing">{{subject.type}}</view> <view class="heads"> <view class="page-section-title">{{curret}}.{{subject.title}}</view> <view class="page-section" wx:if="{{zongfen>-1}}"> ? <!-- <text> 用戶得分:{{zongfen}}分</text> ? <text>總計答對題:{{score}}道題</text> --> </view> </view>? ? </view> </view> <view class="bottdi"> ? <checkbox-group class="raadl" bindchange="checkboxChange" > ? ? ? ? ? <view class="timu" wx:for="{{subject['answer-options']}}" wx:key="index"> ? ? ? ? ? ? <checkbox value="{{item.code}}" checked="{{isSelect}}" disabled="{{isdisable}}" /> ? ? ? ? ? ? ? <text>{{item.code}}.{{item.content}}</text> ? ? ? ? ? </view> ? ? ? </checkbox-group> ? ? ? ? <button ?bindtap="submit" disabled="{{btndis}}">提交答案</button> </view> <view class="cuowudemo" wx:if="{{zongfen>-1}}"> <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">查看結果</view> <!--mask--> <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view> <!--content--> <!--使用animation屬性指定需要執(zhí)行的動畫--> <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> ?<!--drawer content--> ?<view class="drawer_title">答題結果</view> ?<view class="drawer_content"> ? ?<view class="jieguo"> ? ? <text>總計:{{nums}}道題</text>? ? ? <text>總分:{{nums*scoreFen}}分</text> ? ? <text></text> ? </view> ? <view class="jieguo">? ? ? ?<text> 得分:{{zongfen}}分</text> ? ? ? <text>總計答對題:{{score}}道題</text>? ? </view> ? <view class="jieguodibu"> ? ? <view class="code">? ? ? ? ?<view><image bindtap="tiku" src="../../image/moku1.png"></image> ? ? ? ?<text>合格率</text> ? ? ? </view> ? ? ? ?<view ><image bindtap="cuoti" src="../../image/moku2.png"></image> ? ? ? ?<text>查看錯題</text> ? ? ? </view> ? ? </view> ? </view> ?</view> ?<view class="btn_ok" bindtap="powerDrawer" data-statu="close">取消</view> </view> </view>
js
// pages/index2/index2.js const app = getApp() //打錯的題目放到erroroption let erroroption=[] Page({ ? data: { ? ? shuju: [], ? ? curret: 1, //第幾題 ? ? nums: '', //題庫題目的總數(shù)量 ? ? isSelect: false,? ? ? subject: null, ? ? scoreFen: 2, //定義每道單選題的分值 ? ? percent: 0, //進度條數(shù)量計算 ? ? userSelect: '', //用戶選擇的題目個數(shù) ? ? score: 0, //用戶答對的題目數(shù)量 ? ? curt: '', //如果用戶有選擇就更新進度條 ? ? zongfen: -1, //用戶的總分 ? ? btndis: false, //最后一題checked停止 ? ? totalerrow: 0 ,//用戶答錯題的個數(shù) ? ? 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 ? ? } ? ?//隨機數(shù)答題 ? ? var random = Math.floor(Math.random() * 10); ? ? this.setData({ ? ? ? suiji: random ? ? }) ? // ?console.log("出現(xiàn)的隨機數(shù)",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) ? ? //選擇答案的個數(shù)和長度 ? ? 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 ? ? ? }) ? ? ? ?//數(shù)據(jù)緩存 ? ? ? ?wx.setStorageSync('errodat', erroroption) ? ? ? ? ?//數(shù)據(jù)讀取 ? ? ? ?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) ? ? ? ?//向后端提交數(shù)據(jù) ? ? ? ?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 ? } ? // ?數(shù)據(jù)佳佳 ? 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步:創(chuàng)建動畫實例 ? ? var animation = wx.createAnimation({ ? ? ?duration: 200, //動畫時長 ? ? ?timingFunction: "linear", //線性 ? ? ?delay: 0 //0則不延遲 ? ? }); ? ? ? // 第2步:這個動畫實例賦給當前的動畫實例 ? ? this.animation = animation; ? ? // 第3步:執(zhí)行第一組動畫 ? ? animation.opacity(0).rotateX(-100).step(); ? ? // 第4步:導出動畫對象賦給數(shù)據(jù)對象儲存 ? ? this.setData({ ? ? ?animationData: animation.export() ? ? }) ? ? // 第5步:設置定時器到指定時候后,執(zhí)行第二組動畫 ? ? setTimeout(function () { ? ? ?// 執(zhí)行第二組動畫 ? ? ?animation.opacity(1).rotateX(0).step(); ? ? ?// 給數(shù)據(jù)對象儲存的第一組動畫,更替為執(zhí)行完第二組動畫的動畫對象 ? ? ?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.跳頁之前存數(shù)據(jù) ? ?? ? ? ? //2.用全局變量的,將數(shù)據(jù)傳給全局 ? ? ? //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; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
javascript 調用其他頁面的js函數(shù)或變量的腳本
web開發(fā)的時候,有時候需要使用其他頁面上寫好的javasript函數(shù)、變量。如彈出窗口需要使用父窗口中的函數(shù),框架1需要使用框架2中的函數(shù)。2008-05-05JS監(jiān)聽瀏覽器關閉、刷新及切換標簽頁觸發(fā)事件代碼示例
瀏覽器是客戶端,客戶端的操作服務器是監(jiān)聽不到的,所以可以用js來監(jiān)聽,js代碼監(jiān)聽瀏覽器關閉或者刷新,這篇文章主要給大家介紹了關于JS監(jiān)聽瀏覽器關閉、刷新及切換標簽頁觸發(fā)事件的相關資料,需要的朋友可以參考下2023-11-11詳解JavaScript兩個實用的圖片懶加載優(yōu)化方法
本文主要介紹了JavaScript兩個實用的圖片懶加載優(yōu)化方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03