基于WeX5平臺實現(xiàn)在線自助測試單頁

張律 鄭光明

摘?要：本文描述了基于WeX5平臺開發(fā)在線自助測試單頁的過程，該單頁具有支持單選、多選、判斷等多種客觀題型并能實時評分，在此單頁的基礎(chǔ)上繼續(xù)開發(fā)可實現(xiàn)功能更加完備的考試系統(tǒng)。

關(guān)鍵詞：WeX5;在線自助測試;單頁

一、概述

WeX5是目前國內(nèi)比較流行的H5 APP開發(fā)工具，完全開源免費，前端采用HTML5+CSS+JS標準結(jié)合bootstrap、jquery、Ajax等技術(shù)，APP采用混合應(yīng)用開發(fā)模式，支持多種類型后端并對跨平臺多前端支持極好，實現(xiàn)了一次開發(fā)即多平臺運行。

本文基于WeX5平臺描述開發(fā)在線自助測試單頁的過程，該單頁具有支持單選、多選、判斷等多種客觀題型并能實時評分。單頁通過baas服務(wù)將相應(yīng)題型的測試題提取到前臺頁面并展現(xiàn)在List組件中，用戶在單頁上點擊測試題的單選框及復(fù)選框，交卷即可實時顯示測試分數(shù)，并同時顯示正確答案，用戶點擊重考按鈕可刷新頁面，重新進行測試。

二、設(shè)計與實現(xiàn)

首先在后臺MySql數(shù)據(jù)庫中建立examol表并組織測試數(shù)據(jù)，表字段設(shè)計如下表所示。其中，題型字段中，1表示單選題，2表示多選題，3表示判斷題;備選答案選項中，考慮到判斷題的情形，eOption3和eOption4兩個字段可為空，當然也可以將單選題、多選題及判斷題分別放在三張不同的表中。

建立好數(shù)據(jù)源并配置完成Baas服務(wù)之后，在頁面上增加3個baasData數(shù)據(jù)組件，均通過baas服務(wù)連接至數(shù)據(jù)庫的examol表，分別作為單選題、多選題及判斷題的數(shù)據(jù)來源。在頁面上放置三個List組件，通過動態(tài)設(shè)置數(shù)據(jù)組件過濾條件及綁定分別展現(xiàn)單選題、多選題及判斷題的題干、選項及正確答案。

在單選List中放置radioGroup組件，其選項值來自于頁面上增加的data組件（此組件設(shè)置名稱為optdata，其中opt列含有4個記錄分別為A、B、C、D）;在多選List中放置checkboxGroup組件，其選項值也來自于頁面上的optdata數(shù)據(jù)組件;在判斷題List中放置radioGroup組件，其選項值來自于頁面上增加的data組件（此組件設(shè)置名稱為juoptdata，其中opt列含有2個記錄分別為正確、錯誤）。

除此之外，頁面上還增加了一個數(shù)據(jù)組件ifshowData（其中設(shè)置ifshow字段，默認為空值），用其來控制是否顯示正確答案、交卷和重考按鈕，例如正確答案所在行和重考按鈕的bind-visible屬性為“$model.ifshowData.val（"ifshow"）?== '1'”，而交卷按鈕的bind-visible屬性為“$model.ifshowData.val（"ifshow"）?== '0'”。

當頁面加載時，在頁面的modelLoad事件中通過定義數(shù)據(jù)組件過濾條件并刷新相應(yīng)數(shù)據(jù)組件實現(xiàn)在3個List組件中加載相應(yīng)題型，以單選題為例，代碼如下。

var scData = this.comp（"scData"）;

scData.setFilter（"scFilter"，"eClass = '1'"）;

scData.refreshData（）;

多選題及判斷題的處理與單選題的處理類似，將上面代碼中的eClass設(shè)置為2或3即可。

可以設(shè)置ifshowData組件的ifshow字段值為0來屏蔽正確答案及重考按鈕的顯示，只顯示交卷按鈕，代碼如下。

this.comp（"ifshowData"）.setValue（'ifshow'，'0'）;

用戶在頁面上通過點擊單選題、判斷題后的單選選項框及多選題后的多選選項框進行答題，然后點擊交卷按鈕進行實時評分，以下以單選題為例說明處理流程及邏輯。

因為通過數(shù)據(jù)組件提取后臺數(shù)據(jù)時，正確答案所屬列實際已經(jīng)提取到前臺，因此第一步可將正確答案存入數(shù)組，代碼如下。

var scanswer =[];

var scData = this.comp（"scData"）;

scData.each（function（param）{

scanswer.push（param.row.val（'eAnswer'））;

}）;

然后通過逐條比對的方式比較所選答案與數(shù)組中的正確答案的方式進行評分，代碼如下。

var radioGroup1 = this.comps（"radioGroup1"）;

for（var sci=0，scsum=0;sci

{

if（radioGroup1[sci].val（）=== scanswer[sci]）

{

scsum = scsum + 5;//假設(shè)每題5分

}

}

上例靈活應(yīng)用了comps（）、push（）及each（）等方法實現(xiàn)功能，多選題及判斷題的處理流程及邏輯與單選題類似，此處因篇幅原因不再贅述。注意如果要消除多選題所選答案組合后的空格，可對字符串調(diào)用replace（/＼＼s/ig，''）方法。

在頁面上還可以通過設(shè)置ifshowData組件的ifshow字段值為1來配置點擊交卷按鈕后頁面顯示正確答案及重考按鈕，并同時屏蔽交卷按鈕，代碼如下。

this.comp（"ifshowData"）.setValue（'ifshow'，'1'）;

最后可以使用以下代碼通過彈出窗口顯示各題型得分及總分。

var sum = scsum + mcsum + jusum;

alert（"您的總分為"+sum+"分！其中單選題得分為"+scsum+"分，多選題得分為"+mcsum+"分，判斷題得分為"+jusum+"分！"）;};

當點擊重考按鈕時，可設(shè)置ifshowData數(shù)據(jù)組件的ifshow字段值為0來屏蔽正確答案及重考按鈕，顯示交卷按鈕。通過刷新數(shù)據(jù)組件可以清除已經(jīng)答題的情況，代碼如下。

this.comp（"ifshowData"）.setValue（'ifshow'，'0'）;

this.comp（"scData"）.refreshData（）;

this.comp（"mcData"）.refreshData（）;

this.comp（"juData"）.refreshData（）;

三、結(jié)語

本文在WeX5平臺上以單頁模式實現(xiàn)了一個簡單但有實際功能的自助測試模塊，適用于平時刷題訓(xùn)練，在此基礎(chǔ)上，可以進一步進行開發(fā)實現(xiàn)如記錄成績、隨機抽題、保存試卷及答題情況等功能。

參考文獻：

[1]http：//www.wex5.com.