基于web的試題編輯技術的研究與實現(xiàn)

張睿++文福安

摘要：自e-learning出現(xiàn)以來，人們對于題庫系統(tǒng)的建設進行了大量研究。然而圍繞題庫建設的研究主要集中在數(shù)據(jù)庫設計以及自動組卷技術，對于試題編輯方法的討論沒有得到重視。針對這種情況，本文在詳細討論各種試題編輯技術的基礎上，結合網(wǎng)絡環(huán)境中廣泛使用的CKeditor編輯器，在其強大的插件擴展支持下實現(xiàn)試題的可視化編輯，解決了傳統(tǒng)題庫系統(tǒng)中編輯試題操作步驟冗余、操作結果不直觀的問題。使出題人實現(xiàn)試題編輯的真正所見即所得，極大的改善了系統(tǒng)使用過程中的用戶體驗并提高了出題人的效率。

關鍵詞：試題編輯；CKeditor；插件開發(fā)；web

中圖分類號：TP39

文獻標識碼：A

DOI：10.3969/j.issn.1003-6970.2015.09.005

0 引言

近年來，各級考試部門負責的考試類型、服務對象、考試模式日益復雜，同時越來越多的考試機構開始使用計算機化考試取代傳統(tǒng)的紙筆考試。既然是計算機化的考試，那么實現(xiàn)試題的計算機化編輯則成為考試環(huán)節(jié)中必不可少的一部分。傳統(tǒng)的題庫系統(tǒng)基于C/S架構，這就導致了制題在空間上的局限型以及題庫系統(tǒng)的封閉性。高校教育資源共享的開放式教學模式強調(diào)充分利用互聯(lián)網(wǎng)和移動網(wǎng)絡進行訪問，然而在開發(fā)教學教育資源方面，高校各自為政，無統(tǒng)一規(guī)劃下的資源建設出現(xiàn)了許多矛盾問題，資源缺乏共享，教學資源內(nèi)容單一?；趙eb的題庫系統(tǒng)只需要在安裝有瀏覽器的計算機上即可使用，并且借助網(wǎng)絡的跨空間性，使制題人員不受試題錄制地點的限制。同時現(xiàn)有的題庫系統(tǒng)在編輯試題上存在操作步驟冗余、操作結果不直觀的問題。比如對于填空題這種基本的試題類型而言，傳統(tǒng)的題庫系統(tǒng)在編輯題目時是通過占位符來標識一個“空”，這種錄入方式即繁瑣又不能滿足所見即所得的要求，給制題人員帶來很大的不便。本文通過借助CKeditor編輯器強大的插件擴展機制并結合相應題目類型的需求，編寫出適用于編輯不同題目類型的小工具并整合進系統(tǒng)中，實現(xiàn)簡單的試題編輯過程以及所見即所得的編輯結果。

1 web端試題編輯技術

筆者通過檢索國內(nèi)外相關領域的論文，發(fā)現(xiàn)基于web端的試題編輯技術主要存在兩種思路：在IE瀏覽器中借助ActiveX技術調(diào)用word編輯器實現(xiàn)試題編輯和借助web上流行的富文本編輯器編輯試題。

ActiveX是微軟對于一系列策略性面向對象程序技術和工具的稱呼，主要的技術就是組件對象模型（Component Object Model，COM組件）。IE瀏覽器通過這種技術可以打開服務器上的遠程Office文件，包括Word文件、Excel文件等，并且還能在線編輯、調(diào)用Word文件、Excel文件等。這種web端編輯技術優(yōu)點是借助word本身強大的字處理功能，可以實現(xiàn)復雜的編輯以及排版。然而其存在以下缺點：

（l）題庫系統(tǒng)無法實現(xiàn)跨瀏覽器。因為ActiveX是微軟提供的技術并且只能在IE瀏覽器下使用，這樣就造成了題庫系統(tǒng)只能通過IE瀏覽器訪問，失去了web原本跨平臺的優(yōu)勢。

（2）瀏覽器中使用word編輯試題過于龐大。word這種字處理軟件適合的是復雜辦公場景，毋庸置疑其本身具有強大的功能。但是制題系統(tǒng)有其應用的特殊性，word中絕大部分功能是用不到的。制題系統(tǒng)中最常用的有以下功能：對文字進行格式化處理，例如加粗、改變字號等；實現(xiàn)文字與圖片的混排；插入表格、公式。隨著web技術的不斷發(fā)展，現(xiàn)如今這些功能完全可以由web端的富文本編輯器來實現(xiàn)，因此基于web的制題系統(tǒng)完全沒有必要為了實現(xiàn)這些簡單功能而引入龐大的word。

（3）自定義開發(fā)ActiveX比較困難。錄制試題有其操作上的一般性，但檢驗一個題庫系統(tǒng)是否滿足用戶需求應當從其對特殊操作的支持程度上來體現(xiàn)?；贑Keditor的web端題庫系統(tǒng)可以通過其提供的插件擴展機制方便的開發(fā)符合自己需求的插件從而支持相應的特殊操作。

鑒于基于ActiveX技術進行編輯試題存在以上問題，本文中采取的是后一種編輯方式：借助web上流行的CKeditor編輯器實現(xiàn)試題編輯。由于CKeditor底層做了很好的瀏覽器兼容，這樣就使得題庫系統(tǒng)具有跨瀏覽器的特性。同時Ckeditor提供了許多插件供開發(fā)者使用，當然最方便的還是它提供了簡單的白定義插件編寫技術。因為CKeditor編輯器本身就是web端的應用，因此在其中呈現(xiàn)諸如圖片、音頻、視頻等多媒體元素時具有先天的優(yōu)勢。同時，由于該題庫系統(tǒng)是基于web的，使用CKeditor編輯器可以使開發(fā)者專注于前端技術即可，不用像利用ActiveX技術那樣需要額外學習微軟的開發(fā)技術，節(jié)約開發(fā)成本的同時使得系統(tǒng)可維護性增強。

2 CKeditor編輯器的優(yōu)點

CKeditor是目前最優(yōu)秀的所見即所得網(wǎng)頁編輯器之一，其具體突出特點如下：

1、極強的靈活性，CKeditor是高度白定義的web編輯器。其白定義主要體現(xiàn)在以下兩個方面：

（l）外觀自定義（UI自定義），外觀白定義包括編輯器丁具欄的數(shù)量以及工具欄圖標、編輯器的皮膚等的自定義。

（2）插件白定義（功能白定義），盡管CKeditor編輯器擁有數(shù)以百計的插件可供開發(fā)者使用，但是編輯試題又有其操作上的特殊性。傳統(tǒng)的CKeditor編輯器插件并不能滿足制題人員對于編輯試題過程直觀、簡單的要求。因此我們需要借助其提供的插件擴展機制針對不同的題型開發(fā)出小工具，并整合進CKeditor編輯器的工具欄進行使用。

2、功能強大，CKEditor除能夠完成編輯器所需的一般功能外，其強大的內(nèi)容過濾功能可以保證出題人員粘貼內(nèi)容格式的完整性。

3 所見即所得試題編輯技術的實現(xiàn)

題庫系統(tǒng)的主要用戶是教師，而教師對于一些試題的答題操作已經(jīng)形成習慣，例如填空題就應該用一個具有一定長度的空著的下劃線代表一個“空”。然而在傳統(tǒng)的制題系統(tǒng)中卻很難在題目中直觀的錄入一個“空”。一般的解決方法無非是用一對括號或者其它占位符將應該出現(xiàn)“空”的位置標記下來，然后試題呈現(xiàn)引擎讀到到該占位符就將其解析為一個“空”并呈現(xiàn)出來。這種錄入方式的缺點非常明顯：制題人需要操作的步驟繁瑣且不直觀。然而借助CKeditor的插件擴展機制，我們完全可以開發(fā)出針對填空題錄入“空”的工具并整合進CKeditor的工具欄，使制題人通過點擊按鈕即可在光標位置插入一個與紙筆考試完全一樣的“空”，并且在彈出的對話框中錄入該“空”對應的答案。“空”的輸入流程如下圖l所示。

根據(jù)圖1的操作流程，將整個錄入“空”的功能抽象成一個CKeditor的插件，該插件的名字命名為textEntry，其可以注冊到CKeditor維護的全局插件集合中。然后在該插件上定義對話框以及對話框中存在的元素，例如錄入“空”的輸入框。最后定義對話框關閉后的動作：即將“空”插入到試題中。

由以上的分析得出該插件的整體結構如圖2所不：

對于如何開發(fā)CKeditor的插件請參看http：//docs.ckeditor.com/#！/guide/plugin sdk intro.，在此不詳細討論。根據(jù)以上分析以及最終的編碼實現(xiàn)圖3的最終效果。

由于該“空”實際上是由一個標準的html元素input實現(xiàn)的，只不過通過CSS將該input設置成“空”的樣子。從這個角度出發(fā)，我們可以很方便通過CSS修改空的樣式，包括其長度、邊框粗細等，進一步體現(xiàn)了基于web端的編輯器開發(fā)試題編輯工具的靈活性。如上圖3所示，借助該工具，制題人員只需簡單的選中要錄入“空”的區(qū)域點擊編輯器上的按鈕即可方便的插入一個“空”，實現(xiàn)了簡單的操作步驟，直觀的操作的結果。

在通用的題庫系統(tǒng)中，是否能支持各種課程各種類型的題目是評價題庫系統(tǒng)質(zhì)量的一個很重要的指標。由于很多題目需要同時顯示文字和圖片，有些題目甚至要求可以播放聲音、視頻、fash動畫等，如英語的聽力試題。如何方便的將這些多媒體素材編輯進試題并在編輯完成后立即看到或聽到最終效果，這對一個編輯試題工具易用性起到至關重要的作用。由于我們所開發(fā)的題庫系統(tǒng)是基于web的，目前可以支持絕大多數(shù)的多媒體文件，如圖片、聲音、視頻等。在這里，我們以向試題中插入音頻為例介紹實現(xiàn)該功能的思路。

利用CKeditor自身的上傳文件的功能將該本地音頻文件上傳至服務器做持久化保存。緊接著返回該音頻在服務武器上的地址。最后，根據(jù)返回的地址，我們將支持音頻文件的audio標簽插入到編輯器中，并將其src設置為服務器返回的地址。有一點需要注意的是CKeditor本身默認是不支持音頻播放的，即返回的音頻是以一個占位圖片的形式插入到題目中。為了解決這個問題，我們同樣為此功能編寫專門的插件。該插件最終實現(xiàn)的效果如圖4所示。

制題人員通過點擊音頻播放器即可試聽播放的音頻，解決了以往上傳音頻文件后無法試聽的問題。插入圖片、視頻的處理方式也是如此。

4 總結與展望

基于CKeditor編輯器進行題庫系統(tǒng)中試題編輯工具的開發(fā)，一方面可以借助編輯提供的基本功能，比如對文字樣式的處理等，減少開發(fā)成本；另一方面通過其提供的強大插件擴展機制，我們可以輕松的編寫符合特定題型錄制的插件并將其整合進CKeditor編輯器，從而方便出題人員對于相關題目的錄制。同時隨著htm15技術的發(fā)展與完善，基于web的應用功能越來越強大，雖然文章中實現(xiàn)的功能相對簡單，但是開發(fā)人員可以就實際需要進行復雜功能插件的開發(fā)，這也正體現(xiàn)了CKeditor的可擴展性。