微信小程序编写一个试卷demo

最近写项目需要有一个试卷功能，作为初学者一头雾水，网上找了些资料。非常感谢

才华横溢吴道简 大佬写的答题小程序。参考了大佬的文章，自己做了一点点修改。欢迎大佬指点。原文链接：http://t.csdn.cn/15v4L

首先新建一个文件夹 exam，之后添加数据，假设后台传过来的数据是这样的

Page({

  data: {
    answer:{
      total:5, //总共题目数量
      subject:[    //数组用来存放所有的题目
        {
          title:'题目一',
          options:[{
            number:'A',
            describe:'选项A'
          },{
            number:'B',
            describe:'选项B'
          },{
            number:'C',
            describe:'选项C'
          },{
            number:'D',
            describe:'选项D'
          },]
        }, {
          title:'题目二',
          options:[{
            number:'A',
            describe:'选项A'
          },{
            number:'B',
            describe:'选项B'
          },{
            number:'C',
            describe:'选项C'
          },{
            number:'D',
            describe:'选项D'
          },]
        }, {
          title:'题目三',
          options:[{
            number:'A',
            describe:'选项A'
          },{
            number:'B',
            describe:'选项B'
          },{
            number:'C',
            describe:'选项C'
          },{
            number:'D',
            describe:'选项D'
          },]
        },
      ]    
    }
  },

  onLoad(options) {

  },
})

之后我们需要在页面上渲染，再添加上一题下一题按钮进行题目切换。题目的切换需要添加一个变量，用于记录当前是第几页。通过点击按钮改变index的值，来改变数组subject的下标。

按钮里面通过index的值来控制按钮的显示第一题时，上一题按钮无法点击，最后一页显示交卷按钮。

data里面新增数据

 index:0, //用于记录当前是第几页

.wxml页面

<view >
  <view>{{answer.subject[index].title}}
  </view>
  <view class="options">
    <view>{{answer.subject[index].options[0].number}}</view>
    <view>{{answer.subject[index].options[0].describe}}</view>
  </view>
  <view>
    <view>{{answer.subject[index].options[1].number}}</view>
    <view> {{answer.subject[index].options[1].describe}}</view>
  </view>
  <view>
    <view> {{answer.subject[index].options[2].number}} </view>
    <view>{{answer.subject[index].options[2].describe}} </view>
  </view>
  <view>
    <view> {{answer.subject[index].options[3].number}} </view>
    <view> {{answer.subject[index].options[3].describe}} </view>
  </view>
</view>
<view>
  <button bindtap="last" wx:if='{{index == 0}}' disabled="false">上一题</button>
  <button bindtap="last" wx:else>上一题</button>
</view>
<view>
  <button wx:if="{{index==answer.subject.length-1}}" class="top-sure">交卷</button>
  <button bindtap="next" wx:else>下一题</button>
</view>

两个按钮的点击事件

 next(){          //上一题
    if(this.data.index<this.data.answer.subject.length-1){
      this.setData({
        index:this.data.index+1
      })
    }
  },
  last(){       //下一题
    if(this.data.index>0){
      this.setData({
        index:this.data.index-1
      })
    }
  }

当前页面显示效果，按钮可以实现题目切换

 交卷按钮的点击事件，会有弹窗提示，把答案发送过去之后会跳转页面。

ok: function () {          //提交试卷
    wx.showModal({
      title: '提示',
      content: '确定要提交试卷吗？',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
            // request.sendAnser(this,optionsid,function(res){
            // wx.reLaunch({
           // })
       wx.hideLoading()
       //)}
        } else {
          console.log('用户点击取消')
        }
      }
    })
  },

接下里需要做的就是选项的点击效果。点击之后选项颜色改变，页面保留被选择的选项。需要一个数组记录每一页被点击的选项。给每一个选项绑定一个不同的id。style="background-color: {{bcA}};"这里通过变量控制选项显示效果。 bindtap="btnOpClick"绑定点击事件。

大概就是这样，放在选项的外层view里面。

 <view class="options" id="0" bindtap="btnOpClick" style="background-color: {{bcA}};" data-options="{{options[0]}}">
    <view >{{answer.subject[index].options[0].number}}</view>
    <view>{{answer.subject[index].options[0].describe}}</view>
  </view>

data里面的数据

 optionsid:[],//用于记录每一页的选项
    bc_right: '#98FB98',   //控制选项的颜色
    bcA: null,
    bcB: null,
    bcC: null,
    bcD: null,

选项点击事件，当一个选项被选中后其余选项颜色为null。这里我定义了一个函数用来改变选项的颜色。因为这个功能需要多次使用，所以这里把他单独写成一个函数。

btnOpClick: function(e){        //点击选项
    var select=parseInt(e.currentTarget.id )  //通过e.currentTarget.id获取到选项的id
    this.change(select)
  },
  
  change(e){          //控制选项的点击效果
    var index=this.data.index
    if (e == 0) {
      this.setData({ 
        bcA: this.data.bc_right ,
        bcB: null,
        bcC: null,
        bcD: null,
      });
      this.data.optionsid[index] = 0
  }
  else if (e == 1) {
      this.setData({ 
        bcB: this.data.bc_right ,
        bcA: null,
        bcC: null,
        bcD: null,
      });
      this.data.optionsid[index] = 1
  }
  else if (e == 2) {
      this.setData({ 
        bcC: this.data.bc_right ,
        bcA: null,
        bcB: null,
        bcD: null,
      });
      this.data.optionsid[index] = 2
  }
  else if (e == 3) {
      this.setData({ 
        bcD: this.data.bc_right ,
        bcA: null,
        bcB: null,
        bcC: null,
      });
      this.data.optionsid[index] =3
  }
  },

之后这里会有个问题，当一个选项被选中之后，其余题目的选项也相当于被选中，这里需要在上一题下一题的点击事件中给所有选项的颜色变量赋null，并通过optionsid这一数组记录的数据实现选项颜色的变化。

next(){          //上一题
    if(this.data.index<this.data.answer.subject.length-1){
      this.setData({
        index:this.data.index+1,
        bcA: null,
        bcB: null,
        bcC: null,
        bcD: null,
      })
      this.change(this.data.optionsid[this.data.index])
    }
  },
  last(){       //下一题
    if(this.data.index>0){
      this.setData({
        index:this.data.index-1,
        bcA: null,
        bcB: null,
        bcC: null,
        bcD: null,
      })
      this.change(this.data.optionsid[this.data.index])
    }
  }

还有一点就是微信小程序里面想要修改button的样式需要在button标签里面进行修改。

之后我们还可以加一个倒计时，时间结束自动提交试卷，这里需要后台给我们一个数据。倒计时功能这里用到延时函数。这里可能有些绕，首先定义一个setTimeout函数。之后在这个函数里面写一个延时函数setTimeout，延时函数里面再调用setTimeout。延时函数设置的是一秒之后执行。这样通过不断的调用自己，每秒钟执行一次。

setTimeout(){        //时间倒计时
    setTimeout(()=>{
     this.setTimeout();
    }, 1000)
  },

之后我假定了一个数据timeLong用来表示考试时长。parseInt（）用来获取整数，else里面的this。admit()方法是时间到了之后自动提交答案。

 setTimeout(){        //时间倒计时
    setTimeout(()=>{
      if(this.data.answer.timeLong>=0){
      var time=this.data.answer.timeLong
      var hour=parseInt(time/3600);
      var min=parseInt((time%3600)/60)
      var sec=(time%3600)%60
      this.data.answer.timeLong=this.data.answer.timeLong-1   //每执行一次时间减一

      if(hour<1){
        this.setData({
          time:min+':'+sec,
        })
           if(min<1){
            this.setData({
              time:''+sec,
            })
           }
      }else{
        this.setData({
          time:hour+':'+min+':'+sec,
        })
      }
      this.setTimeout();
    }else{
        this.admit()
    }
    }, 1000)
  },

自动提交答案，wx.showLoading这是微信小程序提供的弹窗方法。这个时候可以在发送请求成功之后调用wx.hideLoading()来隐藏弹窗。我这里是在外部写了一个封装好了发送请求的方法，然后导入进来直接调用的。

admit(){          //考试结束自动提交试卷
    wx.showLoading({
      title: '提交中...',
      icon: 'loading',
    })
    // request.sendAnser(this,optionsid,function(res){
      // wx.reLaunch({
      //  
      // })
       wx.hideLoading()
  //)}
  },

动态修改标题，在页面加载时就显示，需要在onLoad函数中进行调用。之后在上一题下一题点击事件中，也要调用这个函数，将index的值传入进来。

setTitle:function(id){   //动态修改标题
    var length=this.data.answer.subject.length;  //获取总共的题目数量
    var id=id+1;              
    let a=id+'/'+length
    wx.setNavigationBarTitle({
      title: a
   })
  },

接下来我把全部的代码附上

js文件的

Page({

  data: {
    index:0, //用于记录当前是第几页
    optionsid:[],//用于记录每一页的选项
    time:null,
    bc_right: '#98FB98',   //控制选项的颜色
    bcA: null,
    bcB: null,
    bcC: null,
    bcD: null,
    answer:{
      timeLong:18000, //考试
      subject:[    //数组用来存放所有的题目
        {
          title:'题目一',
          options:[{
            number:'A',
            describe:'选项A'
          },{
            number:'B',
            describe:'选项B'
          },{
            number:'C',
            describe:'选项C'
          },{
            number:'D',
            describe:'选项D'
          },]
        }, {
          title:'题目二',
          options:[{
            number:'A',
            describe:'选项A'
          },{
            number:'B',
            describe:'选项B'
          },{
            number:'C',
            describe:'选项C'
          },{
            number:'D',
            describe:'选项D'
          },]
        }, {
          title:'题目三',
          options:[{
            number:'A',
            describe:'选项A'
          },{
            number:'B',
            describe:'选项B'
          },{
            number:'C',
            describe:'选项C'
          },{
            number:'D',
            describe:'选项D'
          },]
        },
      ]    
    }
  },

  onLoad(options) {
   this.setTitle(this.data.index)
   this.setTimeout()
  },
 
  btnOpClick: function(e){        //点击选项
    var select=parseInt(e.currentTarget.id )
    this.change(select)
  },
  
  change(e){          //控制选项的点击效果
    var index=this.data.index
    if (e == 0) {
      this.setData({ 
        bcA: this.data.bc_right ,
        bcB: null,
        bcC: null,
        bcD: null,
      });
      this.data.optionsid[index] = 0
  }
  else if (e == 1) {
      this.setData({ 
        bcB: this.data.bc_right ,
        bcA: null,
        bcC: null,
        bcD: null,
      });
      this.data.optionsid[index] = 1
  }
  else if (e == 2) {
      this.setData({ 
        bcC: this.data.bc_right ,
        bcA: null,
        bcB: null,
        bcD: null,
      });
      this.data.optionsid[index] = 2
  }
  else if (e == 3) {
      this.setData({ 
        bcD: this.data.bc_right ,
        bcA: null,
        bcB: null,
        bcC: null,
      });
      this.data.optionsid[index] =3
  }
  },
  next(){          //上一题
    if(this.data.index<this.data.answer.subject.length-1){
      this.setData({
        index:this.data.index+1,
        bcA: null,
        bcB: null,
        bcC: null,
        bcD: null,
      })
      this.change(this.data.optionsid[this.data.index])
      this.setTitle(this.data.index)
    }
  },
  last(){       //下一题
    if(this.data.index>0){
      this.setData({
        index:this.data.index-1,
        bcA: null,
        bcB: null,
        bcC: null,
        bcD: null,
      })
      this.change(this.data.optionsid[this.data.index])
      this.setTitle(this.data.index)
    }
  },
  ok: function () {          //提交试卷
    wx.showModal({
      title: '提示',
      content: '确定要提交试卷吗？',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
            // request.sendAnser(this,optionsid,function(res){
            // wx.reLaunch({
           // })
       wx.hideLoading()
       //)}
        } else {
          console.log('用户点击取消')
        }
      }
    })
  },
  setTimeout(){        //时间倒计时
    setTimeout(()=>{
      if(this.data.answer.timeLong>=0){
      var time=this.data.answer.timeLong
      var hour=parseInt(time/3600);
      var min=parseInt((time%3600)/60)
      var sec=(time%3600)%60
      this.data.answer.timeLong=this.data.answer.timeLong-1   //每执行一次时间减一

      if(hour<1){
        this.setData({
          time:min+':'+sec,
        })
           if(min<1){
            this.setData({
              time:''+sec,
            })
           }
      }else{
        this.setData({
          time:hour+':'+min+':'+sec,
        })
      }
      this.setTimeout();
    }else{
        this.admit()
    }
    }, 1000)
  },
  admit(){          //考试结束自动提交试卷
    wx.showLoading({
      title: '提交中...',
      icon: 'loading',
    })
    // request.sendAnser(this,optionsid,function(res){
      // wx.reLaunch({
      //  
      // })
       wx.hideLoading()
  //)}
  },
  setTitle:function(id){   //动态修改标题
    var length=this.data.answer.subject.length;
    var id=id+1;
    let a=id+'/'+length
    wx.setNavigationBarTitle({
      title: a
   })
  },

})

wxml页面的

<view>{{time}}</view>
<view>
  <view>{{answer.subject[index].title}}
  </view>
  <view class="options" id="0" bindtap="btnOpClick" style="background-color: {{bcA}};">
    <view>{{answer.subject[index].options[0].number}}</view>
    <view>{{answer.subject[index].options[0].describe}}</view>
  </view>
  <view class="options" id="1" bindtap="btnOpClick" style="background-color: {{bcB}};">
    <view>{{answer.subject[index].options[1].number}}</view>
    <view> {{answer.subject[index].options[1].describe}}</view>
  </view>
  <view class="options" id="2" bindtap="btnOpClick" style="background-color: {{bcC}};">
    <view> {{answer.subject[index].options[2].number}} </view>
    <view>{{answer.subject[index].options[2].describe}} </view>
  </view>
  <view class="options" id="3" bindtap="btnOpClick" style="background-color: {{bcD}};">
    <view> {{answer.subject[index].options[3].number}} </view>
    <view> {{answer.subject[index].options[3].describe}} </view>
  </view>
</view>
<view>
  <button bindtap="last" wx:if='{{index == 0}}' disabled="false">上一题</button>
  <button bindtap="last" wx:else>上一题</button>
</view>
<view>
  <button wx:if="{{index==answer.subject.length-1}}" class="top-sure"  bindtap="ok">交卷</button>
  <button bindtap="next" wx:else>下一题</button>
</view>

如有疑惑请在评论区留言，欢迎大家来讨论交流。