一種支持在線公式編輯的動態(tài)輔助鍵盤的設(shè)計方法

尚天淇，王超，楊晗

（1.成都市第七中學(xué)林蔭校區(qū)高三年級14班，成都 610041；2.電子科技大學(xué)信息與軟件工程學(xué)院，成都 610054）

0 引言

隨著計算機技術(shù)和網(wǎng)絡(luò)技術(shù)的發(fā)展，現(xiàn)代教育科學(xué)理念和信息技術(shù)手段，已經(jīng)和正在越來越多地運用到國內(nèi)基礎(chǔ)教育的新課改中。猿題庫、貍米學(xué)習(xí)、一起作業(yè)網(wǎng)等在線學(xué)習(xí)系統(tǒng)以交互式學(xué)習(xí)方式代替了原來以閱讀文本文件，觀看教學(xué)視頻、播放ppt為主的網(wǎng)上學(xué)習(xí)方式。學(xué)習(xí)者可以通過完成作業(yè)的方式來向系統(tǒng)反饋學(xué)習(xí)效果，系統(tǒng)也可以根據(jù)學(xué)習(xí)者的反饋進行學(xué)習(xí)內(nèi)容的變化，從而實現(xiàn)自適應(yīng)學(xué)習(xí)[1]。

但是，由于在線公式編輯器的限制和輸入的繁瑣性，大多數(shù)在線學(xué)習(xí)系統(tǒng)基本都是通過客觀題方式來完成交互[2]。但客觀題不能很好地反映學(xué)生的思維過程，不利于系統(tǒng)或者老師對學(xué)習(xí)者學(xué)習(xí)情況的把握。因此，開發(fā)一款支持在線公式編輯的動態(tài)輔助鍵盤以支持數(shù)學(xué)公式輸入就具有很好的實用價值。

目前主要的公式編輯器有MathType和CKeditor。其中常用的公式編輯器MathType使用MTEF（Math Type's Equation Format）格式來描述數(shù)學(xué)公式[3]。CKedi?tor是一個開源的項目，采用JavaScript編寫，而且該編輯器功能強大，提供了良好的可視化界面，支持常用的內(nèi)容編輯，但是不便于數(shù)據(jù)共享和處理；而MathType是一個基于Web的公式編輯器，而且可以將用戶編輯的數(shù)學(xué)公式保存為圖片等多種數(shù)據(jù)形式[4-5]，但是二者共同的缺點在于學(xué)生進行網(wǎng)絡(luò)學(xué)習(xí)和測驗的時候不能直接使用，而且對于目前可用的公式編輯器來說，大都是用戶根據(jù)需求自己在菜單欄選擇，非常繁瑣。

為此，本文根據(jù)已有資源對公式編輯器進行改進，以動態(tài)鍵盤的形式展現(xiàn)給用戶，即利用理解題干和參考答案得到的信息，抽取題目解答需要用到的基本公式和字母，進行前后端數(shù)據(jù)交互，動態(tài)顯示到公式編輯的鍵盤上，實現(xiàn)公式編輯的靈活性和及時性，為用戶體驗提供了很大的便捷，可用于隨堂小測驗等輸入量不太大的交互式學(xué)習(xí)。

1 基本思想和實現(xiàn)方法

1.1 基本思想

為了滿足在線答題的方便性、快捷性和易用性，本文提出的動態(tài)輔助鍵盤具有如下功能：

（1）符號動態(tài)性：根據(jù)題目題干信息和參考答案信息獲取待顯示的符號信息。題目不同，鍵盤顯示的符號也不同；

（2）鍵盤區(qū)域劃分動態(tài)性：由于不同題目涉及的數(shù)學(xué)符號的數(shù)量是不同的，為了美觀性，需要對顯示的符號進行動態(tài)規(guī)劃；

（3）鍵盤位置的動態(tài)性：由于不同題目答題過程長短不同，所以不能固定鍵盤的位置，鍵盤位置需要根據(jù)答題區(qū)域的變化而移動；

（4）個性化：由于解題方法的多樣性，所以不同的學(xué)生解決同一個題目可能用到的數(shù)學(xué)符號是不一樣的。為了滿足個性化的需求，鍵盤顯示的符號可以由用戶自定義，即具有數(shù)學(xué)符號添加和刪除鍵；

（5）通用性：該動態(tài)鍵盤會在題目中進行應(yīng)用，與FireFox、Chrome、IE8.0及其以上等瀏覽器適配。

1.2 實現(xiàn)方法

動態(tài)輔助鍵盤主要針對符號涉及較廣的初中數(shù)學(xué)，但不限于初中數(shù)學(xué)；符號包括普通符號和數(shù)學(xué)符號，其中，數(shù)學(xué)符號指根號、分號、上標、小標等有特殊格式要求的符號；普通符號指只需要提供顯示功能的符號，例如加、減、乘、除、英文字母、幾何符號、希臘字母等。

動態(tài)輔助鍵盤的實現(xiàn)是基于HTML5、CSS以及Ja?vaScript語言等Web前端語言及Java、MySQL等后端數(shù)據(jù)庫語言以實現(xiàn)前后端交互。其實現(xiàn)流程如圖1所示。

圖1 輔助鍵盤實現(xiàn)基本流程

①前后端連接。后端讀取理解題干和參考答案得到的符號信息，將題目以及問題解答所需要的數(shù)學(xué)符號打包，然后將包傳遞給前端；

②解析數(shù)據(jù)。按照最初前后端的約定定義，將后端發(fā)送的字符串解析成對應(yīng)的VALUE值；

③鍵盤形成。前端接收到題干并顯示，同時，獲取接收到的符號所對應(yīng)的VALUE值，調(diào)取具有相同VALUE值的控制器，將鍵顯示到定義好的DIV中；

④獲取光標位置。首先獲取光標長度以及光標所在位置與頁面左端的距離，進而確定鍵盤做上端的坐標，將存放鍵的DIV顯示到該區(qū)域，實現(xiàn)動態(tài)效果。

動態(tài)鍵盤要達到按鍵效果，即設(shè)置若干個Button，然后對對應(yīng)的Button重寫函數(shù)，通過對應(yīng)的互不干涉的控制器控制，實現(xiàn)一一映射，方便使用過程中單獨操作。首先將所有的符號都歸納出來，每個符號之間都是互不干擾且相對獨立，然后基于JS+CSS通過Button控件對每個鍵都進行了重寫，不同的符號都是通過不同的控制器控制，每個控制器都有對應(yīng)的name和ID。后端傳輸題干過來的同時也會將掃描題干歸納出來的該題所需要的符號傳遞給前端，同時調(diào)用該符號對應(yīng)的控制器，將該符號顯示到光標所在位置的右下方，并會隨著光標的移動隨之移動。

2 具體實現(xiàn)

針對初中數(shù)學(xué)代數(shù)、幾何以及三角函數(shù)，我們實現(xiàn)了分數(shù)線、根號、上標、下標等常見的特殊數(shù)學(xué)符號。由于分數(shù)線是中小學(xué)學(xué)生使用最廣泛且最熟悉的數(shù)學(xué)符號，且其實現(xiàn)難度較大，因此我們以分數(shù)線為例說明特殊符號的實現(xiàn)過程。分數(shù)的具體實現(xiàn)流程如圖2所示。

圖2 分數(shù)實現(xiàn)流程圖

在分數(shù)的實現(xiàn)過程中，主要包含三個部分，分數(shù)的定義，分數(shù)線的實現(xiàn)以及最后分數(shù)的實現(xiàn)。關(guān)鍵代碼分別見圖3、圖4和圖5。

圖3 分數(shù)的定義

圖4 分數(shù)線的實現(xiàn)

圖5 分數(shù)的實現(xiàn)

3 實現(xiàn)示例

下面我們以兩個具體的實例展示輔助鍵盤的實現(xiàn)效果。

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

當學(xué)生打開這道題目時，輔助鍵盤就會在答題區(qū)出現(xiàn)。在這個題目中，會涉及∠，⊥，△，°，等數(shù)學(xué)符號，從而輔助鍵盤區(qū)就會將所涉及的符號顯示出來，方便學(xué)生對解答過程的錄入。詳細解答過程如圖6所示。

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

例2是一道解方程的題目，系統(tǒng)根據(jù)題干和參考答案，提取出本題會涉及的數(shù)學(xué)符號有^，，/，±等數(shù)學(xué)符號，從而在輔助鍵盤區(qū)，就出現(xiàn)本題特有的數(shù)學(xué)符號。如圖7所示。

圖7 輔助鍵盤動態(tài)性展示實例

4 結(jié)語

本文提出了一種支持在線數(shù)學(xué)公式編輯的動態(tài)輔助鍵盤生成方法。該方法有效地解決了依賴公式編輯器才能完成的各種應(yīng)用，從而使學(xué)生可以高效快捷地錄入問題的解答過程，這將使得各種在線學(xué)習(xí)平臺的交互式學(xué)習(xí)內(nèi)容更加豐富，也為主觀題的自動判卷成為可能。由于輔助鍵盤所顯示的數(shù)學(xué)符號部分來自參考答案，所以輔助鍵盤的數(shù)學(xué)符號對學(xué)生解答具有一定的提示作用。為了避免這樣的缺陷，可以在輔助鍵盤中加入混淆符號。

參考文獻：

[1]吳洪艷.智慧學(xué)習(xí)視角下個性化在線學(xué)習(xí)系統(tǒng)設(shè)計與應(yīng)用[J].中國電化教育,2015（06）:127-131.

[2]劉亦明,文福安.網(wǎng)絡(luò)教學(xué)系統(tǒng)中數(shù)學(xué)公式編輯器的研發(fā)[J].軟件,2017,38(03)

[3]高躍,韓鵬,王少青.基于HTML5的數(shù)學(xué)公式渲染研究與實現(xiàn)[J].計算機應(yīng)用與軟件,2014,31（04）:15-18+55.

[4]陳方貴,邢遠秀,熊文龍,李衛(wèi)紅.鍵盤接口及鍵盤監(jiān)控程序的設(shè)計[J].武漢理工大學(xué)學(xué)報(交通科學(xué)與工程版)

[5]徐婧,陳雨晨.基于Android的數(shù)學(xué)公式編輯平臺的探究[J].計算機光盤軟件與應(yīng)用