之前Epub360发布的新功能Demo《知己大质检》（可复制），很多派友想了解这种“用户玩了又能出题”的测试H5具体是如何实现的，这次就给大家解析一下其制作方法。
整体分析
从交互模式上，需要考虑：出题、答题、查看答题结果这三种情况。所有的交互逻辑设计，都需要在这个大前提下进行。
作品入口页面有两个：
- 作品首页：从这里任何用户可以成为出题者；
- 答题分享页：出题完成分享出去后，其他用户从这里进入开始答题。
基于上述分析，整个H5作品包括如下页面：
| 编号 | 页面名称 | 说明 |
| A | 作品首页 | 用户开始出题、成为出题者 |
| B | 出题／答题页 | 需要支持出题／答题两种模式，有五页 |
| C | 答题入口页 | 答题者从这里开始答题 |
| D | 答题者结果页 | 答题者完成答题后可以查看大家的答题结果情况 |
| E | 出题者结果页 | 出题者可以直接查看大家的答题情况 |
为了配合入口页面逻辑，我们还需要做如下准备：
- 创建助力：用来记录答题者发起答题的情况；
- 设置全局参数变量 misPlayer，用来记录当前用户是否已完成出题，这个参数需要放在masterpage上，设置为可存储
有了这些数据准备，再回头看一下入口页面的判断逻辑：
| 页面名称 | 用户角色判断及交互操作 | |
| A | 作品首页 | 用户没有参与过 发起助力，开始出题 |
| 用户是出题者 通过misPlayer=1判断 直接跳转到 E 出题者查看结果页面 |
||
| C | 答题入口页 | 用户没有参与过 开始答题 |
| 用户是出题者 通过是否助力发起者判断 直接跳转到 E 出题者查看结果页面 |
这样，整个页面框架结构就确定下来了。
表单创建
创建表单“知己质检结果表”，用来记录答题者的结果情况。
出题／答题页设置
一共有五个题目页面，需要解决如下问题：
- 如何同时支持出题、答题两种操作模式？
- 针对出题者：
a. 选择自己的答案后，如何记录下来？
b. 完成出题后，如何进行分享操作？ - 针对答题者：
a. 进行答题时，如何判断是否正确、并计算分值？
b. 答题结束后，如何形成评判语、并提交结果？
针对上述问题，我们一一解答：
- 如何同时支持出题、答题两种操作模式？
- 设置全局参数变量 mmode 用来区分：
mmode=0, 出题模式；
mmode=1, 答题模式 - 在每页引入页面参数变量 mode，以便在页面进行不同模式的判断。
- 设置全局参数变量 mmode 用来区分：
- 针对出题模式
- 在每一页设置一个参数变量 answer，用于记录出题者选择的答案选项，需要设置为可存储；
- 在第五页，完成出题后，调用触发器“用户数据存储”进行保存；
- 进入出题者查看结果页面，提示用户进行分享，指定答题入口页面为分享页；
- 针对答题模式
- 引入全局参数变量 mscore，记录答题分值
- 答题者做出选择后，与 answer 做比较判断对错，答对就给mscore累积20分；
- 在第五页，完成答题后，根据mscore得分情况，生成不同的评判语，通过高级表单赋值与提交触发器，把答题结果存储到“知己质检结果表”中；
- 进入答题者查看结果页面
上面就是题目页面的关键设定逻辑。当然，还是有很多细节问题需要解决：
- 根据出题者选择答案选项，如何显示选中标记
- 答题时，如何根据出题者标记的选项，进行正确与否提示
- ...
在作品页面中，都给出了备注说明，这些就留给大家去探索了。
结果页面设置
这里针对出题者、答题者，分别设置了不同的结果页面，如下图所示：左边是出题者结果页面、右边是答题者结果页面。
主要还是考虑两种情况下页面视觉元素和操作逻辑有所不同，分别处理逻辑上清晰简单一些。
这里比较关键的地方，在于答题结果的显示：采用信息列表组件，并且数据范围限定为“仅分享用户数据”，这样可以针对当前出题者，确保仅罗列出的对应的答题结果情况。
总结
这个H5作品的制作，关键在于逻辑，对于用户角色、出题／答题模式关系搞清楚了，逻辑也就理顺了。
作品已经开放复制，欢迎大家拷贝研究。如果还需要答疑的，欢迎跟帖交流。
关注更多H5设计、案例、资讯