用h5和js做一个趣味答题挑战的项目

求助想做一个问答测试的H5

您好，答题测试的H5作为不少商家活动的首选类型，需求自然就很大。大家需要知道的是，答题测试按功能层面又分为根据趣味测试、问卷调查两大类型。

• 趣味测试H5：根据得分获得不同结果，用户活动营销

• 问卷调查H5：统计答题人的选项/得分，用于数据收集

本期教程主要是向大家介绍一种简单的【趣味测试H5】的教程，教程里用到的主要的组件是 图片按钮组件、测试题组件 和 参数变量组件。希望学员们通过本篇教程都能掌握这几个组件使用方法并能独立制作出来。

• 测试题组件作用：与图片按钮组合完成用户选中时单选的状态

• 图片按钮组件作用：与测试题组件组合完成用户选中时单选的状态

• 参数变量组件作用：统计用户每题的得分并求和，可作不同得分显示不同元素的触发

1.第一页是一个输入用户姓名的页面，我们新建一个页面，添加高级组件-高级表单里的“输入框组件”，再添加一个全局变量和开始测试的图片按钮，将全局变量命名为“姓名变量”，调整类型为“文本”，图片按钮上设置点击时“设置参数值”和“跳转页面”，设置参数值为全局变量=输入框，跳转页面为下一页，；

注：第二页是答题页分为5个步骤讲解（2-6步）

2.第二页为答题页，我们在左侧页面面板处右击再新建一个空白页面，需要添加图片按钮，我们选中按钮的时候可以使用键盘上control+C+V的方式复制其余的三个按钮，点选图片按钮右侧面板上传替换自己的选中和未选中的图片；

3.图片按钮的初始状态和激活状态图片替换好后，我们在工具栏上的高级组件-交互组件下面添加测试题组件，接着我们可以添加“题目图片”和“确定按钮图片”到画布上；

4.我们点选左侧逻辑小面板的“测试题组件”，在右侧面板添加四个图片按钮为选项并设置为每个选项设置分值（比如选项C是对的，我们给选项C为1，其余设置为0），接着设置其中一个为“正确答案”，触发器上设置选择结束后触发“显示元素”，这里显示的是 下面那个“确定”图片元素（它需要初始隐藏，第六步有说明）；

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

6.我们点击左上角的页面层级，切换到 页面 里，点选 “确定”图片元素，右侧面板勾选“初始隐藏”，触发器上设置点击“设置参数值”和“跳转页面”（注意顺序，跳转页面一定要在最后一步执行，上面的触发事件才不会失效），设置参数值和跳转页面的详细设置面板见下图；

7.我们按照第二步到第六步的方法，接着制作剩下的四个页面

8.新建一页作为结果页，我们把成绩单图片元素添加到画布上，接着添加一个段落文本组件，命名为姓名。在这页的页面触发器上设置切换到当前页时设置参数值和执行参数判断，把姓名的全局变量赋值给用来显示姓名的段落文本，执行参数判断上执行的是 Masterpage 上总分的判断；

9.测试题案例大体上做好了，我们可以预览下看看。

当然，这里只是一种思路。有的项目不同得分不同结果的视觉上相差很大，这样的话我们可以采用多个结果页，比如总分参数≤2时跳转结果1页面，3≤总分参数≤4跳转结果2页面，总分参数≥5时跳转跳转结果3页面这样的逻辑方式实现，另外，执行参数判断的触发也不应该在结果页触发，而是应该在上一页的“确定按钮”上去设置。

如有问题，也可到意派官网，加入交流群询问，希望对楼主有帮助。

用h5和css3还有js做一个单机的健康测试，每题有四个选项，value值都不一样，为0/3/6/

单机的话是指逻辑在js里处理咯。 首先每一题的选项的随意设置一个属性，只要能分开题号的。 设置一个提交的按钮，点击时调用一个函数。 这个函数的功能是，获取到页面上所有的单选或复选框的元素。 然后判断checked属性的值，判断是否被选中，选中的话，获取题号。 接下来有题号，有选项，你就可以在js里处理了。

H5定制开发 如何通过H5小游戏做好活动的推广

一、欢乐抽不停 利用传统的九宫格抽奖，简单的H5游戏，对于参与的用户而言可以说是零门槛，简单操作就能获得奖品，势必能够吸引很多的用户参与。对于商家而言，微乐网络的H5游戏制作软件没有技术要求，商家也可以根据自己的预算设置奖品，奖品也可以是与到商家消费有关，这样更有助于提高销售率。 二、摇一摇送好礼 前面就有提到送好礼是商家常用的促销方式之一，而微乐网络这一个《摇一摇送好礼》H5游戏，能够引导用户关注商家的公众号，简单便捷的操作能够得到用户的喜爱。不要以为制作一个这样的h5游戏很难，如果你这样想就错了。其实是非常简单，这些“摇一摇”游戏都可以直接使用H5游戏模板制作。 三、记忆力挑战赛 暑假营销

怎么做H5微信小游戏？需要学习或准备些什么？

H5游戏是H5很重要的一种场景类型，也可以说H5这个词蹦到大众眼前就是因为《围住神经猫》这个H5游戏爆火刷屏。

从2014到2020年，我们也看到了很多好玩的H5小游戏，不过这些H5小游戏都能看到其他app上的影子，主要还是因为H5游戏主要用来营销宣传，目前能制作平台也比较多，但专业度不同，这里较低的灵活性和简易的游戏创建就不多介绍了。

意派Epub360-专业的H5页面制作工具

意派 Epub360 属于专业级别的H5制作网站，能实现交互动画效果；较高级的交互设定，比如手势触发、摇一摇、拖拽交互、碰撞检测、重力感应、关联控制等；同时支持用户信息获取，包括昵称头像、拍照、录音等功能，结合投票、评论、助力、信息列表组件，轻松实现社交互动类H5设计
由于可实现的功能较多，自然操作起来比较复杂，不过也可以直接套用模板进行修改。
可加入系统自带的各类特效。参数精确地控制交互，加入交互逻辑，很适合有较多H5制作经验的老司机。

补充一些：

关于编辑器专业能力

• 专业交互功能

支持专业级动画控制、交互设定、社交应用与数据应用，保障企业的商业需求顺利实现。

• 操作简易、流畅

采用由简到难递进式产品设计模式，效果组件化，减少用户上手难度，稳定的操作环境助力企业持续创意输出。

• 提供企业/媒体培训和定制服务

我们为企业/媒体单位提供H5工具培训及定制服务，定制服务包含扫码签到、大屏互动、H5游戏等多种场景，是上海解放日报、招商银行、广西日报等多家单位长期合作伙伴。

• 提供优质模板库

提供丰富的模板库，500+优质的企业H5模板，各种邀请函、招聘、节日海报、H5小游戏应有尽有。

• 提供私有化部署服务

上海意派科技的私有化部署系统功能架构覆盖功能层、服务层、系统支撑层三个层级。

功能层：

H5内容管理、H5编辑器、H5发布管理、H5访问统计、H5数据收集、素材资源管理、表单管理、数据库定义、个人账号信息管理。

服务层：

用户管理、素材资源管理、H5作品管理、作品播放、表单管理、数据库管理、访问统计、微信jssdk、微信授权、H5互动数据处理、数据库服务、语音、图片处理、消息列队。

系统支撑层：

Django应用服务器、MySQL 数据库存储、MongoDB、Redis 内存数据库、Memcache 缓存、OSS文件存储、OpenSearch、Celery 列队

对比一些简易化的模板平台，意派Epub360 H5平台可以使用更专业的组件，创造更多创意的可能，更大的创作自由空间以及更多的营销数据效果。

问卷调查、答题测试H5制作费用大概在多少？

但凡做设计师，都必须明确一点：无论你是设计平面、网页、UI还是H5，肯定会经历项目报价这回事儿。

报价，往俗了点说，其实就是谈钱。
但大部分设计师还是比较感性，所以对于报价，基本都没什么概念，也不屑谈。这也导致许多意想不到的情（shen）况（keng）产生：

报价低了，好点的勉强能收回成本，运气差的亏了本还尽倒贴；
报价高了，实力过硬的还好糊弄一下，实力不济点到手的单子飞了不说，还白白浪费时间

所以， 到底设计师该如何给H5定价呢？
小编询问了意派Epub360平台上不少设计师，发现大家对于H5的报价，普遍都没有一个绝对的标准。这是因为，“H5是服务行业，服务价格本来就是因人而异的”，也就是说，每个人的设计水平都不一样，初出茅庐的H5设计师和经历过N个大项目的资深H5设计师，两者的报价肯定是千差万别的。

所以第一个影响报价的因素自然就是你自己。

这里大致分成以下三个级别：

• 初级H5设计师（1年以下）

这一阶段的H5设计师，大多都是从平面设计转过来的（也有半路出家的非设计人士），拥有一定的设计能力和审美意识，但对H5并不了解，属于“H5设计新手”。

对于刚入门H5的新手设计师，最好先不要考虑接单的问题，而是尽可能的利用各种时间为H5充电，研究学习一些H5教程、各类刷屏的H5案例，并进行复刻和实践操作。

当然，如果遇到不错的项目还是可以接下来，这对你进阶成为H5大神肯定是事半功倍滴~

不过，这一阶段还是应该以学习H5设计和积累作品为主，只有前期拿得出像样的作品，才能吸引到更多甲方爸爸们的注意！

• 中级H5设计师（1-3年）

在经过一年的H5学习和实践后，这时候的你已经能接下不少H5项目了，不仅熟练掌握了H5设计技巧，看到不少刷屏H5也能理解得七七八八，那说明你已经正式从H5新手升级成为中级H5设计师啦！

这一阶段主要在于实践，通过各种渠道来接单，积累丰富的H5项目经验。

这里有几个露出渠道，比如数英、站酷等广告、设计平台，只要有高质量的优秀作品，自然能够受到甲方的青睐。

在意派Epub360平台上成为官方认定的推荐设计师，也能得到更多的接单机会~




请点击输入图片描述

意派Epub360设计师：http://www.epub360.com/designer/


在这一阶段也很容易会陷入瓶颈，必须避免简单、机械的流水线操作，重复这些没有技术含量和创意的设计工作，会导致你无法突破到更高水准。

而整个H5行业，由于H5的技术发展、微信的传播环境等因素，几乎每个月都会出现颠覆创意的刷屏H5案例，转变如此之快的H5风潮，如果不及时学习跟进，很容易就被行业淘汰...

• 高级H5设计师

这时候的你，除了自身有过硬的实力，ps、ai、ae啥的样样都行，手上也积累了一批与各大品牌方合作的H5项目，在业内也是小有名气，完全有底气可以和甲方刚正面，苦逼的乙方设计师终于翻身变爸爸啦！

说实话，现在业内优秀的H5服务商还是太少，想要晋升到高级H5设计师，光有时间、经验积累还远远不够，这一阶段主要还是在于对H5的理解和思考，包括呈现的设计效果是否能够让大家眼前一亮，创意策划是否能够颠覆用户的认知，作品是否能够在业内引领新一波的H5大潮...

第二个影响报价的因素就是作品的需求。

像纯滑页、展示类的H5，和手绘、视频、3D类的H5相比，后者定价肯定略高。
当然，世事无绝对。比如平台上的magic大神（id：三人游创意坊）给努比亚手机做的项目，就是个纯滑页的项目。

但当我们点进去的时候，发现虽然是个滑页作品，但一点都不简单。无论从创意、设计、策划、视觉上都透露着精致和用心，这样的作品报价自然就不会低了。

逻辑实现的难易程度、作品的屏数等因素也是需要参考的条件。

这里有个小套路，可以提前准备多套H5案例展示，让客户自己来选择，这样沟通成本自然就减少了，直接进入报价环节。

第三个影响报价的因素就是要看客户类型。
从地域上，这里绝对不是歧视，只是客观地讲，北上广深这些大城市由于比较理解H5，对报价的接受度也比较高，更注重项目的质量；

而有些二三线城市的甲方对于H5的理解不是很深，有些甚至觉得H5就是套个模版这样，自然就比较在意价格了...

从合作的角度来说，有些甲方可以考虑长期合作的，在第二次合作时价格上可以略低，而有些甲方可能就是一锤子买卖，这种当然是...

对于如何分辨各种不同类型客户，不是一朝一夕就能做到的，完全凭借着设计师自己和客户多年打交道的经验，不过碰到下面这几类甲方的大家还是赶紧撤吧！
另外在报价中有几点要特别注意
1、让客户先出预算
毕竟大公司和小公司都是不一样的，先知道客户的项目预算，你也可以有回转谈价的余地。
大多数设计师都会有自己的心理价位，比如普通展示类的5k起，酷炫一点的1w起...
如果事先就定死价格，后期碰到问题，吃亏的还是自己。
2、为什么要收定金？
为了避免风险，这样即使中途甲方突然撂挑子跑路，也还是能收回成本...
这就牵涉到成本的计算了，也就是制作H5所花费的时间成本，包括前期的沟通，设计，开发，改稿，到最终的运营结果反馈等等。
平台上某大神总结的定价公式如下：

成员薪资×制作周期x120%左右
举个栗子：
一个策划（400/天）、一个设计师（500/天），花费了3天的时间，最基本的费用就是 900×3×120%≌3240，当然这只是一个参考的保底价格，你可以在此基础上，给你的创意、设计、交互等要更多的费用。
如果碰到完全不熟的甲方，那就必须要收定金，至于到底收多少，各家设计师的说法也不尽相同，一般在20%-50%不等，在保证成本的前提下，看心情定吧~
3、修改次数
这里主要说的是H5在上线后的修改，经过测试后肯定会出现不同程度的问题，比如适配、卡顿、音效、动画等，这些问题肯定是需要返工的。
但是最好提前规定修改次数，甚至规定可修改的部分比如仅限文字、图片等等，平台上就有不少H5设计师吃过类似的亏，后期改了N遍发现H5已经面目全非了，即使拿到款整个项目也是亏的...
4、流量问题
前期沟通时，就要把流量问题说清楚，比如作品超过10万pv后要额外追加费用之类的，有H5大神就因为没有预料到作品的传播度，直接导致项目上线后流量费超出项目预算，幸好后来甲方爸爸答应另外加钱，不然只能白忙一场...
同时注意在制作过程中，也有意识的去优化作品，在保证画面质量的情况下，把H5压缩到最小。
5、后期维护
多数H5项目都是活动为主，过了一段时间活动结束，H5基本就算完成了。所以关于后期的作品维护也要讲清楚，比如是否要保留H5，保留多久，这些都要考虑到报价中。
6、关于合同
如何保证上述的问题都能得到很好的解决，这时就需要书面合同，有了法律的约束，双方都可以放心的按照合同条款进行合作。
总结下来，作品需求和客户这些都是客观因素，主要还是在于你自身的水准实力。
只要认真对待每一个项目，服务好每一个甲方，每个细节都注意到位，力求以专业的作品和良好的口碑说话，自然就能获取甲方爸爸的信任和认可，你的价格也会跟着一路飙升！！！

标签：h5 游戏 信息技术 运营 小游戏