微信小程序答题功能（二）- - - 按选项答题_微信小程序答题切换

效果图如下所示

.wxml

<view class="index-top">
  <view class="{{index <= curring && curring != 0?'top-blue':'top-currin'}} {{index > 0 && curring < 2?'top-fint':'top-ping'}} {{2 == curring?'top-nux':''}} {{2 < curring?'top-name':''}}" wx:for="{{4}}" wx:key="index">
    <view class="{{index <= curring?'top-buing':'top-bloc'}}">
      <text>√</text>
      <span>{{index+1}}</span>
    </view>
  </view>
</view>
<view class="centent" wx:for="{{detail}}" wx:key="index" wx:if="{{index == number}}">
  <view class="centent-title">{{index+1}}. {{item.title}}</view>
  <radio-group class="centent-group">
    <radio class="group-radio" bindtap="radioChange" wx:for="{{item.array}}" wx:for-item="cell" data-index="{{index}}" data-id="{{item.id}}" wx:key="index" checked="{{cell.usname}}">
      <span class="radio-span" wx:if="{{index == 0}}">A.</span>
      <span class="radio-span" wx:if="{{index == 1}}">B.</span>
      <span class="radio-span" wx:if="{{index == 2}}">C.</span>
      <span class="radio-span" wx:if="{{index == 3}}">D.</span>
      <text>{{cell.name}}</text>
    </radio>
  </radio-group>
</view>
<view class="bottom" wx:if="{{number != detail.length}}">
<view bindtap="previous" wx:if="{{number != 0}}">上一步</view>
<view bindtap="nextstep" style="{{number == 0?'margin:0 30%;':''}}">下一步</view>
</view> 
<view class="submission" wx:if="{{number == detail.length}}">
  <view>
  <image src="https://profile.csdnimg.cn/0/9/6/3_qq_43764578"></image>
  </view>
  <view class="submission-center" bindtap="subsic">提交答案</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.wxss

view{
  box-sizing: border-box;
}
.index-top{
  width: 100%;
  float: left;
  overflow: hidden;
  padding: 3% 5%;
}
.top-currin,.top-blue{
  width: 25%;
  text-align: center;
  float: left;
  overflow: hidden;
  position: relative;
}
.index-top>.top-currin:nth-child(1)::before,.index-top>.top-fint:nth-child(2)::after,.index-top>.top-fint:nth-child(3)::after,.index-top>.top-nux:nth-child(3)::after{
  content: "";
  position: absolute;
  right: 0;
  top: 20rpx;
  width: calc((100% - 80rpx) / 2);
  border-top: 1px solid #ccc;
}
.index-top>.top-currin:nth-child(2)::before,.index-top>.top-currin:nth-child(3)::before,.index-top>.top-currin:nth-child(4)::after{
  content: "";
  position: absolute;
  left: 0rpx;
  top: 20rpx;
  width: calc((100% - 80rpx) / 2);
  border-top: 1px solid #ccc;
}
.top-bloc{
  width: 45rpx;
  height: 45rpx;
  margin: 0 auto;
  line-height:calc(45rpx - 2px);
  border:1px solid #666;
  border-radius:50%;
  font-size: 24rpx; 
  color: #666;
  text-align: center;
}
.index-top>.top-blue:nth-child(1)::before,.index-top>.top-ping:nth-child(2)::after,.top-name:nth-child(3)::after{
  content: "";
  position: absolute;
  right: 0;
  top: 20rpx;
  width: calc((100% - 80rpx) / 2);
  border-top: 1px solid #0081FF;
  transition: all 0.3s ease-in-out 0s;
  transform: translateY(0rpx);
}
.index-top>.top-blue:nth-child(2)::before,.index-top>.top-ping:nth-child(3)::before,.top-name:nth-child(4)::after{
  content: "";
  position: absolute;
  left: 0rpx;
  top: 20rpx;
  width: calc((100% - 80rpx) / 2);
  border-top: 1px solid #0081FF;
  transition: all 0.5s ease-in-out 0s;
  transform: translateY(0rpx);
}
.top-bloc>text{
  position: absolute;
  transform: translateY(-40rpx);
}
.top-buing>span{
  visibility: hidden;
}
.top-buing>text{
  position: absolute;
  transition: all 0.3s ease-in-out 0s;
  transform: translateY(0rpx);
}
.top-buing{
  width: 45rpx;
  height: 45rpx;
  margin: 0 auto;
  line-height:calc(45rpx - 2px);
  border:1px solid #0081FF;
  background-color: #0081FF;
  border-radius:50%;
  font-size: 24rpx; 
  color: #fff;
  transition: all 0.3s ease-in-out 0s;
  transform: translateY(0rpx);
  text-align: center;
}
.centent{
  width: 100%;
  float: left;
  padding: 5% 3% 3% 3%;
  overflow: hidden;
}
.centent-title{
  width: 100%;
  float: left;
  overflow: hidden;
  line-height: 46rpx;
  font-size: 32rpx;
}
.centent-group{
  width: 100%;
  float: left;
  overflow: hidden;
}
.group-radio{
  width: 100%;
  float: left;
  margin-top: 30rpx;
}
.radio-span{
  position: relative;
  top: 2rpx;
  margin: 0 6rpx 0 8rpx
}
.bottom{
  width: 100%;
  float: left;
  overflow: hidden;
  padding: 40rpx 0;
  text-align: center;
}
.bottom>view{
  width: 40%;
  float: left;
  margin: 0 5%;
  background-color: #e03997;
  color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 10rpx;
}
.submission{
  width: 100%;
  float: left;
  overflow: hidden;
  padding: 3%;
  text-align: center;
}
.submission>view>image{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin: 0 auto;
}
.submission-center{
  width: 40%;
  margin: 40rpx 30%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #e54d42;
  color: #fff;
  border-radius: 10rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

.js

Page({
  data: {
    curring:-1,
    detail: [
      {
        id: '1', title: 'CSDN：https://blog.csdn.net/qq_43764578 QQ:1010753897',answer:'2',array: [
          { name: '错误答案', usname: false }, { name: '正确答案', usname: false },
          { name: '错误答案', usname: false }, { name: '错误答案', usname: false },
        ]
      },
      {
        id: '2', title: 'CSDN：https://blog.csdn.net/qq_43764578 QQ:1010753897', answer: '1', array: [
          { name: '正确答案', usname: false }, { name: '错误答案', usname: false },
          { name: '错误答案', usname: false }, { name: '错误答案', usname: false },
        ]
      },
      {
        id: '3', title: 'CSDN：https://blog.csdn.net/qq_43764578 QQ:1010753897', answer: '4', array: [
          { name: '错误答案', usname: false }, { name: '错误答案', usname: false },
          { name: '错误答案', usname: false }, { name: '正确答案', usname: false },
        ]
      },
      {
        id: '4', title: 'CSDN：https://blog.csdn.net/qq_43764578 QQ:1010753897', answer: '3',  array: [
          { name: '错误答案', usname: false }, { name: '错误答案', usname: false },
          { name: '正确答案', usname: false }, { name: '错误答案', usname: false },
        ]
      },
    ],
    number: 0,
    answer:0,
  },
  previous:function(e){
    this.setData({
      number: this.data.number-1,
      curring: this.data.curring-1,
    })
  },
  radioChange:function(e){
    let index = e.currentTarget.dataset.index
    let id = e.currentTarget.dataset.id
    let detail = this.data.detail
    for(let i = 0;i<detail.length;i++){
      if(detail[i].id == id){
        detail[i].array[index].usname = true
        for(let j = 0;j<detail[i].array.length;j++){
          if (j != index){
            detail[i].array[j].usname = false
          }
        }
      }
    }
    this.setData({
      detail:detail
    })
  },
  nextstep:function(e){
    let detail = this.data.detail
    let number = this.data.number
    let curring = this.data.curring
    let usname = 0;
    for(let i = 0;i<detail[number].array.length;i++){
      if(!detail[number].array[i].usname){
        usname++
      }
    }
    if(usname == detail[number].array.length){
      wx.showToast({
        title: '答题选项不能为空',
        icon: 'none',
        duration: 2000
      })
      return false;
    }
    curring++
    number++
    if (curring > 3){
      curring = -1
    }
    this.setData({
      curring: curring,
      number: number,
    })
  },
  subsic:function(e){
    let detail = this.data.detail
    let answer = 0
    let letter = ''
    for(let i = 0;i < detail.length;i++){
      for(let j = 0;j < detail[i].array.length;j++){
        if(detail[i].array[j].usname){
          letter = detail[i].answer-1
          if(letter == j){
            answer++
          }
        }
      }
    }
    wx.showToast({
      title: '答对了:' + answer + '题',
      icon: 'none',
      duration: 2000
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

对你有帮助的话记得收藏点赞，有什么问题欢迎评论留言。