欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序實現(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 大數(shù)據(jù)相加的問題

    JavaScript 大數(shù)據(jù)相加的問題

    寫一個函數(shù)處理大數(shù)據(jù)的相加問題,所謂的大數(shù)據(jù)是指超出了整型,長整型之類的常規(guī)數(shù)據(jù)類型表示范圍的數(shù)據(jù)。實現(xiàn)語言不限。
    2011-08-08
  • uniapp小程序項目獲取位置經緯度信息

    uniapp小程序項目獲取位置經緯度信息

    在實際項目中很多時候我們需要獲取設備的位置信息,去展示給客戶,或者以位置信息為參數(shù),繼續(xù)向服務器獲取一些數(shù)據(jù),這篇文章主要介紹了uni-app如何獲取位置信息(經緯度),需要的朋友可以參考下
    2022-11-11
  • 有效提高JavaScript執(zhí)行效率的幾點知識

    有效提高JavaScript執(zhí)行效率的幾點知識

    這篇文章主要介紹了有效提高JavaScript執(zhí)行效率的幾點知識,本文從JavaScript函數(shù)、JavaScript作用域、JavaScript字符串、JavaScript DOM操作、DOM重繪、DOM訪問、DOM遍歷等方面講解了提高JavaScript執(zhí)行效率的小技巧,需要的朋友可以參考下
    2015-01-01
  • javascript 調用其他頁面的js函數(shù)或變量的腳本

    javascript 調用其他頁面的js函數(shù)或變量的腳本

    web開發(fā)的時候,有時候需要使用其他頁面上寫好的javasript函數(shù)、變量。如彈出窗口需要使用父窗口中的函數(shù),框架1需要使用框架2中的函數(shù)。
    2008-05-05
  • filemanage功能中用到的common.js

    filemanage功能中用到的common.js

    filemanage功能中用到的common.js...
    2007-04-04
  • 詳解js中class的多種函數(shù)封裝方法

    詳解js中class的多種函數(shù)封裝方法

    這篇文章主要介紹了詳解js中class的多種函數(shù)封裝方法,介紹了不同函數(shù)的封裝方法,感興趣的朋友可以參考一下
    2016-01-01
  • JS監(jiān)聽瀏覽器關閉、刷新及切換標簽頁觸發(fā)事件代碼示例

    JS監(jiān)聽瀏覽器關閉、刷新及切換標簽頁觸發(fā)事件代碼示例

    瀏覽器是客戶端,客戶端的操作服務器是監(jiān)聽不到的,所以可以用js來監(jiān)聽,js代碼監(jiān)聽瀏覽器關閉或者刷新,這篇文章主要給大家介紹了關于JS監(jiān)聽瀏覽器關閉、刷新及切換標簽頁觸發(fā)事件的相關資料,需要的朋友可以參考下
    2023-11-11
  • 詳解JavaScript兩個實用的圖片懶加載優(yōu)化方法

    詳解JavaScript兩個實用的圖片懶加載優(yōu)化方法

    本文主要介紹了JavaScript兩個實用的圖片懶加載優(yōu)化方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • JS按條件 serialize() 對應標簽的使用方法

    JS按條件 serialize() 對應標簽的使用方法

    serialize()方法通過序列化表單值,創(chuàng)建標準的URL編碼文本字符串,它的操作對象是代表表單元素集合的jQuery 對象。下面通過本文給大家介紹JS按條件 serialize() 對應標簽的相關知識,感興趣的的朋友一起看看吧
    2017-07-07
  • JS中超越現(xiàn)實的匿名函數(shù)用法實例分析

    JS中超越現(xiàn)實的匿名函數(shù)用法實例分析

    這篇文章主要介紹了JS中超越現(xiàn)實的匿名函數(shù)用法,結合實例形式分析了javascript匿名函數(shù)定義、用法及相關操作注意事項,需要的朋友可以參考下
    2019-06-06

最新評論