【Axure教程】用中继器做答题app原型

简介: 【Axure教程】用中继器做答题app原型

今天教大家用中继器做一个知识竞赛/答题app的原型,该原型使用方便简单,制作完成后,所有交互都已经设定好,您只需要在中继器中导入问题、答案、每题的分数即可完成!

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/pro/9783b97025114924/#g=1

【原型下载】

方式2:https://weidian.com/item.html?itemID=3664800040


1. 效果展示

0b7277dfbe2080a2c02386830d2efb05.png


2. 功能介绍

(1)回答正确:回答正确时,显示答案显示绿色,自动得分

ffac1fff4c526b15360fcca04f572727.png

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

0a13fb28ec386b12b2ab49f0541d0e8b.png

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

0e31eb2e1f4268c1ced73d5bfd2a55e2.png

(4)自动记分:记录每一题的得分,每一题分数可以在中继器内设置

(5)自动评星:满分5星,80-99%4星,60-79%三星,40-59%二星,20-39%一星,0-19%没星。上面分数指的是百分比分数,即得分/总分

2f306f7e67b43daff33b6aef84ca79e4.png

(6)再来一局:可刷新重新完成

(7)返回:关闭该页面

使用方法:

在内容中继器内,填写问题、答案和每一题的得分即可!其他效果预览时自动实现

question:填写问题

answerA-D:填写ABCD的答案

right-answer:填写哪一个是正确答案(ABCD)

goal:该题的得分

d584b65fdfeeba73f37907d305d3e4e2.png

3. 制作方法

3.1 制作手机外框

可以在网上手机外框的素材,如下图所示:

cf149a0d71b3c4a88e0673e144859064.png

3.2 中继器内制作

3.2.1 中继器表格制作

如下图所示,总共7列:

question:问题

answerA-D:ABCD的答案

right-answer:哪一个是正确答案,填写ABCD

gaol:如果答对了,每题得分多少

d584b65fdfeeba73f37907d305d3e4e2.png

3.2.2 中继器内原件

一个题目文本框、4个答案的按钮,如下图所示拜访即可。

10f08a124777ab453bcf90883bbadb8d.png

3.2.3 中继器交互设计

中继器每项加载的时候,设置题目文本框的文本=question.text,answerA-D:ABCD的文本=answerA-D.text。

中继器内多页显示,每页显示一条。

694534ee6cc99056e2ed81444df2be76.png

3.2.4 答案按钮交互

4个答案的按钮可以根据自己的喜好制作。交互样式中设置选中显示绿色,禁用显示红色。

鼠标单击时:做判断,如果正确答案和点击的答案一致,选中该答案按钮,如果不一致,禁用该答案按钮。

db9bc2ea55ff67d879d31f9bec0c0f59.png

3.3 评分制作

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

c79e5be1bcc42fe110178c51b636bbd5.png

3.4 弹窗

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

32d31327f5ff6cb50b0326495bab41cd.png

这样就制作完成了,以后使用,仅需简单填写中继器的内容,即可自动生成,所以强烈推荐给各位使用。

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
2月前
|
监控 安全 数据可视化
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
|
2月前
|
iOS开发 开发者
一键制作 iOS 上架 App Store 描述文件教程
一键制作 iOS 上架 App Store 描述文件教程
|
2月前
|
开发者 iOS开发
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
73 3
|
15天前
|
搜索推荐 前端开发 JavaScript
【专栏】从网页轻松转换为应用越来越便捷
【4月更文挑战第27天】本文介绍了将网页转换为移动应用的在线生成App过程,包括原理(封装网页内容,添加移动特性)、优势(便捷高效,节省成本,快速上线)以及具体步骤(选择工具,准备内容,配置选项,生成测试,发布推广)。同时,注意版权、兼容性和用户体验问题。通过案例分析和实践经验分享,帮助读者深入了解如何通过在线工具实现App梦想,强调了网页优化、用户界面设计和个性化定制的重要性。
|
5天前
|
存储 JavaScript 前端开发
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
|
2月前
|
iOS开发 开发者
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题
|
2月前
|
移动开发 安全 数据安全/隐私保护
【教程】APP 加固的那些小事情
【教程】APP 加固的那些小事情
|
1月前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
2月前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
106 3
|
2月前
|
Android开发 开发者 UED
个人开发 App 成功上架手机应用市场的关键步骤
个人开发 App 成功上架手机应用市场的关键步骤