微信小程序之在线答题（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 ...
随机推荐
- struts1之工作原理
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zkn_CS_DN_2013/article/details/34452341 1.初始化:strut ...
- Directx11教程(63) tessellation学习(5)
原文:Directx11教程(63) tessellation学习(5) TS中生成细分后顶点的u,v,{w}坐标,我们根据控制点和u,w,{w}坐标生成新的顶点位置,在前面四边形的细分 ...
- iOS 微信支付如果遇到跳转只有一个确定请看这里
http://www.cocoachina.com/bbs/read.php?tid-321546.html 今天在联调微信支付,不得不说,和它比起来,阿里的支付sdk真的是太好用了.果然和后端同学在 ...
- 2019-9-2-dotnet-命名管道名字长度限制
title author date CreateTime categories dotnet 命名管道名字长度限制 lindexi 2019-09-02 11:54:50 +0800 2019-09- ...
- LeedCode OJ --- Binary Tree Inorder Traversal
点击打开题目链接 今天只是写了递归的版本,因为还没想好怎么用迭代来实现,可以写的过程中,有一点是有疑问的,虽然我的代码可以AC. 问题是:主调函数是可以使用子函数中返回的在子函数中定义的vector. ...
- swiper踩过的哪些坑
最近,苦恼于各种轮播的需求,每个自己都要自己写,写的挺烦的.终于,在网上发现了swiper插件,发现还是挺实用的,但其中还是踩过了不少的坑,其中有不少都是很简单的问题,但到发现的时候都是花了不少时间, ...
- 小爬爬7:回顾&&crawlSpider
1.回顾昨日内容 回顾 - 全站数据爬取(分页) - 手动请求的发送Request(url,callback) - post请求和cookie处理 - start_requests(self) - F ...
- poj3308 最小割
因为行可以了,那列就不行,所以根据行列建立最小割模型. 然后这题精妙之处在于把乘法取对数后转化为加法,瞬间就简单了. 保证精度,C++AC ,16MS G++WA. #include<stdio ...
- js中的超过16位数字相加问题
方案一 function sub(str1, str2) { // 补全0,并多补一位0 let arr1 = null, arr2 = null if (str1.length > str2. ...
- Mysql Command
数据库备份: mysqldump -uroot -p -h 192.168.1.190 --default-character-set=utf8 $dbname > backup_db.sql ...