微信小程序實現答題功能
本文實例為大傢分享瞭微信小程序實現答題功能的具體代碼，供大傢參考，具體內容如下
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屬性指定需要執行的動畫-->
<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: '', //題庫題目的總數量
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;
}
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。