B/S模式下的半自动化外语作文批改组件的设计与实现

王志瑞 黄慧 刘正涛

摘 要： 基于在线外语学习中英语作文在线批改的需要，在研究LanguageTool、JavaScript和Jquery技术基础上，设计和实现了一个基于浏览器的半自動化的作文批改组件。该组件能够借助LanguageTool实现对作文内容的自动拼写和语法检测，并在检测结果的基础上，允许批阅者在浏览器端对中间结果进行继续批改，方便了教师在线作文批阅，也方便了学生在线查看作文的批改结果。该组件已应用到易立方智能化外语学习平台中，可以为其他在线外语学习平台提供参考。

关键词： LanguageTool； JavaScript； Jquery； 作文批改； 语法检测

中图分类号：TP399 文献标志码：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 引言

计算机辅助教学未能在外语教学过程中体现出特别的优势，主要表现在批改作文方面。

近年，外语作文的自动语法检测研究方面取得了很大的进展[1，6]，出现了很多优秀的语法检测库，但是在教师手动批改方面缺乏相关的研究，缺少有效的作文批改工具。本文研究了LanguageTool、JavaScript和Jquery等技术，提出了一种基于浏览器的外语作文批改方法，利用此方法和自动语法检测设计并实现了一款基于浏览器的半自动化英文作文批改组件，该组件能够完成作文内容的预检测，发现其中存在的拼写和语法错误，并给教师提供了再次批改的途径，批改后学生可以通过浏览器查看自己作文的批改结果，为教师利用计算机完成作文批改工作提供了便利。

1 相关技术

1.1 LanguageTool

LanguageTool是一款集英语、法语、德语等多国语言的新型的开源、可扩展式语法校正系统，相对于其他只对单词拼写进行检测的系统而言，更专注于检测复杂的字词形态结构错误、用词错误和句法错误等自然语言抽象逻辑错误，并最大限度的提供最具出错可能性的错误结果[1，5]。

LanguageTool采用分离组装式的系统组成结构，使它拥有了直观结构化、高自由度和高开放性的特点，为程序员和众多爱好者对其进行二次开发提供了简洁明了的开发环境。

LanguageTool采用XML文件描述语法规则库文件[2，5]，对于复杂的语法规则，也支持使用Python语言编写专门的语法文件进行匹配判断，并且语法检测结果也通过XML格式输出，能够很方便的嵌入到其他开发环境中。

1.2 JavaScript和JQuery

JavaScript[3]是一种浏览器段编程语言，能够实现对浏览器段的HTML和CSS内容进行获取和修改，实现浏览器段内容的动态效果。

JavaScript采用事件交互式的编程模式，在页面加载完毕后，或者触发HTML元素的相关事件后，能够执行一段JavaScript代码。JavaScript中内置了一些对象，能够实现对浏览器中相关组件的访问。

JQuery[4，7]是基于JavaScript所编写的一个轻量级的JavaScript库，对JavaScript进行了封装，提供了灵活的选择符和事件绑定机制，能够很方便的实现DOM操作，并内置了很多动画效果，提供了方便的AJAX编程方法，能够采用少量的代码实现复杂的浏览器段编程效果，极大的方便了前端代码的编写。

2 批改组件的设计

在传统的纸质作文批改过程中，老师主要的批改动作有：指出有问题的地方，添加备注；将文中用词不当之处进行内容替换；在指定的位置添加缺少的单词，将指定的单词或者句子进行前后互换；增加评语等等操作。因此批改组件的设计首先要考虑满足传统方式下的作文批改动作，将传统方式下作文批改动作移植到电脑端，提高批改效率。

组件设计还要考虑方便学生撰写作文，因此批改组件在设计过程中侧重批改结果展示，通过批改过的作文展示，能够让学生方便查看老师的批改痕迹，并能够提供相应的正确参考，让学生认识到错误所在。

基于以上因素，以及批改组件功能需求，完成了该组件的整体结构设计，其整体结构设计如图1所示。

在组件中提供了作文库，单词库，语法库，范文库。其中作文库用来保存学生原始作文与批改之后的作文；单词库用来保存外语词汇以及用法解析；语法库用来保存外语基本语法以及语法解析；范文库用来保存常见类型的外语作文的撰写格式与撰写方法，以及优秀例文。

教师端的作文分析功能借助于LanguageTool实现，该工具能够自动完成作文字数统计，发现作文中常见单词拼写错误与语法使用错误等相关的功能，并允许使用者通过xml的方式对英语的语法规则进行拓展[6]。

3 组件的实现

在组件实现过程中，突出的工作是作文分析、作文批改与查看批改结果。

3.1 作文分析

作文分析的主要任务是统计作文中包含的句子数，单词数，发现作文中存在的拼写错误，用词错误，语法错误等。这部分工作主要通过调用LanguageTool开发包实现，LanguageTool采用Java语言编写而成，提供了免费的使用权限，并提供了多种的调用方式，可以下载到本地进行调用，也可以通过网络远程调用其服务器所提供的相关服务。该文采用的是本机的方式，并将其开发包转换成.net环境下支持的调用包。

LanguageTool的使用过程中，把需要分析的作文传递给对应的对象方法即可，调用之后会返回一个xml格式的错误描述文件，在文件中给出了出现错误的位置，错误的类型，错误提示信息，错误纠正建议等信息，只需要对xml结果进行解析处理，转换成便于使用的格式即可。

3.2 作文批改

作文批改的主要任务是在浏览器段提供作文查看的界面，并在界面上提供作文批改的相关按钮，通过相应的按钮能够实现对作文的相关批改操作。主要的批改操作包括：插入，替换，删除，互换，评语，推优，成绩等。通过对批改操作的分析可以发现，批改操作主要分为两大类，作文内容的批改和作文评价。

要实现浏览器端的作文批改就要实现一个支持HTML编辑的RichTextEditor，网页中的文本输入框支持文本内容的输入，但不支持对HTML内容的编辑。因此在实现的过程中需要在网页中插入一个内嵌的IFrame来模拟作文批改区，将HTML格式的作文内容写入到IFrame标记内（实现的方法见下方代码）。但是批改结束后，要预览批改的效果，就不能在IFrame中查看了，因此还需要提供一个用来查看批改效果的区域，通过JS控制批改区域和预览区域显示，批改界面的构成如图2所示。

[插入][删除][替换][交换][作文批改区IFrame][批改预览区]

在批改区内，要完成批改操作，就需要完成如下几个基本操作：获取选中对象，对选中对象进行操作（删除/改背景/获取内容），在光标处插入内容等，其他相关操作都可以用此类操作组合而成。例如交换，首先选择两段内容，通过修改选中内容的背景色来标示交换内容，再在两端内容之间插入一个交换符号即可。这些操作在不同浏览器下的实现方式不同，因此，在实现过程中需要根据浏览器的类型进行判断。

3.2.1 获取选中内容

在作文批改过程中，经常需要用到选中操作，首先选择需要批注的内容，然后对其进行相关的标注操作。批改操作过程中，获取选中内容是一个基本的和必须的操作，由于不同浏览器下获取选中内容的方式不同，因此本文对获取选中内容进行了封装，实现代码如下：

3.2.2 对选中内容进行操作（删除/改背景）

进行选择操作之后，就可以对选中的内容进行相关批改操作。例如添加删除标记，修改背景颜色，加粗之类的操作。此类操作主要依靠对选中对象，在操作时需要做好操作状态判定，在对应的状态下执行对应的操作。修改背景颜色的实现代码如下，其他代码的实现方式类似。

3.2.3 在光标处插入内容

在作文批改操作过程中需要在作文中进行插入操作，如：插入内容，插入批注，插入交换符，插入分段符等。因此，插入操作也是批改操作中一个基本的必须的操作。由于插入操作无需选取内容，所以插入操作时需要判定操作状态，实现代码如下：

3.3 查看批改结果

批改结果查看主要是提供批改痕迹的查看。要求既能够保留作文的原文内容，又能够在作文中体现出作文的批改效果，并且能够为用户提供方便的查看方式。

本文在批改结果的处理上针对自动检测和手工批改采用了两种不同的策略。自动检测过后会以XML格式返回作文中存在的错误和错误修改建议，每个错误处会有多条错误修改建议，蕴含的内容多。因此在预览过程中，采用下拉菜单的方式列出。实现的具体方式如下：

在作文內容中对应的位置插入一个错误标记出错内容，并给错误标记添加下划线样式，并将此错误标记相关的错误修改建议列表插入到预览区的下方，并建立好与错误标记之间的对应关系。在页面中通过JQuery为错误标记添加鼠标事件，当鼠标单击错误位置处时，获取错误编号信息，并将对应的错误修改建议以浮动的方式显示在错误位置下方，局部运行效果见图3。

对于手工批改操作，删除操作可以给删除的内容添加删除线样式，对于其他的操作，需要在作文中插入一个个性化操作图标，通过操作图标能够很方便的识别出批改的类型，并在操作图标的标记内通过alt属性添加操作的相关信息，当鼠标放置到操作图标时，通过JQuery以浮动的方式提示相关的操作信息，局部运行效果见图4。

4 结束语

本文所设计与实现的作文批改组件已应用到易立方公司开发的校园版在线外语学习平台中，现在该系统已处于初步推广阶段。该平台中包括了组卷，布置作业，做作业，练习等与大学外语教学有关的功能，为老师的教学和学生的学习提供帮助。其中作文批改组件的整体运行效果图见图5。批改结束后，点击“预览”就会进入批改预览界面，鼠标放置到不同的批改标注处会出现如图3和图4的所示的批改效果。

参考文献：

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

[2] 姜赢，曾杰，林启红等.LanguageTool中文语法校对XML规则定制方法[J].图书情报工作，2014.5：86-92

[3] 余启洋，桑楠，郭文生.嵌入式浏览器JavaScript引擎的研究与设计[J].计算机应用与软件，2014.5：251-255

[4] 高鹏，徐小力，吴国新等.基于Ajax的四层架构远程监测系统设计[J].计算机工程与设计，2014.35（2）：695-699

[5] 姜赢，万里鹏，张婧等.微博环境下高校网络舆情的监测与引导研究——以政治敏感信息的监测与引导为例[J].现代教育技术，2013.23（4）：92-96

[6] 郑海峰.利用开源资源组建定制的英文拼写检查纠错工具[J].现代计算机（专业版），2012.9：41-44

[7] 赵晓君，崔建涛，邓璐娟等.基于SSH2和jQuery的大学生校园综合服务平台的设计与实现[J].郑州轻工业学院学报（自然科学版），2014.3：100-104