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）的更多相关文章

  1. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  2. 微信小程序体验(2)：驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  3. 微信小程序（微信应用号）组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  4. 神技！微信小程序（应用号）抢先入门教程（附最新案例DEMO-豆瓣电影）持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  5. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  6. 快速了解微信小程序的使用，一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  7. 来自于微信小程序的一封简讯

    9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...

  8. 微信小程序前端源码逻辑和工作流

    看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...

  9. 微信小程序初探

    做为码农相信大家最近肯定都会听到微信小程序,虽然现阶段还没有正式开放注册,但大家可以还是可以开发测试. 到微信的WIKI(http://mp.weixin.qq.com/wiki?t=resource ...

随机推荐

  1. xcode自动完成代码 Code Snippet Library

    今天发现Xcode里一个好东西:代码片段库 你可以将自己常用的代码放到里面,给它命名,设置快捷键,以后想用这段代码的时候只要按快捷键,就会出现提示,直接将这段代码显示出来,十分高效. 比如我经常会用到 ...

  2. 七.Deque的应用案例-回文检查

    - 回文检测:设计程序,检测一个字符串是否为回文. - 回文:回文是一个字符串,读取首尾相同的字符,例如,radar toot madam. - 分析:该问题的解决方案将使用 deque 来存储字符串 ...

  3. MongoDB负载信息一目了然 阿里云HDM重磅发布MongoDB监控和诊断功能

    混合云数据库管理(HDM)的统一监控.告警.诊断功能新增了对MongoDB的支持. 通过直观的方式将MongoDB多个维度的负载信息统一整合,不仅可以清晰的查看实时负载信息,也可以方便的确认历史负载情 ...

  4. 获取登录的地点和ip地址的js

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script>doc ...

  5. Ui自动化测试框架

    为了提高我们的UI测试效率,我们引用Ui自动化测试框架,这里简单先描述一下,后续会详细补充: 了解一个测试框架,我们就需要了解一下源码,能看懂源码即可: 1.稳定先封装wait EC,电脑性能配置较好 ...

  6. LeetCode172 Factorial Trailing Zeroes. LeetCode258 Add Digits. LeetCode268 Missing Number

    数学题 172. Factorial Trailing Zeroes Given an integer n, return the number of trailing zeroes in n!. N ...

  7. Cmake在编译osgEarth时遇到的一个错误

    CMake Error at src/osgEarthDrivers/CMakeLists.txt:7 (PROJECT): The CMAKE_C_COMPILER: llvm-gcc-4.2 is ...

  8. dsadsa

    1.Swift预览 一般来说,编程语言教程中的第一个程序是在屏幕上打印“Hello, world”.在 Swift 中,可以用一行代码实现: println("Hello, world&qu ...

  9. time,datetime模块

    time模块 时间戳 返回1970年1月1日 00:00:00开始按秒计算时间偏移量 time_stamp = time.time() print(time_stamp,type(time_stamp ...

  10. zabbix源码编译安装以及添加第一台host监控

    基础准备 硬件需求 数据库需求   软件需求 其他软件需求 安装 安装方式 source code 编译好的二进制包 rpm或者deb 源码编译安装部署zabbix以及附件 前提准备 最小化安装操作系 ...