基于HTML5工程圖學考試自動閱卷系統的研究

陳平　李曉武　周曉雨　曹彤

摘 要 利用HTML5中Canvas元素的圖形處理技術，開發出基于HTML5的工程圖學考試自動閱卷系統，在圖形學試題的作答方式上提出了大膽創新，研究在Web環境下的在線繪圖、自動閱卷、智能評分、查詢閱卷結果、顯示答案等關鍵技術，實現去插件安裝，擺脫對Auto CAD等繪圖軟件的依賴，從而實現跨平臺、跨系統、跨終端的使用，實現工程圖學考試系統的自動閱卷功能。

關鍵詞 HTML5 工程圖學 考試系統 自動閱卷 在線繪圖

中圖分類號：TP312.1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文獻標識碼：A ? ?DOI：10.16400/j.cnki.kjdkx.2020.02.031

Research on Automatic Marking System of Engineering

Graphics Examination Based on HTML5

CHEN Ping， LI Xiaowu， ZHOU Xiaoyu， CAO Tong

（School of Mechanical Engineering， University of Science and Technology Beijing， Beijing 100083）

Abstract Using the graphics processing technology of canvas element in HTML5， an automatic marking system of Engineering Graphics examination based on HTML5 is developed. A bold innovation is put forward in the way of answering graphics examination questions. The key technologies such as online drawing， automatic marking， intelligent marking， querying marking results and displaying answers in the web environment are studied to realize plug-in removal and installation and get rid of auto CAD and other drawing software rely on， so as to realize the use of cross platform， cross system and cross terminal， and realize the automatic marking function of Engineering Graphics examination system.

Keywords HTML5; Engineering Graphics; examination system; automatic marking; online drawing

隨著計算機技術的迅猛發展，人們的生活習慣、學習方法以及工作方式等方面都發生了深刻的變化。在教育教學方面，慕課（MOOC）、微課堂、翻轉課堂等網絡在線輔助教學系統逐漸成為國內外遠程教育的熱點。[1，2，3]考試是對學習效果和知識掌握程度的一種重要的檢驗方法，隨著遠程教學模式的普及推廣，在線考試也逐漸成為高校遠程教育考核的重要手段。[4]在線考試縮短了傳統考試打印試卷、安排考試、收集試卷、批閱試卷、講評試卷、分析試卷這個漫長而復雜的過程，使考試更趨于靈活、客觀、公正。[5]目前已有多種在線考試系統應用到實際教學中，生成試題的算法以及選擇、判斷等客觀題的自動閱卷技術已相對成熟，主觀題的自動閱卷技術也取得一定的成功與突破。[6]

HTML5作為互聯網行業最新的Web標準，具有強大的跨平臺特性：[7-8]（1）無論在Windows電腦端，Linux服務器，還是Android移動設備上都能完美運行;（2）對于運行環境的硬件環境要求較低，只需滿足較低的CPU和內存需求即可;（3）提供的Canvas元素具有非常強大的處理圖形圖像的功能，與腳本語言JavaScript相結合，便可實現基于Web的基本繪圖功能，滿足工程圖學對“圖形”的要求。在網絡化在線考試系統與工程圖學作業自動批改系統已有研究的基礎上，結合HTML5優勢，本文在試題的上傳方式、作答模式和閱卷形式上提出大膽創新，研究能適應工程圖學考試系統的自動閱卷技術，構建了基于HTML5的工程圖學考試自動閱卷系統。

1 自動閱卷功能的特點

工程圖學考試自動閱卷系統是一個在互聯網環境中實現學生的自主學習、與教師或同學之間的交流互動、遠程在線考試并實現自動批閱工程圖學試題的系統，其在功能上應該滿足以下基本要求：

（1）應盡量滿足教師與學生的各種教學活動，充分體現教師的主導作用和學生的主體地位，提倡以學生為中心的探究型教學模式，充分調動學生的學習積極性，提高學習效率。

（2）考試系統中的試題只針對培養形象思維訓練的畫法幾何部分，即三視圖、組合體、立體表面交線、軸測圖等。

（3）工程圖學課程主要以“圖形”為主，考試的試題不能局限于選擇、判斷等題型，應圍繞“圖形”進行重點設計，教師能實現網頁在線繪圖、上傳試題等功能，實現去插件化，擺脫對Auto CAD等繪圖軟件的依賴。

（4）學生能遠程完成工程圖學課程的在線考試，界面友好，易于操作。

（5）系統能實現自動閱卷、智能評分等功能，學生能根據閱卷結果查詢批閱結果與正確答案等。其中，自動閱卷功能為本文研究的重點。

（6）數據庫的設計要體現共享性、安全性、有效性、一致性等特點，避免出現數據庫的冗余存儲造成系統不穩定，保證系統能實現正常的更新與維護。

（7）自動閱卷系統應具有功能完善的后臺管理系統，以方便管理員及時對數據庫的數據進行備份與恢復及各種信息的管理工作。

2 自動閱卷原理

由于構成工程圖學試題的工程機件形狀結構各異，除了平面立體、回轉體、曲面立體等常見的基本形體外，還包含復雜的自由曲線曲面流線型形體，而且，由基本形體組合形成的組合體形狀也豐富多樣，形體之間的截交相貫又會產生截交線、相貫線等復雜曲線。因此系統在自動閱卷前，需對構成工程圖學試題的各種圖形形狀進行分類，劃分成各種圖形元素，即圖元，明確各圖元的圖形數據，確定圖元的匹配策略（表1）。而通過計算機繪制圖形時，必須先明確構成圖形形狀的數據值，如通過確定兩端點坐標值繪制直線，通過確定圓心坐標與半徑尺寸繪制圓等。因此，在實現工程圖學考試的自動閱卷功能時，只需將確定兩個圖形形狀的數據值進行匹配比較，便可判斷學生答案與標準答案是否一致，并根據每一個圖元的分值權重統計出該試題的最后得分，即可實現工程圖學考試的自動閱卷功能。

由于每一道工程圖學試題均是由多種不同線型、顏色、線寬、位置坐標等屬性的圖元構成的圖元集，因此系統采用鏈表式的數據結構存儲學生答案、標準答案等的圖元信息，通過遍歷法進行學生答案與標準答案的匹配比較，即在學生答案的數據鏈表中取出某一圖元線型、線寬、位置坐標屬性的參數信息（顏色屬性不參與比較），逐一遍歷對應標準答案的數據鏈表，搜索與其相匹配的圖元，判斷該圖元是否存在，如果存在則是作答正確的圖元，在對應圖元的中心位置進行標注，并標記相應得分，若不存在，則是作答錯誤的圖元，不對其進行標注。重復上述識別過程，直至學生答案中的圖元全部判定完畢。

表1 圖元線型屬性對應的匹配策略

3 系統體系結構與框架方案設計

3.1 系統體系結構

根據軟件工程規范設計[9]的要求，工程圖學考試自動閱卷系統采用基于B/S（瀏覽器/服務器）的三層體系結構：（1）數據表示層：提供共享的數據資源，是教師、學生用戶端執行系統相關功能的界面顯示，是系統支撐的基礎;（2）應用服務層：利用PHP作為服務器端腳本解釋器，對教師、學生用戶端的請求數據進行分析、處理，并返回分析結果;（3）數據服務層：負責將教師、學生用戶端與服務器進行數據交換，系統將教師或學生需求的信息或請求處理結果返回給用戶，將圖片、文字等以網頁形式組織起來。這種基于B/S的三層體系結構，統一教師、學生的客戶端（瀏覽器），將自動閱卷系統中相關功能實現的核心部分集中到服務器上，使數據應用與數據存儲分開，方便實現數據庫系統對和類數據的組織、管理、應用與發布，提高了系統的穩定性與可擴展性。[10]

3.2 系統體系框架

本系統根據用戶角色的不同分為兩部分，分別為教師用戶端子系統、學生用戶端子系統。系統的體系框架（圖1）主要由3部分組成：

（1）教師對考試系統中的試題、標準答案與正確答案進行編輯與管理。其中，試題與標準答案的繪制是在在線繪圖功能的基礎上完成的，實現真正基于Web的圖形交互。

（2）學生遠程完成工程圖學課程的在線考試，并實現查詢成績、閱卷結果詳情與正確答案的操作。學生提交答案后，便可立即查詢考試成績，并查看詳細批閱結果與正確答案，了解得分、失分點，結合三維模型圖，更加直觀地發現自己存在的問題。

（3）系統實現自動閱卷與智能評分功能。系統將提交到數據庫中的學生答案與標準答案進行識別判定，實現自動閱卷功能，進行自動批閱，并根據批閱結果，智能評分。

圖1 系統體系框架

4 自動閱卷系統實現方法

4.1 數據庫的結構設計

系統所涉及的教師與學生的用戶信息、試題、標準答案、正確答案、學生答案等數據均存在數據庫中，網頁之間要想實現良好的動態交互，數據庫的設計開發十分關鍵。根據系統功能需求，選取MySQL作為后臺數據庫，phpMyAdmin作為數據庫管理工具，建立教師用戶表、學生用戶表、試題表、標準答案表、正確答案表、學生答案表等。

每一道工程圖學試題、標準答案與學生答案均由多個不同屬性的圖元構成，他們以圖元為單位，與該圖元各屬性有關的數據，按照試題編號、線型、顏色、線寬、起點坐標、終點坐標的順序自動添加到數據鏈表中。為實現智能評分功能，標準答案的數據鏈表中還設有圖元各屬性的分值。

4.2 基于JavaScript的在線繪圖與智能評分標準

在線繪圖功能是系統實現基于Web圖形交互的基礎，是實現系統運行的關鍵技術之一。HTML5中的Canvas元素提供網頁繪圖的畫布，具體的在線繪圖功能由JavaScript實現。通過編寫相關JavaScript算法，實現基本繪圖工具的顯示與對應繪圖功能。教師可通過使用不同顏色與線寬的基本線型，結合坐標軸、網格、水平線、豎直線等繪圖過程中的輔助對齊實現“長對正、寬相等、高平齊”的三等關系。為提高答案的準確性，教師在上傳試題后，需在原題目圖形的基礎上完成標準答案的繪制，為自動閱卷功能提供答案標準。

自動閱卷功能是對兩圖元之間對應線型、線寬、位置坐標屬性的識別判定，因此教師在繪制標準答案時，需針對不同試題的不同圖元的不同屬性分別賦予不同分值，為智能評分功能提供評分標準。例如將答案中每個圖元的線型、線寬屬性的分值設為一整體，為教師提供0.5分、1分兩種選擇;圖元位置坐標屬性的分值提供1分、2分、3分、4分四種選擇。