小程序仿学习强国填空题

效果图如下：

概述：

和后台人员商议好题目中答案的代表符号，我这边是根据_分割，答案有多少字数就写几个_。
例如：
题目：新时代政法队伍“五个过硬”：__过硬、__过硬、责任过硬、纪律过硬、作风过硬。
答案：政治，业务

下面上代码

<!--index.wxml-->
<view  wx:for="{{subject}}" wx:if="{{active_index==index}}" wx:key="index">
  <view class="section">
    <view class="top_title">
      <view class="top_title_left">
        <view wx:if="{{item.type==3}}">填空</view>
      </view>
      <view class="top_title_right"><text>{{active_index+1}}</text>/{{subject.length}}</view>
    </view>
    <!-- 题目 -->
    <view class="fill_box" wx:if="{{item.type==3}}"> 
      <input bindinput="inputfill"  maxlength="{{maxlength}}" disabled="{{isDisabled}}" focus="{{is_focus}}" ></input> 
      <block wx:for="{{item.title}}" wx:for-item='title' wx:for-index='title_inx' wx:key="title_inx">
          {{title}}
          <view  
            wx:if="{{title_inx!=item.title.length-1}}"
            class="{{color_fill==title_inx?'active_fill':''}}" 
            style="color:{{is_parsing?'#FF2D2D':''}};border:{{is_parsing?'1rpx solid #EFC1AD;':''}}" 
            data-length="{{item.title.length}}"
            bindtap="changFill">
              {{fill_arr[title_inx]}}
          </view>
      </block>  
    </view>
  </view>

  <!-- 解析 -->
  <view wx:if="{{is_parsing}}" class="section">
    <view class="top_title">
      <view class="top_title_left">答案解析</view>
    </view>
    <view class="parsing">
      <view>
        正确答案：<text wx:for="{{item.answer}}" wx:for-item='answerItem' wx:for-index='answerIndex' wx:key="answerIndex">{{answerItem}} </text>
      </view>
      <view class="parsing_text">{{item.analysis}}</view>
    </view>
  </view>
</view>

<view  class="btn_box" bindtap="{{is_parsing==false?'submit':'next'}}" >
  <text wx:if="{{active_index==subject.length-1&&is_parsing}}">完成</text>
  <text wx:else>{{is_parsing==false?'确定':'下一题'}}</text> 
</view>

/* index.wxss */

page{
  width:100%;
  height: 100%;
  background: #E8E8E8;
  padding:20rpx;
  box-sizing: border-box;
}
.btn_box{
  height: 90rpx;
  margin: 50rpx auto;
  margin-top: 80rpx;
  text-align: center;
  color: #fff;
  line-height: 90rpx;
  background: #DF2A2A;
  border-radius: 10rpx;
}

/* 填空 */
.section{
  box-shadow:0px 3px 6px rgba(0,0,0,0.08);
  border-radius: 16rpx;
  background: #fff;
  position: relative;
  margin-top: 50rpx;
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  font-size: 32rpx;
}
.fill_box,.parsing{
  padding: 20rpx 0;
}
.fill_box view{
  background: #f4f4f4;
  width: 50rpx;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  height: 50rpx;  
  margin-right: 15rpx;
}
.fill_box input{
  position: fixed;
  left: -9999rpx;
  top:0rpx;
}
.active_fill{
  border: 1rpx solid rgb(185, 121, 3);
  height: 48rpx!important;
  width:48rpx!important;
}
.top_title_right{
  font-weight: bold;
}
.top_title_right text{
  font-size: 60rpx;
}
.top_title{
  border-bottom: 1rpx solid #eee;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top_title_left{
  border-left: 7rpx solid #DF2A2A;
  padding-left: 17rpx;
  font-size: 34rpx;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.parsing_text{
  margin-top: 30rpx;
  font-weight: normal;
}

// index.js
Page({
  data: {
    active_index:0,
    isDisabled:false, 
    is_parsing:false, //是否显示解析
    fill_arr:[],//填空答案
    formData:[],  //提交的所有答案
    is_focus:false, //是否弹出键盘
    maxlength:'',  //答案输入框最大字数
    color_fill:null, // 答案文本框颜色
    subject:[
      { 
        analysis:"政治过硬、业务过硬、责任过硬、纪律过硬、作风过硬。",
        answer:["政","治","业","务"],
        id: 1,
        title:"新时代政法队伍“五个过硬”：__过硬、__过硬、责任过硬、纪律过硬、作风过硬。",
        type: 3
      },
      { 
        analysis:"政法委员",
        answer:["政","法","委","员"],
        id: 2,
        title:"《条例》规定乡镇（街道）党组织应配备____",
        type: 3
      }
    ],
  },
  onLoad: function (options) {
    let subject=this.data.subject
    subject.forEach(item=>{
        let title=item.title
        let titleArr=title.split('_')
        item.title=titleArr
    })
    this.setData({
      subject:subject
    })
  },
  // 填空答案
  inputfill(e){
    let val=e.detail.value
    let data=val.split("")
    this.setData({
      fill_arr:data,
      color_fill:data.length
    })
  },
  //点击填写
  changFill(e){
    let length=e.currentTarget.dataset.length
    this.setData({
      is_focus:true,
      maxlength:length-1
    })
    if(this.data.fill_arr==''){
      this.setData({
        color_fill:0
      })
    }
  },
  submit(){
    let active_index=this.data.active_index
    let subject=this.data.subject
    let fill_arr=this.data.fill_arr
    let formData=this.data.formData
    let type=subject[active_index].type
    if(fill_arr==''&&type==3){
      wx.showToast({
        title: '请填写答案',
        icon:"none"
      })
      return
    }
    formData.push({id:subject[active_index].id,content:fill_arr})
    console.log(formData)
    this.setData({
      formData:formData
    })
    let all= JSON.stringify(subject[active_index].answer)==JSON.stringify(fill_arr)
    if(all){

     if(active_index==subject.length-1){
       wx.showToast({
         title: '已完成所有题目',
       })
       console.log(this.data.formData)
       return
     }  
     active_index++
     this.setData({
       fill_arr:[],
       color_fill:null,
       active_index:active_index,
     })
    }else{
     this.setData({
       is_parsing:true,
       isDisabled:true
     })
    }
  },
  //下一题
  next(){
    let active_index=this.data.active_index
    let subject=this.data.subject
    if(active_index==subject.length-1){
      wx.showToast({
        title: '已完成所有题目',
      })
      console.log(this.data.formData)
      return
    }else{
      active_index++
      this.setData({
        fill_arr:[],
        color_fill:null,
        active_index:active_index,
        is_parsing:false,
        isDisabled:false
      })
    }
  },
})

欢迎交流讨论，本文为原创，转载请注明出处。