本發(fā)明屬于應(yīng)用互聯(lián)網(wǎng)的數(shù)字化教學(xué)技術(shù)領(lǐng)域，具體涉及一種用于復(fù)雜題型在HTML上的樣式渲染和事件綁定的方法。

背景技術(shù)：

伴隨著計(jì)算機(jī)技術(shù)、移動(dòng)設(shè)備的發(fā)展和網(wǎng)絡(luò)時(shí)代的推進(jìn)，人們的學(xué)習(xí)方法和學(xué)習(xí)方式已經(jīng)悄然生息的發(fā)生了變化，做練習(xí)題是學(xué)習(xí)過程中必不可少的一個(gè)重要環(huán)節(jié)，大多數(shù)人不再拘泥于書本的練習(xí)，網(wǎng)絡(luò)中大數(shù)據(jù)環(huán)境下往往有更多更加豐富的題庫和練習(xí)途徑，由于電腦的操作方式比較死板，對題目的各種作答效果支持比較差，有較多的題型不能完全的平移到電子計(jì)算機(jī)或移動(dòng)設(shè)備中，比如匹配題，田字格手寫題，連線題等。

目前PC和移動(dòng)設(shè)備中對題目渲染和作答支持比較好的方法是包含主觀題和客觀題兩大類，客觀題包括選擇、判斷、多選等可直接在題目上作答可自動(dòng)判分，復(fù)雜一些的填空題如：匹配題，田字格手寫題，連線題等只能轉(zhuǎn)換為主觀題作答，無法調(diào)用計(jì)算機(jī)的拖拽和移動(dòng)設(shè)備的手寫等功能。如此一來，會(huì)浪費(fèi)較多優(yōu)質(zhì)的題目，讓用戶感覺體驗(yàn)效果太差，部分可由系統(tǒng)自動(dòng)批改的題目只能人工批改，功能單一死板，無法激發(fā)起學(xué)生的練習(xí)熱情。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的在于針對現(xiàn)有技術(shù)中復(fù)雜題型在HTML頁面上難以渲染和事件綁定的問題，提供一種通過表達(dá)式的設(shè)計(jì)實(shí)現(xiàn)復(fù)雜題型在HTML上的樣式渲染和事件綁定的方法。

本發(fā)明的技術(shù)方案如下：一種用于復(fù)雜題型在HTML上的樣式渲染和事件綁定的方法，該方法定義一套多功能題目表達(dá)式，將具體題目在作答時(shí)的渲染效果和需綁定的事件匹配對應(yīng)到所述表達(dá)式中，HTML頁面在渲染題目時(shí)通過解析題目中的表達(dá)式，為每道題目綁定展示特效和作答事件，所述表達(dá)式的固定公式如下：

<！--#@*_*@(){}$-->

其中，<！--……-->表示HTML的定義注釋標(biāo)簽；

“#@”是特殊字符，防止在前段解析表達(dá)式方法混淆將非表達(dá)式內(nèi)容解析成無定義的表達(dá)式；

第二個(gè)“@”增加表達(dá)式的匹配復(fù)雜度，防止與非表達(dá)式html注釋符混淆；

“*_*”中*是統(tǒng)配字母標(biāo)識(shí)符，第一個(gè)*表示填空處的展示效果,第二個(gè)*表示作答時(shí)需要調(diào)用的前段事件；“_”下劃線分隔兩個(gè)屬性，方便正則分隔；

“()”括號(hào)中的內(nèi)容是所填字符長度；

“{}”是預(yù)留屬性；

“$”增加表達(dá)式的匹配復(fù)雜度，防止與非表達(dá)式html注釋符混淆。

進(jìn)一步，如上所述的用于復(fù)雜題型在HTML上的樣式渲染和事件綁定的方法，其中，固定公式中第一個(gè)*表示的填空處的展示效果包括：

kh＝括號(hào)“()”；

xhx＝下劃線“”；

fk＝方框“□”；

yq＝圓圈“○”；

tzg＝田字格“田”。

第二個(gè)*表示的作答時(shí)需要調(diào)用的前段事件包括：

hz＝漢字“手寫”；

sz＝數(shù)字鍵盤“九宮格+小數(shù)、分?jǐn)?shù)符、負(fù)數(shù)”；

ywzm＝英文字母；

sxfh＝數(shù)學(xué)符號(hào)“>\<\＝”；

pddc＝√、×；pdtf＝T、F；

pxsz＝1,2,3,4,5…；pxzm＝A,B,C,D,E…；

tsxb＝田字格手寫板；

ppzd＝匹配題作答項(xiàng)，綁定拖拽事件。

進(jìn)一步，如上所述的用于復(fù)雜題型在HTML上的樣式渲染和事件綁定的方法，其中，固定公式中“{}”預(yù)留屬性包括尺寸、數(shù)量、特殊樣式、權(quán)限展示、可變屬性等。

進(jìn)一步，如上所述的用于復(fù)雜題型在HTML上的樣式渲染和事件綁定的方法，其中，對于排序題，當(dāng)排序的是數(shù)字時(shí)，固定公式中“()”括號(hào)中的內(nèi)容是代表由1開始的若干個(gè)數(shù)字；當(dāng)排序的是字母時(shí)，固定公式中“()”括號(hào)中的內(nèi)容是代表由A開始的若干個(gè)字母。

進(jìn)一步，如上所述的用于復(fù)雜題型在HTML上的樣式渲染和事件綁定的方法，其中，對于匹配題，第二個(gè)*表示的作答時(shí)需要調(diào)用的前段事件包括：

ppdx＝匹配項(xiàng)，只匹配一次；

ppcf＝匹配項(xiàng)，能匹配多次；

ppzd＝匹配作答填空。

本發(fā)明的有益效果如下：本發(fā)明主要是通過表達(dá)式的思想，來解決復(fù)雜的填空題在HTML頁面中的渲染和事件綁定的問題。并通過這一思想，設(shè)計(jì)出一套完整的可兼容可擴(kuò)展的題目內(nèi)容表達(dá)式，即多功能題目表達(dá)式。這套表達(dá)式的出現(xiàn)，打破了題目在電子設(shè)備原先教條的作答傳統(tǒng)，使原本枯燥死板的電子題目躍然于設(shè)備的屏幕之上，提升了用戶的使用感受，激發(fā)了學(xué)生的練習(xí)熱情。

附圖說明

圖1為采用本發(fā)明表達(dá)式的填空題錄入模板列表；

圖2為采用本發(fā)明表達(dá)式的判斷題、書寫題錄入模板列表；

圖3為采用本發(fā)明表達(dá)式的排序題、匹配題錄入模板列表；

圖4為本發(fā)明具體實(shí)施例的一匹配題示意圖；

圖5為具體實(shí)施例的方法流程圖。

具體實(shí)施方式

下面結(jié)合附圖和實(shí)施例對本發(fā)明進(jìn)行詳細(xì)的介紹。

本發(fā)明所提供的用于復(fù)雜題型在HTML上的樣式渲染和事件綁定的方法，定義了一套多功能題目表達(dá)式，將具體題目在作答時(shí)的渲染效果和需綁定的事件匹配對應(yīng)到所述表達(dá)式中。該表達(dá)式主要是將特殊字符按約定組合，把一些復(fù)雜的題型(如：田字格手寫題，匹配題等)的作答效果和渲染方式進(jìn)行歸納，將題目結(jié)構(gòu)改造為符合表達(dá)式結(jié)構(gòu)的題目。HTML頁面在渲染題目時(shí)通過解析題目中的表達(dá)式，為每道題目綁定展示特效和作答事件，如匹配題選項(xiàng)展示，田字格手寫等特殊作答事件等。

所述表達(dá)式的固定公式如下：

<！--#@*_*@(){}$-->

其中，<！--……-->表示HTML的定義注釋標(biāo)簽；

“#@”是特殊字符，防止在前段解析表達(dá)式方法混淆將非表達(dá)式內(nèi)容解析成無定義的表達(dá)式；

第二個(gè)“@”增加表達(dá)式的匹配復(fù)雜度，防止與非表達(dá)式html注釋符混淆；

“*_*”中*是統(tǒng)配字母標(biāo)識(shí)符，第一個(gè)*表示填空處的展示效果，如下劃線“”(xhx)，括號(hào)“()”(kh)等；第二個(gè)*表示作答時(shí)需要調(diào)用的前段事件，如拖曳事件、手寫事件等；“_”下劃線分隔兩個(gè)屬性，方便正則分隔；

“()”括號(hào)中的內(nèi)容是所填字符長度；

“{}”是預(yù)留屬性，如尺寸、數(shù)量、特殊樣式、權(quán)限展示、可變屬性等；

“$”增加表達(dá)式的匹配復(fù)雜度，防止與非表達(dá)式html注釋符混淆。

表達(dá)式規(guī)則詳細(xì)說明如下：

1.通用公式<！--#@*_*@(){}$-->

2.@[a-z]_[a-z]@：填空模板類型

_前段：kh＝()；xhx＝___；fk＝□；yq＝○；tzg＝田

_后段：hz＝漢字(手寫)；

sz＝數(shù)字鍵盤(九宮格+小數(shù)、分?jǐn)?shù)符、負(fù)數(shù))；

ywzm＝英文字母；

sxfh＝數(shù)學(xué)符號(hào)(>\<\＝)；

pddc＝√、×；pdtf＝T、F；

pxsz＝1,2,3,4,5…；pxzm＝A,B,C,D,E…；

tsxb＝田字格手寫板；

ppzd＝匹配題作答項(xiàng)，綁定拖拽事件。

3.(1)：長度為1漢字字符長度；僅有下劃線和括號(hào)有長度。(默認(rèn)1)

4.{}:預(yù)留屬性，如尺寸(寬度)或用于其他屬性擴(kuò)展,填空數(shù)量。

5.特殊題型說明：

1)排序題

<！--#@kh_pxsz@(4){}$-->

當(dāng)排序的是數(shù)字時(shí)，固定公式中排序題匹配符中(4)代表1,2,3,4；

<！--#@kh_pxzm@(4){}$-->

當(dāng)排序的是字母時(shí)，固定公式中排序題匹配符中(4)代表A,B,C,D

2)匹配題

ppdx：匹配項(xiàng)，只能匹配一次<！--#@kh_ppdx@(埋藏){}$-->

ppcf；匹配項(xiàng)，能匹配多次

ppzd；匹配作答填空

(1)<！--#@kh_ppzd@(10){}$-->(10)代表有個(gè)長度為10的填空；

(2)<！--#@xhx_ppzd@(2){3}$-->(2){3}代表長度為2字符的下劃線有三個(gè)(一個(gè)空的答案有多個(gè)詞且無序時(shí)錄入答案需要將詞匯用###分割如：

1.one###two###five)

填空處匹配符順序按照自然順序與題肢答案對應(yīng)。

圖1-圖3分別為不同展示效果和事件的錄入模板。

圖1中針對填空題，展示效果包括：kh()，xhx，fk□，yq○。

事件包括：hz漢字(手寫)，sz數(shù)字鍵盤(九宮格+小數(shù)、分?jǐn)?shù)符、負(fù)數(shù))，ywzm英文字母，sxfh數(shù)學(xué)符號(hào)(>\<\＝)。

圖2針對判斷題和書寫題，展示效果包括：kh()，xhx。

事件包括：pddc＝√、×，pdtf＝T、F，tsxb田字格手寫板。

圖3針對排序題和匹配題，展示效果包括：kh()，xhx。

事件包括：pxsz＝1,2,3,4,5…，pxzm＝A,B,C,D,E…，ppdx，ppcf，ppzd。

實(shí)施例

本發(fā)明提供的方法定義了一套解決復(fù)雜題型的數(shù)據(jù)在HTML頁面中渲染和綁定事件的過程作為標(biāo)識(shí)的表達(dá)式，即多功能題目表達(dá)式。題目在錄入時(shí)，需要結(jié)合題目的實(shí)際效果和作答事件去選擇正確的表達(dá)式。

如圖4所示匹配題。要標(biāo)識(shí)選項(xiàng)，實(shí)現(xiàn)拖拽作答，保存作答記錄等功能，單純的文字描述題干題肢肯定無法作答以上效果，如果為每一道題都單獨(dú)定制HTML靜態(tài)頁面又耗費(fèi)太多的人力物力，多功能題目表達(dá)式的實(shí)現(xiàn)可輕松解決以上問題。具體的方法可總結(jié)為如下步驟，如圖5所示：

第一步，歸納系統(tǒng)題目的類型及填空處的渲染效果、作答時(shí)需要綁定的事件以及作答結(jié)果保存方法；

第二步，定義和擴(kuò)展多功能題目表達(dá)式，根據(jù)第一步歸納的效果和事件匹配對應(yīng)表達(dá)式，如果當(dāng)前表達(dá)式不足，按規(guī)則進(jìn)行擴(kuò)展；

第三步，題目數(shù)據(jù)的結(jié)構(gòu)進(jìn)行表達(dá)式改造，將題目數(shù)據(jù)的作答處添加表達(dá)式；

第四步，前段設(shè)計(jì)師按照約定的表達(dá)式去綁定事件，添加渲染效果。

以圖4的匹配題為例，圖中所示題目為單項(xiàng)匹配題，每一個(gè)選項(xiàng)只能被拖拽一次，經(jīng)分析后可使用

<--！#@xhx_ppzd@(2){3}$-->，<！--#@xhx_ppdx@(green){}$-->

如上兩個(gè)表達(dá)式完成圖4匹配題的事件和特效的綁定。

綜上，本發(fā)明的要旨在于通過表達(dá)式確定的規(guī)則，兼容性強(qiáng)，擴(kuò)展性好，可良好的處理各種定制化的題目渲染和作答場景。一套模板便可支持所有同類型的題目。為復(fù)雜題型在HTML的解析提供了標(biāo)準(zhǔn)和規(guī)范。

需要注意的是，上述具體實(shí)現(xiàn)僅是示例性的，在本發(fā)明的上述教導(dǎo)下，本領(lǐng)域技術(shù)人員可以在上述實(shí)施例的基礎(chǔ)上進(jìn)行各種改進(jìn)和變形，而這些改進(jìn)或者變形落在本發(fā)明的保護(hù)范圍內(nèi)。本領(lǐng)域技術(shù)人員應(yīng)該明白，上面的具體描述只是為了解釋本發(fā)明的目的，并非用于限制本發(fā)明。本發(fā)明的保護(hù)范圍由權(quán)利要求及其等同范圍限定。