基于WeX5平台实现在线自助测试单页
来源:用户上传
作者:
摘 要：本文描述了基于WeX5平台开发在线自助测试单页的过程，该单页具有支持单选、多选、判断等多种客观题型并能实时评分，在此单页的基础上继续开发可实现功能更加完备的考试系统。
关键词：WeX5;在线自助测试;单页
一、概述
WeX5是目前国内比较流行的H5 APP开发工具，完全开源免费，前端采用HTML5+CSS+JS标准结合bootstrap、jquery、Ajax等技术，APP采用混合应用开发模式，支持多种类型后端并对跨平台多前端支持极好，实现了一次开发即多平台运行。
本文基于WeX5平台描述开发在线自助测试单页的过程，该单页具有支持单选、多选、判断等多种客观题型并能实时评分。单页通过baas服务将相应题型的测试题提取到前台页面并展现在List组件中，用户在单页上点击测试题的单选框及复选框，交卷即可实时显示测试分数，并同时显示正确答案，用户点击重考按钮可刷新页面，重新进行测试。
二、设计与实现
首先在后台MySql数据库中建立examol表并组织测试数据，表字段设计如下表所示。其中，题型字段中，1表示单选题，2表示多选题，3表示判断题;备选答案选项中，考虑到判断题的情形，eOption3和eOption4两个字段可为空，当然也可以将单选题、多选题及判断题分别放在三张不同的表中。
建立好数据源并配置完成Baas服务之后，在页面上增加3个baasData数据组件，均通过baas服务连接至数据库的examol表，分别作为单选题、多选题及判断题的数据来源。在页面上放置三个List组件，通过动态设置数据组件过滤条件及绑定分别展现单选题、多选题及判断题的题干、选项及正确答案。
在单选List中放置radioGroup组件，其选项值来自于页面上增加的data组件（此组件设置名称为optdata，其中opt列含有4個记录分别为A、B、C、D）;在多选List中放置checkboxGroup组件，其选项值也来自于页面上的optdata数据组件;在判断题List中放置radioGroup组件，其选项值来自于页面上增加的data组件（此组件设置名称为juoptdata，其中opt列含有2个记录分别为正确、错误）。
除此之外，页面上还增加了一个数据组件ifshowData（其中设置ifshow字段，默认为空值），用其来控制是否显示正确答案、交卷和重考按钮，例如正确答案所在行和重考按钮的bind-visible属性为“$model.ifshowData.val（"ifshow"） == '1'”，而交卷按钮的bind-visible属性为“$model.ifshowData.val（"ifshow"） == '0'”。
当页面加载时，在页面的modelLoad事件中通过定义数据组件过滤条件并刷新相应数据组件实现在3个List组件中加载相应题型，以单选题为例，代码如下。
var scData = this.comp（"scData"）;
scData.setFilter（"scFilter"，"eClass = '1'"）;
scData.refreshData（）;
多选题及判断题的处理与单选题的处理类似，将上面代码中的eClass设置为2或3即可。
可以设置ifshowData组件的ifshow字段值为0来屏蔽正确答案及重考按钮的显示，只显示交卷按钮，代码如下。
this.comp（"ifshowData"）.setValue（'ifshow'，'0'）;
用户在页面上通过点击单选题、判断题后的单选选项框及多选题后的多选选项框进行答题，然后点击交卷按钮进行实时评分，以下以单选题为例说明处理流程及逻辑。
因为通过数据组件提取后台数据时，正确答案所属列实际已经提取到前台，因此第一步可将正确答案存入数组，代码如下。
var scanswer =[];
var scData = this.comp（"scData"）;
scData.each（function（param）{
scanswer.push（param.row.val（'eAnswer'））;
}）;
然后通过逐条比对的方式比较所选答案与数组中的正确答案的方式进行评分，代码如下。
var radioGroup1 = this.comps（"radioGroup1"）;
for（var sci=0，scsum=0;sci<scanswer.length;sci++）
{
if（radioGroup1[sci].val（）=== scanswer[sci]）
{
scsum = scsum + 5;//假设每题5分
}
}
上例灵活应用了comps（）、push（）及each（）等方法实现功能，多选题及判断题的处理流程及逻辑与单选题类似，此处因篇幅原因不再赘述。注意如果要消除多选题所选答案组合后的空格，可对字符串调用replace（/＼＼s/ig，''）方法。
在页面上还可以通过设置ifshowData组件的ifshow字段值为1来配置点击交卷按钮后页面显示正确答案及重考按钮，并同时屏蔽交卷按钮，代码如下。
this.comp（"ifshowData"）.setValue（'ifshow'，'1'）;
最后可以使用以下代码通过弹出窗口显示各题型得分及总分。
var sum = scsum + mcsum + jusum;
alert（"您的总分为"+sum+"分！其中单选题得分为"+scsum+"分，多选题得分为"+mcsum+"分，判断题得分为"+jusum+"分！"）;};
当点击重考按钮时，可设置ifshowData数据组件的ifshow字段值为0来屏蔽正确答案及重考按钮，显示交卷按钮。通过刷新数据组件可以清除已经答题的情况，代码如下。
this.comp（"ifshowData"）.setValue（'ifshow'，'0'）;
this.comp（"scData"）.refreshData（）;
this.comp（"mcData"）.refreshData（）;
this.comp（"juData"）.refreshData（）;
三、结语
本文在WeX5平台上以单页模式实现了一个简单但有实际功能的自助测试模块，适用于平时刷题训练，在此基础上，可以进一步进行开发实现如记录成绩、随机抽题、保存试卷及答题情况等功能。
参考文献：
[1]http：//www.wex5.com.
转载注明来源:https://www.xzbu.com/1/view-14737218.htm
