Tips:
前端进阶的概念一直比较模糊，我们往往以掌握知识的多少来划分初级中级和高级，但这并不全面，谁都不能保证自己掌握的知识是最全最好的，尤其在前端工程师这个职业，每天都是日新月异。

所以，我认为要分辨一个前端工程师的境界，除了掌握知识的多寡，还要掌握前端的思想，以及对知识的应用程度，评判的标准简单划分初级就是页面与页面之间的交互，中级是页面与数据之间的交互，高级就是数据与数据之间的交互，微信小程序的设计思想就是基于数据与数据之间的交互，我们操作更多的是数据，而非document。

下面讲解一下在线答题的思路，为什么那这个模块来说，因为这是一个比较简单、典型而且又实际应用的案例。

原文：http://www.yealuo.com/WebArticle/Detail?KeyValue=A410D649-424E-4123-A0C5-FFC768F24FB2&ArticleType=zw

首先，我们通过数据接口拿到试卷的试题，渲染到页面上之后，就可以答题了，而答题的过程，其实是操作从接口拿到的数据，这样我们每次操作改变的都是数据而非页面。

然后在通过页面调整传参的形式，把做题结果的数据传递到下一个目标页面，进行需要的数据操作（筛选，计算，渲染）等。
整个做题的过程，都发生在前端，发生在接口数据上，只有在最后一步，保存做题结果的时候才与服务端交互。
这个案例很简单，也很典型，没什么难度，就是想记录一下这种思想，为了便于运行，我先用模拟数据代替接口数据，下面请看代码：

  1. （1）开始答题
  2.  
  3. <!--pages/examAsw/examAsw.wxml-->
  4. <view class='exasw-com'>
  5. <view class="cont-tit">
  6. <view class="L a-tit">
  7. <label wx:if="{{chckTypeNum==1}}"> 单项选择 </label>
  8. <label wx:if="{{chckTypeNum==2}}"> 多项选择 </label>
  9. <label wx:if="{{chckTypeNum==3}}"> 简答题 </label>
  10. </view>
  11. <view class='L setTime'>
  12. <image src='/images/sttime.png' class='sttimg' />
  13. <text>{{currentTime}}</text>
  14. </view>
  15. <view class="R aswNum"><text>{{currentTab+1}}</text>/{{page}}</view>
  16. </view>
  17. <swiper current="{{currentTab}}" duration="300" class='asw-box' bindchange="swiperTab" style='min-height:600px;'>
  18. <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}">
  19. <swiper-item>
  20. <view class='exam-com'>
  21. <view class='exam-title'>
  22. {{item.aswTitle}}<text> {{item.aswType}}</text>
  23. </view>
  24. <block wx:if="{{item.chckType==1}}">
  25. <radio-group class="radio-group" bindchange="radioChange"  data-idx="{{index}}">
  26. <label class="radio change-item" wx:for="{{item.aswItem}}" wx:key="{{item.aswId}}" wx:for-item="item2">
  27. <radio value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}" />{{item2.text}}
  28. </label>
  29. </radio-group>
  30. </block>
  31. <block wx:if="{{item.chckType==2}}">
  32. <checkbox-group  class="checkbox-group" bindchange="checkboxChange"  data-idx="{{index}}">
  33. <label class="checkbox change-item" wx:for-items="{{item.aswItem}}" wx:key="{{item.aswId}}" wx:for-item="item2" data-index="{{index}}" >
  34. <checkbox value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}"/>{{item2.text}}
  35. </label>
  36. </checkbox-group>
  37. </block>
  38. <block wx:if="{{item.chckType==3}}">
  39. <textarea class='aswTarea' maxlength="-1" bindinput="bindTextAreaBlur" auto-height placeholder="填写你的答案" data-idx="{{index}}"/>
  40. </block>
  41. </view>
  42. </swiper-item>
  43. </block>
  44. </swiper>
  45. </view>
  46. <view class='page-footer'>
  47. <view class='footer-item1'>
  48. <image src='/images/zx.png' style='width:21px;height:18px;'/>
  49. 咨询
  50. </view>
  51. <view class='footer-item1'>
  52. <image src='/images/sc.png' style='width:21px;height:18px;'/>
  53. 收藏
  54. </view>
  55. <view class='footer-btn-box'>
  56. <view class='footer-btn'  bindtap="actionSheetTap">答案解析</view>
  57. <view class='footer-btn on' bindtap="subAswData">提交答卷</view>
  58. </view>
  59. </view>
  60.  
  61. <action-sheet hidden="{{actionSheetHidden}}" style="z-index: 999; ">
  62. <block wx:for="{{analysisData}}" wx:key="{{analysisData.aswId}}" wx:for-index="indnum">
  63. <view class='exam-com'>
  64. <view class='exam-bottom'>
  65. <view class='exam-bootom-txt'>
  66. 正确答案：<text class='exam-yes'>{{item.trueAsw}}</text>
  67. </view>
  68. <view class='exam-bootom-tip' >
  69. <text>答案解析：</text>
  70. <label>{{item.analysisTxt}}</label>
  71. </view>
  72. </view>
  73. </view>
  74. </block>
  75.  
  76. <view class="closeAsw"  bindtap="actionSheetTap">
  77. <image src='/images/close.png' style='width:30px;height:30px;'/>
  78. </view>
  79. </action-sheet>
  80. /* pages/examAsw/examAsw.wxss */
  81. .L,.R,.fl,.fr{display:inline;}
  82. .L ,.fl{float:left;}
  83. .R ,.fr{float:right;}
  84. .aswNum{text-align: right;}
  85. .exasw-com{padding: 10px 20px;}
  86. .cont-tit{font-size: 14px;color: #666; padding-bottom: 5px; border-bottom: 1px solid #ccc;clear: both;overflow: hidden;}
  87.  
  88. .cont-tit .a-tit{ width: 40%;}
  89. .cont-tit .aswNum{ width: 30%;}
  90. .cont-tit .setTime{position: relative; width: 30%; font-weight: bold;color: #666;font-size: 16px; text-align: center;}
  91. .cont-tit .sttimg{width: 30px;height: 30px;display: block;}
  92. .cont-tit .setTime text{display: block;left: -5px;top: 5px; font-size: 14px;color: #2F99EB; position: absolute;}
  93.  
  94. .asw-box{padding-top: 20px; font-size: 14px;}
  95. .exam-com{clear: both;}
  96. .exam-title{color: #333;line-height: 25px;}
  97. .exam-title text{font-size: 12px;color: #999;}
  98. .change-radio,.change-item{display: block;clear: both; padding: 5px 10px }
  99. .page-footer{position: fixed;z-index: 99; bottom: 0; height: 50px;line-height: 50px;padding: 10px 0; background-color: #eee;width: 100%;}
  100. .footer-item1{width: 25px;float: left;font-size: 12px; line-height: 20px; padding-left: 20px; padding-top: 5px;}
  101. .footer-item1 image{display: block;}
  102. .footer-btn-box{float: right;width: 240px; background-color: #7ABEF2;height: 50px;color: #fff; border-radius: 15px; margin-right: 15px;overflow: hidden;}
  103. .footer-btn-box .footer-btn{float: left;width: 50%; text-align: center;}
  104. .footer-btn-box .footer-btn.on{background-color:#2F99EB; }
  105. .aswTarea{border: 1px solid #ccc; min-height: 60px;padding: 10px;margin: 10px auto; width: 95%;}
  106.  
  107. .exam-com{clear: both;padding: 20px;position: relative;}
  108. .exam-bottom{font-size: 14px;color: #666;}
  109. .exam-bottom .exam-bootom-txt{clear: both;padding: 10px 0;}
  110. .exam-bootom-txt text{font-weight: bold; padding-right: 20px;}
  111. .exam-bootom-txt .exam-yes{color: #00CC00;}
  112. .exam-bootom-txt .exam-you{color: #f00;}
  113. .exam-bootom-tip{clear: both;}
  114. .exam-bootom-tip text{font-weight: bold; font-size: 14px;}
  115. .exam-bootom-tip label{padding:10px 0; text-indent: 10px;line-height: 25px;font-size: 12px; display: block;}
  116. .closeAsw{position: absolute;z-index: 9991;right: 5px; bottom:5px;width: 30px;height: 30px;}
  117. .closeAsw image{display: block;}
  118. // pages/examAsw/examAsw.js
  119. Page({
  120. /**
  121.    * 页面的初始数据
  122.    */
  123. data: {
  124. currentTab:0,
  125. currentTime: "240:00",//分钟
  126. startTime: 240,//分钟
  127. setInter: '',//存储定时器
  128. page:0,
  129. chckTypeNum: 1,
  130. subAswData:[
  131. {
  132. aswId:"1",//试题ID
  133. chckType: 1,//试题类型（1单选，2多选，3简答题）
  134. aswTitle:" 根据现行《企业会计准则》，企业在财务报表显著位置至少应披露的项目有（ ）",//试题标题
  135. aswType:"(2014年《建设工程经济》真题)",//试卷名称
  136. aswItem:[//试题选项
  137. { name: 'USA', value: 'A',text: 'A、编报企业名称' },
  138. { name: 'CHN', value: 'B',text: 'B、资产负债表日或会计报表涵盖'},
  139. { name: 'BRA', value: 'C',text: 'C、人民币金额单位' },
  140. { name: 'JPN', value: 'D',text: 'D、企业财务负责人姓名' },
  141. { name: 'ENG', value: 'E',text: 'E、是否合并会计报表' }
  142. ],
  143. trueAsw: "A",//正确答案
  144. analysisTxt: "我哦哦我我欧尼",//答案解析
  145. answerCenter: ""//答案容器
  146. },
  147. {
  148. aswId: "2",//试题ID
  149. chckType: 2,//试题类型（1单选，2多选，3简答题）
  150. aswTitle: " 下列不属于通过信息技术在工程管理中的开发和应用能实现的是（　）",//试题标题
  151. aswType: "(2014年《建设工程经济》真题)",//试卷名称
  152. aswItem: [//试题选项
  153. { name: 'A', value:'A', text: 'A、信息获取便捷' },
  154. { name: 'B', value: 'B',text: 'B、信息流扁平化' },
  155. { name: 'C', value: 'C',text: 'C、BIM' },
  156. { name: 'D', value: 'D',text: 'D、信息透明度提高' }
  157. ],
  158. trueAsw: "A,B",//正确答案
  159. analysisTxt: "接口进口量进口量将",//答案解析
  160. answerCenter:""//答案容器
  161. },
  162. {
  163. aswId: "3",//试题ID
  164. chckType: 3,//试题类型（1单选，2多选，3简答题）
  165. aswTitle: " 下列不属于通过信息技术在工程管理中的开发和应用能实现的是，请简答！",//试题标题
  166. aswType: "(2014年《建设工程经济》真题)",//试卷名称
  167. aswItem:[],
  168. trueAsw: "",//正确答案
  169. analysisTxt: "根据我国现行财税制度，可以用来偿还贷款的资金有：利润，固定资产折旧费，无形资产和其他资产摊销费，减免的营业税金。",//答案解析
  170. answerCenter: ""//答案容器
  171. }
  172. ],
  173.  
  174. actionSheetHidden: true,//答案解析或隐藏
  175. analysisData: [
  176. {
  177. aswId: "",//试题ID
  178. trueAsw: "",//正确答案
  179. analysisTxt: ""//答案解析
  180. }
  181. ]
  182. },
  183.  
  184. /**
  185.    * 生命周期函数--监听页面加载
  186.    */
  187. onLoad: function (options) {
  188. this.setData({
  189. page: this.data.subAswData.length
  190. });
  191. this.analysis(0);
  192. this.dateformat(this.data.startTime);
  193. },
  194.  
  195. //滑动切换参数设置
  196. swiperTab: function (e) {
  197. var index = e.detail.current;
  198. this.analysis(index);
  199. this.setData({
  200. currentTab: e.detail.current,
  201. chckTypeNum: this.data.subAswData[index].chckType
  202. });
  203. },
  204. //答案解析赋值
  205. analysis:function(index){
  206. this.data.analysisData[0].aswId = this.data.subAswData[index].aswId;
  207. this.data.analysisData[0].trueAsw = this.data.subAswData[index].trueAsw;
  208. this.data.analysisData[0].analysisTxt = this.data.subAswData[index].analysisTxt;
  209. this.setData({
  210. analysisData: this.data.analysisData
  211. });
  212. },
  213.  
  214. //查看答案解析
  215. actionSheetTap: function () {
  216. this.setData({
  217. actionSheetHidden: !this.data.actionSheetHidden
  218. })
  219. },
  220. //单选赋值
  221. radioChange:function(e){
  222. var idx = e.currentTarget.dataset.idx;
  223. var item = this.data.subAswData[idx].aswItem;
  224. this.data.subAswData[idx].answerCenter = e.detail.value;
  225. for(var i=0;i<item.length;i++){
  226. if (item[i].value == e.detail.value){
  227. item[i].checked = true;
  228. }
  229. }
  230. },
  231. //多选赋值
  232. checkboxChange: function (e) {
  233. var idx = e.currentTarget.dataset.idx;
  234. var item = this.data.subAswData[idx].aswItem;
  235. var values = e.detail.value;
  236. var strValue="";
  237. for (var i = 0; i < item.length; i++) {
  238. item[i].checked = false;
  239. if(values.length>0){
  240. for(var j=0;j<values.length;j++){
  241. if (values[j] == item[i].value){
  242. item[i].checked = true;
  243. strValue += (j == 0 ? item[i].value :','+item[i].value);
  244. }
  245. }
  246. }
  247. }
  248. this.data.subAswData[idx].answerCenter = strValue;
  249. },
  250. //简答题赋值
  251. bindTextAreaBlur: function (e) {
  252. var idx = e.currentTarget.dataset.idx;
  253. this.data.subAswData[idx].answerCenter = e.detail.value;
  254. },
  255. //提交答卷
  256. subAswData:function(){
  257. var data = this.data.subAswData;
  258. var allNum=this.data.subAswData.length;
  259. var noNum=0;
  260. clearInterval(this.data.setInter);//清除定时器
  261. for(var i=0;i<allNum;i++){
  262. if(!data[i].answerCenter){
  263. noNum+=1;
  264. }
  265. }
  266. wx.navigateTo({
  267. url: '/pages/examAfter/examAfter?subAswData=' + JSON.stringify(data) + '&allNum=' + allNum + "&noNum=" + noNum
  268. })
  269. },
  270. // 时间格式转换
  271. dateformat: function(micro) {
  272. var that=this;
  273. var userTimes = micro * 60 * 1000;//总的秒数
  274. var now = new Date().getTime();//现在的时间
  275. var endTime = now + userTimes;//结束的时间
  276. that.data.setInter = setInterval(function () { countdown(endTime); }, 100);
  277. //倒计时的时间
  278. function countdown(endTime) {
  279. var nowTime = new Date().getTime();
  280. var chaTime = endTime - nowTime; //倒计时的时间
  281. if (chaTime >= 0) {
  282. var m = Math.floor(chaTime / 1000 / 60);
  283. var s = Math.floor(chaTime / 1000 % 60);
  284. }
  285. s = s || 0;
  286. var time = (m > 9 ? m : "0" + m) + ":" + (s > 9 ? s : "0" + s);
  287. that.setData({
  288. currentTime: time
  289. });
  290. if (m == 0 && s == 0) {
  291. wx.showModal({
  292. title: '提示',
  293. content: '考试时间结束，请提交答卷!选择取则清除答题结果！',
  294. success: function (res) {
  295. if (res.confirm) {
  296. that.subAswData();
  297. } else if (res.cancel) {
  298. console.log('用户点击取消')
  299. }
  300. }
  301. })
  302. clearInterval(that.data.setInter);
  303. return false;
  304. }
  305. }
  306. }
  307. })
  308. （2）提交答卷
  309.  
  310. <!--pages/examAfter/examAfter.wxml-->
  311. <view class="testDetail">
  312. <view class="imgBox">
  313. <image src="/images/no-file01.png" style="width:100px;height:100px;"/>
  314. <label>共{{allNum}}道题，还有{{noNum}}道未作答</label>
  315. </view>
  316. <view class="testBtn">
  317. <view class="select-cart cartBtn L" bindtap="lookCard">查看答题卡</view>
  318. <view bindtap='subAswData' class="submit-cart cartBtn R">交卷</view>
  319. </view>
  320. </view>
  321. /* pages/examAfter/examAfter.wxss */
  322. .testDetail{clear: both;font-size: 14px;padding: 10px 20px;}
  323. .testDetail .imgBox{clear: both; text-align: center;overflow: hidden; padding-top: 50px; line-height: 30px;}
  324. .testDetail .imgBox image{margin: 0 auto; display: block;}
  325. .testDetail .testBtn{clear: both; padding-top: 40px;}
  326. .testDetail .testBtn .cartBtn{width: 49%;height: 55px;line-height: 55px;text-align: center;border-radius: 4px}
  327. .testDetail .testBtn .select-cart{border:1px solid #E6E6E6;color: #2F99EB;float: left;}
  328. .testDetail .testBtn .submit-cart{background: #2F99EB;color: #fff;float: right;}
  329. // pages/examAfter/examAfter.js
  330. Page({
  331.  
  332. /**
  333.    * 页面的初始数据
  334.    */
  335. data: {
  336. allNum:0,//试题总数
  337. noNum: 0,//未做试题总数
  338. subAswData:""
  339. },
  340.  
  341. /**
  342.    * 生命周期函数--监听页面加载
  343.    */
  344. onLoad: function (options) {
  345. this.setData({
  346. allNum: options.allNum,
  347. noNum: options.noNum,
  348. subAswData: options.subAswData
  349. });
  350. },
  351.  
  352. //查看答题卡
  353. lookCard: function () {
  354. wx.navigateTo({
  355. url: '/pages/aswCard/aswCard?subAswData=' + JSON.stringify(this.data.subAswData) + '&allNum=' + this.data.allNum + "&noNum=" + this.data.noNum
  356. })
  357. },
  358. //交卷
  359. subAswData: function () {
  360. wx.navigateTo({
  361. url: '/pages/examAfterTip/examAfterTip?subAswData=' + JSON.stringify(this.data.subAswData)
  362. })
  363. }
  364. })
  365. （3）答题卡
  366.  
  367. <!--pages/aswCard/aswCard.wxml-->
  368. <view class="TestBox">
  369. <view class="accuracyBox">
  370. <view class='cardTip'>
  371. 色卡提示：<text class='tip tip1'></text>未做<text>{{aswNo}}</text>道题
  372. <text class='tip tip2'></text>已做<text>{{aswYes}}</text>道题
  373. </view>
  374. <view class="testTit"><text></text>单项选择题</view>
  375. <view class="cartNum">
  376. <block wx:for="{{subAswData}}">
  377. <block wx:if="{{item.chckType=='1'}}">
  378. <view class="test-num {{!item.answerCenter? '':'true'}} L">{{index+1}}</view>
  379. </block>
  380. </block>
  381. </view>
  382. <view class="testTit"><text></text>多项选择题</view>
  383. <view class="cartNum">
  384. <block wx:for="{{subAswData}}">
  385. <block wx:if="{{item.chckType=='2'}}">
  386. <view class="test-num {{!item.answerCenter? '':'true'}} L">{{index+1}}</view>
  387. </block>
  388. </block>
  389. </view>
  390. <view class="testTit"><text></text>简答题</view>
  391. <view class="cartNum">
  392. <block wx:for="{{subAswData}}">
  393. <block wx:if="{{item.chckType=='3'}}">
  394. <view class="test-num {{!item.answerCenter? '':'true'}} L">{{index+1}}</view>
  395. </block>
  396. </block>
  397. </view>
  398. </view>
  399.  
  400. <view class="cartBtnBox">
  401. <view bindtap='returnBackAsw'  class="continue-btn continue-btn1">继续练习</view>
  402. <view bindtap='subAswData' class="continue-btn continue-btn2">交卷</view>
  403. </view>
  404. </view>
  405. /* pages/aswCard/aswCard.wxss */
  406. .TestBox{padding: 10px 20px;font-size: 14px;}
  407. .cardTip{padding: 10px 0;clear: both; color: #999; line-height: 20px;}
  408. .cardTip text{color: #2F99EB;}
  409. .cardTip .tip{display: inline-block;width: 12px;height: 12px;border-radius: 50%;}
  410. .cardTip .tip1{border:1px solid #ccc;}
  411. .cardTip .tip2{border:1px solid #40D496;background: #40D496; margin-left: 20px;}
  412. .TestBox .testTit{clear: both;overflow: hidden;font-size: 18px;color: #333; padding: 10px 0;}
  413. .TestBox .testTit label{border: 2px solid #2F99EB;margin-right: 15px;}
  414. .TestBox .cartNum{clear: both;overflow: hidden;font-size: 16px;}
  415. .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;}
  416. .TestBox .cartNum .test-num.yes{background: #2F99EB;color: #fff;border: 1px solid #2F99EB;}
  417. .TestBox .cartNum .test-num.true{background: #40D496;color: #fff;border: 1px solid #40D496;}
  418. .TestBox .cartNum .test-num.error{background: #FC5D5A;color: #fff;border: 1px solid #FC5D5A;}
  419.  
  420. .TestBox .cartBtnBox{clear: both;padding: 10px 0;}
  421.  
  422. .TestBox .cartBtnBox .continue-btn{color: #fff;background: #2F99EB;height: 50px;line-height: 50px;text-align: center; width: 45%;}
  423. .TestBox .continue-btn1{float: left;}
  424. .TestBox .continue-btn2{float: right;}
  425. // pages/aswCard/aswCard.js
  426. Page({
  427.  
  428. /**
  429.    * 页面的初始数据
  430.    */
  431. data: {
  432. aswYes:0,//已做题数
  433. aswNo:0,//未做题数
  434. subAswData:[]
  435. },
  436.  
  437. /**
  438.    * 生命周期函数--监听页面加载
  439.    */
  440. onLoad: function (options) {
  441. var noNum = options.noNum;//未做试题总数;
  442. var yesNum = options.allNum - noNum;//已做题总数
  443. var dataList = JSON.parse(JSON.parse(options.subAswData));
  444. this.setData({
  445. aswYes: yesNum,
  446. aswNo: noNum,
  447. subAswData: dataList
  448. });
  449. },
  450. //继续学习
  451. returnBackAsw:function(){
  452. wx.navigateBack({
  453. delta: 2
  454. })
  455. },
  456. subAswData:function(){
  457. wx.navigateTo({
  458. url: '/pages/examAfterTip/examAfterTip?subAswData=' + JSON.stringify(JSON.stringify(this.data.subAswData))
  459. })
  460. }
  461. })
  462.  (4)提交答卷后
  463. <!--pages/examAfterTip/examAfterTip.wxml-->
  464. <view class="TestBox">
  465. <view class="accuracyBox">
  466. <view class="tureBox">
  467. <text class="truelv">正确率</text>
  468. <label><text>{{aswAccNum}}</text>%</label>
  469. </view>
  470. <view class='cardTip'>
  471. <view>
  472. 正确率只针对选择题，色卡标注：<text class='tip tip1'></text>正确<text>{{aswTrue}}</text>道题 <text class='tip tip2'></text>错误<text>{{aswFalse}}</text>道题（包含未做）
  473. </view>
  474. <view>
  475. 简答题请参考答案评分，色卡标注：<text class='tip tip3'></text>已做<text>{{aswYes}}</text>道题 <text class='tip tip4'></text>未做<text>{{aswNo}}</text>道题
  476. </view>
  477. </view>
  478. <view class="testTit"><text></text>单项选择题</view>
  479. <view class="cartNum">
  480. <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}">
  481. <block wx:if="{{item.chckType=='1'}}">
  482. <view class="test-num {{item.trueAsw==item.answerCenter? 'true':'error'}} L">{{index+1}}</view>
  483. </block>
  484. </block>
  485. </view>
  486. <view class="testTit"><text></text>多项选择题</view>
  487. <view class="cartNum">
  488. <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}">
  489. <block wx:if="{{item.chckType=='2'}}">
  490. <view class="test-num  {{item.trueAsw==item.answerCenter? 'true':'error'}} L">{{index+1}}</view>
  491. </block>
  492. </block>
  493. </view>
  494. <view class="testTit"><text></text>简答题</view>
  495. <view class="cartNum">
  496. <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}">
  497. <block wx:if="{{item.chckType=='3'}}">
  498. <view class="test-num {{!item.answerCenter? '':'yes'}} L">{{index+1}}</view>
  499. </block>
  500. </block>
  501. </view>
  502. </view>
  503. <view class="cartBtnBox">
  504. <view bindtap='examAnalysisAll'  class="continue-btn continue-btn1">查看全部解析</view>
  505. <view bindtap='examAnalysis' class="continue-btn continue-btn2">查看错题解析</view>
  506. </view>
  507. <view class="cartBtnBox">
  508. <button type='primary'>保存做题结果</button>
  509. </view>
  510. </view>
  511. /* pages/examAfterTip/examAfterTip.wxss */
  512. .TestBox{padding: 10px 20px;font-size: 14px;}
  513.  
  514. .cardTip{ background-color:#f8f3ed;padding: 10px;line-height: 25px; color: #666; margin-top: 10px;}
  515. .cardTip view{padding-bottom: 10px;}
  516. .cardTip text{color: #2F99EB;}
  517. .cardTip .tip{display: inline-block;width: 12px;height: 12px;border-radius: 50%;}
  518. .cardTip .tip1{border:1px solid #40D496;background: #40D496;}
  519. .cardTip .tip2{border:1px solid #FC5D5A;background: #FC5D5A; margin-left: 5px;}
  520. .cardTip .tip3{border:1px solid #2F99EB;background: #2F99EB;}
  521. .cardTip .tip4{border:1px solid #ccc; margin-left: 5px;}
  522.  
  523. .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;}
  524. .TestBox .tureBox .truelv{display:  block;padding-top: 30px;}
  525.  
  526. .TestBox .testTit{clear: both;overflow: hidden;font-size: 18px;color: #333; padding: 10px 0;}
  527. .TestBox .testTit label{border: 2px solid #2F99EB;margin-right: 15px;}
  528. .TestBox .cartNum{clear: both;overflow: hidden;font-size: 16px;}
  529. .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;}
  530. .TestBox .cartNum .test-num.yes{background: #2F99EB;color: #fff;border: 1px solid #2F99EB;}
  531. .TestBox .cartNum .test-num.true{background: #40D496;color: #fff;border: 1px solid #40D496;}
  532. .TestBox .cartNum .test-num.error{background: #FC5D5A;color: #fff;border: 1px solid #FC5D5A;}
  533.  
  534. .TestBox .cartBtnBox{clear: both;padding: 10px 0;}
  535.  
  536. .TestBox .cartBtnBox .continue-btn{color: #fff;background: #2F99EB;height: 50px;line-height: 50px;text-align: center; width: 45%;}
  537. .TestBox .continue-btn1{float: left;}
  538. .TestBox .continue-btn2{float: right;}
  539. // pages/examAfterTip/examAfterTip.js
  540. Page({
  541.  
  542. /**
  543.    * 页面的初始数据
  544.    */
  545. data: {
  546. subAswData:[],//试题数据
  547. aswFalse: 0,//错误选择题数
  548. aswTrue: 0,//正确选择题数
  549. aswAccNum: 0,//正确率
  550. aswYes: 0,//已做简答题数
  551. aswNo: 0,//未做简答题数
  552. },
  553.  
  554. /**
  555.    * 生命周期函数--监听页面加载
  556.    */
  557. onLoad: function (options) {
  558. var dataList = JSON.parse(JSON.parse(options.subAswData));
  559. var aswFalse=0,aswTrue=0,aswAllNum=0,aswYes=0,aswNo = 0, aswAccNum=0;
  560. for(var i=0;i<dataList.length;i++){
  561. if (dataList[i].chckType == 1 || dataList[i].chckType == 2){//选择题计算
  562. aswAllNum+=1;
  563. if (dataList[i].trueAsw == dataList[i].answerCenter){
  564. aswTrue += 1;
  565. }
  566. else{
  567. aswFalse += 1;
  568. }
  569. }
  570. else{//简答题计算
  571. if (!!dataList[i].answerCenter){
  572. aswYes+=1;
  573. }
  574. else{
  575. aswNo+=1;
  576. }
  577. }
  578. }
  579. aswAccNum = (aswTrue / aswAllNum)*100;
  580. this.setData({
  581. aswFalse: aswFalse,//错误选择题数
  582. aswTrue: aswTrue,//正确选择题数
  583. aswAccNum: aswAccNum,//总选择题数
  584. aswYes: aswYes,//已做简答题数
  585. aswNo: aswNo,//未做简答题数
  586. subAswData: dataList
  587. });
  588. },
  589. //查看全部试题解析
  590. examAnalysisAll:function(){
  591. wx.navigateTo({
  592. url: '/pages/examAnalysisAll/examAnalysisAll?subAswData=' + JSON.stringify(this.data.subAswData)
  593. })
  594. },
  595. //查看错题解析
  596. examAnalysis: function () {
  597. wx.navigateTo({
  598. url: '/pages/examAnalysis/examAnalysis?subAswData=' + JSON.stringify(this.data.subAswData)
  599. })
  600. }
  601. })
  602.  
  603. （5）答案解析
  604.  
  605. <!--pages/examAnalysisAll/examAnalysisAll.wxml-->
  606. <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}">
  607. <view class='exasw-com'>
  608. <view class="cont-tit">
  609. <view class="L" wx:if="{{item.chckType==1}}">单项选择</view>
  610. <view class="L" wx:if="{{item.chckType==2}}">多项选择</view>
  611. <view class="L" wx:if="{{item.chckType==3}}">简单题</view>
  612. </view>
  613. <view class='exam-com'>
  614. <view class='exam-title'>
  615. {{item.aswTitle}}<text> {{item.aswType}}</text>
  616. </view>
  617. <block wx:if="{{item.chckType==1}}">
  618. <radio-group class="radio-group">
  619. <label class="radio change-item" wx:for="{{item.aswItem}}" wx:for-item="item2">
  620. <radio value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}" />{{item2.text}}
  621. </label>
  622. </radio-group>
  623. </block>
  624. <block wx:if="{{item.chckType==2}}">
  625. <checkbox-group  class="checkbox-group">
  626. <label class="checkbox change-item" wx:for-items="{{item.aswItem}}" wx:for-item="item2">
  627. <checkbox value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}"/>{{item2.text}}
  628. </label>
  629. </checkbox-group>
  630. </block>
  631. <view class='exam-bottom'>
  632. <view class='exam-bootom-txt'>
  633. <view wx:if="{{item.chckType==3}}">
  634. 您的答案：<text class='exam-you'>未填写</text>
  635. </view>
  636. <view wx:else>
  637. 正确答案：<text class='exam-yes'>{{item.trueAsw}}</text>
  638. 您的答案：<text class='exam-you'>{{item.answerCenter}}</text>
  639. </view>
  640. </view>
  641. <view class='exam-bootom-tip'>
  642. <text>答案解析：</text>
  643. <label>{{item.analysisTxt}}</label>
  644. </view>
  645. </view>
  646. </view>
  647. </view>
  648. </block>
  649. /* pages/examAnalysisAll/examAnalysisAll.wxss */
  650. .L,.R,.fl,.fr{display:inline;}
  651. .L ,.fl{float:left;}
  652. .R ,.fr{float:right;}
  653. .aswNum{text-align: right;}
  654. .exasw-com{padding: 10px 20px;}
  655. .cont-tit{font-size: 14px;color: #666; padding-bottom: 5px; border-bottom: 1px solid #ccc;clear: both;overflow: hidden;}
  656. .cont-tit text{font-size: 20px;font-weight: bold;color: #2F99EB;}
  657. .cont-tit view{width: 49%;}
  658. .asw-box{ font-size: 14px;}
  659. .exam-com{clear: both; padding-top: 10px;}
  660. .exam-title{color: #333;line-height: 25px;}
  661. .exam-title text{font-size: 12px;color: #999;}
  662. .change-radio,.change-item{display: block;clear: both; padding: 5px 10px }
  663. .exam-bottom{font-size: 14px;color: #666;}
  664. .exam-bottom .exam-bootom-txt{clear: both;padding: 10px 0;}
  665. .exam-bootom-txt text{font-weight: bold; padding-right: 20px;}
  666. .exam-bootom-txt .exam-yes{color: #00CC00;}
  667. .exam-bootom-txt .exam-you{color: #f00;}
  668. .exam-bootom-tip{clear: both;}
  669. .exam-bootom-tip text{font-weight: bold; font-size: 14px;}
  670. .exam-bootom-tip label{padding:10px 0; text-indent: 10px;line-height: 25px;font-size: 12px; display: block;}
  671. // pages/examAnalysisAll/examAnalysisAll.js
  672. Page({
  673.  
  674. /**
  675.    * 页面的初始数据
  676.    */
  677. data: {
  678. page: 0,
  679. chckTypeNum: 1,
  680. subAswData: []
  681. },
  682.  
  683. /**
  684.    * 生命周期函数--监听页面加载
  685.    */
  686. onLoad: function (options) {
  687. var dataList = JSON.parse(options.subAswData);
  688. this.setData({
  689. subAswData: dataList,
  690. page: dataList.length
  691. });
  692. },
  693.  
  694. })
  695. （6）错题解析
  696.  
  697. <!--pages/examAnalysis/examAnalysis.wxml-->
  698. <view class='exasw-com'>
  699. <view  wx:if="{{page>0}}">
  700. <view class="cont-tit">
  701. <view class="L">
  702. <label wx:if="{{chckTypeNum=='1'}}"> 单项选择 </label>
  703. <label wx:if="{{chckTypeNum=='2'}}"> 多项选择 </label>
  704. <label wx:if="{{chckTypeNum=='3'}}"> 简答题 </label>
  705. </view>
  706. <view class="R aswNum"><text>{{currentTab+1}}</text>/{{page}}</view>
  707. </view>
  708. <swiper current="{{currentTab}}" duration="300" class='asw-box' bindchange="swiperTab" style='min-height:600px;'>
  709. <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}" wx:for-index="indnum">
  710. <swiper-item>
  711. <view class='exam-com'>
  712. <view class='exam-title'>
  713. {{item.aswTitle}}<text> {{item.aswType}}</text>
  714. </view>
  715. <block wx:if="{{item.chckType==1}}">
  716. <radio-group class="radio-group">
  717. <label class="radio change-item" wx:for="{{item.aswItem}}" wx:for-item="item2">
  718. <radio value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}" />{{item2.text}}
  719. </label>
  720. </radio-group>
  721. </block>
  722. <block wx:if="{{item.chckType==2}}">
  723. <checkbox-group  class="checkbox-group">
  724. <label class="checkbox change-item" wx:for-items="{{item.aswItem}}" wx:for-item="item2">
  725. <checkbox value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}"/>{{item2.text}}
  726. </label>
  727. </checkbox-group>
  728. </block>
  729. <view class='exam-bottom'>
  730. <view class='exam-bootom-txt'>
  731. <view wx:if="{{item.chckType==3}}">
  732. 您的答案：<text class='exam-you'>未填写</text>
  733. </view>
  734. <view wx:else>
  735. 正确答案：<text class='exam-yes'>{{item.trueAsw}}</text>
  736. 您的答案：<text class='exam-you'>{{item.answerCenter}}</text>
  737. </view>
  738. </view>
  739. <view class='exam-bootom-tip'>
  740. <text>答案解析：</text>
  741. <label>{{item.analysisTxt}}</label>
  742. </view>
  743. </view>
  744. </view>
  745. </swiper-item>
  746. </block>
  747. </swiper>
  748. </view>
  749. <view wx:else>
  750. 你真棒，没有错误喔！
  751. </view>
  752. </view>
  753. /* pages/examAnalysis/examAnalysis.wxss */
  754. .L,.R,.fl,.fr{display:inline;}
  755. .L ,.fl{float:left;}
  756. .R ,.fr{float:right;}
  757. .aswNum{text-align: right;}
  758. .exasw-com{padding: 10px 20px;}
  759. .cont-tit{font-size: 14px;color: #666; padding-bottom: 5px; border-bottom: 1px solid #ccc;clear: both;overflow: hidden;}
  760. .cont-tit text{font-size: 20px;font-weight: bold;color: #2F99EB;}
  761. .cont-tit view{width: 49%;}
  762. .asw-box{ font-size: 14px;}
  763. .exam-com{clear: both; padding-top: 10px;}
  764. .exam-title{color: #333;line-height: 25px;}
  765. .exam-title text{font-size: 12px;color: #999;}
  766. .change-radio,.change-item{display: block;clear: both; padding: 5px 10px }
  767. .exam-bottom{font-size: 14px;color: #666;}
  768. .exam-bottom .exam-bootom-txt{clear: both;padding: 10px 0;}
  769. .exam-bootom-txt text{font-weight: bold; padding-right: 20px;}
  770. .exam-bootom-txt .exam-yes{color: #00CC00;}
  771. .exam-bootom-txt .exam-you{color: #f00;}
  772. .exam-bootom-tip{clear: both;}
  773. .exam-bootom-tip text{font-weight: bold; font-size: 14px;}
  774. .exam-bootom-tip label{padding:10px 0; text-indent: 10px;line-height: 25px;font-size: 12px; display: block;}
  775. // pages/examAnalysis/examAnalysis.js
  776. Page({
  777.  
  778. /**
  779.    * 页面的初始数据
  780.    */
  781. data: {
  782. currentTab: 0,
  783. page: 0,
  784. chckTypeNum: 1,
  785. subAswData: []
  786. },
  787.  
  788. /**
  789.    * 生命周期函数--监听页面加载
  790.    */
  791. onLoad: function (options) {
  792. var dataList = JSON.parse(options.subAswData);
  793. var errList=[];
  794. for(var i=0;i<dataList.length;i++){
  795. if (dataList[i].chckType == 1 || dataList[i].chckType == 2) {//筛选错题未做题
  796. if (dataList[i].trueAsw == dataList[i].answerCenter) {
  797. }
  798. else {
  799. errList.push(dataList[i]);
  800. }
  801. }
  802. else{
  803. if (!dataList[i].answerCenter){
  804. errList.push(dataList[i]);
  805. }
  806. }
  807. }
  808. this.setData({
  809. subAswData: errList,
  810. page: errList.length
  811. });
  812. },
  813. //滑动切换参数设置
  814. swiperTab: function (e) {
  815. this.setData({
  816. currentTab: e.detail.current,
  817. chckTypeNum: this.data.subAswData[e.detail.current].chckType
  818. });
  819. }
  820. })

微信小程序之在线答题（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. WPF TextBox提示文字设定

    WPF TextBox框提示文字,鼠标划入提示文字消失 <TextBox Width=" VerticalContentAlignment="Center" Bor ...

  2. linux下的远程数据库（Oracle）中文乱码问题

    适用于本地客户端(PLSQL Developer )访问远程数据库时,查询结果出现的乱码,当在远程数据库上查询结果时显示正常. 1.查询远程数据库的编码: select userenv('langua ...

  3. Flask 第二篇

    Flask 中的 Render Redirect HttpResponse 1.Flask中的HTTPResponse 在Flask 中的HttpResponse 在我们看来其实就是直接返回字符串 2 ...

  4. 文字内容展开与折叠jquery代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. ES6对象的super关键字

    super是es6新出的关键字,它既可以当作函数使用,也可以当作对象使用,两种使用方法不尽相同 1.super用作函数使用的时候,代表父类的构造函数,es6规定在子类中使用this之前必须先执行一次s ...

  6. SQL左连接查询 left join ... on

    左连接查询 保留左边主表的所有行(即使在右表没有匹配的行),右表输出满足 on 条件的行,不满足的输出null   示例:组合两个表 - 力扣 表1: Person +--------------+- ...

  7. Python中的socket

    socket()模块函数用法 import socket socket.socket(socket_family,socket_type,protocal=0) socket_family 可以是 A ...

  8. List<object> 转 List<T>

    List<TAXIWAY_CENTER_LINE> kk = allObjs.Where(c => c.ToString() == "AMXM.TAXIWAY_CENTER ...

  9. Java练习 SDUT-3106_小鑫数数儿

    小鑫数数儿 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 某天小鑫忽然得到了许多的数字,他很好学,老师给他布置了一个任 ...

  10. IoT SaaS加速器——助力阿尔茨海默病人护理

    场景介绍 阿尔茨海默病,是导致中老年人认知功能障碍的最常见疾病之一,是发生在老年期及老年前期的一种原发性退行性脑病.据估计,全世界痴呆症患者数量为4700万,到2030年将达到7500万人.痴呆症患者 ...