恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
腾讯真假朋友质检H5,全案教程来啦!!
0.0°
2017-03-29 原创文章 教程 举报 7774 52 43 7

还记得赵四上周的“上新”么

就是那篇教大家制作

腾讯真假朋友质检H5的教程

(如果错过没看的点这里)

Image title

当时只说了一半

学东西可不能只学一半呀

千呼万唤始出来

真假朋友大质检H5教程下篇

(承接上篇)

终于来啦

制作步骤仍然涉及数据库应用

板凳瓜子走起来~


1、答题页面怎么做呐?



回顾上篇,我们已经完成了发题部分的相关逻辑,接下来就是答题部分的逻辑实现。答题部分大致含括两个关键逻辑点:答题时题目抽取、答题页答题对错判断。



(1)在答题页抽取题目的思路?



答题抽取的题目并不是随机从大题库内提取的,而是从记录问题&答案数据库内抽取。打个比方,用户A在发题页选了1、3、10、15、19五道题,在他转发到用户B时,用户B的作答题目就是这五道题...

Image title

在上篇的“选中的问题和答案要记录清楚”步骤,我们已经记录了发题者提交的问题&答案,为了方便提取题目和答案,我们对数据列表提交进一步优化——将问题序号一同提交,变成n行4列的数据库表单,示意图如下:

Image title

而且,在上篇我们早已标记了每道题的序号,因此可以直接新增一个用于记录问题序号的文本,然后一开始的“随机获取”时,就把这个问题序号一同输出到二维变量,然后将用户记录问题序号的文本绑定二维变量的相应位置即可。



有小伙伴反映不会将抽取后的题目提交到这个数据库内,这里大致讲解提交方法:



①新建数据库:将其重命名为题目&答案记录数据库,添加四个文本字段,文段名称分别重命名为“问题”、“问题序号”、“答案”、“用户序号”



②找到上篇已设置的二维变量(aa):问题文本对应的变量位置是一行一列,选项一对应的是一行二列...问题序号对应的是一行四列。



③用二维变量给四个数据库的文本字段赋值:“问题”文本字段值填写为$aa[1][1];“问题序号”文本字段值填写为$aa[1][4];“用户序号”文本字段的值需要另外绑定“用户序号计数器”的变量;而“答案”的赋值触发条件是两个打钩按钮的点击,点击哪个就赋值哪个,最后再提交,四个文本字段就能以一行的格式提交到数据库了。


(2)答题页如何抽取题目?



上篇我们已经对发题者选中的全部题目进行了用户序号标记,因此只要判断当前打开的H5,是谁转发出来的,即可根据序号作为筛选对象,输出相应的问题和答案。



怎样判断是谁转发出来的呢?我们可以利用前面已经设置好的“提交素材”机制,因为发题者A选完题目转发到B之前,是经过提交这一步的,而且A此时提交的记录是有他的序号,因此我们只要也将这个序号(计数器)提交素材,那么当A转发给B时,获取此时计数器的值,将此作为数据库输出的筛选条件即可。

Image title

OK,明白原理,后面的实现就好办了。首先我们需要在“第五题”的完成按钮处,加上一个给舞台“提交素材”的事件,意思即将当前“用户序号”计数器的值暂时被舞台记录下来,在转发出去时,该计数器的值为被转发时的大小。



回到答题页,在答题页下添加以“显示”为触发条件的事件,目标对象选择为“问题&答案记录数据库”,将此时“用户序号”计数器的值作为筛选条件,让数据库输出。(新增一个5行6列,变量名称为QQ的二维变量作为数据输出时的装载容器)

Image title

当我们设置完这个输出事件后,已经完成对“问题&答案记录用数据库”的输出(问题、问题序号、正确答案、用户序号),目前仍空缺两列数据(每道题对应的选项一、选项二),咋办呢?



很简单,因为这两个选项的数据在“题库”数据库里有,那么我们就在这个数据库内输出即可,这样就不需要设置另外的输出事件了,完成此步,现在“问题&答案输出变量”的内容应该是这样的——

Image title

这样,一个5行6列的表单已经准备好,我们只需在答题页显示时,按行赋值相应的数据到文本里就OK了(按照$QQ[行][列]的格式赋值),这样我们在答题页里的“正确”/“错误”的按钮上,就能加入事件来对文本赋值,完成答题页的内容显示。



(3)答题页答题对错判断



这个H5的答题对错识别系统很有意思,随机从已有的两个选项中选出一个选项,然后提问回答者这个选项是否符合发题者的出题。所以就有可能出现以下两种有趣的状况:



①假如题目一的正确答案是A,随机出现的选项是A,那么此时选择“正确”按钮,这个作答是正确的;反之选择“错误”按钮,是错误的。



②假如题目一的正确答案是A,随机出现的选项是B,那么此时选择“正确”按钮,这个作答是错误的;反之选择“错误”按钮,是正确的。



看起来是不是很凌乱...既然如此,我们就先给这些选项进行标记,才能区分出用户答题时选择的选项正确与否。



通常,这又要数据调用,然后判断调用后的数值。但由于上面已经涉及很多数据库调用应用了,为了减轻大家制作压力,这次尽量避开数据库走捷径——用计数器

Image title

毕竟只有两个选项,那么我们就可以利用数值范围在1-2的计数器,让其生成随机数进行二选一的数值判断。



①当计数器等于1,给答案文本赋值选项一

②当计数器等于2,给答案文本赋值选项二



具体操作很简单,在答题页新增一个计数器,设置属性最大值为2、最小值为1,紧接着在答题页下添加触发条件为“显示”的事件,让这个计数器执行“生成随机数”的事件。回到这个计数器,在其下添加两个事件:



①事件1:等于1,目标对象选中答案文本,“设定文字”为$QQ[1][5]

②事件1:等于2,目标对象选中答案文本,“设定文字”为$QQ[1][6]



赋值的位置,根据上面的变量示意图来弄就行~但这时候问题就来了,总共有五题的选项需要赋值,那么我们该怎么区分开呢?



很简单,因为第一题跟第二题的选项生成(包括题目),触发条件都是点完“正确”/“错误”按钮,对此,我们先新增一个“记录做题次数”的计数器,然后在每次点击“正确”/“错误”按钮时,让这个计数器+1。在相应数值的前提下,通过启用/禁用事件的机制,就能区分开五道题的赋值了。

Image title

简单地说,就是当“禁用启用事件用计数器”等于1时,让计数器1的两个“事件1”(设定文字$QQ[1][5]、$QQ[1][6])启用,其他禁用;


当“禁用启用事件用计数器”等于2时,让计数器1的两个“事件2”(设定文字$QQ[2][5]、$QQ[2][6])启用,其他禁用;如此类推,这样就能保证五道题能够进行不同的设定文字赋值区分了。


(通过二维变量设定文字,变量位置可以参考下图)

Image title

OK,紧接着就是最重要的得分判断,做起来很简单,我们可以对一个选项,分开两个不同的透明按钮加以判断和触发。



打个比方,此时计数器让选项1显示了,而且这是“正确答案”,那么我们就显示一套透明按钮方案:“正确”—得分,“错误”—不得分;反之,我们就显示另外一套透明按钮方案:“正确”—不得分,“错误”—得分。



那么,我们把透明按钮两两搭配,放置在容器下管理,每一题输出时,输出每行的2列数据(即正确答案)到输入框进行匹配,比如匹配“A”(输入框自带文本匹配功能,因此不需要另外增设变量),这时会有出现两种情况——



①输入框匹配“A”:即说明该题正确答案为A,那么我们就显示“方案一”

②输入框不匹配“A”:即说明该题正确答案为B,那么我们就显示“方案二”

Image title

然后在这些透明按钮下,执行相关的点击触发让相应的答题反馈文本显示即可~另外还需执行“下一题”的事件,承接到上面的“禁用&启用事件计数器”的+1,以及禁用/启用事件的轮换。



接下来,得分怎么记录?恰好这个H5只有五道题,那就刚好20分/题咯,既然如此,我们就新增一个记录得分用计数器,然后在两套方案的“正确—得分&错误—得分”下添加让这个计数器执行“+n,n=20”的事件即可~



最后再将这个计数器的数值连同“用户序号”(是打开时,不断累计的用户序号),一起提交到一个新的数据库里,用于记录分数,这样就完成得分统计的逻辑啦~


需要注意两点:



①数据库需要添加两个文本字段,分别记录得分&用户序号。

②这个提交一定得在第五题回答完再提交,不然会出现分数不准确的数据呐。



2、得分有了,排行榜呢?



上一步我们已经用一个新的数据库记录了每个答题用户的得分了吧?而且得分在提交时还附带着一个“用户序号”,那么我们就可以以这个序号作为筛选条件(表示这些得分都来自于同一套题),输出N行数据。



当然,这个输出的动作是基于“结果页”显示时才执行的,交互逻辑如下——

Image title

数据的输出离不开二维变量,我们为排行榜输出变量命名变量名称为“pp”,看到上面的事件图,可能你会有疑问,为啥二维变量的行数是10?列数是4?



这是有原因的,“10行”代表着每次输出10个得分数据;“4列”代表着四个数据,分别是“得分”、“用户序号”(用于筛选)、“微信头像”、“微信昵称”。这样大家就懂了吧,因为排行榜除了分数,还有个人信息的登记呀!

Image title

(1)黄框区域代表空白图片,用于微信头像赋值

(2)篮框区域表示空白文本,用于微信昵称赋值

(3)灰框区域标识空白文本,用于分数赋值



三个位置的赋值都是通过二维变量的定位赋值方法实现的,比如第一行,赋值头像:$pp[1][3];赋值昵称:$pp[1][4];赋值分数:$pp[1][1]%,以此类推完成接下来的赋值即可,推荐一页设10行数据(表示分数Top10,输出到二维变量时用降序就OK了~),一来可以提高数据输出时的流畅度,而是为了排版美观~



以上,即为腾讯真假朋友大质检H5的全系列教程,iH5.cn的数据库功能目前支持的功能点有很多,复杂的数据提取、赋值、输出、更新等操作,都能通过数据变量等功能支撑起来。



希望这次的数据库应用教程能给大家带来新的认知,如果以前没接触过数据库功能,不妨这次开始试试玩,记住用的时候带一点想象力就没问题了,毕竟二维变量你看不到,也摸不着~


本期教程就到这儿了,如果大家有啥疑问尽管留言,或者有一些有趣/爆款H5想赵四复现出来,可以直接Po连接过来哇~



咱们下期见吧,拜了个拜~

更新:2017-03-29

收藏

52人已收藏

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

  • 27

    作品

  • 2292

    粉丝

  • 8

    关注

  • 震惊!这个H5居然是在线聊天室!(内附完整教程)
  • 网易的爆款H5,手把手教你做!
  • 3个小时150万UV!网易的童年 H5刷屏了!
  • 视觉逼格指南:几何抽象风格神器

    猜你喜欢

      2017-03-29 原创文章 教程 举报 7774 52 43 7

      腾讯真假朋友质检H5,全案教程来啦!!

      0.0°

      你确定要举报腾讯真假朋友质检H5,全案教程来啦!!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年03月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      43
      52
      7

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录