微信小程序之在線答題（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
});
}
})