基于B/S的在線考試系統設計

摘 要：針對專業培訓、遠程教育、（分類）招生考試等在線考試系統種類繁多、功能復雜、操作不便，在使用過程中有兼容性、可維護性和安全性等問題的現狀，采用H5、JS、PHP、MySQL等技術設計并開發了基于B/S的在線考試系統，實現了題庫管理、隨機自動組卷、在線考試、自動評分等功能。通過主流瀏覽器即可訪問該系統，系統能提高教學考核工作的效率，降低高校管理中的資金投入和運營成本。

關鍵詞：在線考試系統；系統設計；H5；PHP；MySQL

中圖分類號：TP311.5 文獻標識碼：A 文章編號：2096-4706（2024）13-0121-05

Design of Online Examination System Based on B/S

CAI Bofeng

（Taizhou Polytechnic College， Taizhou 225316， China）

Abstract： In response to the diverse types， complex functions， and inconvenient operation of online examination systems such as professional training， remote education， and （classified） enrollment exams， as well as compatibility， maintainability， and security issues during use， a B/S-based online examination system is designed and developed using technologies such as H5， JS， PHP， and MySQL， achieving functions such as question bank management， random automatic test paper generation， online examination， and automatic scoring. The system can be accessed through mainstream browsers， which can improve the efficiency of teaching and assessment work， and reduce the capital investment and operating costs in university management.

Keywords： online examination system; system design; H5; PHP; MySQL

0 引 言

雖然大多數高校建設了網絡教學平臺，但一般是專門針對專業人才培養方案規定的具體課程提供教學服務，可以解決在校學生線上教學、混合式教學所需的教學平臺問題，也可以進行在校學生的線上考試。但是，各個高校都有一定的針對社會人員的專業培訓、遠程教育、（分類）招生考試等教學活動，這種階段性或臨時性的與專業人才培養方案不相關的教學活動考試往往以紙質試卷為載體進行線下考試，其考試全過程費時、費力、易出錯且工作效率低；有些高校購買了在線考試系統，但目前市面上的在線考試系統存在種類繁多、功能復雜、操作不便，在使用過程中兼容性、可維護性和安全性等不足的問題，并且根據系統開發采用的技術和系統功能強弱，購買費用也不盡相同。這些系統有基于C/S模式的，也有基于B/S模式的[1]，基于C/S模式的系統一般采用Java技術開發，但存在開發成本高、安裝煩瑣、維護不方便等問題；基于B/S模式的系統一般采用HTML4、CSS2、ASP.NET、JSP、PHP等技術開發，開發成本相對低一些，但系統前端頁面往往存在瀏覽器兼容性不足等問題。隨著H5技術、jQuery框架技術、Ajax技術等技術的推出和不斷更新，不但能更好地開發出功能齊全、界面友好、操作簡便、兼容性好、易于擴展、易于維護、安全性好的系統，還有效降低系統的開發成本，提高系統的兼容性和可維護性等性能[2]。有鑒于此，本文介紹了基于H5、jQuery、Ajax、PHP等技術設計開發的在線考試系統，為專業培訓、遠程教育、（分類）招生考試，以及其他無網絡教學平臺的學校的在線考試等提供服務，提高教學考核工作的效率，也降低高校管理中的資金投入和運營成本。

1 系統分析

在線考試模式要求，只要在計算機網絡平臺上通過在線考試系統組建培訓教學等考試用試題庫，再通過在試題庫中隨機抽題并自動化組卷，然后讓考生參加測試，系統自動完成客觀題評閱并發布成績供教師查看和考生查詢。通過隨機組卷和自動閱卷可以提供更全面、客觀的教學效果評價方式，這也反過來督促教師和考生更扎實細致地開展教學工作和學習。通過實際調查和需求分析，提出在線考試系統有以下設計要求：

1）分角色統一管理系統的各個用戶（管理員、教師和考生），統一增減考生和教師信息，提高安全性?？忌卿浨岸丝荚囅到y，參加教師布置的考試、查詢自己的考試成績。教師登錄后臺教師管理系統，維護科目和試題庫、創建考試和查看考試結果。管理員登錄后臺管理系統，管理考生和教師賬號并分配用戶權限。

2）提供科目管理和章節管理功能，并能針對多個考試科目和多個章節模塊進行題庫管理，可以動態增減題目。

3）根據指定科目針對不同考生按照出題數量要求實現自動隨機組卷以防考生作弊功能。

4）實現考試時間倒計時功能，使考生實時了解考試剩余時間。

5）客觀題自動評分并提供試卷和成績的實時查詢顯示。

6）系統基于B/S架構設計開發，使考生隨時隨地進行考試。系統基于HTML5、CSS3、JavaScript、Jquery等技術實現在各大主流瀏覽器上的兼容使用，并通過PHP、MySQL等后臺開發技術實現系統功能、降低開發成本。利用Ajax技術實現數據的各種異步更新操作，提高用戶體驗。

7）系統界面設計美觀大方、操作便捷，系統運行穩定、安全可靠。

2 系統架構設計

B/S（Browser/Server）架構即客戶端瀏覽器、Web服務器和數據庫服務器，是WWW方式下實現信息訪問、共享的一種通用體系結構，是當今流行的Web軟件開發模式，具有客戶端無須安裝、占用內存小、服務器端反應迅速、使用靈活方便、運維成本低等特點，使用時通過主流瀏覽器訪問，不限時間地點、設備類型、訪問人數，其完全能夠滿足在線考試系統的相關要求。系統后臺數據庫采用MySQL數據庫。系統架構示意圖如圖1所示。

3 系統功能設計

由于系統涉及三種不同角色的用戶：考生登錄前端考試系統參加考試、查詢成績；教師登錄后端教師管理系統維護科目、試題庫、創建考試、查看結果；管理員登錄后端考試系統，管理用戶賬號、分配用戶權限[3]，因此系統功能模塊結構設計如圖2所示。

各個功能模塊具體設計如下：

1）考生子系統。登錄考場：教師創建某個科目的考試并設置好考試時間后，考生登錄系統自動進入定時刷新的考場列表，開考時間一到系統就會顯示“開始考試”按鈕，考生單擊開始答題。在線考試：考生一進入考場系統就自動按規則抽取試題，瀏覽器上顯示試題和考試計時器。考試結束前10分鐘系統會提示考試剩余時間，考生可提前交卷，或者等到考試結束系統自動交卷。交卷后系統自動進行客觀題閱卷。查詢成績：考生及時查看考試用時和成績。

2）教師子系統。教師的主要工作是建設試題庫，創建考場和監考[4]。其主要功能為科目管理：管理考試科目，每個考試科目有專用試題庫。章節管理：試題庫按章節組織，添加好科目后要先設置科目包含的各個章節，每個章節可以設置抽題比例，根據抽題比例隨機抽取題目。試題庫管理：試題按章節分類，包括單選題、多選題和判斷題。根據題型輸入題干、選項、參考答案和分值。創建考試：創建一次具體的考試，指定考試科目、考試開始時間和時長，設定抽取的各題型題數?？紙龉芾恚猴@示某次考試考生的完成情況，是否開始答題、是否已經交卷等。瀏覽考試結果：教師瀏覽某次考試的成績、用時，并可查看考生答卷[5]。

3）管理員子系統。管理員負責對考生、教師身份、系統選項等進行管理。其主要功能包括：教師管理：用于管理教師賬號、密碼等。班級管理：用于管理班級信息。考生管理：用于管理考生登錄賬號和密碼。

4 數據庫設計

使用主流的MySQL數據庫，用于存放課程、章節、試題、考場、試卷、用戶等信息[6-7]。由于課程由章節構成，而每個章節中又包含不同的試題；考試應可多次組織，每次考試就是一個考試/考場記錄，每次考試每個考生都有一張試卷，每張試卷由多條題目構成。

為便于開發維護，每個數據表都統一設置主鍵ID自增字段、設置刪除標志字段DeleteFlag以支持刪除數據的恢復（值為1表示邏輯刪除）。主要數據表包含的字段如下：

1）課程信息表Course包含：ID、課程名稱、排列序號、備注、刪除標志。

2）章節信息表Chapter包含：ID、課程ID、章節名、排列序號、選題比例、備注、刪除標志。

3）試題信息表Question包含：ID、課程ID、章節ID、題型、題干、選項A、選項B、選項C、選項D、參考答案、分值、刪除標志。

4）考場信息表Exam：ID、課程ID、考試名稱、班級ID、開考時間、考試時長、單選題數、多選題數、判斷題數、創建教師ID、創建日期、備注、刪除標志。

5）試卷信息表Paper包含：ID、考場ID、考生ID、開始時間、提交標志、提交時間、總分、刪除標志。

6）試卷題目表PaperQuestion包含：ID、試卷ID、題目ID、考生答案、得分、正確標志、刪除標志。

7）用戶信息表Users包含：ID、用戶類型、班級/單位ID、學號或工號、姓名、登錄賬號、密碼、最近登錄時間、登錄次數、備注、刪除標志。

5 系統詳細設計技術要點

5.1 公共頭部和尾部設計

系統的每個頁面都要求完成一些類似操作：

1）PHP網頁要在瀏覽器中顯示，最新發給瀏覽器的內容是HTML頭部的信息，每個網頁的頭部信息幾乎是一致的。

2）為了校驗用戶身份，通常是在登錄頁面中將當前用戶的ID信息保存在Session變量中，系統采用LoginUserld來保存用戶ID，在登錄后的頁面中檢查Session變量是否存在。

3）需要操作數據庫的公共函數庫、常規自定義函數庫和控件庫等。

4）需要添加常規的CSS和JavaScript腳本的引用聲明。為提高開發效率，將這些公共的部分匯集到一個頭文件Header.php中。

由于數據庫使用完需關閉，因此每個頁面包括公共尾部文件Footer.php，代碼如下：

<？ DBClose（）;？>

<iframe id="HiddenFrame" name="HiddenFrame" height="0"></iframe>

</body></html>

其中iframe是個隱藏框架，用于隱式表單提交，將表單的target屬性設為HiddenFrame后，頁面提交就不會在當前頁面中或打開新頁面，將操作結果信息直接通過對話框呈現給用戶，讓用戶感覺上是在操作桌面應用程序，提高用戶體驗。

5.2 用戶登錄模塊設計

由于系統的各類用戶采用同一用戶表Users保存用戶信息，因此系統設計一個統一入口登錄進入[8]。由于登錄表單不涉及Session變量，故無須添加Header.php，直接采用靜態代碼即可。登錄信息提交給后臺身份校驗代碼：Session初始化完成后，調用公共函數庫的GetParm（）函數獲取輸入信息，用以過濾掉特殊字符，以防止SQL注入等攻擊，這有效提高了系統安全性。系統用md5方式對用戶密碼進行加密保存，防止密碼明文泄露。登錄工作流程如圖3所示。

5.3 系統框架主頁面設計

用戶登錄后進入框架式的公共主頁面，主頁面包含頭部菜單欄和主體內容兩大部分，呈上下排列，通過最新的H5語義化標簽和彈性布局排版技術使其滿屏顯示。主體內容部分采用iframe技術實現，這樣內嵌頁面不受外面框架頁面干擾，以后每個內頁都像一個新頁面一樣設計即可。

5.4 分頁功能設計

后臺系統對信息維護的模塊都有分頁顯示功能。因輸出全部記錄將會影響系統顯示效率，更易造成數據庫死鎖，為此采用分頁顯示，并設計分頁獲取數據PageQuery（$sql）和分頁導航PageShow（$Parm=""），存放到Pager.php文件中便于引用。其中$Parm參數是用于傳遞額外參數，比如用戶在查詢框中輸入的查詢條件，由于HTTP協議的無狀態特征，分頁時需將查詢條件附加到URL參數中傳遞給下一個顯示頁面。PageQuery（$sql）和PageShow（$Parm=""）工作流程圖如圖4、圖5所示。

5.5 考場模塊設計

考生登錄后系統將根據Session中的當前用戶ID變量LoginUserID查詢試卷信息表Paper，并在“我的考試”頁面中顯示其考試記錄即考場。但是，當某場考試未開始時，系統會在操作欄顯示“考試還未開始”，而當開始考試時間到則要顯示“進入考試”鏈接，因此頁面要不斷刷新。如果采用整個頁面刷新那么將會出現頁面抖動，嚴重影響用戶體驗，為此采用Ajax局部刷新技術：在頁面中插入一個div容器用于顯示考場列表，系統只對該div區域進行刷新，從而避免抖動。局部刷新可采用jQuery的load方法，以Ajax方式在后臺啟動下載參數url指定的頁面內容，并將此頁面內容賦給div容器。

5.6 自動組卷模塊設計

在創建考試時設定組卷相關的參數，如考試科目、每個章節的抽題比例、每個題型的抽題數等，自動組卷就是根據這些參數從試題庫中隨機抽取題目，且不出現重題[8]。抽題過程是先按題型分類，再按章節分類獲取可選的題號集合，并計算每個題型每個章節的抽題數，然后通過生成隨機數，從題號集合中挑選題目，選中后從待選集合中移除，直到選滿或待選集合為空，如圖6所示。

5.7 考試時間提醒功能設計

在考生考試界面添加一個隱藏域<input type=

"hidden" id="EndTime"/>用于保存當前考試結束時間，以及一個div標簽<div id="TimeBox"></div>用于顯示剩余時間，并采用前端定時器setInterval（）腳本每隔1秒定時刷新來提示剩余時間，如果剩余時間小于15分鐘那么彈出對話框提醒考生，當考試結束考生未交卷時系統將強制交卷[9]，如圖7所示。

5.8 自動閱卷模塊設計

考生交卷時系統會檢查考生是否是按時或提前提交了試卷、是否重復交卷，并校驗考生身份[10]。系統對每個題目進行答案比對后將比對結果和得分值寫入試卷題目表PaperQuestion中，并計算總成績，總成績將根據試卷得分和滿分折算成百分制保存到試卷信息表Paper中，并記錄交卷時間、設置交卷標志，然后，自動返回考場列表頁面，此時考生可查看考試成績。

6 運行測試

系統開發完成后，在安裝有PHP7.3+Apache2.3+

MySQL 5.7以上版本或集成運行環境phpStudy 8.0（WAMP）的服務器上運行，客戶端使用Chrome、IE、Firefox等主流瀏覽器操作。運行時，先以管理員身份登錄系統添加教師和學生，再以教師身份登錄，添加維護課程、章節及抽題比例、章節的試題及分值，接著創建考試，即設定各種題型的試題數量和考試時間。然后以考生身份登錄，當開考時間到、考生進入考場后，系統自動按規則抽取試題組卷，并通過瀏覽器顯示試卷和計時器，考生完成考試交卷后，系統自動完成客觀題評閱并發布成績，此時教師和考生可查閱試卷和成績。

7 結 論

由于該系統安裝在服務器上，因此使用時客戶端只需通過主流瀏覽器即可正常訪問，考生可隨時隨地進行考試。系統界面操作簡便、兼容性、安全性和用戶體驗好。系統投入使用必將極大方便專業培訓、遠程教育、（分類）招生考試、甚至其他無網絡教學平臺的學校的在線考試課程考試等在內的在線考試，能有效提高教學考核的工作效率。

參考文獻：

[1] 嚴紅紅，劉力力.基于過程管理的在線考試平臺研究與設計 [J].現代電子技術，2022，45（24）：7-10.

[2] 郭敏.基于QT的在線考試系統設計與實現 [D].成都：電子科技大學，2020.

[3] 許家偉.基于JSP的在線考試系統的設計與實現 [J].現代信息科技，2023，7（8）：36-39.

[4] 宋巍.基于B/S構架的在線考試系統設計與研究 [J].電大理工，2021（2）：18-20+25.

[5] 任煥海.基于B/S架構的在線考試系統設計與實現 [J].現代信息科技，2021，5（22）：13-16.

[6] 李慧新，孫建竹，包文莉.基于需求分析的職業院校在線考試系統設計開發研究 [J].遼寧科技學院學報，2022，24（4）：20-22+26.

[7] 楊洲.基于B/S模式的智能考試系統的設計與實現 [D].阜陽：阜陽師范大學，2022.

[8] 劉昌華，班鵬新.基于Java技術的網上考試系統 [J].武漢工業學院學報，2003（2）：40-42.

[9] 石彬.計算機基礎在線考試系統的設計與實現 [D].成都：西華大學，2016.

[10] 李芳.中職學校在線考試系統的設計與實現 [J].現代信息科技，2022，6（24）：134-137.

作者簡介：蔡伯峰（1967.09—），男，漢族，江蘇泰州人，教授，計算機工程系主任，碩士，主要研究方向：軟件開發、職業教育與物聯網應用技術。