CN115858987A - 一种h5题库网页的渲染方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明公开了一种H5题库网页的渲染方法、装置、电子设备及存储介质，本发明将H5答题网页中的题目的上下按钮切换方式更改为滑动切换方式，如此，提高了使用的便捷性，同时，可自动推导出前后题目关联，从而可根据历史做题进度，控制本次答题跳转至相对应的位置，解决了传统技术中无法获取答题进度的问题；另外，通过控制渲染列表，可保证在一次题目页面展示时，仅渲染3个题目数据，以及加载展示一个题目数据，基于此，则可解决传统技术中因题目数据量大所导致的数据渲染及切换卡顿的问题；由此，本发明的使用体验感，相比于传统技术，得到了大幅提高。

Description

一种H5题库网页的渲染方法、装置、电子设备及存储介质

技术领域

本发明属于网页渲染技术领域，具体涉及一种H5题库网页的渲染方法、装置、电子设备及存储介质。

背景技术

目前，对于H5评测系统的项目有很多，其实现渲染答题页的方式也有很多，但是，市场上常用的H5网页题库（如百度题库,中公教育）大多都是通过底部上一题和下一题的切换按钮来进行题目切换，而前述网页切换渲染方法存在以下不足：无法实现左右滑动切换，且在退出答题网页后，无法存储答题进度，造成用户使用体验感不佳；同时，前述切换渲染方式需要渲染网页中的所有题目，并在渲染后加载所有题目，而一旦数据量过大，其过大的渲染量和加载量就会造成切换卡顿，从而进一步的降低了用户体验感；基于此，如何提供一种能够实现进度存储、滑动切换且切换顺畅的题库网页的渲染方法，已成为了一个亟待解决的问题。

发明内容

本发明的目的是提供一种H5题库网页的渲染方法、装置、电子设备及存储介质，用以解决现有技术中因无法实现左右滑动切换、无法存储答题进度以及存在切换卡顿所导致的用户体验感差的的问题。

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

第一方面，提供了一种H5题库网页的渲染方法，包括：

在响应于用户与题库网页的第一人机交互操作时，获取历史做题进度数据，其中，所述第一人机交互操作包括进入答题页面操作；

基于所述历史做题进度数据，确定出历史进度做题页、题目数据池以及当前进度题目数据，其中，所述题目数据池包括所述历史进度做题页上一页对应的题目数据和所述历史进度做题页对应的题目数据，所述历史进度做题页下一页对应的题目数据和所述历史进度做题页对应的题目数据，或所述历史进度做题页对应的题目数据；

根据所述历史做题进度数据，确定出跳转题目页，以及基于所述当前进度题目数据，从所述题目数据池中确定出渲染题目数据，其中，所述渲染题目数据包括所述当前进度题目数据的上一条题目数据和下一条题目数据；

切换至所述跳转题目页，并在所述跳转题目页中，展示所述当前进度题目数据；

响应于用户与所述题库网页的第二人机交互操作时，基于所述第二人机交互操作，在所述渲染题目数据中确定出一目标题目数据，以及基于所述目标题目数据确定出渲染题目页，其中，所述第二人机交互操作包括滑动操作；

滑动切换至所述渲染题目页，并在所述渲染题目页中展示所述目标题目数据，并在展示后，将当前进度题目数据更新为所述目标题目数据，并重新确定出所述当前进度题目数据的渲染题目数据，以便在响应于下一次的第二人机交互操作时，基于重新确定出的渲染题目数据，完成题目的网页渲染与切换。

基于上述公开的内容，本发明在检测到用户进入答题页面时，会首先获取历史做题进度数据，从而基于历史做题进度数据来确定出历史进度做题页、当前进度题目数据以及题目数据池，其中，该数据池中包括有历史进度做题页和其上一页的数据、历史进度做题页和其下一页的数据或历史进度做题页的数据；如此，该步骤相当于实现了上一次答题进度的确认，以及得到了本次渲染的题目数据库；而后，本发明则可根据前述数据，来确定出跳转题目页，以及利用当前进度题目数据的上一条和下一条数据来组成实际需进行渲染的渲染题目数据；接着，本发明在进行答题页面显示时，则可直接切换至跳转题目页，并展示当前进度题目数据；基于此，即可使本次答题题目紧接上一次的答题题目；最后，当用户需要切换时，只需根据用户的滑动操作，在渲染题目数据中选择一题目进行展示，并在展示后，重新更新渲染题目数据，以此方法不断循环，即可实现题目的滑动切换。

通过上述设计，本发明能够存储答题进度，并在用户进入答题网页时，实现历史进度答题的跳转，从而使本次展示的首道答题紧接上一次答题题目；同时，在进行渲染时，只需渲染三个题目数据，且每次展示时，仅展示一条题目数据，其渲染数据量和加载数据量相比于传统技术，得到了大幅下降，因此，使得题目的渲染和切换更加顺畅，避免了传统技术所存在的切换卡顿的问题；另外，本发明实现了题目的滑动切换，其使用便捷性得到了大幅提高；由此，本发明的使用体验感和便捷性，相比于传统技术，得到了大幅提高，适用于大规模应用与推广。

在一个可能的设计中，所述历史做题进度数据包括：历史做题结束题目的序号，其中，基于所述历史做题进度数据，确定出历史进度做题页、题目数据池以及当前进度题目数据，包括：

判断所述历史做题结束题目的序号是否小于预设阈值；

若是，则确定所述历史进度做题页为起始页，否则，则对所述历史做题结束题目的序号和所述预设阈值进行向上取整运算，以将向上取整运算结果作为所述历史进度做题页；

基于所述历史做题结束题目的序号，判断历史做题结束题目是否为临界分页数据，其中，所述临界分页数据包括所述历史进度做题页中的起始题目和结束题目；

若否，则向服务器发送第一数据获取请求，以使服务器在接收到第一数据获取请求后，将第一目标数据发送至H5网页端，其中，第一目标数据为所述历史进度做题页对应的题目数据；

利用所述第一目标数据，组成所述题目数据池；

基于所述历史做题结束题目的序号，在题目数据池中确定出当前进度题目数据。

在一个可能的设计中，基于所述历史做题结束题目的序号，判断历史做题结束题目是否为临界分页数据，包括：

计算所述历史做题结束题目的序号与所述预设阈值之间的比值，并判断比值是否为整数；

若是，则将所述历史做题结束题目作为所述临界分页数据，否则，则向所述服务器发送所述第一数据获取请求。

在一个可能的设计中，判断历史做题结束题目是否为临界分页数据，包括：

若所述历史做题结束题目为所述历史进度做题页中的起始题目，则向所述服务器发送第二数据获取请求，以使所述服务器在接收到所述第二数据获取请求后，将第二目标数据发送至H5网页端，其中，所述第二目标数据为所述历史进度做题页对应的题目数据和所述历史进度做题页上一页对应的题目数据；

利用所述第二目标数据，组成所述题目数据池；或

若所述历史做题结束题目为所述历史进度做题页中的结束题目，则向所述服务器发送第三数据获取请求，以使所述服务器在接收到所述第三数据获取请求后，将第三目标数据发送至H5网页端，其中，所述第三目标数据为所述历史进度做题页对应的题目数据和所述历史进度做题页下一页对应的题目数据；

利用所述第三目标数据，组成所述题目数据池。

在一个可能的设计中，所述历史做题进度数据包括历史做题结束题目的序号，其中，根据所述历史做题进度数据，确定出跳转题目页，包括：

基于所述历史做题结束题目的序号，判断所述历史做题结束题目是否为所述历史进度做题页中的结束题目；

若是，则将所述历史进度做题页的下一页作为所述跳转题目页，否则，则将所述历史进度做题页作为所述跳转题目页。

在一个可能的设计中，基于所述第二人机交互操作，在所述渲染题目数据中确定出一目标题目数据，以及基于所述目标题目数据确定出渲染题目页，包括：

若所述第二人机交互操作为向右滑动操作，则将所述渲染题目数据中的当前进度题目数据的下一条题目数据，作为所述目标题目数据；或

若所述第二人机交互操作为向左滑动操作，则将所述渲染题目数据中的当前进度题目数据的上一条题目数据，作为所述目标题目数据；

获取目标题目数据的序号，并根据所述目标题目数据的序号，确定出渲染题目页。

在一个可能的设计中，在基于所述历史做题进度数据，确定出当前进度题目数据后，所述方法还包括：

获取当前进度题目数据的序号；

判断当前进度题目数据的序号是否大于或等于题目总量；

若是，则将所述当前进度题目数据更新为指定题目数据，其中，所述当前进度题目数据的序号，与所述指定题目数据的序号之间的差值为一固定值。

基于上述公开的内容，本发明在获取到当前进度题目数据后，会进行序号的判断，当其序号大于或等于题目总量时，则会进行前进度题目数据的更新，使其跳转到序号距离其固定值的题目数据，如此，则可避免出现空白页的问题。

第二方面，提供了一种H5题库网页的渲染装置，包括：

数据获取单元，用于在响应于用户与题库网页的第一人机交互操作时，获取历史做题进度数据，其中，所述第一人机交互操作包括进入答题页面操作；

数据处理单元，用于基于所述历史做题进度数据，确定出历史进度做题页、题目数据池以及当前进度题目数据，其中，所述题目数据池包括所述历史进度做题页上一页对应的题目数据和所述历史进度做题页对应的题目数据，所述历史进度做题页下一页对应的题目数据和所述历史进度做题页对应的题目数据，或所述历史进度做题页对应的题目数据；

渲染单元，用于根据所述历史做题进度数据，确定出跳转题目页，以及基于所述当前进度题目数据，从所述题目数据池中确定出渲染题目数据，其中，所述渲染题目数据包括所述当前进度题目数据的上一条题目数据和下一条题目数据；

渲染单元，用于切换至所述跳转题目页，并在所述跳转题目页中，展示所述当前进度题目数据；

渲染单元，用于响应于用户与所述题库网页的第二人机交互操作时，基于所述第二人机交互操作，在所述渲染题目数据中确定出一目标题目数据，以及基于所述目标题目数据确定出渲染题目页，其中，所述第二人机交互操作包括滑动操作；

渲染单元，还用于滑动切换至所述渲染题目页，并在所述渲染题目页中展示所述目标题目数据，并在展示后，将当前进度题目数据更新为所述目标题目数据，并重新确定出所述当前进度题目数据的渲染题目数据，以便在响应于下一次的第二人机交互操作时，基于重新确定出的渲染题目数据，完成题目的网页渲染与切换。

第三方面，提供了另一种H5题库网页的渲染装置，以装置为电子设备为例，包括依次通信相连的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如第一方面或第一方面中任意一种可能设计的所述H5题库网页的渲染方法。

第四方面，提供了一种存储介质，存储介质上存储有指令，当所述指令在计算机上运行时，执行如第一方面或第一方面中任意一种可能设计的所述H5题库网页的渲染方法。

第五方面，提供了一种包含指令的计算机程序产品，当指令在计算机上运行时，使计算机执行如第一方面或第一方面中任意一种可能设计的所述H5题库网页的渲染方法。

有益效果：

（1）本发明将H5答题网页中的题目的上下按钮切换方式更改为滑动切换方式，如此，提高了使用的便捷性，同时，可自动推导出前后题目关联，从而可根据历史做题进度，控制本次答题跳转至相对应的位置，解决了传统技术中无法获取答题进度的问题；另外，通过控制渲染列表，可保证在一次题目页面展示时，仅渲染3个题目数据，以及加载展示一个题目数据，基于此，则可解决传统技术中因题目数据量大所导致的数据渲染及切换卡顿的问题；由此，本发明的使用体验感，相比于传统技术，得到了大幅提高。

附图说明

图1为本发明实施例提供的H5题库网页的渲染方法的步骤流程示意图；

图2为本发明实施例提供的H5题库网页的渲染装置的结构示意图；

图3为本发明实施例提供的电子设备的结构示意图。

具体实施方式

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将结合附图和实施例或现有技术的描述对本发明作简单地介绍，显而易见地，下面关于附图结构的描述仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在此需要说明的是，对于这些实施例方式的说明用于帮助理解本发明，但并不构成对本发明的限定。

应当理解，尽管本文可能使用术语第一、第二等等来描述各种单元，但是这些单元不应当受到这些术语的限制。这些术语仅用于区分一个单元和另一个单元。例如可以将第一单元称作第二单元,并且类似地可以将第二单元称作第一单元，同时不脱离本发明的示例实施例的范围。

应当理解，对于本文中可能出现的术语“和/或”，其仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，单独存在B，同时存在A和B三种情况；对于本文中可能出现的术语“/和”，其是描述另一种关联对象关系，表示可以存在两种关系，例如，A/和B，可以表示：单独存在A，单独存在A和B两种情况；另外，对于本文中可能出现的字符“/”，一般表示前后关联对象是一种“或”关系。

实施例：

参见图1所示，本实施例所提供的H5题库网页的渲染方法，实现了题目的滑动切换，且在每次进入答题页面时，可根据历史做题进度，控制本次答题跳转至相对应的位置；如此，实现了答题进度的跳转；同时，本方法在每次进行答题页面的展示时，仅渲染与当前题目以及与当前题目相邻的题目，并在展示时，仅展示一个题目；如此，渲染数据量和题目加载数据量，相比于传统技术得到了大幅降低，因此，本方法避免了因数据量大所造成的切换卡顿的问题；基于此，本发明的使用体验感以及便捷性得到了大幅提高，适用于在H5答题网页的大规模应用与推广；可选的，举例本方法可以但不限于在H5网页端侧运行，可以理解的，前述执行主体并不构成对本申请实施例的限定，相应的，本方法的运行步骤可以但不限于如下述步骤S1～S6所示。

S1. 在响应于用户与题库网页的第一人机交互操作时，获取历史做题进度数据，其中，所述第一人机交互操作包括进入答题页面操作；具体应用时，举例H5网页端的题库网页上设置有答题按钮，而H5网页端在检测到用户的点击答题按钮后（即进入答题页面操作），可向服务器发送一历史数据获取请求，而服务器在接收到该请求后，则可向H5网页端发送本次答题前所有的历史答题数据，从而作为历史做题进度数据；更进一步的，举例历史做题进度数据可以但不限于包括历史做题结束题目的序号；可选的，举例历史做题结束题目为上一次已做题目的最后一道题目。

另外，在本实施例中，举例题库网页中的每个题目数据均对应有一序号，该序号可从0开始，依次递增，且每个题目页可对应有若干题目数据以及若干子页面（二者数量相同），而任一子页面则用于展示一个题目数据；如，第一题目页（也就是第1页）对应10个题目数据，10个子页面则依次展示10个题目数据（即第0个题目—第9个题目）；第二题目页（也就是第2页）也对应10个题目数据，其10个子页面也依次展示10个题目数据（即第10个题目—第19个题目），以此类推，从而来实现所有题目的展示；当然，前述举例仅是示意，每个题目页对应的题目数据以及子页面，可根据实际使用而具体设定。

在得到本次答题前的历史做题进度数据后，则可进行历史做题进度的确认，从而在本次进入题目网页时，进行题目的跳转；其中，题目跳转步骤如下述步骤S2和步骤S3所示。

S2. 基于所述历史做题进度数据，确定出历史进度做题页、题目数据池以及当前进度题目数据，其中，所述题目数据池包括所述历史进度做题页上一页对应的题目数据和所述历史进度做题页对应的题目数据，所述历史进度做题页下一页对应的题目数据和所述历史进度做题页对应的题目数据，或所述历史进度做题页对应的题目数据；具体应用时，前述数据的确定过程可以但不限于如下述步骤S21～S26所示。

S21. 判断所述历史做题结束题目的序号是否小于预设阈值；在本实施例中，举例预设阈值则可以但不限于为前述所示的一个题目页所对应的题目数据的总量；在具体应用时，优选为10；当然，也可根据实际使用而具体设定；如此，基于历史做题结束题目的序号与预设阈值之间的关系，即可确定出历史进度做题页，如下述步骤S22所示。

S22. 若是，则确定所述历史进度做题页为起始页，否则，则对所述历史做题结束题目的序号和所述预设阈值进行向上取整运算，以将向上取整运算结果作为所述历史进度做题页；在具体实施时，在前述举例的基础上，若历史做题结束题目的序号小于10，那么历史进度做题页则为第一页（起始页通常为第1页），而若历史做题结束题目的序号为13，则那么则是13/10，并进行向上取整（即取比自己大的最小整数），即结果为2，如此，历史进度做题页则为第2页；当然，在历史做题结束题目的序号不同的情况下，其对应的历史进度做题页的确定原理与前述举例一致，于此不再赘述。

在本实施例中，还提供另一种历史进度做题页的计算方法，即：直接对所述历史做题结束题目的序号和所述预设阈值进行向下取整运算，然后将向下取整运算结果加1，从而来得到历史进度做题页；如历史做题结束题目的序号为13，则那么则是13/10，并进行向下取整（即取比自己小的最大整数），即结果为1，然后再将结果加1，也可得出历史进度做题页为第2页；当然，其余不同序号对应的历史进度做题页的计算原理与前述举例相同，于此不再赘述。

在得到历史进度做题页后，则可进行题目数据池的构建，其构建过程可以但不限于如下述步骤S23～S25所示。

S23. 基于所述历史做题结束题目的序号，判断历史做题结束题目是否为临界分页数据，其中，所述临界分页数据包括所述历史进度做题页中的起始题目和结束题目；在本实施例中，举例可以但不限于采用如下步骤来确定历史做题结束题目是否为临界分页数据；具体的，第一步为：计算所述历史做题结束题目的序号与所述预设阈值之间的比值，并判断比值是否为整数；第二步为：若是，则将所述历史做题结束题目作为所述临界分页数据；下述还是在前述举例的基础上来进行阐述：假设历史做题结束题目的序号为13，那么其与预设阈值之间的比值则为1.3，比值并不是整数，因此，可认定其不是历史进度做题页中的起始题目或结束题目；同时，若历史做题结束题目的序号为10，那么其与预设阈值之间的比值则为1，此时，则可判断历史做题结束题目为临界分页数据。

如此通过前述阐述，根据历史做题结束题目是否为临界分页数据，则可存在不同的题目数据池的构建方法，其中，当历史做题结束题目不是临界分页数据时，则采用如下步骤S24和S25，来构建题目数据池。

S24. 若否，则向服务器发送第一数据获取请求，以使服务器在接收到第一数据获取请求后，将第一目标数据发送至H5网页端，其中，第一目标数据为所述历史进度做题页对应的题目数据。

S25. 利用所述第一目标数据，组成所述题目数据池；在本实施例中，当历史做题结束题目不是临界分页数据时，则只需要获取历史进度做题页所对应的题目数据，从而将获取的题目数据作为题目数据池；如，假设历史进度做题页为第2页，那么则将第2页对应的题目数据（也就是第10-第19题目数据）作为题目数据池。

更进一步的，当历史做题结束题目为临界分页数据时，还需根据其为临界分页数据中的起始题目或结束题目，来选择不同的数据，以实现题目数据池的构建；可选的，可根据历史做题结束题目的序号，来确定其是起始题目还是结束题目。

其中，若所述历史做题结束题目为所述历史进度做题页中的起始题目，那么则采用如下方法来构建题目数据池：

S24a. 向所述服务器发送第二数据获取请求，以使所述服务器在接收到所述第二数据获取请求后，将第二目标数据发送至H5网页端，其中，所述第二目标数据为所述历史进度做题页对应的题目数据和所述历史进度做题页上一页对应的题目数据。

S24b. 利用所述第二目标数据，组成所述题目数据池。

同理，若所述历史做题结束题目为所述历史进度做题页中的结束题目，那么则采用如下步骤S24c和步骤S24d来构建题目数据池：

S24c. 向所述服务器发送第三数据获取请求，以使所述服务器在接收到所述第三数据获取请求后，将第三目标数据发送至H5网页端，其中，所述第三目标数据为所述历史进度做题页对应的题目数据和所述历史进度做题页下一页对应的题目数据。

S24d. 利用所述第三目标数据，组成所述题目数据池。

由此通过前述对题目数据池的构建过程的阐述，本实施例则可根据历史做题结束题目所处的位置，来选择不同题目页的数据，构建出题目数据池；如此，即可为后续题目的滑动切换提供数据基础，从而保证用户无论是向左滑动，还是向右滑动，均能从题目数据池中确定出对应的题目数据。

在构建出题目数据池后，则可基于历史做题结束题目的序号，来确定出当前需要展示的题目数据，也就是当前进度题目数据；其中，确定过程如下述步骤S26所示。

S26. 基于所述历史做题结束题目的序号，在题目数据池中确定出当前进度题目数据；具体应用时，前述就已说明，每个题目数据都对应有序号，且依次递增，因此，可将历史做题结束题目的序号加1，从而得到下一题目数据的序号，而后，依据下一题目数据的序号，即可在题目数据池中匹配出与该序号对应的题目数据，从而作为当前进度题目数据；另外，若历史做题进度数据为空，那么则说明上一次并未存在答题记录，此时，历史进度做题页则为起始页，且当前进度题目数据则为序号为0对应的题目数据。

由此通过前述步骤S21～S26，即可根据历史做题进度数据，来确定出本次答题需要跳转的题目位置；如此，可为答题进度的跳转提供位置依据；同时，通过历史做题进度数据所构建的数据池，则可为后续题目的滑动切换，提供数据基础，

在本实施例中，答题进度的位置跳转可以但不限于如下述步骤S3和步骤S4所示。

S3. 根据所述历史做题进度数据，确定出跳转题目页，以及基于所述当前进度题目数据，从所述题目数据池中确定出渲染题目数据，其中，所述渲染题目数据包括所述当前进度题目数据的上一条题目数据和下一条题目数据；在本实施例中，可以但不限于基于所述历史做题结束题目的序号，判断所述历史做题结束题目是否为所述历史进度做题页中的结束题目；若是，则将所述历史进度做题页的下一页作为所述跳转题目页，否则，则将所述历史进度做题页作为所述跳转题目页；在具体实施时，前述步骤的判断原理与前述临界分页数据的判断原理一致，即先将序号与预设阈值进行取余运算，然后，再根据余数判断是否为临界分页数据，若是，则可基于序号，确定出其是否为结束题目；可选的，若为结束题目，则需要进行翻页处理，也就是需要跳转至历史进度做题页的下一页；否则，则无需进行翻页，直接展示历史进度做题页。

更进一步的，在确定出跳转题目页的同时，本实施例还会从题目数据池中筛选出进行渲染的题目数据，即由于是采用滑动切换，因此，只需要从题目数据池中提取出当前进度题目数据的上一条题目数据和下一条题目数据，即可作为渲染题目数据；如此，本实施例在一次题目页面展示时，只需渲染三条数据，其渲染数据量相比于现有技术得到了大幅降低。

另外，举例进行前述渲染题目数据和当前进度题目数据的渲染，实质是利用前述三个数据，并基于现有mvvm渐进式框架vue(内部底层实现的虚拟dom,vnode,及底层渲染函数)来进行数据绑定，即绑定在题库网页的dom（文档对象模型）的左，中，右，三个元素上，其中，中元素是用来展示给用户看的，左和右元素是用来实现用户左右滑动过渡效果的；因此，本实施例采用前述方式来确定需渲染的题目数据，不仅降低了渲染数据量，还能实现左右滑动切换效果。

如此，基于跳转题目页、当前进度题目数据以及渲染题目数据后，则可进行答题进度的跳转，以及题目的切换，如下述步骤S4～S6所示。

S4. 切换至所述跳转题目页，并在所述跳转题目页中，展示所述当前进度题目数据。

基于前述步骤S1～S4，本实施例可根据历史做题进度，控制本次答题跳转至相对应的位置；如此，实现了答题进度的跳转，从而提高了使用的便捷性；同时，本实施例在确定出渲染题目数据后，则可实现题目的渲染与切换，如下述步骤S5所示。

S5. 响应于用户与所述题库网页的第二人机交互操作时，基于所述第二人机交互操作，在所述渲染题目数据中确定出一目标题目数据，以及基于所述目标题目数据确定出渲染题目页，其中，所述第二人机交互操作包括滑动操作；在具体应用时，若所述第二人机交互操作为向右滑动操作，则将所述渲染题目数据中的当前进度题目数据的下一条题目数据，作为所述目标题目数据；而若所述第二人机交互操作为向左滑动操作，则将所述渲染题目数据中的当前进度题目数据的上一条题目数据，作为所述目标题目数据；如此，在确定出切换的数据后（即目标题目数据），即可获取目标题目数据的序号，并根据所述目标题目数据的序号，确定出渲染题目页；同时，在本实施例中，由于将每个题目数据对应有不同的序号，且每个题目页对应有若干题目数据，如此，基于目标题目数据的序号，即可确定出其所属的题目页；如，在前述举例的基础上，一个题目页对应10条题目数据，且序号依次递增，若，目标题目数据为的序号为14，那么则可确定出渲染题目页为第2页；当然，其余不同序号对应的题目页的确定原理与前述举例相同，于此不再赘述。

在确定出要切换的题目以及切换题目所属的题目页后，则可进行题目的切换，如下述步骤S6所示。

S6. 滑动切换至所述渲染题目页，并在所述渲染题目页中展示所述目标题目数据，并在展示后，将当前进度题目数据更新为所述目标题目数据，并重新确定出所述当前进度题目数据的渲染题目数据，以便在响应于下一次的第二人机交互操作时，基于重新确定出的渲染题目数据，完成题目的网页渲染与切换；在本实施例中，由于前述就已说明，一个题目页对应有若干子页面，因此，渲染题目页实质是一个题目页中的子页面，如，前述标题目数据的序号为14，其对应渲染题目页的页数则是第2页（具体展示的则为第2页的第5个子页面，该第5个子页面的页数为2）；又如，假设目标题目数据的序号为23，那么，渲染题目页的页数则是第3页（实质为第三页的第4个子页面，该子页面的页数为3）；再如，目标题目数据的序号为24，那么，渲染题目页的页数也是第3页（实质为第三页的第5个子页面，该子页面的页数为3）；当然，目标题目数据的序号不同的基础上，其对应渲染题目页的页数确定原理与前述举例相同，于此不再赘述。

另外，当完成本次的滑动操作后，若用户需要再次进行题目的切换，此时，则需要将目标题目数据作为当前进度题目数据，并根据用户滑动切换的方向（即向左还是向右），判断当前的题目数据池中是否存在有当前进度题目数据的上一条题目数据，或下一条题目数据；若不存在，则需要向服务器重新请求渲染题目页的上一页或下一页的题目数据，以完成题目数据池的更新；而后，采用前述相同的渲染方法，即可实现第二次滑动操作所对应的题目切换。

由此通过前述步骤S1～S6所详细描述的H5题库网页的渲染方法，本发明实现了题目的滑动切换，且在每次进入答题页面时，可根据历史做题进度，控制本次答题跳转至相对应的位置；如此，实现了答题进度的跳转；同时，本发明在每次进行答题页面的展示时，仅渲染与当前题目以及与当前题目相邻的题目，并在展示时，仅展示一个题目；如此，渲染数据量和题目加载数据量，相比于传统技术得到了大幅降低，因此，本方法避免了因数据量大所造成的切换卡顿的问题；基于此，本发明的使用体验感以及便捷性得到了大幅提高，适用于在H5答题网页的大规模应用与推广。

在一个可能的设计中，本实施例第二方面在实施例第一方面的基础上进行进一步的优化，即在基于所述历史做题进度数据，确定出当前进度题目数据后，还设置有当前进度题目是否为最终题目的判断，以便基于判断结果来实现当前进度题目的更新，从而防止出现空白页，其中，判断过程如下述步骤S27～S29所示。

S27. 获取当前进度题目数据的序号。

S28. 判断当前进度题目数据的序号是否大于或等于题目总量；

S29. 若是，则将所述当前进度题目数据更新为指定题目数据，其中，所述当前进度题目数据的序号，与所述指定题目数据的序号之间的差值为一固定值；在本实施例中，举例固定值为2，即在当前进度题目数据的序号大于或等于题目总量时，将当前进度题目数据的序号减2，从而得到新序号，以便将新序号对应的题目数据作为当前进度题目数据；同时，若当前进度题目数据的序号小于题目总量，则将当前题目数据的序号减1，从而将其前一条题目数据，作为当前进度题目数据。

由此通过前述设计，通过设置序号判断步骤，可在当前进度题目数据的序号大于或等于题目总量时，进行前进度题目数据的更新，使其跳转到序号距离其固定值的题目数据，如此，则可避免出现空白页的问题，从而提高题目网页切换的兼容性。

如图2所示，本实施例第三方面提供了一种实现实施例第一方面和第二方面中所述的H5题库网页的渲染方法的硬件装置，包括：

数据获取单元，用于在响应于用户与题库网页的第一人机交互操作时，获取历史做题进度数据，其中，所述第一人机交互操作包括进入答题页面操作。

数据处理单元，用于基于所述历史做题进度数据，确定出历史进度做题页、当前进度题目数据以及题目数据池，其中，所述题目数据池包括所述历史进度做题页上一页对应的题目数据和所述历史进度做题页对应的题目数据，所述历史进度做题页下一页对应的题目数据和所述历史进度做题页对应的题目数据，或所述历史进度做题页对应的题目数据。

渲染单元，用于根据所述历史做题进度数据，确定出跳转题目页，以及基于所述当前进度题目数据，从所述题目数据池中确定出渲染题目数据，其中，所述渲染题目数据包括所述当前进度题目数据的上一条题目数据和下一条题目数据。

渲染单元，用于切换至所述跳转题目页，并在所述跳转题目页中，展示所述当前进度题目数据。

渲染单元，用于响应于用户与所述题库网页的第二人机交互操作时，基于所述第二人机交互操作，在所述渲染题目数据中确定出一目标题目数据，以及基于所述目标题目数据确定出渲染题目页，其中，所述第二人机交互操作包括滑动操作。

渲染单元，还用于滑动切换至所述渲染题目页，并在所述渲染题目页中展示所述目标题目数据，并在展示后，将当前进度题目数据更新为所述目标题目数据，并重新确定出所述当前进度题目数据的渲染题目数据，以便在响应于下一次的第二人机交互操作时，基于重新确定出的渲染题目数据，完成题目的网页渲染与切换。

本实施例提供的装置的工作过程、工作细节和技术效果，可以参见实施例第一方面和第二方面，于此不再赘述。

如图3所示，本实施例第四方面提供了另一种H5题库网页的渲染装置，以装置为电子设备为例，包括：依次通信相连的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如实施例第一方面和/或第二方面所述的H5题库网页的渲染方法。

具体举例的，所述存储器可以但不限于包括随机存取存储器（random accessmemory，RAM）、只读存储器（Read Only Memory ，ROM）、闪存（Flash Memory）、先进先出存储器（First Input FirstOutput，FIFO）和/或先进后出存储器（First In Last Out，FILO）等等；具体地，处理器可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现，同时，处理器也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。

在一些实施例中，处理器可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制，例如，所述处理器可以不限于采用型号为STM32F105系列的微处理器、精简指令集计算机（reduced instruction setcomputer,RISC）微处理器、X86等架构处理器或集成嵌入式神经网络处理器（neural-network processing units，NPU）的处理器；所述收发器可以但不限于为无线保真（WIFI）无线收发器、蓝牙无线收发器、通用分组无线服务技术（General PacketRadio Service，GPRS）无线收发器、紫蜂协议（基于IEEE802.15.4标准的低功耗局域网协议，ZigBee）无线收发器、3G收发器、4G收发器和/或5G收发器等。此外，所述装置还可以但不限于包括有电源模块、显示屏和其它必要的部件。

本实施例提供的电子设备的工作过程、工作细节和技术效果，可以参见实施例第一方面和/或第二方面，于此不再赘述。

本实施例第五方面提供了一种存储包含有实施例第一方面和/或第二方面所述的H5题库网页的渲染方法的指令的存储介质，即所述存储介质上存储有指令，当所述指令在计算机上运行时，执行如实施例第一方面和/或第二方面所述的H5题库网页的渲染方法。

其中，所述存储介质是指存储数据的载体，可以但不限于包括软盘、光盘、硬盘、闪存、优盘和/或记忆棒(Memory Stick)等，所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。

本实施例提供的存储介质的工作过程、工作细节和技术效果，可以参见实施例第一方面和/或第二方面，于此不再赘述。

本实施例第六方面提供了一种包含指令的计算机程序产品，当所述指令在计算机上运行时，使所述计算机执行如实施例第一方面和/或第二方面所述的H5题库网页的渲染方法，其中，所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种H5题库网页的渲染方法，其特征在于，包括：

在响应于用户与题库网页的第一人机交互操作时，获取历史做题进度数据，其中，所述第一人机交互操作包括进入答题页面操作；

基于所述历史做题进度数据，确定出历史进度做题页、题目数据池以及当前进度题目数据，其中，所述题目数据池包括所述历史进度做题页上一页对应的题目数据和所述历史进度做题页对应的题目数据，所述历史进度做题页下一页对应的题目数据和所述历史进度做题页对应的题目数据，或所述历史进度做题页对应的题目数据；

根据所述历史做题进度数据，确定出跳转题目页，以及基于所述当前进度题目数据，从所述题目数据池中确定出渲染题目数据，其中，所述渲染题目数据包括所述当前进度题目数据的上一条题目数据和下一条题目数据；

切换至所述跳转题目页，并在所述跳转题目页中，展示所述当前进度题目数据；

响应于用户与所述题库网页的第二人机交互操作时，基于所述第二人机交互操作，在所述渲染题目数据中确定出一目标题目数据，以及基于所述目标题目数据确定出渲染题目页，其中，所述第二人机交互操作包括滑动操作；

滑动切换至所述渲染题目页，并在所述渲染题目页中展示所述目标题目数据，并在展示后，将当前进度题目数据更新为所述目标题目数据，并重新确定出所述当前进度题目数据的渲染题目数据，以便在响应于下一次的第二人机交互操作时，基于重新确定出的渲染题目数据，完成题目的网页渲染与切换。

2.根据权利要求1所述的方法，其特征在于，所述历史做题进度数据包括：历史做题结束题目的序号，其中，基于所述历史做题进度数据，确定出历史进度做题页、题目数据池以及当前进度题目数据，包括：

判断所述历史做题结束题目的序号是否小于预设阈值；

若是，则确定所述历史进度做题页为起始页，否则，则对所述历史做题结束题目的序号和所述预设阈值进行向上取整运算，以将向上取整运算结果作为所述历史进度做题页；

基于所述历史做题结束题目的序号，判断历史做题结束题目是否为临界分页数据，其中，所述临界分页数据包括所述历史进度做题页中的起始题目和结束题目；

若否，则向服务器发送第一数据获取请求，以使服务器在接收到第一数据获取请求后，将第一目标数据发送至H5网页端，其中，第一目标数据为所述历史进度做题页对应的题目数据；

利用所述第一目标数据，组成所述题目数据池；

基于所述历史做题结束题目的序号，在题目数据池中确定出当前进度题目数据。

3. 根据权利要求2 所述的方法，其特征在于，基于所述历史做题结束题目的序号，判断历史做题结束题目是否为临界分页数据，包括：

计算所述历史做题结束题目的序号与所述预设阈值之间的比值，并判断比值是否为整数；

若是，则将所述历史做题结束题目作为所述临界分页数据，否则，则向所述服务器发送所述第一数据获取请求。

4.根据权利要求2所述的方法，其特征在于，判断历史做题结束题目是否为临界分页数据，包括：

若所述历史做题结束题目为所述历史进度做题页中的起始题目，则向所述服务器发送第二数据获取请求，以使所述服务器在接收到所述第二数据获取请求后，将第二目标数据发送至H5网页端，其中，所述第二目标数据为所述历史进度做题页对应的题目数据和所述历史进度做题页上一页对应的题目数据；

利用所述第二目标数据，组成所述题目数据池；或

若所述历史做题结束题目为所述历史进度做题页中的结束题目，则向所述服务器发送第三数据获取请求，以使所述服务器在接收到所述第三数据获取请求后，将第三目标数据发送至H5网页端，其中，所述第三目标数据为所述历史进度做题页对应的题目数据和所述历史进度做题页下一页对应的题目数据；

利用所述第三目标数据，组成所述题目数据池。

5.根据权利要求1所述的方法，其特征在于，所述历史做题进度数据包括历史做题结束题目的序号，其中，根据所述历史做题进度数据，确定出跳转题目页，包括：

基于所述历史做题结束题目的序号，判断所述历史做题结束题目是否为所述历史进度做题页中的结束题目；

若是，则将所述历史进度做题页的下一页作为所述跳转题目页，否则，则将所述历史进度做题页作为所述跳转题目页。

6. 根据权利要求1所述的方法，其特征在于，基于所述第二人机交互操作，在所述渲染题目数据中确定出一目标题目数据，以及基于所述目标题目数据确定出渲染题目页，包括：

若所述第二人机交互操作为向右滑动操作，则将所述渲染题目数据中的当前进度题目数据的下一条题目数据，作为所述目标题目数据；或

若所述第二人机交互操作为向左滑动操作，则将所述渲染题目数据中的当前进度题目数据的上一条题目数据，作为所述目标题目数据；

获取目标题目数据的序号，并根据所述目标题目数据的序号，确定出渲染题目页。

7.根据权利要求1所述的方法，其特征在于，在基于所述历史做题进度数据，确定出当前进度题目数据后，所述方法还包括：

获取当前进度题目数据的序号；

判断当前进度题目数据的序号是否大于或等于题目总量；

若是，则将所述当前进度题目数据更新为指定题目数据，其中，所述当前进度题目数据的序号，与所述指定题目数据的序号之间的差值为一固定值。

8.一种H5题库网页的渲染装置，其特征在于，包括：

数据获取单元，用于在响应于用户与题库网页的第一人机交互操作时，获取历史做题进度数据，其中，所述第一人机交互操作包括进入答题页面操作；

数据处理单元，用于基于所述历史做题进度数据，确定出历史进度做题页、题目数据池以及当前进度题目数据，其中，所述题目数据池包括所述历史进度做题页上一页对应的题目数据和所述历史进度做题页对应的题目数据，所述历史进度做题页下一页对应的题目数据和所述历史进度做题页对应的题目数据，或所述历史进度做题页对应的题目数据；

渲染单元，用于根据所述历史做题进度数据，确定出跳转题目页，以及基于所述当前进度题目数据，从所述题目数据池中确定出渲染题目数据，其中，所述渲染题目数据包括所述当前进度题目数据的上一条题目数据和下一条题目数据；

渲染单元，用于切换至所述跳转题目页，并在所述跳转题目页中，展示所述当前进度题目数据；

渲染单元，用于响应于用户与所述题库网页的第二人机交互操作时，基于所述第二人机交互操作，在所述渲染题目数据中确定出一目标题目数据，以及基于所述目标题目数据确定出渲染题目页，其中，所述第二人机交互操作包括滑动操作；

渲染单元，还用于滑动切换至所述渲染题目页，并在所述渲染题目页中展示所述目标题目数据，并在展示后，将当前进度题目数据更新为所述目标题目数据，并重新确定出所述当前进度题目数据的渲染题目数据，以便在响应于下一次的第二人机交互操作时，基于重新确定出的渲染题目数据，完成题目的网页渲染与切换。

9.一种电子设备，其特征在于，包括：依次通信相连的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如权利要求1～7任意一项所述的H5题库网页的渲染方法。

10.一种存储介质，其特征在于，所述存储介质上存储有指令，当所述指令在计算机上运行时，执行如权利要求1～7任意一项所述的H5题库网页的渲染方法。

Images