正文

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

IP云
IP云V管理员/4 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

});

}

})

相关阅读

目录[+]