一种用于填空题自定义的组件及其工作方法

摘要

本公开提供了一种用于填空题自定义的组件及其工作方法，所述方案包括：题目定义单元，其用于接收命题者待定义的题目输入及用于对题目中待填空内容进行标识的分隔符，题目生成单元，其用于利用组件内置算法，根据所述分隔符对所述题目进行答案内容挖空处理以及答案存储，同时，将题目挖空位置补全为与答案文本一一对应的网格形式并进行展示；监听单元，其用于基于答题者的网格点击位置进行对焦处理，并实时监听输入文本进行对应位置网格的文字渲染；同时，当接收到答题者的提交动作信号时，对当前的输入文本进行存储；答案校验单元，其用于对存储的输入文本与其对应位置的答案进行比对，实现对答题者答题结果的校验。

说明书

技术领域

本公开属于计算机技术领域，尤其涉及一种用于填空题自定义的组件及其工作方法。

背景技术

本部分的陈述仅仅是提供了与本公开相关的背景技术信息，不必然构成在先技术。

在现有考试练习系统中，填空题是常见的一种题型，一般是题干中，需要填空的地方，空出一个文本输入框，用于用户填写答案。一般将一个文本设置为一个空格，例如：“____穿林打叶声，何妨____且徐行”作为题干，其中___处是填写答案的输入框。用户点击获取光标所在位置，进行答题自动对焦，提交后，进行答案验证，正确或错误，用不同的颜色标注。例如：“

发明人发现，现有组件如vant的密码输入框，只能针对固定长度的文本输入数字；大多数填空题类，仅能用简单的单个文本输入框，且无法准确定位每一个输入的内容以及自动校验正误情况；同时，无法进行字符分割。

发明内容

本公开为了解决上述问题，提供了一种用于填空题自定义的组件及其工作方法，所述方案可方便快捷完成一道题目的设置，并且支持一道题目可设置多处答案，自动渲染题目并进行光标位置测算和监听用户的输入情况，提交后即可进行校验正误及正确答案查阅，有效提高了题目的出题效率及出题的多场景、多样式的适应性。

根据本公开实施例的第一个方面，提供了一种用于填空题自定义的组件，包括：

题目定义单元，其用于接收命题者待定义的题目输入及用于对题目中待填空内容进行标识的分隔符，其中，所述题目输入包括题干和答案，所述答案在题目中通过首尾设置的分隔符进行标识；

题目生成单元，其用于利用组件内置算法，根据所述分隔符对所述题目进行答案内容挖空处理以及答案存储，同时，将题目挖空位置补全为与答案文本一一对应的网格形式并进行展示；其中，所述内置算法具体为：对所述题目进行循环遍历，将连续出现的两个分隔符及其之间的内容进行挖空并存储；

监听单元，其用于基于答题者的网格点击位置进行对焦处理，并实时监听输入文本进行对应位置网格的文字渲染；同时，当接收到答题者的提交动作信号时，对当前的输入文本进行存储；

答案校验单元，其用于对存储的输入文本与其对应位置的答案进行比对，实现对答题者答题结果的校验。

进一步的，在所述监听单元中，实时监听当前焦点位置和已输入内容，针对答题者的删除或输入操作，对网格的索引序号进行动态渲染，保证当前对焦网格为答题者的输入网格。

进一步的，当答题者输入文本数量超过题干中的实际网格数时，自动截取实际网格数量的输入文本，超出部分文本不做处理。

进一步的，当题目输入的分隔符为奇数数量时，在题目文本的尾部追加分隔符，保证题目中的分隔符满足偶数数量的要求。

进一步的，基于校验结果中答题者答案的正误，在展示的题干中对答题者的答案进行不同展示效果的标注，其中，所述标注采用不同颜色、不同字体、不同字号、是否加粗或是否有下划线进行标注。

进一步的，所述内置算法具体为：

组件通过接收的分割符号值，将题目进行切割处理，基于切割结果获得题目数组list；

针对切割好的题目数组list进行遍历，根据数组索引，对于索引为偶数的数组项进一步切割，并设置其类型为文本类型，将包含文本内容和类型的对象，按顺序放入blankAllList数组；对于奇数的数组项，单独放入正确答案的rightVal数组，并根据正确答案的长度，切割遍历后，设置其类型为输入框类型，文本内容设置为空，将包含文本内容和类型的对象按序放入blankAllList数组；其中，需要说明的是，数组索引从0开始；

页面初始化时通过对blankAllList数组渲染，根据数据项的类型是文本类型或输入框类型，对文本和输入框进行页面渲染。

进一步的，所述分隔符为用户自定义设置，区分于题目中已有字符。

根据本公开实施例的第二个方面，提供了一种用于填空题自定义的组件的工作方法，包括：

接收命题者待定义的题目输入及用于对题目中待填空内容进行标识的分隔符，其中，所述题目输入包括题干和答案，所述答案在题目中通过首尾设置的分隔符进行标识；

利用组件内置算法，根据所述分隔符对所述题目进行答案内容挖空处理以及答案存储，同时，将题目挖空位置补全为与答案文本一一对应的网格形式并进行展示；其中，所述内置算法具体为：对所述题目进行循环遍历，将连续出现的两个分隔符及其之间的内容进行挖空并存储；

基于答题者的网格点击位置进行对焦处理，并实时监听输入文本进行对应位置网格的文字渲染；同时，当接收到答题者的提交动作信号时，对当前的输入文本进行存储；

对存储的输入文本与其对应位置的答案进行比对，实现对答题者答题结果的校验。

根据本公开实施例的第三个方面，提供了一种电子设备，包括存储器、处理器及存储在存储器上运行的计算机程序，所述处理器执行所述程序时实现所述的一种用于填空题自定义的组件的工作方法。

根据本公开实施例的第四个方面，提供了一种非暂态计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现所述的一种用于填空题自定义的组件的工作方法。

与现有技术相比，本公开的有益效果是：

(1)本公开提供了一种用于填空题自定义的组件及其工作方法，所述方案旨在服务于目前大量的考试练习系统中填空题设置复杂，效果不理想的现状，并提高用户的使用的友好度；通过本公开所述组件，仅需简单的题干配置，节省了大量的工作量，即可完成一道填空题目的设置，并且针对多场景、多端的复用十分友好便捷。

(2)所述方案提高了填空题目开发的效率，通过使用该组件，可方便快捷完成一道题目的设置，并且支持一道题目可设置多处答案，自动渲染题目并进行光标位置测算和监听答题者的输入情况，提交后即可进行校验正误及正确答案查阅，满足了大量使用场景的需求。

本公开附加方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本公开的实践了解到。

附图说明

构成本公开的一部分的说明书附图用来提供对本公开的进一步理解，本公开的示意性实施例及其说明用于解释本公开，并不构成对本公开的不当限定。

图1为本公开实施例中所述的一种用于填空题自定义的组件的结构示意图；

图2为本公开实施例中所述的一种用于填空题自定义的组件的工作方法流程图；

图3为本公开实施例中所述的题干渲染后状态示意图；

图4为本公开实施例中所述的答题者输入后状态示意图；

图5为本公开实施例中所述的答题校验状态示意图。

具体实施方式

下面结合附图与实施例对本公开做进一步说明。

应该指出，以下详细说明都是例示性的，旨在对本公开提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本公开所属技术领域的普通技术人员通常理解的相同含义。

需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本公开的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。

在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。

实施例一：

本实施例的目的是提供一种用于填空题自定义的组件。

一种用于填空题自定义的组件，包括：

题目定义单元，其用于接收命题者待定义的题目输入及用于对题目中待填空内容进行标识的分隔符，其中，所述题目输入包括题干和答案，所述答案在题目中通过首尾设置的分隔符进行标识；

题目生成单元，其用于利用组件内置算法，根据所述分隔符对所述题目进行答案内容挖空处理以及答案存储，同时，将题目挖空位置补全为与答案文本一一对应的网格形式并进行展示；其中，所述内置算法具体为：对所述题目进行循环遍历，将连续出现的两个分隔符及其之间的内容进行挖空并存储；

监听单元，其用于基于答题者的网格点击位置进行对焦处理，并实时监听输入文本进行对应位置网格的文字渲染；同时，当接收到答题者的提交动作信号时，对当前的输入文本进行存储；

答案校验单元，其用于对存储的输入文本与其对应位置的答案进行比对，实现对答题者答题结果的校验。

在具体实施中，在所述监听单元中，实时监听当前焦点位置和已输入内容，针对答题者的删除或输入操作，对网格的索引序号进行动态渲染，保证当前对焦网格为答题者的输入网格。；当答题者输入文本数量超过题干中的实际网格数时，自动截取实际网格数量的输入文本，超出部分文本不做处理。

在具体实施中，当题目输入的分隔符为奇数数量时，在题目文本的尾部追加分隔符，保证题目中的分隔符满足偶数数量的要求。

在具体实施中，基于校验结果中答题者答案的正误，在展示的题干中对答题者的答案进行不同展示效果的标注，其中，所述标注采用不同颜色、不同字体、不同字号、是否加粗或是否有下划线进行标注。

本实施例所述组件主要解决如下问题：

(1)解决题干答案无法自定义设置的问题

现有组件或方法中，需要预先将完整的题干和答案进行分别的预设置，通过针对题干内容遍历去比对答案进行渲染，设置方式单一且使用场景单一，无法做到设置多处答案。题干中所需填空的答案设置，题干中可能并不止有一处答案，答案文字可能也恰巧存在题干中，进行提交识别的时候，必须准确识别出题干处正确答案。

(2)解决无法监听输入后文本渲染位置问题

在输入过程中，答题者可能并不是从第一个开始输入，或者穿插修改某一处的文本答案，必须自动获取当前输入的位置，并将答案准确渲染到对应的格子中。该组件通过实时监听焦点位置和已输入的内容，针对答题者的删除或输入操作，将活动网格的索引序号进行动态的渲染，确保当前聚焦空格就是当前答题者的输入网格。在答题者输入超过预设数量的网格数文本时，自动截取文本，超出部分不做处理，保证网格数量和答题者输入文本数量一一对应。

(3)解决填写完答案的后无法逐个校验正误的问题

答题完成后进行提交后，根据答题者的答案进行校验对错，根据预先设定的反馈样式进行渲染展示。例如正确内容标注为绿色，错误内容标注为红色。

(4)解决现有方式，逻辑配置复杂的问题

现有解决方案需要针对输入内容进行复杂的逻辑编写，代码冗余，在使用过程中，比较麻烦，而且容易实现调用问题。引入该组件后，只需要设置填空题目和分隔符两个属性值即可。首先，组件内部通过命题者的属性值设定，自动获取到题干，并针对预设的分隔符进行答案提取，迅速将题干及答案解析出来；其次实时监听答题者的输入，确保焦点聚集的索引值准确性及监听文本数量，进行页面友好型的反馈；最后，答题者提交后，进行答案正误判断，进行正误的展示，并将正确答案展示出来。使用该组件的命题者和答题者无需再关注内部的处理逻辑。

本实施例所述组件具有如下优点：

(1)本实施例所述组件，题目设置简单，题干及答案仅需设置一次即可；

引入该组件后，对该组件所需题干question和分隔符sign两个属性赋值即可。

例如：

question:'$莫听$穿林打叶声，何妨$吟啸$且徐行。',

sign:'$'

该设置即代表，两个’$’中间的文字即是需要填空的内容。组件第一内置算法可以将答案和题干区分出来。针对上述举例，算法会自动归类为：

题干:“____穿林打叶声，何妨____且徐行。”

答案：莫听、吟啸

当前现有的组件不支持一次性配置，在使用过程中需要分别对题干和答案进行设置，且严格需要一一对应，配置繁琐容易出错。

其中，两个’$’中间的文字即是需要填空的内容，组件第一内置算法可以将答案和题干区分出来，所述组件第一内置算法为：

组件通过接收的分割符号sign值，将题目question值进行切割处理，题目被切分成数组list；

针对切割好的题目数组list进行遍历，根据数组索引，对于索引为偶数的数组项进一步切割(即切割为一个个文字)，并设置其类型(type)为txt(即文本)类型，将包含文本content和类型type的对象，按顺序放入blankAllList数组；反之，奇数的数组项，就是正确分割出来的正确答案，单独放入正确答案的rightVal数组，并根据正确答案的长度，切割遍历后，设置参数为input输入框的类型，文本设置为空，将包含content和type的对象按序放入blankAllList数组。其中，需要说明的是，数组索引从0开始；

通过针对题目数组list完整的遍历，会获取到blankAllList数组，页面初始化通过对blankAllList数组渲染，根据数据项的类型type(text(即文本类型)或input(即输入框类型))，对文本和输入框进行页面渲染；

通过针对题目数组list完整的遍历，会获取到rightVal数组，在用户提交或选择查看答案的时候，进行答案展示。

(2)题干不局限于一处答案，灵活设置

参考上述示例，通过自定义的sign分隔符‘$’，可以灵活设置多个网格数量，组件第二内置算法自动计算网格组数；而现有的填空题类组件，一般支持一个题干对应一处答案，不能设置多处。

其中，所述组件第二内置算法具体为：组件通过接收的分割符号sign值，将题目question值进行切割处理，题目被切分成数组list；针对切割好的题干数组list进行遍历，根据索引，奇数的数组项，就是正确分割出来的正确答案，单独放入正确答案的rightVal数组，并根据正确答案的长度，切割遍历后，可获取到网格组数及每一组下的网格数量；而现有的填空题类组件，一般支持一个题干对应一处答案，不能设置多处。

(3)在具体实施中，可根据实际应用，自定义分割符号，减少分隔符与题目混淆

本实施例所述组件的使用，除了必要的题目属性值question设置外，还有sign分隔符的设置。sign属性值的设置，是为了区分题目本身可能包括某些特殊的字符。参考上述示例，题干本身中可能存在‘$’，可以根据实际情况，自定义修改其他的特殊字符，例如设置sign:‘#’,确保能够做到分隔符唯一性，不会与题目文本信息混淆，确保了题目解析正确。

(4)本实施例所述组件能够自动校验输入项正误，根据预设样式，进行正误判断并进行反馈；在具体实施方式中，所述预设样式可以为：根据对比结果，正确则将输入框的边框和文本设置为绿色，错误答案将输入框的边框和文本设置为红色，进行正误判断并进行反馈。

本实施例所述组件能够自动校验输入项正误，提交确认后，将根据组件第三内置算法，用户输入的内容与正确答案进行遍历对比，根据对比结果，正确则将输入框的边框和文本设置为绿色，错误答案将输入框的边框和文本设置为红色,完成此正误判断之后根据上述规则进行页面渲染反馈。

具体的，组件第三内置算法,具体包括如下处理过程：在获取到当前用户输入的答案currentVal数组与正确答案rightVal数组进行对比，在长度一致且数据转字符串对比后对比通过的，可得出用户输入完全正确；反之，则进行逐个文本遍历，用户输入数组项与正确答案输入一致则输入正确，否则就是错误。

本实施例所述组件具体包括如下处理过程：

(1)所述组件中的题干及答案采用一次性设置，简单快捷，在具体实施中，基于H5智能校验输入正误自定义输入数量的网格输入框组件，针对填空题目初始化设置的时，将题干和题目一次输入，并自定义分隔符号针对填空部分的文本进行分割。无需考虑题目和答案分开设置，规避了题目中可能存在的特殊字符及重复性答案文本的导致处理出现错误的可能性。

基于本实施例所述组件，对该组件的两个属性值question和sign进行配置，实现题目定义；例如：

question:'$莫听$穿林打叶声，何妨$吟啸$且徐行。',

sign:'$'

其中，question是完整的填空题目，sign是自定义的分隔符，该设置即代表，两个’$’中间的文字即是需要填空的内容。组件内置算法可以根据预设内容，通过对question值进行循环遍历，通过比对sign值进行填空题的‘挖空’操作，并将正确答案进行解析报错。针对上述举例，算法会自动归类为：

题干:“____穿林打叶声，何妨____且徐行。”

答案：莫听、吟啸

(2)自动处理分析题干和答案，根据答案数量对应渲染网格数；

组件初始化后，根据设置的题干和分隔符，进行处理，对应渲染成题面和所需填写答案的对应数量的空格。该处理在组件内部自动处理，智能划分题目和答案。例如：

question:'$莫听$穿林打叶声，何妨$吟啸$且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨$任平生$。',

sign:‘$’

上述题干设置中，进行了三处题干的挖空处理，分辨是莫听、吟啸、任平生三处，渲染到页面后，就是如下格式：

题干:“[][]穿林打叶声，何妨[][]且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨[][][]。”

自动将答案补全成网格形式，且与答案文本数量一一对应。对于容错处理，针对题干的分隔出现错误的分隔，奇数数量的分隔符，导致没有形成正确的答案闭环，则算法自动追加的文本末，进行渲染，不会造成组件报错导致无法使用问题。

(3)自动获取焦点，并根据输入文本进行对焦；

根据答题者点击网格位置，进行对焦处理，并实时监听输入的文本，进行对应位置网格的文字渲染操作，针对输入内容超出的情况，则停止渲染。强调对答题者输入是焦点和输入过程中对应网格的提示效果，保证答题者时刻知道输入的当前位置，提高组件的用户友好性。例如：

题干:“[][]穿林打叶声，何妨[][]且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨[][][]。

针对上述题干，答题者可以自由选择输入位置，不强求从头开始输入，删除操作和移动光标的操作随机记录，并且针对超出的文本输入进行截取，上述题干最后一组文本三个字，假如答题者输入：‘任平生活’四个字，将自动截取前三个文字，页面展示为‘任平生’，后续输入无效，不做后续的答案对比处理和页面展示。

(4)自动进行答案校验，并智能标注

根据预先设定的题干及答案，在答题者填空答题完成提交后，自动进行答案校验，根据回答正误，将以不同的效果展示标注出来，题目回答情况一目了然，并对应显示正确答案，以便答题者的查阅。例如：

题干:“莫听穿林打叶声，何妨吟笑且徐行。”

答案：莫听、吟啸

本实施例所述方案基于H5智能校验输入正误自定义输入数量的网格输入框组件，旨在服务于目前大量的考试练习系统中填空题设置复杂，效果不理想的现状，并提高用户的使用的友好度。引入该组件，仅需简单的题干配置，节省了大量的处理工作，即可完成一道填空题目的设置。并且针对多场景、多端的复用十分友好便捷；所述方案提高了填空题目开发的效率，通过使用该组件，可方便快捷完成一道题目的设置，并且支持一道题目可设置多处答案，自动渲染题目并进行光标位置测算和监听答题者的输入情况，提交后即可进行校验正误及正确答案查阅，满足了不同的使用场景。

实施例二：

本实施例的目的是提供一种用于填空题自定义的组件的工作方法。

一种用于填空题自定义的组件的工作方法，包括：

接收命题者待定义的题目输入及用于对题目中待填空内容进行标识的分隔符，其中，所述题目输入包括题干和答案，所述答案在题目中通过首尾设置的分隔符进行标识；

利用组件内置算法，根据所述分隔符对所述题目进行答案内容挖空处理以及答案存储，同时，将题目挖空位置补全为与答案文本一一对应的网格形式并进行展示；其中，所述内置算法具体为：对所述题目进行循环遍历，将连续出现的两个分隔符及其之间的内容进行挖空并存储；

基于答题者的网格点击位置进行对焦处理，并实时监听输入文本进行对应位置网格的文字渲染；同时，当接收到答题者的提交动作信号时，对当前的输入文本进行存储；

对存储的输入文本与其对应位置的答案进行比对，实现对答题者答题结果的校验。

进一步的，本实施例所述工作方法的具体处理细节在实施例一中已经进行了详细说明，故此出不在赘述。

在更多实施例中，还提供：

一种电子设备，包括存储器和处理器以及存储在存储器上并在处理器上运行的计算机指令，所述计算机指令被处理器运行时，完成实施例一中所述的方法。为了简洁，在此不再赘述。

应理解，本实施例中，处理器可以是中央处理单元CPU，处理器还可以是其他通用处理器、数字信号处理器DSP、专用集成电路ASIC，现成可编程门阵列FPGA或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器可以包括只读存储器和随机存取存储器，并向处理器提供指令和数据、存储器的一部分还可以包括非易失性随机存储器。例如，存储器还可以存储设备类型的信息。

一种计算机可读存储介质，用于存储计算机指令，所述计算机指令被处理器执行时，完成实施例一中所述的方法。

实施例一中的方法可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器、闪存、只读存储器、可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。为避免重复，这里不再详细描述。

本领域普通技术人员可以意识到，结合本实施例描述的各示例的单元即算法步骤，能够以电子硬件或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本公开的范围。

上述实施例提供的一种用于填空题自定义的组件及其工作方法可以实现，具有广阔的应用前景。

以上所述仅为本公开的优选实施例而已，并不用于限制本公开，对于本领域的技术人员来说，本公开可以有各种更改和变化。凡在本公开的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本公开的保护范围之内。