一种用于复杂题型在HTML上的样式渲染和事件绑定的方法与流程

本发明属于应用互联网的数字化教学技术领域，具体涉及一种用于复杂题型在HTML上的样式渲染和事件绑定的方法。

背景技术：

伴随着计算机技术、移动设备的发展和网络时代的推进，人们的学习方法和学习方式已经悄然生息的发生了变化，做练习题是学习过程中必不可少的一个重要环节，大多数人不再拘泥于书本的练习，网络中大数据环境下往往有更多更加丰富的题库和练习途径，由于电脑的操作方式比较死板，对题目的各种作答效果支持比较差，有较多的题型不能完全的平移到电子计算机或移动设备中，比如匹配题，田字格手写题，连线题等。

目前PC和移动设备中对题目渲染和作答支持比较好的方法是包含主观题和客观题两大类，客观题包括选择、判断、多选等可直接在题目上作答可自动判分，复杂一些的填空题如：匹配题，田字格手写题，连线题等只能转换为主观题作答，无法调用计算机的拖拽和移动设备的手写等功能。如此一来，会浪费较多优质的题目，让用户感觉体验效果太差，部分可由系统自动批改的题目只能人工批改，功能单一死板，无法激发起学生的练习热情。

技术实现要素：

本发明的目的在于针对现有技术中复杂题型在HTML页面上难以渲染和事件绑定的问题，提供一种通过表达式的设计实现复杂题型在HTML上的样式渲染和事件绑定的方法。

本发明的技术方案如下：一种用于复杂题型在HTML上的样式渲染和事件绑定的方法，该方法定义一套多功能题目表达式，将具体题目在作答时的渲染效果和需绑定的事件匹配对应到所述表达式中，HTML页面在渲染题目时通过解析题目中的表达式，为每道题目绑定展示特效和作答事件，所述表达式的固定公式如下：

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

其中，<！--……-->表示HTML的定义注释标签；

“#@”是特殊字符，防止在前段解析表达式方法混淆将非表达式内容解析成无定义的表达式；

第二个“@”增加表达式的匹配复杂度，防止与非表达式html注释符混淆；

“*_*”中*是统配字母标识符，第一个*表示填空处的展示效果,第二个*表示作答时需要调用的前段事件；“_”下划线分隔两个属性，方便正则分隔；

“()”括号中的内容是所填字符长度；

“{}”是预留属性；

“$”增加表达式的匹配复杂度，防止与非表达式html注释符混淆。

进一步，如上所述的用于复杂题型在HTML上的样式渲染和事件绑定的方法，其中，固定公式中第一个*表示的填空处的展示效果包括：

kh＝括号“()”；

xhx＝下划线“”；

fk＝方框“□”；

yq＝圆圈“○”；

tzg＝田字格“田”。

第二个*表示的作答时需要调用的前段事件包括：

hz＝汉字“手写”；

sz＝数字键盘“九宫格+小数、分数符、负数”；

ywzm＝英文字母；

sxfh＝数学符号“>\<\＝”；

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

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

tsxb＝田字格手写板；

ppzd＝匹配题作答项，绑定拖拽事件。

进一步，如上所述的用于复杂题型在HTML上的样式渲染和事件绑定的方法，其中，固定公式中“{}”预留属性包括尺寸、数量、特殊样式、权限展示、可变属性等。

进一步，如上所述的用于复杂题型在HTML上的样式渲染和事件绑定的方法，其中，对于排序题，当排序的是数字时，固定公式中“()”括号中的内容是代表由1开始的若干个数字；当排序的是字母时，固定公式中“()”括号中的内容是代表由A开始的若干个字母。

进一步，如上所述的用于复杂题型在HTML上的样式渲染和事件绑定的方法，其中，对于匹配题，第二个*表示的作答时需要调用的前段事件包括：

ppdx＝匹配项，只匹配一次；

ppcf＝匹配项，能匹配多次；

ppzd＝匹配作答填空。

本发明的有益效果如下：本发明主要是通过表达式的思想，来解决复杂的填空题在HTML页面中的渲染和事件绑定的问题。并通过这一思想，设计出一套完整的可兼容可扩展的题目内容表达式，即多功能题目表达式。这套表达式的出现，打破了题目在电子设备原先教条的作答传统，使原本枯燥死板的电子题目跃然于设备的屏幕之上，提升了用户的使用感受，激发了学生的练习热情。

附图说明

图1为采用本发明表达式的填空题录入模板列表；

图2为采用本发明表达式的判断题、书写题录入模板列表；

图3为采用本发明表达式的排序题、匹配题录入模板列表；

图4为本发明具体实施例的一匹配题示意图；

图5为具体实施例的方法流程图。

具体实施方式

下面结合附图和实施例对本发明进行详细的介绍。

本发明所提供的用于复杂题型在HTML上的样式渲染和事件绑定的方法，定义了一套多功能题目表达式，将具体题目在作答时的渲染效果和需绑定的事件匹配对应到所述表达式中。该表达式主要是将特殊字符按约定组合，把一些复杂的题型(如：田字格手写题，匹配题等)的作答效果和渲染方式进行归纳，将题目结构改造为符合表达式结构的题目。HTML页面在渲染题目时通过解析题目中的表达式，为每道题目绑定展示特效和作答事件，如匹配题选项展示，田字格手写等特殊作答事件等。

所述表达式的固定公式如下：

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

其中，<！--……-->表示HTML的定义注释标签；

“#@”是特殊字符，防止在前段解析表达式方法混淆将非表达式内容解析成无定义的表达式；

第二个“@”增加表达式的匹配复杂度，防止与非表达式html注释符混淆；

“*_*”中*是统配字母标识符，第一个*表示填空处的展示效果，如下划线“”(xhx)，括号“()”(kh)等；第二个*表示作答时需要调用的前段事件，如拖曳事件、手写事件等；“_”下划线分隔两个属性，方便正则分隔；

“()”括号中的内容是所填字符长度；

“{}”是预留属性，如尺寸、数量、特殊样式、权限展示、可变属性等；

“$”增加表达式的匹配复杂度，防止与非表达式html注释符混淆。

表达式规则详细说明如下：

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

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

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

_后段：hz＝汉字(手写)；

sz＝数字键盘(九宫格+小数、分数符、负数)；

ywzm＝英文字母；

sxfh＝数学符号(>\<\＝)；

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

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

tsxb＝田字格手写板；

ppzd＝匹配题作答项，绑定拖拽事件。

3.(1)：长度为1汉字字符长度；仅有下划线和括号有长度。(默认1)

4.{}:预留属性，如尺寸(宽度)或用于其他属性扩展,填空数量。

5.特殊题型说明：

1)排序题

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

当排序的是数字时，固定公式中排序题匹配符中(4)代表1,2,3,4；

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

当排序的是字母时，固定公式中排序题匹配符中(4)代表A,B,C,D

2)匹配题

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

ppcf；匹配项，能匹配多次

ppzd；匹配作答填空

(1)<！--#@kh_ppzd@(10){}$-->(10)代表有个长度为10的填空；

(2)<！--#@xhx_ppzd@(2){3}$-->(2){3}代表长度为2字符的下划线有三个(一个空的答案有多个词且无序时录入答案需要将词汇用###分割如：

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

填空处匹配符顺序按照自然顺序与题肢答案对应。

图1-图3分别为不同展示效果和事件的录入模板。

图1中针对填空题，展示效果包括：kh()，xhx，fk□，yq○。

事件包括：hz汉字(手写)，sz数字键盘(九宫格+小数、分数符、负数)，ywzm英文字母，sxfh数学符号(>\<\＝)。

图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。

实施例

本发明提供的方法定义了一套解决复杂题型的数据在HTML页面中渲染和绑定事件的过程作为标识的表达式，即多功能题目表达式。题目在录入时，需要结合题目的实际效果和作答事件去选择正确的表达式。

如图4所示匹配题。要标识选项，实现拖拽作答，保存作答记录等功能，单纯的文字描述题干题肢肯定无法作答以上效果，如果为每一道题都单独定制HTML静态页面又耗费太多的人力物力，多功能题目表达式的实现可轻松解决以上问题。具体的方法可总结为如下步骤，如图5所示：

第一步，归纳系统题目的类型及填空处的渲染效果、作答时需要绑定的事件以及作答结果保存方法；

第二步，定义和扩展多功能题目表达式，根据第一步归纳的效果和事件匹配对应表达式，如果当前表达式不足，按规则进行扩展；

第三步，题目数据的结构进行表达式改造，将题目数据的作答处添加表达式；

第四步，前段设计师按照约定的表达式去绑定事件，添加渲染效果。

以图4的匹配题为例，图中所示题目为单项匹配题，每一个选项只能被拖拽一次，经分析后可使用

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

如上两个表达式完成图4匹配题的事件和特效的绑定。

综上，本发明的要旨在于通过表达式确定的规则，兼容性强，扩展性好，可良好的处理各种定制化的题目渲染和作答场景。一套模板便可支持所有同类型的题目。为复杂题型在HTML的解析提供了标准和规范。

需要注意的是，上述具体实现仅是示例性的，在本发明的上述教导下，本领域技术人员可以在上述实施例的基础上进行各种改进和变形，而这些改进或者变形落在本发明的保护范围内。本领域技术人员应该明白，上面的具体描述只是为了解释本发明的目的，并非用于限制本发明。本发明的保护范围由权利要求及其等同范围限定。