如何制作一个关于测试的H5页面

你好,作为众多商务活动的首选类型,H5对于答疑解惑自然是需求量很大的。你需要知道的是,答题测试按照功能等级分为趣味测试和问卷调查两种。

趣味测试H5:根据分数得到不同的结果,用户活动营销。

H5调查问卷:调查对象在数据收集方面的选择/得分统计。

本教程主要是向您介绍一个简单有趣的测试H5。教程中使用的主要组件是图片按钮组件、试题组件和参数变量组件。希望同学们能通过本教程掌握这些组件的用法,自主制作。

试题组件的作用:结合图片按钮完成用户选择时的单选状态。

图片按钮组件的作用:可以与测试项组件结合,在用户选择时完成单项选择的状态。

参数变量组件的作用:统计和汇总用户对每个问题的得分,可以作为显示不同得分不同元素的触发器。

1.第一页是输入用户名的页面。我们创建一个新页面,添加一个高级组件——高级表单中的输入框组件,然后添加一个全局变量和一个图片按钮来开始测试。全局变量命名为“名称变量”,调整类型为“文本”。图片按钮设置了“点击时设置参数值”和“跳转页面”,参数值设置为。

注意:第二页是答题卡,分为五步(2-6步)。

2.第二页是回答页。我们右键单击左侧页面面板并创建一个新的空白页面。我们需要添加一个图片按钮。我们在选择按钮的时候,可以利用键盘上control+C+V的方式复制剩下的三个按钮,点击图片按钮,在右侧面板上传替换我们选择的和未选择的图片。

3.图片按钮初始状态和激活状态的图片替换后,我们在工具栏的高级组件-交互组件下添加一个测试组件,然后我们就可以在画布上添加“主题图片”和“确定按钮图片”了;

4.我们在左侧逻辑面板中点击“测试组件”,在右侧面板中添加四个图片按钮作为选项并为每个选项设置分数(例如选项C是对的,我们将选项C设置为1,其余设置为0),然后将其中一个设置为“正确答案”,在触发器上完成选择后触发“显示元素”。这里显示“OK”图片元素。

5.点击左上角的页面级别,切换到Masterpge,在上方工具栏高级组件-逻辑组件中找到“参数变量”,选择添加到画布中,将这个变量命名为“总分”,设置为等待触发。单击小“+”号添加三个触发条件。我这里补充的是总分≤2,3≥总分≥4,总分≥5。

6.点击左上角的页面级别,切换到页面,点击“确定”图片元素,勾选右侧面板的“初始隐藏”,点击触发器上的“设置参数值”和“跳转页面”(注意顺序,跳转页面必须在最后一步执行,这样上面的触发事件才不会无效)。设置参数值和跳转页面的详细设置面板见下图。

7.我们按照步骤2到6,然后制作剩下的四页。

8.创建一个新页面作为结果页面。我们将报告卡的图片元素添加到画布中,然后添加一个名为name的段落文本组件。在该页面的页面触发器上设置参数值并在切换到当前页面时执行参数判断,将名称的全局变量赋给用于显示名称的段落文本,在执行参数判断中执行母版页上总分的判断;

9.测试用例基本做好了,可以预览了。

当然,这只是一个想法。有些项目分数不一样,不同的结果视觉上也不一样。在这种情况下,我们可以使用多个结果页,比如总分参数小于等于2时跳转到结果页1,总分参数小于等于4时跳转到结果页2,总分参数大于等于5时跳转到结果页3。另外,执行参数判断的触发器不应该在结果页触发,而应该设置在上一页的“确定”按钮上。

有问题也可以去官网加入交流群,希望能帮到楼主。