CN109376351A - 一种在平板设备上对教学内容自适应排版的方法 - Google Patents

Abstract

本发明公开了一种在平板设备上对教学内容自适应排版的方法，涉及信息科学技术领域。该方法包括：从服务器获取要显示的教学内容；对获取到的教学内容进行解析，得到不同类型的题目；对不同类型的题目，分别进行预处理；根据预处理后的教学内容生成相应的html页面；渲染html页面中的公式；等待html页面中的图片加载完毕；对html页面进行分页操作，并添加页面控制逻辑，以供设备显示。所以，采用本发明提供的方法可以根据内容的特性自适应地对其进行排版以便更好地在平板设备上显示；添加了页面控制逻辑，可以将教学内容分页显示，以便用户使用。

Description

一种在平板设备上对教学内容自适应排版的方法

技术领域

本发明涉及信息科学技术领域，尤其涉及一种在平板设备上对教学内容自适应排版的方法。

背景技术

在教育领域，课后练习是巩固知识、学以致用必不可少的环节。

目前，大多数学校的练习流程通常采用如下方式：教师打印、发放习题，学生完成题目，教师收集习题并批改，教师发放批改后的习题，并对部分或全部题目做出讲解。

但，这种方法具有浪费纸张等缺点，教育领域亟需一批新的教学方法、教学工具。在信息化如此普及的今天，教育信息化也不应该缺席。目前教育信息化主要表现为教师端的信息化，包括电脑批改试卷、讲授课程使用电子白板等，但是针对师生交流、链接习题的信息化方面仍有大量空白。虽然，目前也出现了一批在手机端使用的教学应用，但是由于在实际应用中，教学内容具有多种多样的特性，具有代表性的就是学生的作业题目，其种类繁多，比如选择题、填空题、解答题、作图题，完形填空等等。而现有技术中，在手机端使用的教学应用的排版技术不能很好地将包含如此多种类的教学内容很好地排版，以显示在平板设备的屏幕上，从而造成了使用过程中很多不必要的麻烦。

另外，在手机端使用的教学应用还存在如下局限性：

1、手机端屏幕较小，无法完成主观题的书写。只能发放、批改部分选择、填空等题目，题目的种类非常有限。

2、由于采用的是手机终端，手机采用液晶屏幕，会对眼睛造成一定伤害。

3、手机端很难呈现学生笔迹，对于现在学生书法、写作能力的锻炼有一定缺失，学生也更容易作弊。

4、手机端娱乐应用丰富，容易导致学生注意力分散，从而降低练习的效果。

发明内容

本发明的目的在于提供一种在平板设备上对教学内容自适应排版的方法，从而解决现有技术中存在的前述问题。

为了实现上述目的，本发明采用的技术方案如下：

一种在平板设备上对教学内容对自适应排版方法，包括以下步骤：

步骤1，从服务器获取要显示的教学内容，并将获取到的教学内容作为原始的教学内容进行保存；

步骤2，对所述原始的教学内容进行解析，从中获取不同类型的题目，将解析出的题目作为未处理的显示内容进行保存；

步骤3，对每一类不同的题目对应的所述未处理的显示内容均进行预处理，得到各类型题目预处理后的显示内容，将预处理后的显示内容作为待排版的显示内容进行保存；

步骤4，对所述待排版的显示内容，循环生成相应的html页面，将生成的html页面作为待渲染的html页面进行保存；

步骤5，渲染所述待渲染的html页面中的公式，并进行图片加载，得到渲染后的html页面，将所述渲染后的html页面作为待显示html页面进行保存；

步骤6，对所述待显示html页面进行分页操作，并添加页面控制逻辑，以供平板设备显示。

优选地，步骤1中，所述从服务器获取要显示的教学内容，具体为：通过http中的get服务向服务器请求教学内容数据，如果服务器响应超时则返回错误信息，提示打开作业失败，请重新进入；如获取成功则作为原始的教学内容保存至数组中，数组仅有有限个元素。

优选地，步骤2具体为：原始教学内容为字符串，对字符串进行处理，通过匹配题目类型标识符的方式从字符串中解析出不同类型的题目，并转换成对象，作为未处理的显示内容进行保存，同时记录题目的总数。

优选地，步骤3中，所述对每一类不同的题目对应的所述未处理的显示内容均进行预处理，具体为：使用字符串替换函数将教学内容中的各元素转换成相应的html组件，其中，元素包括图片、换行符、公式和/或空格；对于填空题，设置空白的答题区域，对于选择题，提取选项并存入数组中。

优选地，步骤4中，所述对所述待排版的显示内容，循环生成相应的html页面，具体为：使用双重循环对预处理后的教学内容进行遍历，外层循环为一级题目，内层循环为二级题目，以二级题目为单位生成html页面，对于每道二级题目，根据其类型的不同，分别构建html页面，在构建时采用字符串拼接的方式，之后在加载时通过DOM动态的方式加载到相应页面。

优选地，步骤5具体为，循环遍历html组件，对每个题目，获取其中的公式字符串，使用Latex相关组件对其进行渲染，并通过图片加载服务检测组件中的图片加载状态，如果加载完成则将其作为待显示的html页面保存，之后转入下个步骤；否则，提示作业加载失败，请重新进入。

优选地，步骤6包括如下步骤：

步骤601，循环遍历整个html页面，判断每个题目DIV是否跨页，若跨页，则寻找得到跨页的行元素，并在行元素之前插入占位DIV，使后续信息转入下一页面显示；

步骤602，使用双重循环遍历所有的题目，外层循环为一级题目，内层循环为二级题目，判断当前题目容器是否跨页，若跨页，则依次检查子节点，判断每行的元素是否跨页并处理；

步骤603，遍历结束后对最后一个题目填充空白区域，使其成为一个完整的页面，并将分页信息添加至分页结构中。

优选地，步骤602中，所述依次检查子节点中，检查的元素可以分为文本结点元素、行块内元素和块类型元素三类，其中，对跨越多行的文本结点元素进行分行处理；对行块内类型的元素不处理；块类型元素如果跨页则直接在其前边插入占位DIV，否则跳过对当前结点的检查，直接处理下一个元素。

优选地，步骤601中，如果当前题目为选择题，则对选项进行处理，将能够并列显示的选项放在同一行，且每行的选项个数保持相同，每个题目的选项行数保持不变。

本发明的有益效果是：本发明实施例提供的在平板设备上对教学内容对自适应排版方法，包括：从服务器获取要显示的教学内容；对获取到的教学内容进行解析，得到不同类型的题目；对不同类型的题目，分别进行预处理；根据预处理后的教学内容生成相应的html页面；渲染html页面中的公式；等待html页面中的图片加载完毕；对html页面进行分页操作，并添加页面控制逻辑，以供设备显示。所以，采用本发明提供的方法可以根据内容的特性自适应地对其进行排版以便更好地在平板设备上显示；对于一些特殊情况，比如一段教学内容过长，本方法会对在其插入一段空白，使其在分页时转入下一页来显示，增强用户的使用体验；添加了页面控制逻辑，可以将教学内容分页显示，以便用户使用。

附图说明

图1为本发明提供的在平板设备上对教学内容自适应排版的方法的流程示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不用于限定本发明。

如图1所示，本发明实施例提供了一种在平板设备上对教学内容对自适应排版方法，包括以下步骤：

步骤1，从服务器获取要显示的教学内容，并将获取到的教学内容作为原始的教学内容进行保存；

步骤2，对所述原始的教学内容进行解析，从中获取不同类型的题目，将解析出的题目作为未处理的显示内容进行保存；

步骤3，对每一类不同的题目对应的所述未处理的显示内容均进行预处理，得到各类型题目预处理后的显示内容，将预处理后的显示内容作为待排版的显示内容进行保存；

步骤4，对所述待排版的显示内容，循环生成相应的html页面，将生成的html页面作为待渲染的html页面进行保存；

步骤5，渲染所述待渲染的html页面中的公式，并进行图片加载，得到渲染后的html页面，将所述渲染后的html页面作为待显示html页面进行保存；

步骤6，对所述待显示html页面进行分页操作，并添加页面控制逻辑，以供平板设备显示。

上述方法中，所基于的电子设备，可以采用电子墨水技术和手写电磁屏技术。与其它显示技术相比，电子墨水的反射率和对比度较佳。它们看起来像纸上的墨，是人们阅读和处理时感觉很舒服的媒体。在日常室内或室外环境下，可以将文字或图像显示得很清楚，使用户很容易阅读。因此教育上更加合适使用墨水屏幕材质的教学设备。手写电磁屏由底板和电磁笔组成，为了保证电子纸透光显示效果，可以在电子纸显示屏背面安装手写电磁屏。手写笔迹平滑流畅，它是电子墨水技术和高灵敏度电磁压感技术的完美结合，可以在屏幕上直接用压感笔实现高精度的选取和书写。

本发明提供的上述方法，具有如下的特点：

(1)可以从教学内容字符串中解析出不同类型的对象，覆盖知识类型多，包含各种各样的题目类型、公式、图片等，更符合用户的书写习惯，与实际应用中，学生的作业题目种类繁多，比如包含选择题、填空题、解答题、作图题，完形填空等等的特点更加符合，即，能够将包含所有种类的题目学生作业，按照传统的作业方式，通过信息化的方式呈现在平板设备上，更加适合用户的使用习惯。

(2)可以根据不同类型题目的教学内容自适应地进行排版呈现在平板设备上，同时通过添加页面控制逻辑，使教学内容更好的在同一个平板页面上展示。

(3)另外，通过进行必要的错误处理，健壮性更强，鲁棒性更高，避免了严重错误甚至程序崩溃的发生，增强了用户体验。

(4)其中，平板设备可以采用墨水屏设备，由于墨水屏设备具有纸质设备的使用感，所以，相对液晶屏具有保护用户视力、提供更优输入质感的优点。

本实施例中，步骤1中，所述从服务器获取要显示的教学内容，具体可以为：通过http中的get服务向服务器请求教学内容数据，如果服务器响应超时则返回错误信息，提示打开作业失败，请重新进入；如获取成功则作为原始的教学内容保存至数组中，数组仅有有限个元素。

其中，如获取成功，服务器可以把请求的信息以JSON字符串的形式传回，保存原始的教学内容时，可以使用内存中的二维数组来进行表示，外层下标对应的是大题，内层下标对应的是当前大题的若干小题。其中，数组中只含有有限个元素。

在本发明的一个实施例中，步骤2具体可以为：原始教学内容为字符串，对字符串进行处理，通过匹配题目类型标识符的方式从字符串中解析出不同类型的题目，并转换成对象，作为未处理的显示内容进行保存，同时记录题目的总数。

上述方法的实际实施过程可以为：使用双重循环对教学内容进行遍历，解析题目的单位为小题，首先对每道小题对应字符串中诸如换行符、公式、空格之类的各种转义符进行处理，然后提取其中的域，包括纯文本、填空、下划线等等不同区域，然后对这些域循环处理，通过匹配题目类型标识符的方式从中获取题目信息，并转换成对象的方式，作为未处理的显示内容，保存至内存中的对象数组中，同时题目的总数会被记录。

在本发明的一个优选实施例中，步骤3中，所述对每一类不同的题目对应的所述未处理的显示内容均进行预处理，具体为：使用字符串替换函数将教学内容中的各元素转换成相应的html组件，其中，元素包括图片、换行符、公式和/或空格；对于填空题，设置空白的答题区域，对于选择题，提取选项并存入数组中。

在本发明的另一个优选实施例中，步骤4中，所述对所述待排版的显示内容，循环生成相应的html页面，具体为：使用双重循环对预处理后的教学内容进行遍历，外层循环为一级题目，内层循环为二级题目，以二级题目为单位生成html页面，对于每道二级题目，根据其类型的不同，分别构建html页面，在构建时采用字符串拼接的方式，之后在加载时通过DOM动态的方式加载到相应页面。

上述方法中，生成html页面的方法是以小题(二级题目)为单位进行的，由于在前述步骤中具体题目类型信息已经被解析得到，对于每道小题，该方法中，可以根据其类型的不同，比如选择题，填空题，解答题，完形填空等类型的题目，根据解析得到域的信息，分别构建html页面，比如对选择题就先将题干放入一个DIV中，然后把选项数组中的若干选项循环放入到另外一个DIV中。在构建时采用字符串拼接的方式。即，该方法事先在html页面放置好空白的DIV组件，在要显示教学内容时即可以通过DOM的方式动态加载前述步骤生成的字符串。

本实施例中，步骤5具体可以为，循环遍历html组件，对每个题目，获取其中的公式字符串，使用Latex相关组件对其进行渲染，并通过图片加载服务检测组件中的图片加载状态，如果加载完成则将其作为待显示的html页面保存，之后转入下个步骤；否则，提示作业加载失败，请重新进入。

上述的步骤4中生成的页面还不能直接用来显示，还需要等待带渲染页面中图片加载完毕，并对其中的公式进行渲染。

具体解释如下：首先循环遍历前述步骤生成的html组件，对每个题目生成的DIV，获取其中的公式字符串，使用Latex相关组件MLCore中的renderLatex3rdParty函数对DIV中的公式进行渲染，保证其可以在前端页面显示。之后通过图片加载服务imagesLoaded检测目标DIV中图片加载的状态，同时注册事件成功函数—如果加载完成则将其作为待显示的html页面保存，之后转入下个步骤进行后处理操作；否则，提示作业加载失败，请重新进入。

在本发明的一个优选实施例中，步骤6可以包括如下步骤：

步骤601，循环遍历整个html页面，判断每个题目DIV是否跨页，若跨页，则寻找得到跨页的行元素，并在行元素之前插入占位DIV，使后续信息转入下一页面显示；

步骤602，使用双重循环遍历所有的题目，外层循环为一级题目，内层循环为二级题目，判断当前题目容器是否跨页，若跨页，则依次检查子节点，判断每行的元素是否跨页并处理；

步骤603，遍历结束后对最后一个题目填充空白区域，使其成为一个完整的页面，并将分页信息添加至分页结构中。

其中，步骤601中，如果当前题目为选择题，则对选项进行处理，将能够并列显示的选项放在同一行，且每行的选项个数保持相同，每个题目的选项行数保持不变。

步骤602中，所述依次检查子节点中，检查的元素可以分为文本结点元素、行块内元素和块类型元素三类，其中，文本结点元素可能会跨越多行，要对其进行分行处理；行块内类型的元素只会出现在一行中，所以不需要对其进行特殊处理；块类型元素如果跨页则直接在其前边插入占位DIV，没有跨页的话就跳过对当前结点的检查，直接处理下一个元素。

前述步骤已经生成了可以用于在前端页面显示的页面，但是考虑到该方法要将其放置在平板设备上显示，为了增强用户的学习体验，本发明中采用了分页的方式对其进行后处理。主要是将前述步骤生成的一整个html页面分为若干页，同时添加页面控制逻辑。

在具体实施过程中，首先，可以获取设备的屏幕尺寸信息，然后循环遍历前述生成的整个html页面，对每个题目DIV，获取其height以及weight属性，如果没有超出屏幕显示区域，就对其进行累加；如果超出，就说明该DIV跨页，若跨页则寻找DIV中跨页的行元素，找到后在行之前插入占位DIV，使后续信息转入下一页面显示。为了便于用户使用，该方法还针对选择题进行了特殊的处理，比如，对选项进行处理，将能够并列显示的选项放在同一行，在此基础之上尽量满足每行选项选项个数尽量相同，并且选项行数保持不变。

然后，按照双重循环的方式遍历所有题目，判断当前题目容器是否跨页，若跨页，之后依次检查子节点，判断每行的元素是否跨页并处理，检查时将元素分为textNode、inline-block和block三类。textNode类型元素会跨越多行，处理时要分行处理；inline-block类型元素只会出现在一行中，不会跨越多行；block类型元素如果跨页则直接在其前边插入占位DIV。遍历结束后对最后一个题目填充空白区域，使其成为一个完整的页面。至此长DOM的分页操作已经完成，为了便于显示，需要将诸如每页包含哪几道题的分页相关信息添加至分页结构中。此外，对于页面控制逻辑，该系统中设置了页码展示区域，上一页和下一页按钮，当用户查看的是第一页时，上一页按钮中的文本为首页，并且不能点击，用户只能点击下一页，在最后一页时该系统也进行了类似的处理。当页面跳转时，该系统会读取前述设置好的分页信息，将所要显示的内容刷新至目标DIV中进行显示，同时页码显示区域也会被设置为正确的页码。

经过以上步骤，在显示教学内容时，经本方法所包含的教学内容获取模块、题目信息解析模块、预处理模块、html页面生成模块、后处理模块处理，本方法可以很好地自适应排版教学内容，将其更好地显示在平板设备上。

通过采用本发明公开的上述技术方案，得到了如下有益的效果：本发明实施例提供的在平板设备上对教学内容对自适应排版方法，包括：从服务器获取要显示的教学内容；对获取到的教学内容进行解析，得到不同类型的题目；对不同类型的题目，分别进行预处理；根据预处理后的教学内容生成相应的html页面；渲染html页面中的公式；等待html页面中的图片加载完毕；对html页面进行分页操作，并添加页面控制逻辑，以供设备显示。所以，采用本发明提供的方法可以根据内容的特性自适应地对其进行排版以便更好地在平板设备上显示；对于一些特殊情况，比如一段教学内容过长，本方法会对在其插入一段空白，使其在分页时转入下一页来显示，增强用户的使用体验；添加了页面控制逻辑，可以将教学内容分页显示，以便用户使用。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。

Claims (9)

1.一种在平板设备上对教学内容对自适应排版方法，其特征在于，包括以下步骤：

步骤1，从服务器获取要显示的教学内容，并将获取到的教学内容作为原始的教学内容进行保存；

步骤2，对所述原始的教学内容进行解析，从中获取不同类型的题目，将解析出的题目作为未处理的显示内容进行保存；

步骤3，对每一类不同的题目对应的所述未处理的显示内容均进行预处理，得到各类型题目预处理后的显示内容，将预处理后的显示内容作为待排版的显示内容进行保存；

步骤4，对所述待排版的显示内容，循环生成相应的html页面，将生成的html页面作为待渲染的html页面进行保存；

步骤5，渲染所述待渲染的html页面中的公式，并进行图片加载，得到渲染后的html页面，将所述渲染后的html页面作为待显示html页面进行保存；

步骤6，对所述待显示html页面进行分页操作，并添加页面控制逻辑，以供平板设备显示。

2.根据权利要求1所述的在平板设备上对教学内容对自适应排版方法，其特征在于，步骤1中，所述从服务器获取要显示的教学内容，具体为：通过http中的get服务向服务器请求教学内容数据，如果服务器响应超时则返回错误信息，提示打开作业失败，请重新进入；如获取成功则作为原始的教学内容保存至数组中，数组仅有有限个元素。

3.根据权利要求1所述的在平板设备上对教学内容对自适应排版方法，其特征在于，步骤2具体为：原始教学内容为字符串，对字符串进行处理，通过匹配题目类型标识符的方式从字符串中解析出不同类型的题目，并转换成对象，作为未处理的显示内容进行保存，同时记录题目的总数。

4.根据权利要求3所述的在平板设备上对教学内容对自适应排版方法，其特征在于，步骤3中，所述对每一类不同的题目对应的所述未处理的显示内容均进行预处理，具体为：使用字符串替换函数将教学内容中的各元素转换成相应的html组件，其中，元素包括图片、换行符、公式和/或空格；对于填空题，设置空白的答题区域，对于选择题，提取选项并存入数组中。

5.根据权利要求4所述的在平板设备上对教学内容对自适应排版方法，其特征在于，步骤4中，所述对所述待排版的显示内容，循环生成相应的html页面，具体为：使用双重循环对预处理后的教学内容进行遍历，外层循环为一级题目，内层循环为二级题目，以二级题目为单位生成html页面，对于每道二级题目，根据其类型的不同，分别构建html页面，在构建时采用字符串拼接的方式，之后在加载时通过DOM动态的方式加载到相应页面。

6.根据权利要求5所述的在平板设备上对教学内容对自适应排版方法，其特征在于，步骤5具体为，循环遍历html组件，对每个题目，获取其中的公式字符串，使用Latex相关组件对其进行渲染，并通过图片加载服务检测组件中的图片加载状态，如果加载完成则将其作为待显示的html页面保存，之后转入下个步骤；否则，提示作业加载失败，请重新进入。

7.根据权利要求6所述的在平板设备上对教学内容对自适应排版方法，其特征在于，步骤6包括如下步骤：

步骤601，循环遍历整个html页面，判断每个题目DIV是否跨页，若跨页，则寻找得到跨页的行元素，并在行元素之前插入占位DIV，使后续信息转入下一页面显示；

步骤602，使用双重循环遍历所有的题目，外层循环为一级题目，内层循环为二级题目，判断当前题目容器是否跨页，若跨页，则依次检查子节点，判断每行的元素是否跨页并处理；

步骤603，遍历结束后对最后一个题目填充空白区域，使其成为一个完整的页面，并将分页信息添加至分页结构中。

8.根据权利要求7所述的在平板设备上对教学内容对自适应排版方法，其特征在于，步骤602中，所述依次检查子节点中，检查的元素可以分为文本结点元素、行块内元素和块类型元素三类，其中，对跨越多行的文本结点元素进行分行处理；对行块内类型的元素不处理；块类型元素如果跨页则直接在其前边插入占位DIV，否则跳过对当前结点的检查，直接处理下一个元素。

9.根据权利要求7所述的在平板设备上对教学内容对自适应排版方法，其特征在于，步骤601中，如果当前题目为选择题，则对选项进行处理，将能够并列显示的选项放在同一行，且每行的选项个数保持相同，每个题目的选项行数保持不变。