基于JavaScript在線考試系統的設計與實現

來學偉，魯曉輝

(三門峽職業技術學院信息傳媒學院，河南三門峽 472000)

1 引言

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

2 系統設計需求

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

3 系統體系結構設計

業務邏輯層的內容主要是包括應用服務系統的對象內容，它們是用來對現實世界進行的一種的模擬，對對象的一些行為描述和一些對象之間的關系進行定義，但是并沒有將用戶和系統的交互操作實現進行考慮，通過對模型分析的不斷精化以及不斷調整實現業務邏輯層面。

數據存儲可以對數據進行操作和記錄。本次所需要開發的系統應用服務程序中，使用一個常見的關系型數據模型內容。數據庫操作軟件的MySQL 數據庫。所使用的工具包內容是系統所包含的，除此以外還包括一些語言內容等。系統架構示意圖如圖1所示。

圖1 系統架構示意圖

4 功能的實現

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

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

4.1 實現遠程登錄

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

4.2 數據庫的實現

本文可以通過遠程登錄來對數據庫進行操作[8]。用戶名默認為root，密碼在安裝AppServ 時就填寫了，直接登錄進去后，可以創建數據庫及數據庫表，可以創建用戶表，也可以創建題目表，以用戶表為例，它的表結構如表1所示。

表1 用戶信息表結構

4.3 UI交互的實現

1)登錄頁面的實現。

通過表單來實現，經過js文件提交給login.php，由login.php根據SQL語句的執行結果進行跳轉。login.php文件代碼如下：

2)在線主界面的實現

當登錄成功后，系統會根據角色的不同，在主界面顯示不同的內容，如果是學生身份，在左側導航欄內顯示個人信息查詢[9]，測試1，測試2……測試n等內容，最后是查看成績，如果是教師身份，則顯示學生信息錄入、學生信息查詢、學生信息刪除、學生信息統計、試題錄入、主觀題評閱、成績統計等信息，當單擊左側導航信息時，在右側主信息顯示區內即可顯示相關信息。運行效果如圖2所示。在頁眉部分顯示當前時間，修改密碼，退出系統等信息。運行效果如圖3所示。

圖2 主界面運行效果圖

圖3 修改密碼運行效果圖

5 結束語

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