陳平　李曉武　周曉雨　曹彤

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

關(guān)鍵詞 HTML5 工程圖學(xué) 考試系統(tǒng) 自動閱卷 在線繪圖

中圖分類號：TP312.1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文獻標(biāo)識碼：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

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

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

1 自動閱卷功能的特點

工程圖學(xué)考試自動閱卷系統(tǒng)是一個在互聯(lián)網(wǎng)環(huán)境中實現(xiàn)學(xué)生的自主學(xué)習(xí)、與教師或同學(xué)之間的交流互動、遠程在線考試并實現(xiàn)自動批閱工程圖學(xué)試題的系統(tǒng)，其在功能上應(yīng)該滿足以下基本要求：

（1）應(yīng)盡量滿足教師與學(xué)生的各種教學(xué)活動，充分體現(xiàn)教師的主導(dǎo)作用和學(xué)生的主體地位，提倡以學(xué)生為中心的探究型教學(xué)模式，充分調(diào)動學(xué)生的學(xué)習(xí)積極性，提高學(xué)習(xí)效率。

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

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

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

（5）系統(tǒng)能實現(xiàn)自動閱卷、智能評分等功能，學(xué)生能根據(jù)閱卷結(jié)果查詢批閱結(jié)果與正確答案等。其中，自動閱卷功能為本文研究的重點。

（6）數(shù)據(jù)庫的設(shè)計要體現(xiàn)共享性、安全性、有效性、一致性等特點，避免出現(xiàn)數(shù)據(jù)庫的冗余存儲造成系統(tǒng)不穩(wěn)定，保證系統(tǒng)能實現(xiàn)正常的更新與維護。

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

2 自動閱卷原理

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

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

表1 圖元線型屬性對應(yīng)的匹配策略

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

3.1 系統(tǒng)體系結(jié)構(gòu)

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

3.2 系統(tǒng)體系框架

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

（1）教師對考試系統(tǒng)中的試題、標(biāo)準答案與正確答案進行編輯與管理。其中，試題與標(biāo)準答案的繪制是在在線繪圖功能的基礎(chǔ)上完成的，實現(xiàn)真正基于Web的圖形交互。

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

（3）系統(tǒng)實現(xiàn)自動閱卷與智能評分功能。系統(tǒng)將提交到數(shù)據(jù)庫中的學(xué)生答案與標(biāo)準答案進行識別判定，實現(xiàn)自動閱卷功能，進行自動批閱，并根據(jù)批閱結(jié)果，智能評分。

圖1 系統(tǒng)體系框架

4 自動閱卷系統(tǒng)實現(xiàn)方法

4.1 數(shù)據(jù)庫的結(jié)構(gòu)設(shè)計

系統(tǒng)所涉及的教師與學(xué)生的用戶信息、試題、標(biāo)準答案、正確答案、學(xué)生答案等數(shù)據(jù)均存在數(shù)據(jù)庫中，網(wǎng)頁之間要想實現(xiàn)良好的動態(tài)交互，數(shù)據(jù)庫的設(shè)計開發(fā)十分關(guān)鍵。根據(jù)系統(tǒng)功能需求，選取MySQL作為后臺數(shù)據(jù)庫，phpMyAdmin作為數(shù)據(jù)庫管理工具，建立教師用戶表、學(xué)生用戶表、試題表、標(biāo)準答案表、正確答案表、學(xué)生答案表等。

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

4.2 基于JavaScript的在線繪圖與智能評分標(biāo)準

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

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