陳平　李曉武　周曉雨　曹彤

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

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

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

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

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

1 自動(dòng)閱卷功能的特點(diǎn)

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

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

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

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

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

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

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

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

2 自動(dòng)閱卷原理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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