B/S模式下的半自動化外語作文批改組件的設(shè)計與實現(xiàn)

王志瑞 黃慧 劉正濤

摘 要： 基于在線外語學(xué)習(xí)中英語作文在線批改的需要，在研究LanguageTool、JavaScript和Jquery技術(shù)基礎(chǔ)上，設(shè)計和實現(xiàn)了一個基于瀏覽器的半自動化的作文批改組件。該組件能夠借助LanguageTool實現(xiàn)對作文內(nèi)容的自動拼寫和語法檢測，并在檢測結(jié)果的基礎(chǔ)上，允許批閱者在瀏覽器端對中間結(jié)果進(jìn)行繼續(xù)批改，方便了教師在線作文批閱，也方便了學(xué)生在線查看作文的批改結(jié)果。該組件已應(yīng)用到易立方智能化外語學(xué)習(xí)平臺中，可以為其他在線外語學(xué)習(xí)平臺提供參考。

關(guān)鍵詞： LanguageTool； JavaScript； Jquery； 作文批改； 語法檢測

中圖分類號：TP399 文獻(xiàn)標(biāo)志碼：A 文章編號：1006-8228（2015）09-33-03

Design and realization of semi-automatic English composition correction component base on B/S structure

Wang Zhirui， Huang Hui， Liu Zhengtao

（Department of Computer and Information Engineering， Sanjiang University， Nanjing， Jiangsu 210012， China）

Abstract： For the need of English composition correction in online English learning， by studying of LanguageTool， JavaScript and Jquery， this paper designs and realizes a semi-automatic English composition correction component. By using of LanguageTool， the component can complete the automatic spelling and grammar check for English composition， and on the basis of checking result， allows the reviewer on the browser side to continue the correction. It is convenient for teacher to correct English composition online， and convenient for student to see the result of correction. The component was used to the intelligent foreign language learning platform of Easy cube. It can provide references for other online language learning platform.

Key words： LanguageTool； JavaScript； Jquery； composition correction； grammar check

0 引言

計算機(jī)輔助教學(xué)未能在外語教學(xué)過程中體現(xiàn)出特別的優(yōu)勢，主要表現(xiàn)在批改作文方面。

近年，外語作文的自動語法檢測研究方面取得了很大的進(jìn)展[1，6]，出現(xiàn)了很多優(yōu)秀的語法檢測庫，但是在教師手動批改方面缺乏相關(guān)的研究，缺少有效的作文批改工具。本文研究了LanguageTool、JavaScript和Jquery等技術(shù)，提出了一種基于瀏覽器的外語作文批改方法，利用此方法和自動語法檢測設(shè)計并實現(xiàn)了一款基于瀏覽器的半自動化英文作文批改組件，該組件能夠完成作文內(nèi)容的預(yù)檢測，發(fā)現(xiàn)其中存在的拼寫和語法錯誤，并給教師提供了再次批改的途徑，批改后學(xué)生可以通過瀏覽器查看自己作文的批改結(jié)果，為教師利用計算機(jī)完成作文批改工作提供了便利。

1 相關(guān)技術(shù)

1.1 LanguageTool

LanguageTool是一款集英語、法語、德語等多國語言的新型的開源、可擴(kuò)展式語法校正系統(tǒng)，相對于其他只對單詞拼寫進(jìn)行檢測的系統(tǒng)而言，更專注于檢測復(fù)雜的字詞形態(tài)結(jié)構(gòu)錯誤、用詞錯誤和句法錯誤等自然語言抽象邏輯錯誤，并最大限度的提供最具出錯可能性的錯誤結(jié)果[1，5]。

LanguageTool采用分離組裝式的系統(tǒng)組成結(jié)構(gòu)，使它擁有了直觀結(jié)構(gòu)化、高自由度和高開放性的特點(diǎn)，為程序員和眾多愛好者對其進(jìn)行二次開發(fā)提供了簡潔明了的開發(fā)環(huán)境。

LanguageTool采用XML文件描述語法規(guī)則庫文件[2，5]，對于復(fù)雜的語法規(guī)則，也支持使用Python語言編寫專門的語法文件進(jìn)行匹配判斷，并且語法檢測結(jié)果也通過XML格式輸出，能夠很方便的嵌入到其他開發(fā)環(huán)境中。

1.2 JavaScript和JQuery

JavaScript[3]是一種瀏覽器段編程語言，能夠?qū)崿F(xiàn)對瀏覽器段的HTML和CSS內(nèi)容進(jìn)行獲取和修改，實現(xiàn)瀏覽器段內(nèi)容的動態(tài)效果。

JavaScript采用事件交互式的編程模式，在頁面加載完畢后，或者觸發(fā)HTML元素的相關(guān)事件后，能夠執(zhí)行一段JavaScript代碼。JavaScript中內(nèi)置了一些對象，能夠?qū)崿F(xiàn)對瀏覽器中相關(guān)組件的訪問。

JQuery[4，7]是基于JavaScript所編寫的一個輕量級的JavaScript庫，對JavaScript進(jìn)行了封裝，提供了靈活的選擇符和事件綁定機(jī)制，能夠很方便的實現(xiàn)DOM操作，并內(nèi)置了很多動畫效果，提供了方便的AJAX編程方法，能夠采用少量的代碼實現(xiàn)復(fù)雜的瀏覽器段編程效果，極大的方便了前端代碼的編寫。

2 批改組件的設(shè)計

在傳統(tǒng)的紙質(zhì)作文批改過程中，老師主要的批改動作有：指出有問題的地方，添加備注；將文中用詞不當(dāng)之處進(jìn)行內(nèi)容替換；在指定的位置添加缺少的單詞，將指定的單詞或者句子進(jìn)行前后互換；增加評語等等操作。因此批改組件的設(shè)計首先要考慮滿足傳統(tǒng)方式下的作文批改動作，將傳統(tǒng)方式下作文批改動作移植到電腦端，提高批改效率。

組件設(shè)計還要考慮方便學(xué)生撰寫作文，因此批改組件在設(shè)計過程中側(cè)重批改結(jié)果展示，通過批改過的作文展示，能夠讓學(xué)生方便查看老師的批改痕跡，并能夠提供相應(yīng)的正確參考，讓學(xué)生認(rèn)識到錯誤所在。

基于以上因素，以及批改組件功能需求，完成了該組件的整體結(jié)構(gòu)設(shè)計，其整體結(jié)構(gòu)設(shè)計如圖1所示。

在組件中提供了作文庫，單詞庫，語法庫，范文庫。其中作文庫用來保存學(xué)生原始作文與批改之后的作文；單詞庫用來保存外語詞匯以及用法解析；語法庫用來保存外語基本語法以及語法解析；范文庫用來保存常見類型的外語作文的撰寫格式與撰寫方法，以及優(yōu)秀例文。

教師端的作文分析功能借助于LanguageTool實現(xiàn)，該工具能夠自動完成作文字?jǐn)?shù)統(tǒng)計，發(fā)現(xiàn)作文中常見單詞拼寫錯誤與語法使用錯誤等相關(guān)的功能，并允許使用者通過xml的方式對英語的語法規(guī)則進(jìn)行拓展[6]。

3 組件的實現(xiàn)

在組件實現(xiàn)過程中，突出的工作是作文分析、作文批改與查看批改結(jié)果。

3.1 作文分析

作文分析的主要任務(wù)是統(tǒng)計作文中包含的句子數(shù)，單詞數(shù)，發(fā)現(xiàn)作文中存在的拼寫錯誤，用詞錯誤，語法錯誤等。這部分工作主要通過調(diào)用LanguageTool開發(fā)包實現(xiàn)，LanguageTool采用Java語言編寫而成，提供了免費(fèi)的使用權(quán)限，并提供了多種的調(diào)用方式，可以下載到本地進(jìn)行調(diào)用，也可以通過網(wǎng)絡(luò)遠(yuǎn)程調(diào)用其服務(wù)器所提供的相關(guān)服務(wù)。該文采用的是本機(jī)的方式，并將其開發(fā)包轉(zhuǎn)換成.net環(huán)境下支持的調(diào)用包。

LanguageTool的使用過程中，把需要分析的作文傳遞給對應(yīng)的對象方法即可，調(diào)用之后會返回一個xml格式的錯誤描述文件，在文件中給出了出現(xiàn)錯誤的位置，錯誤的類型，錯誤提示信息，錯誤糾正建議等信息，只需要對xml結(jié)果進(jìn)行解析處理，轉(zhuǎn)換成便于使用的格式即可。

3.2 作文批改

作文批改的主要任務(wù)是在瀏覽器段提供作文查看的界面，并在界面上提供作文批改的相關(guān)按鈕，通過相應(yīng)的按鈕能夠?qū)崿F(xiàn)對作文的相關(guān)批改操作。主要的批改操作包括：插入，替換，刪除，互換，評語，推優(yōu)，成績等。通過對批改操作的分析可以發(fā)現(xiàn)，批改操作主要分為兩大類，作文內(nèi)容的批改和作文評價。

要實現(xiàn)瀏覽器端的作文批改就要實現(xiàn)一個支持HTML編輯的RichTextEditor，網(wǎng)頁中的文本輸入框支持文本內(nèi)容的輸入，但不支持對HTML內(nèi)容的編輯。因此在實現(xiàn)的過程中需要在網(wǎng)頁中插入一個內(nèi)嵌的IFrame來模擬作文批改區(qū)，將HTML格式的作文內(nèi)容寫入到IFrame標(biāo)記內(nèi)（實現(xiàn)的方法見下方代碼）。但是批改結(jié)束后，要預(yù)覽批改的效果，就不能在IFrame中查看了，因此還需要提供一個用來查看批改效果的區(qū)域，通過JS控制批改區(qū)域和預(yù)覽區(qū)域顯示，批改界面的構(gòu)成如圖2所示。

[插入][刪除][替換][交換][作文批改區(qū)IFrame][批改預(yù)覽區(qū)]

在批改區(qū)內(nèi)，要完成批改操作，就需要完成如下幾個基本操作：獲取選中對象，對選中對象進(jìn)行操作（刪除/改背景/獲取內(nèi)容），在光標(biāo)處插入內(nèi)容等，其他相關(guān)操作都可以用此類操作組合而成。例如交換，首先選擇兩段內(nèi)容，通過修改選中內(nèi)容的背景色來標(biāo)示交換內(nèi)容，再在兩端內(nèi)容之間插入一個交換符號即可。這些操作在不同瀏覽器下的實現(xiàn)方式不同，因此，在實現(xiàn)過程中需要根據(jù)瀏覽器的類型進(jìn)行判斷。

3.2.1 獲取選中內(nèi)容

在作文批改過程中，經(jīng)常需要用到選中操作，首先選擇需要批注的內(nèi)容，然后對其進(jìn)行相關(guān)的標(biāo)注操作。批改操作過程中，獲取選中內(nèi)容是一個基本的和必須的操作，由于不同瀏覽器下獲取選中內(nèi)容的方式不同，因此本文對獲取選中內(nèi)容進(jìn)行了封裝，實現(xiàn)代碼如下：

3.2.2 對選中內(nèi)容進(jìn)行操作（刪除/改背景）

進(jìn)行選擇操作之后，就可以對選中的內(nèi)容進(jìn)行相關(guān)批改操作。例如添加刪除標(biāo)記，修改背景顏色，加粗之類的操作。此類操作主要依靠對選中對象，在操作時需要做好操作狀態(tài)判定，在對應(yīng)的狀態(tài)下執(zhí)行對應(yīng)的操作。修改背景顏色的實現(xiàn)代碼如下，其他代碼的實現(xiàn)方式類似。

3.2.3 在光標(biāo)處插入內(nèi)容

在作文批改操作過程中需要在作文中進(jìn)行插入操作，如：插入內(nèi)容，插入批注，插入交換符，插入分段符等。因此，插入操作也是批改操作中一個基本的必須的操作。由于插入操作無需選取內(nèi)容，所以插入操作時需要判定操作狀態(tài)，實現(xiàn)代碼如下：

3.3 查看批改結(jié)果

批改結(jié)果查看主要是提供批改痕跡的查看。要求既能夠保留作文的原文內(nèi)容，又能夠在作文中體現(xiàn)出作文的批改效果，并且能夠為用戶提供方便的查看方式。

本文在批改結(jié)果的處理上針對自動檢測和手工批改采用了兩種不同的策略。自動檢測過后會以XML格式返回作文中存在的錯誤和錯誤修改建議，每個錯誤處會有多條錯誤修改建議，蘊(yùn)含的內(nèi)容多。因此在預(yù)覽過程中，采用下拉菜單的方式列出。實現(xiàn)的具體方式如下：

在作文內(nèi)容中對應(yīng)的位置插入一個錯誤標(biāo)記出錯內(nèi)容，并給錯誤標(biāo)記添加下劃線樣式，并將此錯誤標(biāo)記相關(guān)的錯誤修改建議列表插入到預(yù)覽區(qū)的下方，并建立好與錯誤標(biāo)記之間的對應(yīng)關(guān)系。在頁面中通過JQuery為錯誤標(biāo)記添加鼠標(biāo)事件，當(dāng)鼠標(biāo)單擊錯誤位置處時，獲取錯誤編號信息，并將對應(yīng)的錯誤修改建議以浮動的方式顯示在錯誤位置下方，局部運(yùn)行效果見圖3。

對于手工批改操作，刪除操作可以給刪除的內(nèi)容添加刪除線樣式，對于其他的操作，需要在作文中插入一個個性化操作圖標(biāo)，通過操作圖標(biāo)能夠很方便的識別出批改的類型，并在操作圖標(biāo)的標(biāo)記內(nèi)通過alt屬性添加操作的相關(guān)信息，當(dāng)鼠標(biāo)放置到操作圖標(biāo)時，通過JQuery以浮動的方式提示相關(guān)的操作信息，局部運(yùn)行效果見圖4。

4 結(jié)束語

本文所設(shè)計與實現(xiàn)的作文批改組件已應(yīng)用到易立方公司開發(fā)的校園版在線外語學(xué)習(xí)平臺中，現(xiàn)在該系統(tǒng)已處于初步推廣階段。該平臺中包括了組卷，布置作業(yè)，做作業(yè)，練習(xí)等與大學(xué)外語教學(xué)有關(guān)的功能，為老師的教學(xué)和學(xué)生的學(xué)習(xí)提供幫助。其中作文批改組件的整體運(yùn)行效果圖見圖5。批改結(jié)束后，點(diǎn)擊“預(yù)覽”就會進(jìn)入批改預(yù)覽界面，鼠標(biāo)放置到不同的批改標(biāo)注處會出現(xiàn)如圖3和圖4的所示的批改效果。

參考文獻(xiàn)：

[1] LanguageTool Development[EB/OL]. https：//www.languagetool.org/development/

[2] 姜贏，曾杰，林啟紅等.LanguageTool中文語法校對XML規(guī)則定制方法[J].圖書情報工作，2014.5：86-92

[3] 余啟洋，桑楠，郭文生.嵌入式瀏覽器JavaScript引擎的研究與設(shè)計[J].計算機(jī)應(yīng)用與軟件，2014.5：251-255

[4] 高鵬，徐小力，吳國新等.基于Ajax的四層架構(gòu)遠(yuǎn)程監(jiān)測系統(tǒng)設(shè)計[J].計算機(jī)工程與設(shè)計，2014.35（2）：695-699

[5] 姜贏，萬里鵬，張婧等.微博環(huán)境下高校網(wǎng)絡(luò)輿情的監(jiān)測與引導(dǎo)研究——以政治敏感信息的監(jiān)測與引導(dǎo)為例[J].現(xiàn)代教育技術(shù)，2013.23（4）：92-96

[6] 鄭海峰.利用開源資源組建定制的英文拼寫檢查糾錯工具[J].現(xiàn)代計算機(jī)（專業(yè)版），2012.9：41-44

[7] 趙曉君，崔建濤，鄧璐娟等.基于SSH2和jQuery的大學(xué)生校園綜合服務(wù)平臺的設(shè)計與實現(xiàn)[J].鄭州輕工業(yè)學(xué)院學(xué)報（自然科學(xué)版），2014.3：100-104