基于JavaScript在線考試系統(tǒng)的設(shè)計與實現(xiàn)

來學(xué)偉，魯曉輝

(三門峽職業(yè)技術(shù)學(xué)院信息傳媒學(xué)院，河南三門峽 472000)

1 引言

2020年以來，線上線下混合式教學(xué)模式必將被更多的學(xué)校所采用，而作為教學(xué)評價的重要方式教學(xué)考核也勢必更多地采用在線考試系統(tǒng)。近年來，隨著在線考試系統(tǒng)的不斷普及，越來越多的高職院校都在使用在線考試系統(tǒng)，該考試系統(tǒng)大大地提高了教學(xué)考核的效率[1]，既可以實現(xiàn)過程考核也可以實現(xiàn)結(jié)果考核，使教學(xué)考核工作更加合理、公平和科學(xué)，它降低了人力和物力，它不是疫情期間的臨時舉措，而是教學(xué)考核的改革方向?，F(xiàn)在市面上的在線考試系統(tǒng)種類繁多，大同小異，功能復(fù)雜，操作不便，在使用過程中可維護性和靈活性不足?；谶@種情況，筆者開發(fā)了基于JavaScript的在線考試系統(tǒng)，該系統(tǒng)功能齊全而且操作簡便，便于擴展，易于維護，提高了工作效率，提高了高職教學(xué)考核工作的效率。

2 系統(tǒng)設(shè)計需求

在線考試系統(tǒng)在教務(wù)系統(tǒng)中越來越重要，本文從教師、學(xué)生和教務(wù)管理人員三個層次進行分析，對于學(xué)生來說，在線考試系統(tǒng)應(yīng)該滿足隨機生成試卷，可以提供答題，自動評閱試卷，計算出總分的功能；從教師角度出發(fā)，在線考試系統(tǒng)可以滿足教師命題，并提供題庫、提供客觀題的參考答案、評閱主觀題、審查成績及進行成績分析生成報表等功能；從管理人員的角度出發(fā)，可以對學(xué)生賬戶、教師賬戶進行添加、刪除、修改、查詢等，對于題庫可以瀏覽和刪除等操作，可以對用戶分配不同的角色，對系統(tǒng)進行維護[2]。從前臺界面上來說，要實現(xiàn)頁面的整體布局；實現(xiàn)基礎(chǔ)表單的制作和驗證，并給予友好的提示；動態(tài)生成表格和樣式，實現(xiàn)表格隔行換色的效果；實現(xiàn)隨機生成不同的試卷；可以動態(tài)創(chuàng)建、添加和刪除DOM 元素，實現(xiàn)用戶登錄的本地和遠程驗證，并給予錯誤提示，驗證成果后根據(jù)不同的角色進入不同的頁面，同時可以更改密碼，查看當(dāng)前時間，考試倒計時等效果。

3 系統(tǒng)體系結(jié)構(gòu)設(shè)計

業(yè)務(wù)邏輯層的內(nèi)容主要是包括應(yīng)用服務(wù)系統(tǒng)的對象內(nèi)容，它們是用來對現(xiàn)實世界進行的一種的模擬，對對象的一些行為描述和一些對象之間的關(guān)系進行定義，但是并沒有將用戶和系統(tǒng)的交互操作實現(xiàn)進行考慮，通過對模型分析的不斷精化以及不斷調(diào)整實現(xiàn)業(yè)務(wù)邏輯層面。

數(shù)據(jù)存儲可以對數(shù)據(jù)進行操作和記錄。本次所需要開發(fā)的系統(tǒng)應(yīng)用服務(wù)程序中，使用一個常見的關(guān)系型數(shù)據(jù)模型內(nèi)容。數(shù)據(jù)庫操作軟件的MySQL 數(shù)據(jù)庫。所使用的工具包內(nèi)容是系統(tǒng)所包含的，除此以外還包括一些語言內(nèi)容等。系統(tǒng)架構(gòu)示意圖如圖1所示。

圖1 系統(tǒng)架構(gòu)示意圖

4 功能的實現(xiàn)

本文采用AppServ 來配置服務(wù)器，AppServ 是一個知名的PHP 環(huán)境一鍵安裝包，使用起來比較穩(wěn)定而且小巧，它內(nèi)嵌了MySQL 數(shù)據(jù)庫管理軟件，安全性能高，可以通過http://localhost:8088 來測試該服務(wù)器是否配置成功[3](8088 為安裝時默認(rèn)的端口號)，測試成功后，可以把整個項目復(fù)制到appserv 的www 文件夾下，這樣就可以通過瀏覽器來訪問服務(wù)器上的系統(tǒng)了。

開發(fā)基于JavaScript 的在線考試系統(tǒng)，采用HBuildX，該軟件輕巧速度快，安全性好，插件豐富，近年來幾乎成為前端開發(fā)人員的首選。

4.1 實現(xiàn)遠程登錄

在JS 文件中使用原生的JavaScript，通過Ajax 來完成遠程登錄，XMLHttpRequest 是Ajax 技術(shù)的核心，因為XHR 的存在，向服務(wù)器發(fā)送請求消息以及對服務(wù)器響應(yīng)進行解析也就變得簡單起來了。通過異步方式可以從服務(wù)器獲得更豐富的信息，也就是說，某一事件一旦被觸發(fā)，無需刷新頁面即可獲得最新數(shù)據(jù)[4]。也意味著，本文通過XHR 對象來獲得新數(shù)據(jù)，接下來再通過DOM把新數(shù)據(jù)插入到頁面里去。盡管名字中含有XML的內(nèi)容，但異步通信和數(shù)據(jù)的格式?jīng)]有關(guān)系；這種技術(shù)不用刷新頁面就可以從服務(wù)器獲得最新數(shù)據(jù)[5]，也許不一定是XML數(shù)據(jù)。而且所有的瀏覽器內(nèi)均建有XMLHttpRequest 對象。當(dāng)向服務(wù)器發(fā)送請求時，需使用XMLHttpRequest 對象的open() 和send()方法，open()方法執(zhí)行時，還沒有發(fā)送請求，只是啟動一個請求來準(zhǔn)備發(fā)送。只有調(diào)用send()方法才是發(fā)送請求。open()方法具有3 個參數(shù)，第一個是發(fā)送的方式，一般選擇post，因為它更穩(wěn)定也更可靠，傳送數(shù)據(jù)時比較安全，而且傳送量大[6]。第二個參數(shù)為目的地，第三個表示是否選擇異步發(fā)送，一般情況選true。當(dāng)服務(wù)器響應(yīng)之后，第一步檢查status 屬性，以確定響應(yīng)已經(jīng)成功返回。HTTP 狀態(tài)代碼為200 作為成功的標(biāo)志。還有其他一些狀態(tài)碼，如404 表示需要訪問的資源不存在。readyState 屬性的值由一個值變成另一個值，都會觸發(fā)一次readyStatechange 事件?？梢岳迷撌录頇z測每次狀態(tài)變化后readyState 的值，通常只關(guān)注值為4的階段[7]。使用Ajax 實現(xiàn)在線測試系統(tǒng)遠程驗證-登錄功能的關(guān)鍵代碼為：

4.2 數(shù)據(jù)庫的實現(xiàn)

本文可以通過遠程登錄來對數(shù)據(jù)庫進行操作[8]。用戶名默認(rèn)為root，密碼在安裝AppServ 時就填寫了，直接登錄進去后，可以創(chuàng)建數(shù)據(jù)庫及數(shù)據(jù)庫表，可以創(chuàng)建用戶表，也可以創(chuàng)建題目表，以用戶表為例，它的表結(jié)構(gòu)如表1所示。

表1 用戶信息表結(jié)構(gòu)

4.3 UI交互的實現(xiàn)

1)登錄頁面的實現(xiàn)。

通過表單來實現(xiàn)，經(jīng)過js文件提交給login.php，由login.php根據(jù)SQL語句的執(zhí)行結(jié)果進行跳轉(zhuǎn)。login.php文件代碼如下：

2)在線主界面的實現(xiàn)

當(dāng)?shù)卿洺晒?，系統(tǒng)會根據(jù)角色的不同，在主界面顯示不同的內(nèi)容，如果是學(xué)生身份，在左側(cè)導(dǎo)航欄內(nèi)顯示個人信息查詢[9]，測試1，測試2……測試n等內(nèi)容，最后是查看成績，如果是教師身份，則顯示學(xué)生信息錄入、學(xué)生信息查詢、學(xué)生信息刪除、學(xué)生信息統(tǒng)計、試題錄入、主觀題評閱、成績統(tǒng)計等信息，當(dāng)單擊左側(cè)導(dǎo)航信息時，在右側(cè)主信息顯示區(qū)內(nèi)即可顯示相關(guān)信息。運行效果如圖2所示。在頁眉部分顯示當(dāng)前時間，修改密碼，退出系統(tǒng)等信息。運行效果如圖3所示。

圖2 主界面運行效果圖

圖3 修改密碼運行效果圖

5 結(jié)束語

在高等職業(yè)院校，混合式教學(xué)模式已經(jīng)成為主流，而對教學(xué)效果進行考核的方式也發(fā)生了深刻的變化，在線考試系統(tǒng)的普及和應(yīng)用已經(jīng)越來越為人們所接受，本文實現(xiàn)了基于JavaScript的在線考試系統(tǒng)，優(yōu)化了現(xiàn)存的在線考試的系統(tǒng)的一些功能，操作簡便，易于實現(xiàn)[10]，對于在線考試系統(tǒng)的設(shè)計有一定的借鑒意義。