微信小程序之在线答题（2）

Tips:
前端进阶的概念一直比较模糊，我们往往以掌握知识的多少来划分初级中级和高级，但这并不全面，谁都不能保证自己掌握的知识是最全最好的，尤其在前端工程师这个职业，每天都是日新月异。

所以，我认为要分辨一个前端工程师的境界，除了掌握知识的多寡，还要掌握前端的思想，以及对知识的应用程度，评判的标准简单划分初级就是页面与页面之间的交互，中级是页面与数据之间的交互，高级就是数据与数据之间的交互，微信小程序的设计思想就是基于数据与数据之间的交互，我们操作更多的是数据，而非document。

下面讲解一下在线答题的思路，为什么那这个模块来说，因为这是一个比较简单、典型而且又实际应用的案例。

原文：http://www.yealuo.com/WebArticle/Detail?KeyValue=A410D649-424E-4123-A0C5-FFC768F24FB2&ArticleType=zw

首先，我们通过数据接口拿到试卷的试题，渲染到页面上之后，就可以答题了，而答题的过程，其实是操作从接口拿到的数据，这样我们每次操作改变的都是数据而非页面。

然后在通过页面调整传参的形式，把做题结果的数据传递到下一个目标页面，进行需要的数据操作（筛选，计算，渲染）等。
整个做题的过程，都发生在前端，发生在接口数据上，只有在最后一步，保存做题结果的时候才与服务端交互。
这个案例很简单，也很典型，没什么难度，就是想记录一下这种思想，为了便于运行，我先用模拟数据代替接口数据，下面请看代码：

（1）开始答题

<!--pages/examAsw/examAsw.wxml-->
<view class='exasw-com'>
<view class="cont-tit">
<view class="L a-tit">
<label wx:if="{{chckTypeNum==1}}"> 单项选择 </label>
<label wx:if="{{chckTypeNum==2}}"> 多项选择 </label>
<label wx:if="{{chckTypeNum==3}}"> 简答题 </label>
</view>
<view class='L setTime'>
<image src='/images/sttime.png' class='sttimg' />
<text>{{currentTime}}</text>
</view>
<view class="R aswNum"><text>{{currentTab+1}}</text>/{{page}}</view>
</view>
<swiper current="{{currentTab}}" duration="300" class='asw-box' bindchange="swiperTab" style='min-height:600px;'>
<block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}">
<swiper-item>
<view class='exam-com'>
<view class='exam-title'>
{{item.aswTitle}}<text> {{item.aswType}}</text>
</view>
<block wx:if="{{item.chckType==1}}">
<radio-group class="radio-group" bindchange="radioChange"  data-idx="{{index}}">
<label class="radio change-item" wx:for="{{item.aswItem}}" wx:key="{{item.aswId}}" wx:for-item="item2">
<radio value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}" />{{item2.text}}
</label>
</radio-group>
</block>
<block wx:if="{{item.chckType==2}}">
<checkbox-group  class="checkbox-group" bindchange="checkboxChange"  data-idx="{{index}}">
<label class="checkbox change-item" wx:for-items="{{item.aswItem}}" wx:key="{{item.aswId}}" wx:for-item="item2" data-index="{{index}}" >
<checkbox value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}"/>{{item2.text}}
</label>
</checkbox-group>
</block>
<block wx:if="{{item.chckType==3}}">
<textarea class='aswTarea' maxlength="-1" bindinput="bindTextAreaBlur" auto-height placeholder="填写你的答案" data-idx="{{index}}"/>
</block>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view class='page-footer'>
<view class='footer-item1'>
<image src='/images/zx.png' style='width:21px;height:18px;'/>
咨询
</view>
<view class='footer-item1'>
<image src='/images/sc.png' style='width:21px;height:18px;'/>
收藏
</view>
<view class='footer-btn-box'>
<view class='footer-btn'  bindtap="actionSheetTap">答案解析</view>
<view class='footer-btn on' bindtap="subAswData">提交答卷</view>
</view>
</view>

<action-sheet hidden="{{actionSheetHidden}}" style="z-index: 999; ">
<block wx:for="{{analysisData}}" wx:key="{{analysisData.aswId}}" wx:for-index="indnum">
<view class='exam-com'>
<view class='exam-bottom'>
<view class='exam-bootom-txt'>
正确答案：<text class='exam-yes'>{{item.trueAsw}}</text>
</view>
<view class='exam-bootom-tip' >
<text>答案解析：</text>
<label>{{item.analysisTxt}}</label>
</view>
</view>
</view>
</block>

<view class="closeAsw"  bindtap="actionSheetTap">
<image src='/images/close.png' style='width:30px;height:30px;'/>
</view>
</action-sheet>
/* pages/examAsw/examAsw.wxss */
.L,.R,.fl,.fr{display:inline;}
.L ,.fl{float:left;}
.R ,.fr{float:right;}
.aswNum{text-align: right;}
.exasw-com{padding: 10px 20px;}
.cont-tit{font-size: 14px;color: #666; padding-bottom: 5px; border-bottom: 1px solid #ccc;clear: both;overflow: hidden;}

.cont-tit .a-tit{ width: 40%;}
.cont-tit .aswNum{ width: 30%;}
.cont-tit .setTime{position: relative; width: 30%; font-weight: bold;color: #666;font-size: 16px; text-align: center;}
.cont-tit .sttimg{width: 30px;height: 30px;display: block;}
.cont-tit .setTime text{display: block;left: -5px;top: 5px; font-size: 14px;color: #2F99EB; position: absolute;}

.asw-box{padding-top: 20px; font-size: 14px;}
.exam-com{clear: both;}
.exam-title{color: #333;line-height: 25px;}
.exam-title text{font-size: 12px;color: #999;}
.change-radio,.change-item{display: block;clear: both; padding: 5px 10px }
.page-footer{position: fixed;z-index: 99; bottom: 0; height: 50px;line-height: 50px;padding: 10px 0; background-color: #eee;width: 100%;}
.footer-item1{width: 25px;float: left;font-size: 12px; line-height: 20px; padding-left: 20px; padding-top: 5px;}
.footer-item1 image{display: block;}
.footer-btn-box{float: right;width: 240px; background-color: #7ABEF2;height: 50px;color: #fff; border-radius: 15px; margin-right: 15px;overflow: hidden;}
.footer-btn-box .footer-btn{float: left;width: 50%; text-align: center;}
.footer-btn-box .footer-btn.on{background-color:#2F99EB; }
.aswTarea{border: 1px solid #ccc; min-height: 60px;padding: 10px;margin: 10px auto; width: 95%;}

.exam-com{clear: both;padding: 20px;position: relative;}
.exam-bottom{font-size: 14px;color: #666;}
.exam-bottom .exam-bootom-txt{clear: both;padding: 10px 0;}
.exam-bootom-txt text{font-weight: bold; padding-right: 20px;}
.exam-bootom-txt .exam-yes{color: #00CC00;}
.exam-bootom-txt .exam-you{color: #f00;}
.exam-bootom-tip{clear: both;}
.exam-bootom-tip text{font-weight: bold; font-size: 14px;}
.exam-bootom-tip label{padding:10px 0; text-indent: 10px;line-height: 25px;font-size: 12px; display: block;}
.closeAsw{position: absolute;z-index: 9991;right: 5px; bottom:5px;width: 30px;height: 30px;}
.closeAsw image{display: block;}
// pages/examAsw/examAsw.js
Page({
/**
   * 页面的初始数据
   */
data: {
currentTab:0,
currentTime: "240:00",//分钟
startTime: 240,//分钟
setInter: '',//存储定时器
page:0,
chckTypeNum: 1,
subAswData:[
{
aswId:"1",//试题ID
chckType: 1,//试题类型（1单选，2多选，3简答题）
aswTitle:" 根据现行《企业会计准则》，企业在财务报表显著位置至少应披露的项目有（ ）",//试题标题
aswType:"(2014年《建设工程经济》真题)",//试卷名称
aswItem:[//试题选项
{ name: 'USA', value: 'A',text: 'A、编报企业名称' },
{ name: 'CHN', value: 'B',text: 'B、资产负债表日或会计报表涵盖'},
{ name: 'BRA', value: 'C',text: 'C、人民币金额单位' },
{ name: 'JPN', value: 'D',text: 'D、企业财务负责人姓名' },
{ name: 'ENG', value: 'E',text: 'E、是否合并会计报表' }
],
trueAsw: "A",//正确答案
analysisTxt: "我哦哦我我欧尼",//答案解析
answerCenter: ""//答案容器
},
{
aswId: "2",//试题ID
chckType: 2,//试题类型（1单选，2多选，3简答题）
aswTitle: " 下列不属于通过信息技术在工程管理中的开发和应用能实现的是（　）",//试题标题
aswType: "(2014年《建设工程经济》真题)",//试卷名称
aswItem: [//试题选项
{ name: 'A', value:'A', text: 'A、信息获取便捷' },
{ name: 'B', value: 'B',text: 'B、信息流扁平化' },
{ name: 'C', value: 'C',text: 'C、BIM' },
{ name: 'D', value: 'D',text: 'D、信息透明度提高' }
],
trueAsw: "A,B",//正确答案
analysisTxt: "接口进口量进口量将",//答案解析
answerCenter:""//答案容器
},
{
aswId: "3",//试题ID
chckType: 3,//试题类型（1单选，2多选，3简答题）
aswTitle: " 下列不属于通过信息技术在工程管理中的开发和应用能实现的是，请简答！",//试题标题
aswType: "(2014年《建设工程经济》真题)",//试卷名称
aswItem:[],
trueAsw: "",//正确答案
analysisTxt: "根据我国现行财税制度，可以用来偿还贷款的资金有：利润，固定资产折旧费，无形资产和其他资产摊销费，减免的营业税金。",//答案解析
answerCenter: ""//答案容器
}
],

actionSheetHidden: true,//答案解析或隐藏
analysisData: [
{
aswId: "",//试题ID
trueAsw: "",//正确答案
analysisTxt: ""//答案解析
}
]
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
this.setData({
page: this.data.subAswData.length
});
this.analysis(0);
this.dateformat(this.data.startTime);
},

//滑动切换参数设置
swiperTab: function (e) {
var index = e.detail.current;
this.analysis(index);
this.setData({
currentTab: e.detail.current,
chckTypeNum: this.data.subAswData[index].chckType
});
},
//答案解析赋值
analysis:function(index){
this.data.analysisData[0].aswId = this.data.subAswData[index].aswId;
this.data.analysisData[0].trueAsw = this.data.subAswData[index].trueAsw;
this.data.analysisData[0].analysisTxt = this.data.subAswData[index].analysisTxt;
this.setData({
analysisData: this.data.analysisData
});
},

//查看答案解析
actionSheetTap: function () {
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
})
},
//单选赋值
radioChange:function(e){
var idx = e.currentTarget.dataset.idx;
var item = this.data.subAswData[idx].aswItem;
this.data.subAswData[idx].answerCenter = e.detail.value;
for(var i=0;i<item.length;i++){
if (item[i].value == e.detail.value){
item[i].checked = true;
}
}
},
//多选赋值
checkboxChange: function (e) {
var idx = e.currentTarget.dataset.idx;
var item = this.data.subAswData[idx].aswItem;
var values = e.detail.value;
var strValue="";
for (var i = 0; i < item.length; i++) {
item[i].checked = false;
if(values.length>0){
for(var j=0;j<values.length;j++){
if (values[j] == item[i].value){
item[i].checked = true;
strValue += (j == 0 ? item[i].value :','+item[i].value);
}
}
}
}
this.data.subAswData[idx].answerCenter = strValue;
},
//简答题赋值
bindTextAreaBlur: function (e) {
var idx = e.currentTarget.dataset.idx;
this.data.subAswData[idx].answerCenter = e.detail.value;
},
//提交答卷
subAswData:function(){
var data = this.data.subAswData;
var allNum=this.data.subAswData.length;
var noNum=0;
clearInterval(this.data.setInter);//清除定时器
for(var i=0;i<allNum;i++){
if(!data[i].answerCenter){
noNum+=1;
}
}
wx.navigateTo({
url: '/pages/examAfter/examAfter?subAswData=' + JSON.stringify(data) + '&allNum=' + allNum + "&noNum=" + noNum
})
},
// 时间格式转换
dateformat: function(micro) {
var that=this;
var userTimes = micro * 60 * 1000;//总的秒数
var now = new Date().getTime();//现在的时间
var endTime = now + userTimes;//结束的时间
that.data.setInter = setInterval(function () { countdown(endTime); }, 100);
//倒计时的时间
function countdown(endTime) {
var nowTime = new Date().getTime();
var chaTime = endTime - nowTime; //倒计时的时间
if (chaTime >= 0) {
var m = Math.floor(chaTime / 1000 / 60);
var s = Math.floor(chaTime / 1000 % 60);
}
s = s || 0;
var time = (m > 9 ? m : "0" + m) + ":" + (s > 9 ? s : "0" + s);
that.setData({
currentTime: time
});
if (m == 0 && s == 0) {
wx.showModal({
title: '提示',
content: '考试时间结束，请提交答卷!选择取则清除答题结果！',
success: function (res) {
if (res.confirm) {
that.subAswData();
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
clearInterval(that.data.setInter);
return false;
}
}
}
})
（2）提交答卷

<!--pages/examAfter/examAfter.wxml-->
<view class="testDetail">
<view class="imgBox">
<image src="/images/no-file01.png" style="width:100px;height:100px;"/>
<label>共{{allNum}}道题，还有{{noNum}}道未作答</label>
</view>
<view class="testBtn">
<view class="select-cart cartBtn L" bindtap="lookCard">查看答题卡</view>
<view bindtap='subAswData' class="submit-cart cartBtn R">交卷</view>
</view>
</view>
/* pages/examAfter/examAfter.wxss */
.testDetail{clear: both;font-size: 14px;padding: 10px 20px;}
.testDetail .imgBox{clear: both; text-align: center;overflow: hidden; padding-top: 50px; line-height: 30px;}
.testDetail .imgBox image{margin: 0 auto; display: block;}
.testDetail .testBtn{clear: both; padding-top: 40px;}
.testDetail .testBtn .cartBtn{width: 49%;height: 55px;line-height: 55px;text-align: center;border-radius: 4px}
.testDetail .testBtn .select-cart{border:1px solid #E6E6E6;color: #2F99EB;float: left;}
.testDetail .testBtn .submit-cart{background: #2F99EB;color: #fff;float: right;}
// pages/examAfter/examAfter.js
Page({

/**
   * 页面的初始数据
   */
data: {
allNum:0,//试题总数
noNum: 0,//未做试题总数
subAswData:""
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
this.setData({
allNum: options.allNum,
noNum: options.noNum,
subAswData: options.subAswData
});
},

//查看答题卡
lookCard: function () {
wx.navigateTo({
url: '/pages/aswCard/aswCard?subAswData=' + JSON.stringify(this.data.subAswData) + '&allNum=' + this.data.allNum + "&noNum=" + this.data.noNum
})
},
//交卷
subAswData: function () {
wx.navigateTo({
url: '/pages/examAfterTip/examAfterTip?subAswData=' + JSON.stringify(this.data.subAswData)
})
}
})
（3）答题卡

<!--pages/aswCard/aswCard.wxml-->
<view class="TestBox">
<view class="accuracyBox">
<view class='cardTip'>
色卡提示：<text class='tip tip1'></text>未做<text>{{aswNo}}</text>道题
<text class='tip tip2'></text>已做<text>{{aswYes}}</text>道题
</view>
<view class="testTit"><text></text>单项选择题</view>
<view class="cartNum">
<block wx:for="{{subAswData}}">
<block wx:if="{{item.chckType=='1'}}">
<view class="test-num {{!item.answerCenter? '':'true'}} L">{{index+1}}</view>
</block>
</block>
</view>
<view class="testTit"><text></text>多项选择题</view>
<view class="cartNum">
<block wx:for="{{subAswData}}">
<block wx:if="{{item.chckType=='2'}}">
<view class="test-num {{!item.answerCenter? '':'true'}} L">{{index+1}}</view>
</block>
</block>
</view>
<view class="testTit"><text></text>简答题</view>
<view class="cartNum">
<block wx:for="{{subAswData}}">
<block wx:if="{{item.chckType=='3'}}">
<view class="test-num {{!item.answerCenter? '':'true'}} L">{{index+1}}</view>
</block>
</block>
</view>
</view>

<view class="cartBtnBox">
<view bindtap='returnBackAsw'  class="continue-btn continue-btn1">继续练习</view>
<view bindtap='subAswData' class="continue-btn continue-btn2">交卷</view>
</view>
</view>
/* pages/aswCard/aswCard.wxss */
.TestBox{padding: 10px 20px;font-size: 14px;}
.cardTip{padding: 10px 0;clear: both; color: #999; line-height: 20px;}
.cardTip text{color: #2F99EB;}
.cardTip .tip{display: inline-block;width: 12px;height: 12px;border-radius: 50%;}
.cardTip .tip1{border:1px solid #ccc;}
.cardTip .tip2{border:1px solid #40D496;background: #40D496; margin-left: 20px;}
.TestBox .testTit{clear: both;overflow: hidden;font-size: 18px;color: #333; padding: 10px 0;}
.TestBox .testTit label{border: 2px solid #2F99EB;margin-right: 15px;}
.TestBox .cartNum{clear: both;overflow: hidden;font-size: 16px;}
.TestBox .cartNum .test-num{border: 1px solid #ccc;width: 30px;height: 30px;line-height: 30px; text-align: center;border-radius: 50%;color: #2F99EB;float: left; margin: 5px;}
.TestBox .cartNum .test-num.yes{background: #2F99EB;color: #fff;border: 1px solid #2F99EB;}
.TestBox .cartNum .test-num.true{background: #40D496;color: #fff;border: 1px solid #40D496;}
.TestBox .cartNum .test-num.error{background: #FC5D5A;color: #fff;border: 1px solid #FC5D5A;}

.TestBox .cartBtnBox{clear: both;padding: 10px 0;}

.TestBox .cartBtnBox .continue-btn{color: #fff;background: #2F99EB;height: 50px;line-height: 50px;text-align: center; width: 45%;}
.TestBox .continue-btn1{float: left;}
.TestBox .continue-btn2{float: right;}
// pages/aswCard/aswCard.js
Page({

/**
   * 页面的初始数据
   */
data: {
aswYes:0,//已做题数
aswNo:0,//未做题数
subAswData:[]
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
var noNum = options.noNum;//未做试题总数;
var yesNum = options.allNum - noNum;//已做题总数
var dataList = JSON.parse(JSON.parse(options.subAswData));
this.setData({
aswYes: yesNum,
aswNo: noNum,
subAswData: dataList
});
},
//继续学习
returnBackAsw:function(){
wx.navigateBack({
delta: 2
})
},
subAswData:function(){
wx.navigateTo({
url: '/pages/examAfterTip/examAfterTip?subAswData=' + JSON.stringify(JSON.stringify(this.data.subAswData))
})
}
})
 (4)提交答卷后
<!--pages/examAfterTip/examAfterTip.wxml-->
<view class="TestBox">
<view class="accuracyBox">
<view class="tureBox">
<text class="truelv">正确率</text>
<label><text>{{aswAccNum}}</text>%</label>
</view>
<view class='cardTip'>
<view>
正确率只针对选择题，色卡标注：<text class='tip tip1'></text>正确<text>{{aswTrue}}</text>道题 <text class='tip tip2'></text>错误<text>{{aswFalse}}</text>道题（包含未做）
</view>
<view>
简答题请参考答案评分，色卡标注：<text class='tip tip3'></text>已做<text>{{aswYes}}</text>道题 <text class='tip tip4'></text>未做<text>{{aswNo}}</text>道题
</view>
</view>
<view class="testTit"><text></text>单项选择题</view>
<view class="cartNum">
<block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}">
<block wx:if="{{item.chckType=='1'}}">
<view class="test-num {{item.trueAsw==item.answerCenter? 'true':'error'}} L">{{index+1}}</view>
</block>
</block>
</view>
<view class="testTit"><text></text>多项选择题</view>
<view class="cartNum">
<block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}">
<block wx:if="{{item.chckType=='2'}}">
<view class="test-num  {{item.trueAsw==item.answerCenter? 'true':'error'}} L">{{index+1}}</view>
</block>
</block>
</view>
<view class="testTit"><text></text>简答题</view>
<view class="cartNum">
<block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}">
<block wx:if="{{item.chckType=='3'}}">
<view class="test-num {{!item.answerCenter? '':'yes'}} L">{{index+1}}</view>
</block>
</block>
</view>
</view>
<view class="cartBtnBox">
<view bindtap='examAnalysisAll'  class="continue-btn continue-btn1">查看全部解析</view>
<view bindtap='examAnalysis' class="continue-btn continue-btn2">查看错题解析</view>
</view>
<view class="cartBtnBox">
<button type='primary'>保存做题结果</button>
</view>
</view>
/* pages/examAfterTip/examAfterTip.wxss */
.TestBox{padding: 10px 20px;font-size: 14px;}

.cardTip{ background-color:#f8f3ed;padding: 10px;line-height: 25px; color: #666; margin-top: 10px;}
.cardTip view{padding-bottom: 10px;}
.cardTip text{color: #2F99EB;}
.cardTip .tip{display: inline-block;width: 12px;height: 12px;border-radius: 50%;}
.cardTip .tip1{border:1px solid #40D496;background: #40D496;}
.cardTip .tip2{border:1px solid #FC5D5A;background: #FC5D5A; margin-left: 5px;}
.cardTip .tip3{border:1px solid #2F99EB;background: #2F99EB;}
.cardTip .tip4{border:1px solid #ccc; margin-left: 5px;}

.TestBox .tureBox{width: 100px;height: 100px;border:1px solid #E6E6E6;border-radius: 50%;text-align: center;font-size: 16px;color: #A3A3A3; margin: 0 auto; margin-top: 30px;}
.TestBox .tureBox .truelv{display:  block;padding-top: 30px;}

.TestBox .testTit{clear: both;overflow: hidden;font-size: 18px;color: #333; padding: 10px 0;}
.TestBox .testTit label{border: 2px solid #2F99EB;margin-right: 15px;}
.TestBox .cartNum{clear: both;overflow: hidden;font-size: 16px;}
.TestBox .cartNum .test-num{border: 1px solid #ccc;width: 30px;height: 30px;line-height: 30px; text-align: center;border-radius: 50%;color: #2F99EB;float: left; margin: 5px;}
.TestBox .cartNum .test-num.yes{background: #2F99EB;color: #fff;border: 1px solid #2F99EB;}
.TestBox .cartNum .test-num.true{background: #40D496;color: #fff;border: 1px solid #40D496;}
.TestBox .cartNum .test-num.error{background: #FC5D5A;color: #fff;border: 1px solid #FC5D5A;}

.TestBox .cartBtnBox{clear: both;padding: 10px 0;}

.TestBox .cartBtnBox .continue-btn{color: #fff;background: #2F99EB;height: 50px;line-height: 50px;text-align: center; width: 45%;}
.TestBox .continue-btn1{float: left;}
.TestBox .continue-btn2{float: right;}
// pages/examAfterTip/examAfterTip.js
Page({

/**
   * 页面的初始数据
   */
data: {
subAswData:[],//试题数据
aswFalse: 0,//错误选择题数
aswTrue: 0,//正确选择题数
aswAccNum: 0,//正确率
aswYes: 0,//已做简答题数
aswNo: 0,//未做简答题数
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
var dataList = JSON.parse(JSON.parse(options.subAswData));
var aswFalse=0,aswTrue=0,aswAllNum=0,aswYes=0,aswNo = 0, aswAccNum=0;
for(var i=0;i<dataList.length;i++){
if (dataList[i].chckType == 1 || dataList[i].chckType == 2){//选择题计算
aswAllNum+=1;
if (dataList[i].trueAsw == dataList[i].answerCenter){
aswTrue += 1;
}
else{
aswFalse += 1;
}
}
else{//简答题计算
if (!!dataList[i].answerCenter){
aswYes+=1;
}
else{
aswNo+=1;
}
}
}
aswAccNum = (aswTrue / aswAllNum)*100;
this.setData({
aswFalse: aswFalse,//错误选择题数
aswTrue: aswTrue,//正确选择题数
aswAccNum: aswAccNum,//总选择题数
aswYes: aswYes,//已做简答题数
aswNo: aswNo,//未做简答题数
subAswData: dataList
});
},
//查看全部试题解析
examAnalysisAll:function(){
wx.navigateTo({
url: '/pages/examAnalysisAll/examAnalysisAll?subAswData=' + JSON.stringify(this.data.subAswData)
})
},
//查看错题解析
examAnalysis: function () {
wx.navigateTo({
url: '/pages/examAnalysis/examAnalysis?subAswData=' + JSON.stringify(this.data.subAswData)
})
}
})

（5）答案解析

<!--pages/examAnalysisAll/examAnalysisAll.wxml-->
<block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}">
<view class='exasw-com'>
<view class="cont-tit">
<view class="L" wx:if="{{item.chckType==1}}">单项选择</view>
<view class="L" wx:if="{{item.chckType==2}}">多项选择</view>
<view class="L" wx:if="{{item.chckType==3}}">简单题</view>
</view>
<view class='exam-com'>
<view class='exam-title'>
{{item.aswTitle}}<text> {{item.aswType}}</text>
</view>
<block wx:if="{{item.chckType==1}}">
<radio-group class="radio-group">
<label class="radio change-item" wx:for="{{item.aswItem}}" wx:for-item="item2">
<radio value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}" />{{item2.text}}
</label>
</radio-group>
</block>
<block wx:if="{{item.chckType==2}}">
<checkbox-group  class="checkbox-group">
<label class="checkbox change-item" wx:for-items="{{item.aswItem}}" wx:for-item="item2">
<checkbox value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}"/>{{item2.text}}
</label>
</checkbox-group>
</block>
<view class='exam-bottom'>
<view class='exam-bootom-txt'>
<view wx:if="{{item.chckType==3}}">
您的答案：<text class='exam-you'>未填写</text>
</view>
<view wx:else>
正确答案：<text class='exam-yes'>{{item.trueAsw}}</text>
您的答案：<text class='exam-you'>{{item.answerCenter}}</text>
</view>
</view>
<view class='exam-bootom-tip'>
<text>答案解析：</text>
<label>{{item.analysisTxt}}</label>
</view>
</view>
</view>
</view>
</block>
/* pages/examAnalysisAll/examAnalysisAll.wxss */
.L,.R,.fl,.fr{display:inline;}
.L ,.fl{float:left;}
.R ,.fr{float:right;}
.aswNum{text-align: right;}
.exasw-com{padding: 10px 20px;}
.cont-tit{font-size: 14px;color: #666; padding-bottom: 5px; border-bottom: 1px solid #ccc;clear: both;overflow: hidden;}
.cont-tit text{font-size: 20px;font-weight: bold;color: #2F99EB;}
.cont-tit view{width: 49%;}
.asw-box{ font-size: 14px;}
.exam-com{clear: both; padding-top: 10px;}
.exam-title{color: #333;line-height: 25px;}
.exam-title text{font-size: 12px;color: #999;}
.change-radio,.change-item{display: block;clear: both; padding: 5px 10px }
.exam-bottom{font-size: 14px;color: #666;}
.exam-bottom .exam-bootom-txt{clear: both;padding: 10px 0;}
.exam-bootom-txt text{font-weight: bold; padding-right: 20px;}
.exam-bootom-txt .exam-yes{color: #00CC00;}
.exam-bootom-txt .exam-you{color: #f00;}
.exam-bootom-tip{clear: both;}
.exam-bootom-tip text{font-weight: bold; font-size: 14px;}
.exam-bootom-tip label{padding:10px 0; text-indent: 10px;line-height: 25px;font-size: 12px; display: block;}
// pages/examAnalysisAll/examAnalysisAll.js
Page({

/**
   * 页面的初始数据
   */
data: {
page: 0,
chckTypeNum: 1,
subAswData: []
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
var dataList = JSON.parse(options.subAswData);
this.setData({
subAswData: dataList,
page: dataList.length
});
},

})
（6）错题解析

<!--pages/examAnalysis/examAnalysis.wxml-->
<view class='exasw-com'>
<view  wx:if="{{page>0}}">
<view class="cont-tit">
<view class="L">
<label wx:if="{{chckTypeNum=='1'}}"> 单项选择 </label>
<label wx:if="{{chckTypeNum=='2'}}"> 多项选择 </label>
<label wx:if="{{chckTypeNum=='3'}}"> 简答题 </label>
</view>
<view class="R aswNum"><text>{{currentTab+1}}</text>/{{page}}</view>
</view>
<swiper current="{{currentTab}}" duration="300" class='asw-box' bindchange="swiperTab" style='min-height:600px;'>
<block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}" wx:for-index="indnum">
<swiper-item>
<view class='exam-com'>
<view class='exam-title'>
{{item.aswTitle}}<text> {{item.aswType}}</text>
</view>
<block wx:if="{{item.chckType==1}}">
<radio-group class="radio-group">
<label class="radio change-item" wx:for="{{item.aswItem}}" wx:for-item="item2">
<radio value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}" />{{item2.text}}
</label>
</radio-group>
</block>
<block wx:if="{{item.chckType==2}}">
<checkbox-group  class="checkbox-group">
<label class="checkbox change-item" wx:for-items="{{item.aswItem}}" wx:for-item="item2">
<checkbox value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}"/>{{item2.text}}
</label>
</checkbox-group>
</block>
<view class='exam-bottom'>
<view class='exam-bootom-txt'>
<view wx:if="{{item.chckType==3}}">
您的答案：<text class='exam-you'>未填写</text>
</view>
<view wx:else>
正确答案：<text class='exam-yes'>{{item.trueAsw}}</text>
您的答案：<text class='exam-you'>{{item.answerCenter}}</text>
</view>
</view>
<view class='exam-bootom-tip'>
<text>答案解析：</text>
<label>{{item.analysisTxt}}</label>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view wx:else>
你真棒，没有错误喔！
</view>
</view>
/* pages/examAnalysis/examAnalysis.wxss */
.L,.R,.fl,.fr{display:inline;}
.L ,.fl{float:left;}
.R ,.fr{float:right;}
.aswNum{text-align: right;}
.exasw-com{padding: 10px 20px;}
.cont-tit{font-size: 14px;color: #666; padding-bottom: 5px; border-bottom: 1px solid #ccc;clear: both;overflow: hidden;}
.cont-tit text{font-size: 20px;font-weight: bold;color: #2F99EB;}
.cont-tit view{width: 49%;}
.asw-box{ font-size: 14px;}
.exam-com{clear: both; padding-top: 10px;}
.exam-title{color: #333;line-height: 25px;}
.exam-title text{font-size: 12px;color: #999;}
.change-radio,.change-item{display: block;clear: both; padding: 5px 10px }
.exam-bottom{font-size: 14px;color: #666;}
.exam-bottom .exam-bootom-txt{clear: both;padding: 10px 0;}
.exam-bootom-txt text{font-weight: bold; padding-right: 20px;}
.exam-bootom-txt .exam-yes{color: #00CC00;}
.exam-bootom-txt .exam-you{color: #f00;}
.exam-bootom-tip{clear: both;}
.exam-bootom-tip text{font-weight: bold; font-size: 14px;}
.exam-bootom-tip label{padding:10px 0; text-indent: 10px;line-height: 25px;font-size: 12px; display: block;}
// pages/examAnalysis/examAnalysis.js
Page({

/**
   * 页面的初始数据
   */
data: {
currentTab: 0,
page: 0,
chckTypeNum: 1,
subAswData: []
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
var dataList = JSON.parse(options.subAswData);
var errList=[];
for(var i=0;i<dataList.length;i++){
if (dataList[i].chckType == 1 || dataList[i].chckType == 2) {//筛选错题未做题
if (dataList[i].trueAsw == dataList[i].answerCenter) {
}
else {
errList.push(dataList[i]);
}
}
else{
if (!dataList[i].answerCenter){
errList.push(dataList[i]);
}
}
}
this.setData({
subAswData: errList,
page: errList.length
});
},
//滑动切换参数设置
swiperTab: function (e) {
this.setData({
currentTab: e.detail.current,
chckTypeNum: this.data.subAswData[e.detail.current].chckType
});
}
})