一种支持在线公式编辑的动态辅助键盘的设计方法

尚天淇，王超，杨晗

（1.成都市第七中学林荫校区高三年级14班，成都 610041；2.电子科技大学信息与软件工程学院，成都 610054）

0 引言

随着计算机技术和网络技术的发展，现代教育科学理念和信息技术手段，已经和正在越来越多地运用到国内基础教育的新课改中。猿题库、狸米学习、一起作业网等在线学习系统以交互式学习方式代替了原来以阅读文本文件，观看教学视频、播放ppt为主的网上学习方式。学习者可以通过完成作业的方式来向系统反馈学习效果，系统也可以根据学习者的反馈进行学习内容的变化，从而实现自适应学习[1]。

但是，由于在线公式编辑器的限制和输入的繁琐性，大多数在线学习系统基本都是通过客观题方式来完成交互[2]。但客观题不能很好地反映学生的思维过程，不利于系统或者老师对学习者学习情况的把握。因此，开发一款支持在线公式编辑的动态辅助键盘以支持数学公式输入就具有很好的实用价值。

目前主要的公式编辑器有MathType和CKeditor。其中常用的公式编辑器MathType使用MTEF（Math Type's Equation Format）格式来描述数学公式[3]。CKedi⁃tor是一个开源的项目，采用JavaScript编写，而且该编辑器功能强大，提供了良好的可视化界面，支持常用的内容编辑，但是不便于数据共享和处理；而MathType是一个基于Web的公式编辑器，而且可以将用户编辑的数学公式保存为图片等多种数据形式[4-5]，但是二者共同的缺点在于学生进行网络学习和测验的时候不能直接使用，而且对于目前可用的公式编辑器来说，大都是用户根据需求自己在菜单栏选择，非常繁琐。

为此，本文根据已有资源对公式编辑器进行改进，以动态键盘的形式展现给用户，即利用理解题干和参考答案得到的信息，抽取题目解答需要用到的基本公式和字母，进行前后端数据交互，动态显示到公式编辑的键盘上，实现公式编辑的灵活性和及时性，为用户体验提供了很大的便捷，可用于随堂小测验等输入量不太大的交互式学习。

1 基本思想和实现方法

1.1 基本思想

为了满足在线答题的方便性、快捷性和易用性，本文提出的动态辅助键盘具有如下功能：

（1）符号动态性：根据题目题干信息和参考答案信息获取待显示的符号信息。题目不同，键盘显示的符号也不同；

（2）键盘区域划分动态性：由于不同题目涉及的数学符号的数量是不同的，为了美观性，需要对显示的符号进行动态规划；

（3）键盘位置的动态性：由于不同题目答题过程长短不同，所以不能固定键盘的位置，键盘位置需要根据答题区域的变化而移动；

（4）个性化：由于解题方法的多样性，所以不同的学生解决同一个题目可能用到的数学符号是不一样的。为了满足个性化的需求，键盘显示的符号可以由用户自定义，即具有数学符号添加和删除键；

（5）通用性：该动态键盘会在题目中进行应用，与FireFox、Chrome、IE8.0及其以上等浏览器适配。

1.2 实现方法

动态辅助键盘主要针对符号涉及较广的初中数学，但不限于初中数学；符号包括普通符号和数学符号，其中，数学符号指根号、分号、上标、小标等有特殊格式要求的符号；普通符号指只需要提供显示功能的符号，例如加、减、乘、除、英文字母、几何符号、希腊字母等。

动态辅助键盘的实现是基于HTML5、CSS以及Ja⁃vaScript语言等Web前端语言及Java、MySQL等后端数据库语言以实现前后端交互。其实现流程如图1所示。

图1 辅助键盘实现基本流程

①前后端连接。后端读取理解题干和参考答案得到的符号信息，将题目以及问题解答所需要的数学符号打包，然后将包传递给前端；

②解析数据。按照最初前后端的约定定义，将后端发送的字符串解析成对应的VALUE值；

③键盘形成。前端接收到题干并显示，同时，获取接收到的符号所对应的VALUE值，调取具有相同VALUE值的控制器，将键显示到定义好的DIV中；

④获取光标位置。首先获取光标长度以及光标所在位置与页面左端的距离，进而确定键盘做上端的坐标，将存放键的DIV显示到该区域，实现动态效果。

动态键盘要达到按键效果，即设置若干个Button，然后对对应的Button重写函数，通过对应的互不干涉的控制器控制，实现一一映射，方便使用过程中单独操作。首先将所有的符号都归纳出来，每个符号之间都是互不干扰且相对独立，然后基于JS+CSS通过Button控件对每个键都进行了重写，不同的符号都是通过不同的控制器控制，每个控制器都有对应的name和ID。后端传输题干过来的同时也会将扫描题干归纳出来的该题所需要的符号传递给前端，同时调用该符号对应的控制器，将该符号显示到光标所在位置的右下方，并会随着光标的移动随之移动。

2 具体实现

针对初中数学代数、几何以及三角函数，我们实现了分数线、根号、上标、下标等常见的特殊数学符号。由于分数线是中小学学生使用最广泛且最熟悉的数学符号，且其实现难度较大，因此我们以分数线为例说明特殊符号的实现过程。分数的具体实现流程如图2所示。

图2 分数实现流程图

在分数的实现过程中，主要包含三个部分，分数的定义，分数线的实现以及最后分数的实现。关键代码分别见图3、图4和图5。

图3 分数的定义

图4 分数线的实现

图5 分数的实现

3 实现示例

下面我们以两个具体的实例展示辅助键盘的实现效果。

实例 1：如图,在 Rt△ABC 中,∠C=90°,AD 分∠CAB,DE⊥AB 于点 E,若 AC=6,BC=8,CD=3.（1）求 DE 的长;（2）求△ADB的面积。

当学生打开这道题目时，辅助键盘就会在答题区出现。在这个题目中，会涉及∠，⊥，△，°，等数学符号，从而辅助键盘区就会将所涉及的符号显示出来，方便学生对解答过程的录入。详细解答过程如图6所示。

例2已知方程x2-x-1=0,求x。

例2是一道解方程的题目，系统根据题干和参考答案，提取出本题会涉及的数学符号有^，，/，±等数学符号，从而在辅助键盘区，就出现本题特有的数学符号。如图7所示。

图7 辅助键盘动态性展示实例

4 结语

本文提出了一种支持在线数学公式编辑的动态辅助键盘生成方法。该方法有效地解决了依赖公式编辑器才能完成的各种应用，从而使学生可以高效快捷地录入问题的解答过程，这将使得各种在线学习平台的交互式学习内容更加丰富，也为主观题的自动判卷成为可能。由于辅助键盘所显示的数学符号部分来自参考答案，所以辅助键盘的数学符号对学生解答具有一定的提示作用。为了避免这样的缺陷，可以在辅助键盘中加入混淆符号。

参考文献：

[1]吴洪艳.智慧学习视角下个性化在线学习系统设计与应用[J].中国电化教育,2015（06）:127-131.

[2]刘亦明,文福安.网络教学系统中数学公式编辑器的研发[J].软件,2017,38(03)

[3]高跃,韩鹏,王少青.基于HTML5的数学公式渲染研究与实现[J].计算机应用与软件,2014,31（04）:15-18+55.

[4]陈方贵,邢远秀,熊文龙,李卫红.键盘接口及键盘监控程序的设计[J].武汉理工大学学报(交通科学与工程版)

[5]徐婧,陈雨晨.基于Android的数学公式编辑平台的探究[J].计算机光盘软件与应用