微信小程序之在线答题（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

});

}

})

微信小程序之在线答题（2）的更多相关文章

微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
微信小程序体验(2)：驴妈妈景区门票即买即游
驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...
微信小程序（微信应用号）组件讲解
这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...
神技！微信小程序（应用号）抢先入门教程（附最新案例DEMO-豆瓣电影）持续更新
微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...
通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...
快速了解微信小程序的使用，一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
来自于微信小程序的一封简讯
9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客一夜之间火了的微信应用号你真的知道吗? ...
微信小程序前端源码逻辑和工作流
看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...
微信小程序初探
做为码农相信大家最近肯定都会听到微信小程序,虽然现阶段还没有正式开放注册,但大家可以还是可以开发测试. 到微信的WIKI(http://mp.weixin.qq.com/wiki?t=resource ...

随机推荐

RGBA(0,0,0,0)调色
前三个值(红绿蓝)的范围为0到255之间的整数或者0%到100%之间的百分数.这些值描述了红绿蓝三原色在预期色彩中的量. 第四个值,alpha值,制定了色彩的透明度/不透明度,它的范围为0.0到1.0 ...
QT 引用之前项目模板导致计算速度严重下降
最近做RRT规划算法,在新建工程中测试时,每一个周期大概花费20MS,但是当我把算法移植到之前写的工程模板中时,计算效率相当低,变为500毫秒.期初是以为代码有问题,然后就逐句查找,发现代码并没有问题 ...
@topcoder - SRM766R1 D1L3@ ShortestMissingSubsequences
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个大小为 G 的字符集,并给定一个长度为 N 的字符串 A ...
让超出div内容的显示滚动条：overflow:auto，以及overflow其它属性
css的属性,以前没用过遇到了,记录一下: 虽然layui本来自带这个处理,但是为了灵活,抛弃layui原有的加载,只是用layui的样样式,就要使用到这个css属性总结overflow属性: /* ...
如何mock https请求
最近在测试项目过程当中,遇到客户端mock https请求的场景,但是默认用charles抓取出来的https请求是乱码的,对于这类请求如何来mock,有以下2种方式: 1.这里有篇http://co ...
在 Linux Mint 19 上安装 zsh 和设置小键盘一步到位
在 Linux Mint 19 上安装 zsh 和设置小键盘安装 zsh 并设置 zsh 为默认 shell 安装 sudo apt install zsh 设置 zsh 为默认 shell,注意没 ...
oracle loader
控制文件的格式 load data infile '数据文件名' into table 表名 (first_name position(01:14) char, sur ...
字体图标font-awesome
其实有一些常见的图标使用字体图标比使用img来得好 Font Awesome 官网:http://fortawesome.github.io/Font-Awesome/ 字体代码:http://for ...
[React Native]高度自增长的TextInput组件
之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这 ...
WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping 的解决方法
问题描述:VS2012使用验证控件出现“ WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping.请添加一个名为 jque ...

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

微信小程序之在线答题（2）的更多相关文章

随机推荐

热门专题