基于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

{

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.