.

这份测试题H5干货可能够你用一年

小常发表于:2018年06月11日 13:47:35更新于:2019年04月26日 12:34:04

又有小伙伴来问问题啦!测试题到底应该怎么做呢?

0015b20e5a9af9da9f723425a58d7a9 

测试题H5已经是一种非常常见的H5类型,做小调查,收集答题者喜好,分析数据,形式丰富有趣味,也是很多受众比较喜欢的方式之一,今天我们就将大家最关心的制作问题整理,供大家学习参考。

1.按答题顺序分:

(1)按顺序答题,得分不同获得不同的称号

案例:意派学院

0015b23374bac0d36de6b52917cd306


(2)随机测试题:随机抽取10道题目进行回答。

案例:随机测试题应用

0015b233a60ae1c381d5f560757f498

 

2.按出题方式:

(1)图文并茂

案例:测测你有多加拿大

 0015b233b72150d817c4146adfbd616

(2)语音出题:

案例:猜电影

0015b233c3bdba849d9dab1e579fdc6

(3)视频交互测试

案例:Dr.魏的这波操作我赌你破解不了

0015b233d3f545da51cb75ac48b44ab


3.按回答方式:

(1)语音答题

案例:语音识别闯关

0015b233e06793f31f4847f494182bc

(2)脑力+眼力答题

案例:眼脑劳动大比拼

0015b233fbb874362c687b878beaf2d

(3)脑力+拖放交互

案例:快来挽回你的记忆力

0015b2340850ca72305a509bf978d1a


 4.按答题后的提示方式

(1)语音回应是否答题正确

案例:《方言表白听力大赛》

0015b2341be4a47334196b9fef8579c


5.按最终结果

(1)常规:根据不同分值给出不同结果

案例:灵魂测试

0015b2345346b0dcba2917c6e2868fa

(2)随机结果 

案例:财神驾到!快来抽取你的新年财运签

0015b2346aa5d64d2e04f8f3f294006


测试题的答题规则并没有固定的模式,大家都是根据个人的功能需求来制作,但往往脱离不了这几个问题:

1.答题结束要不要判断正误,显示正确答案?

2. 怎样计算总分?

3. 怎样根据不同分值让答题者得到不同的结果?

4.怎样收集答题数据?

这些都是基本要考虑的,其他的就是创意跟视觉表达已经与品牌营销的关联性。

接下来就是关于测试题的策划思路及制作:

一、大的思路:

1.确定功能实现:

要做的测试题需要实现什么样的功能,答题者通过答题获得什么奖励,如称号、具体奖励或抽奖资格等等。

2.要做哪种类型的测试题

判断正误、单选题、多选题。

3.确定答题内容

包括题目描述:可以用文字、图片、幻灯、语音、视频、元素动画表现或组合方式;

确定选项:文字、图片、语音、短视频或组合方式呈现。

4.制定答题规则

每人只能答题一或二次,分数达到多才可以参与某项活动;

可以再来一次,得分清零

可以答题三次,挑战排行

答对多少题得到什么结果。如,答对8道题,可以获得什么称号,得到某个奖励

5.确定每一题选择结束后要做什么?

选择正确后如何计分;

选择正确后要不要显示答案注释;

选择错误后要不要显示错误,并加注释。


二、关键问题细化:

答题结束后要做什么

(1)答题结束直接跳转至下一题;

案例参考:测测你的童心指数

0015b234851bbf189277e5322eef3a9


(2)选择结束后,允许答题者犹豫,重新选择,显示下一题或确定按钮后,再跳转至下一题。

案例参考: 意派学院入学考试

0015b234cda1305c1b0ed435debd5df

(3)不会告知答案,只会告知正误

案例参考:315消费者常识大测评

0015b2350807280b13ca683667a2cc3

(4)每次答题,不管选择正误,都要显示正确答案注解

案例参考:六一特辑|童年纪念馆

0015b23522c849c7c04efc8f361d034

(5)没有正确答案,只有根据不同的选择得出不同分值

案例参考:2018你会收获多少桃花运

0015b234e2e62bd9eaf09d3b3297a76


(5)显示答案还有花样的显示方式,如幻灯图片+语音文字解说。

优秀案例参考来啦!

东东直播show

0015b235378d3e6c81c2c2095c0dd43

(6)显示答题分数/状态栏

案例参考:两会知识竞猜

0015b23569f2b421909e9f20af2b5c3

(7) 选择结果统一展示

案例参考:世界杯知多少

0015b234f2ccb9a52a3fe91223ae594

4.要不要收集数据,如何收集?

直接用高级表单下的选择项结合参数变量设置,达到计分跟统计结果的目的。具体教程 


三、具体组件及设置(大家问的最多的)

如果用意派Epub360来制作,针对以上问题,一定要会用以下几个组件:

参数变量组件:用于统计得分,记录得分;或用来记录答了几道题;随机答题也离不开随机参数。

image.png

参数变量教程

随机参数:是参数变量组件的一种类型。类型修改为随机数,参数变量就变成了随机参数,该参数就会拥有很多随机值,在什么范围内取值,可以自定义。

image.png

随机参数的常见用法

测试题组件:组织答案,设置正误选项;测试题组件本身带有参数的属性,可以记录当前题得分。

image.png

图片按钮组件:跟测试题组件组合使用,用于显示选项。

image.png

测试题组件用法

全局变量或者全局参数:用于记录总分,可以兼顾整个作品中的分数计算,只要有哪个题目,得了分,就要把分加给全局参数或全局变量,总分就是这么计算来的。

全局参数跟全局变量有什么区别:全局参数功能更多一些:类型上比全局变量多一个随机数类型;可以有一个文本组件显示全局参数的值;可以设置触发条件;但是必须到Masterpage页面去添加。

全局变量不能直接显示自己的值,需要赋值给文本组件或者输入框等组件来显示。

image.png

全局变量教程

全局参数是指:放在Masterpage页面的参数变量。

image.png

全局参数教程

热区:防止用户二次选择,用于遮挡手势,常放置在所有选项的最顶层,初始隐藏,在选择某个答案后不允许答题者再次选择。

image.png

热区教程

还有一定要会用的触发行为:

设置参数值:表达式计算。就像小时候的加减乘除计算公式,我们可以用这个触发行为完成,将让每一题的得分加到总分参数里。

image.png

设置参数值的触发行为在哪里

image.png

显示元素:用于显示某个最初并未显示在页面上的元素。如答题者进入答题页,防止该答题者直接进入下一题,可以将跳转到下一题的按钮初始隐藏;选择答案后,再显示下一题的按钮,就要用这个触发行为。

 image.png

跳转页面:常用于跳转至下一题时用。给下一题的按钮设置该触发行为。

image.png

如果希望是随机跳转可能要设置的复杂些,需要到Masterpage页面添加一个随机参数,设置为等待触发,每次点击下一题时跳转页面都根据这个参数值进行跳转,分两步简单介绍下:

1.到Masterpage页面添加参数变量

image.png

2.点击每个题目的下一题按钮,跳转页面时根据参数跳转。

image.png

执行参数判断:这个要结合参数变量的触发条件来设置,对于答题得分的处理,会根据不同的得分跳转到不同页面或显示不同内容,这个设置就是设置触发条件的过程,而这个触发条件自己不会执行,就需要通过点击等方式来执行这个触发条件,这个过程就是执行参数判断。

分两步:

1.在Masterpage页面的总分参数要设置触发条件

image.png

2.通常是在最后一题的上面查看结果(随机答题要另外设置,暂不作讲解,需要的可在留言区留言)

image.png

看了上面的内容,赶快练习一下吧,了解完相关组件和触发行为,去尝试做一个完整的测试题案例吧:测试题案例教程

 还有非常多的测试题案例,没有发出来,也欢迎大家积极投稿,将作品展示在官网上或给我们的模板主题页投稿。