【Axure教程】用中继器做答题app原型
今天教大家用中继器做一个知识竞赛/答题app的原型,该原型使用方便简单,制作完成后,所有交互都已经设定好,您只需要在中继器中导入问题、答案、每题的分数即可完成!
【原型预览】
https://axhub.im/pro/9783b97025114924/#g=1
【原型下载】
方式1:加入原型分享群后,可免费分享该原型,请咨询微信522073109
方式2:https://weidian.com/item.html?itemID=3664800040
1. 效果展示

2. 功能介绍
(1)回答正确:回答正确时,显示答案显示绿色,自动得分

(2)回答错误:回答错误时,选择答案显示红色,然后在显示正确的绿色答案,不得分

(3)超时:右上角有倒计时,超时没作答,自动显示对和错误的答案,本题不得分

(4)自动记分:记录每一题的得分,每一题分数可以在中继器内设置
(5)自动评星:满分5星,80-99%4星,60-79%三星,40-59%二星,20-39%一星,0-19%没星。上面分数指的是百分比分数,即得分/总分

(6)再来一局:可刷新重新完成
(7)返回:关闭该页面
使用方法:
在内容中继器内,填写问题、答案和每一题的得分即可!其他效果预览时自动实现
question:填写问题
answerA-D:填写ABCD的答案
right-answer:填写哪一个是正确答案(ABCD)
goal:该题的得分

3. 制作方法
3.1 制作手机外框
可以在网上手机外框的素材,如下图所示:

3.2 中继器内制作
3.2.1 中继器表格制作
如下图所示,总共7列:
question:问题
answerA-D:ABCD的答案
right-answer:哪一个是正确答案,填写ABCD
gaol:如果答对了,每题得分多少

3.2.2 中继器内原件
一个题目文本框、4个答案的按钮,如下图所示拜访即可。

3.2.3 中继器交互设计
中继器每项加载的时候,设置题目文本框的文本=question.text,answerA-D:ABCD的文本=answerA-D.text。
中继器内多页显示,每页显示一条。

3.2.4 答案按钮交互
4个答案的按钮可以根据自己的喜好制作。交互样式中设置选中显示绿色,禁用显示红色。
鼠标单击时:做判断,如果正确答案和点击的答案一致,选中该答案按钮,如果不一致,禁用该答案按钮。

3.3 评分制作
在手机做一个文本框,用来记录分数,默认为0,在上面答案按钮鼠标单击时,如果答案正确,设置该文本框的分数的值=该文本框的分数的值+goal的值。

3.4 弹窗
按自己喜好做一个弹窗,然后在上面答案按钮鼠标单击时加一个事件,如果该行时中继器最后一行,显示弹窗,并且让弹窗里的分数=上面记录分数的文本。

这样就制作完成了,以后使用,仅需简单填写中继器的内容,即可自动生成,所以强烈推荐给各位使用。
本文内容由公众号:Axure高保真原型 原创发布,未经许可,禁止转载和商用
【原型分享群介绍】
产品的路很孤独,我们经常会遇到各种各样的挑战,原型分享群的初衷是把我在工作中积累的原型模板分享给大家一同使用,让后人好走一点。慢慢地,加群的人越来越多,很高兴越来越多的人在使用我的模板之后提高了工作效率,我们也从几个人变成几百人的大家庭,从原型模板的分享到产品经验的分享,遇到问题,大家都会在群里互相帮忙,所以说原型分享群就是产品经理的家,欢迎回家。
原型分享群详细介绍
https://axhub.im/ax9/7daa45cda4a1b1c6/#c=1
【进群福利】
福利1——原型下载
在群里可以免费使用我所有的原型模板
已有原型:https://axhub.im/pro/93b752507d7005ba/#g=1&c=1

福利2——视频教程
在群里可以免费观看所有视频教程
已有视频:https://axhub.im/pro/b0f5e29044112509/#g=1&c=1

福利3——持续更新
一次进群,终身免费,后续更新的原型、视频、教程都可以免费获取,而且更新的频率还很高,具体可以看看我朋友圈

福利4——咨询讨论
遇到不懂的问题可以在群里讨论,我懂的都会解答

福利5——相互交流
和群里其他产品大佬一起,互相帮助、互相分享、互相学习、共同进步

【群友评价】

【加入方式】
原型分享群是付费群哦,一次付费,终身免费
如有需要,原型分享群的大家庭欢迎您的加入,加群请联系微信522073109
夜雨聆风