厉害了!原来测试题H5还有这么多套路

答题&测试,一直都是非常受欢迎的传播套路,之前七夕(虐狗日)刷爆朋友圈的《2017七夕直男考卷》,截至七夕当天,pv量就达到了2646.6万,分享成功次数高达137.8万。下面我们来揭晓H5中的答题测试套路,让老司机们带飞!

1.jpg

 

答题&测试,一直都是非常受欢迎的传播套路,之前七夕(虐狗日)刷爆朋友圈的《2017七夕直男考卷》,截至七夕当天,pv量就达到了2646.6万,分享成功次数高达137.8万。下面我们来揭晓H5中的答题测试套路,让老司机们带飞!

首先,从表现形式上看,测试题的类型无外乎这几种:选择题、听力题、判断题

4.png

腾讯视频《测一测娱乐圈有没有你的一席之地》


① 选择题

最常见的答题形式,配合H5的主题需要,引导用户进行选择;

② 听力题

其实属于选择题的一种,不过特点在于选取一段音频(音乐、人声等),让用户针对听到的信息给予答案;

③ 判断题

两个选择,True or False

当然,除上述常见的三种答题类型外,当然还是会有其他异于常人的创意,比如网易新闻这支《查看你的“人生余额”》,就是以拉动滑条的方式进行测试选择,十分别致。

 

12.gif
from:网易新闻《查查你的“人生余额”》


而从内容上来看,主要分为以下几种类别:



1、考卷测试

考卷类型,在H5中一直都是非常典型的答题测试代表。常见用于高考、行业如广告卷、营销卷、设计卷甚至是互联网圈的产品卷、运营卷...

13.png


该H5为U老师为腾讯99公益所作的答题H5,里面采用了诸多我们很熟悉的考试题目,涵盖了语文、数学、历史等学科。随机回答5道题目,就能以0%-100%来鉴定你的高考残余值,说到这里大家自行尝试吧,反正小编是忘的差不多了


2、人设鉴定

人设鉴定,直白点说,就是测测你是某部剧的哪个角色啊,你是某个动漫人物啊,你和剧中谁的相似度最高,相似程度达到百分之多少多少...

14.png
from:网易新闻《欢乐颂里哪个角色有你的影子》
(已下线)


虽然是已下线的H5,但是依然可圈可点。巧妙地以当时大火的欢乐颂剧中人物为背景进行的测试,通过回答6道选择题,提交后用户可以得出与自己最相似的角,可以说是蹭了一波很6的热点了~


3、产品介绍

有许多品牌为了自身的推广,有时也会通过答题测试的方式来传达,以此达到有效传播。

15.png
from:AUTODESK《Autodesk》

 

Autodesk就利用自身品牌的悠久历史,作为题库来进行答题测试,而用户在答题回顾的过程中,也会潜移默化的跟着熟悉Autodesk这个品牌(还不知道的请自行百度)



4、性格测试


性格测试类答题,主要是测试表现你是个怎样怎样的人,重点在于特质,比如,你爱不爱买东西、本人是不是很懒、丧气值多少等等...

16.gif


该H5主要通过5个三选一的题目,来测试的是你的剁手程度(嗯,就是字面意思)

17.gif
from:Acfun《无聊诊疗所》


A站出品的答题测试H5,画风魔性清奇,大开脑洞的开设了一个“无聊诊断所”,根据你回答的10个问题,最后诊断出你到底得的是哪种无聊病。讲真,做这支H5的大大应该也需要吃一发药了...

 

5、知识科普

最后一类就是给你普及知识的啦,这个比较好理解了,这里小编挑了个比较冷门的,看看大家能拿多少分吧!


18.png


提到这么多答题的形式,从根本上来说,上面三种答题形式的逻辑是一致的,比如我们来试试做一个三选一的答题效果:

准备好6个图片,分别为A、B、C三个答案选中时与未选中时的状态:

6.png
(橙色为选中状态,棕色为未选中状态)


第二步  接着就上传到意派Epub360里,将3个答案分别添加为幻灯组件

7.png


这时,右边面板上看到图片已经上传成功啦,这里千万不要忘记调整顺序,第一帧是未选中状态,第二帧才是选中状态哦

8.png


第三步  就是根据题目的设置,调整幻灯片的子元素触发器,比如选中A时,B、C为未选中状态,这里就以A为例,这个效果的实现主要基于在A幻灯的第一帧做触发动作:

9.png


选中A时,A切换为选中状态,还是选择第一帧:

10.png


选中A时,B、C切换未选中状态:

11.png

这样,H5的答题效果就初步完成啦,最后 戳这里查看详细测试题H5制作教程吧




关注更多H5设计、案例、资讯

 

10