微信小程序 多選功能

<!--hotblood_gongkao/pages/answer/answer.wxml-->
<!-- content -->
<view class='answer-list'>
    <view class='answer-child'>
        <text class='answer-title'><text style='margin-right:28rpx;'>{{num + 1}}/{{quesyion.length}}</text>{{question[num][0]}}</text>
        <view class='answer-options'>
            <view class="options {{selectIndex[0].sureid?'select':''}}" data-index='{{idx}}1' data-text='A' bindtap="{{whether?'':'selectAnswer'}}">
                <image class="dui {{selectIndex[0].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
                <text><text style='margin-right:36rpx;'> A </text>{{question[num][1]}}</text>
            </view>
            <view class="options {{selectIndex[1].sureid?'select':''}}" data-index='{{idx}}2' data-text='B' bindtap="{{whether?'':'selectAnswer'}}">
                <image class="dui {{selectIndex[1].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
                <text><text style='margin-right:36rpx;'> B </text>{{question[num][2]}}</text>
            </view>
            <view class="options {{selectIndex[2].sureid?'select':''}}" data-index='{{idx}}3' data-text='C' bindtap="{{whether?'':'selectAnswer'}}">
                <image class="dui {{selectIndex[2].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
                <text><text style='margin-right:36rpx;'> C </text>{{question[num][3]}}</text>
            </view>
            <view class="options {{selectIndex[3].sureid?'select':''}}" data-index='{{idx}}4' data-text='D' bindtap="{{whether?'':'selectAnswer'}}">
                <image class="dui {{selectIndex[3].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
                <text><text style='margin-right:36rpx;'> D </text>{{question[num][4]}}</text>
            </view>
        </view>
    </view>
    <view class="answer {{isWan?'isShow':'isHide'}}">
        <text>正確答案{{question[num][3]}}</text>
    </view>
    <view class="subBtn {{isque?'isShow':'isHide'}}" bindtap='confirm'>
        <text>確定</text>
    </view>
    <view class="subBtn {{isOne?'isHide':'isShow'}}" bindtap='next'>
        <text>{{con}}</text>
    </view>
    <view class="subBtn {{iswancheng?'isShow':'isHide'}}" bindtap='submit'>
        <text>提交答卷</text>
    </view>
</view>

/* hotblood_gongkao/pages/answer/answer.wxss */

/* title */
.titleImg{
    width: 734rpx;
    height: 45rpx;
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    left: 50%;
    background: #fbfbfb;
    margin-left: -367rpx;
    z-index: 10;
}
.titleImg image{
    height: 35rpx;
    width: 100%;
}
/* end */
page{
    height: 100%;
    width: 100%;
    background: #fbfbfb;
}
.isHide{
    display: none;
}
.isShow{
    display: block;
}
.title{
    font-size: 34rpx;
    color: #a6a6a6;
    margin: 69rpx 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.answer-list{

}
.answer-child{
    width: 672rpx;
    margin: 0 auto;
    background: #fff;
    border-radius: 20rpx;
    padding-top:34rpx; 
    margin-bottom: 20rpx;
    margin-top: 72rpx;
    box-sizing: border-box;
    box-shadow: 0 0 4rpx #dcdcdc;
}
.answer-title{
    font-size: 32rpx;
    margin: 0 0 0 52rpx;
}
.answer-options{
    display: flex;
    flex-direction: column;
    width: 642rpx;
    margin: 32rpx auto 0 auto;
}
.options{
    width: 100%;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 32rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
    margin-bottom: 4rpx;
    position: relative;
    border: 2rpx solid #fff;

}
.dui{
    position: absolute;
    height: 41rpx;
    width: 59rpx;
    top:50%;
    margin-top: -20rpx;
    right: 16rpx;
    display: none;
}
.dui2{
    display: block!important;
}
.select{
    border: 2rpx solid #4ab07e;
    box-sizing: border-box;
    
}
.submit{
    height: 120rpx;
    width: 100%;
    background: #4ab07e;
    color: #fff;
    font-size: 34rpx;
    line-height: 120rpx;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
}
/* 正確答案 */
.answer{
    width: 100%;
    text-align: center;
    color: #ff122f;
    font-size: 34rpx;
    font-weight: bold;
    margin-top: 64rpx;
}

/* end */
/* 下一題 */
.subBtn{
    width: 304rpx;
    height: 86rpx;
    background: #4ab07e;
    color: #fff;
    font-size: 34rpx;
    text-align: center;
    line-height: 86rpx;
    border-radius: 20rpx;
    margin: 190rpx auto 0 auto;
}
// hotblood_gongkao/pages/answer/answer.js
const app = getApp();
Page({

    /**
     * 頁面的初始數據
     */
    data: {
        question: [
            ["今天是個好日子", "halou word", "java", "javascript", 'c#'],
            ["今天是個好日子", "halou word", "java", "javascript", 'c#'],
        ], //題庫
        index: 0, //選擇的索引
        wrong: [], //錯誤
        border: '',
        num: 0,
        con: '下一題',
        isOne: true,
        isWan: false,
        iswancheng: false,
        isque: false,
        whether: false,
        correct: [], //正確
        duiList: 0, //答對的個數
        cuoList: 0, //答錯的個數
        selectIndex: [{
                sureid: false
            },
            {
                sureid: false
            },
            {
                sureid: false
            },
            {
                sureid: false
            },
        ],
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function(options) {
        this.setData({

        })
    },

    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function() {

    },
    // 提交答卷
    submit: function(e) {
        console.log(this.data.duiList);
        console.log(this.data.cuoList);
        var num = this.data.num; //當前題目下標
        var question = this.data.question; //題庫
        var duiList = this.data.duiList; //答對多少題
        var cuoList = this.data.cuoList; //答錯多少題
        //獲得題目對象的長度
        var arr = Object.keys(question);
        var len = arr.length;
        if ((num + 1) == len) {
            var grade = (100 / len) * duiList;
            console.log(grade);
            wx.redirectTo({
                url: '../chengjiu/chengjiu?grade=' + grade,
            })
        }
    },
    // 確認選擇
    confirm: function() {
        var num = this.data.num;
        var question = this.data.question; //題庫
        //獲得題目對象的長度
        var arr = Object.keys(question);
        var len = arr.length;
        if ((num + 1) == len) {
            this.setData({
                iswancheng: true,
                isOne: true,
                isWan: true,
                isque: false
            })
        } else {
            this.setData({
                isOne: false,
                whether: true,
                isque: false,
                isWan: true
            })
        }

    },
    // 下一題
    next: function() {
        var num = this.data.num; //當前題目下標
        this.setData({
            num: num + 1,
            isOne: true,
            isWan: false,
            whether: false,
            index: 0
        })
    },
    // 選擇答案
    selectAnswer: function(e) {
        console.log(e);
        var index1 = e.currentTarget.dataset.index - 1; //當前點擊元素的自定義數據,這個很關鍵
        var selectIndex = this.data.selectIndex; //取到data裏的selectIndex
        selectIndex[index1].sureid = !selectIndex[index1].sureid; //點擊就賦相反的值
        console.log(selectIndex[index1])
        this.setData({
            selectIndex: selectIndex //將已改變屬性的json數組更新
        })
        console.log(this.data.selectIndex.in_array(true))
        if (selectIndex.in_array(true) == false) {
            this.setData({
                isque: false
            })
        } else {
            var question = this.data.question; //題庫
            var num = this.data.num; //當前題目下標
            var text = e.currentTarget.dataset.text; //選擇的答案
            var duiList = this.data.duiList; //答對多少題
            var cuoList = this.data.cuoList; //答錯多少題

            //獲得題目對象的長度
            var arr = Object.keys(question);
            var len = arr.length;
            //當前答題爲最後一題
            if ((num + 1) == len) {
                //判斷選擇的答案和正確答案是否一致
                if (text == question[num][3]) {
                    duiList = duiList + 1;
                    this.setData({
                        duiList: duiList,
                        isque: true
                    })
                } else {
                    cuoList = cuoList + 1;
                    this.setData({
                        cuoList: cuoList,
                        isque: true
                    })
                }
            } else {
                //判斷選擇的答案和正確答案是否一致
                if (text == question[num][3]) {
                    duiList = duiList + 1;
                    this.setData({
                        duiList: duiList,
                        isque: true
                    })
                } else {
                    cuoList = cuoList + 1;
                    this.setData({
                        cuoList: cuoList,
                        isque: true
                    })
                }
            }
        }


    },
    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function() {
        this.question();
    },
    
    /**
     * 生命週期函數--監聽頁面隱藏
     */
    onHide: function() {

    },

    /**
     * 生命週期函數--監聽頁面卸載
     */
    onUnload: function() {

    },

    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh: function() {

    },

    /**
     * 頁面上拉觸底事件的處理函數
     */
    onReachBottom: function() {

    },

    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function() {

    }
})
Array.prototype.in_array = function(element) {
    for (var i = 0; i < this.length; i++) {
        if (this[i].sureid == element) {
            return true;
        }
    }
    return false;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章