【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高保真原型 授权发布,未经许可,禁止转载

相关文章
|
9月前
|
人工智能 文件存储 数据中心
Ollama部署本地大模型并通过Infortress APP远程访问保姆级教程
本文介绍如何快速上手本地大模型部署工具Ollama及AI远程访问工具Infortress。通过Ollama,开发者可轻松部署如Llama、Deepseek等主流开源模型,仅需几行命令即可完成安装与运行。结合Infortress,用户能实现对本地大模型的远程访问,支持多设备无缝对接,同时提供便捷的模型切换与知识库管理功能。Infortress更兼具NAS软件特性,成为个人AI数据中心的理想选择。
|
Android开发 移动开发 小程序
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
|
11月前
|
小程序 搜索推荐 Android开发
Axure原型模板与元件库APP交互设计素材(附资料)
Axure是一款强大的原型设计工具,广泛应用于APP和小程序的设计与开发。本文详细介绍Axure的常用界面组件元件库、交互设计素材,涵盖电商、社区服务、娱乐休闲、农业农村、教育等领域的多套交互案例。通过手机模型、矢量图标、通用组件等资源,设计师可高效构建原型并模拟用户操作,评估界面效果。Axure支持导出和分享,助力团队协作,推动更多优秀应用的诞生。
1402 6
|
10月前
|
存储 数据库 UED
【Axure原型案例】悦购APP产品原型设计
本文介绍了悦购APP的产品原型设计,专注于潮流服装市场。设计包括登录、过渡、首页、商品分享、个人中心、购物车、消息及修改信息等页面。通过Axure实现交互功能,如页面跳转、动态效果和数据模拟,优化内容、交互与兼容性,确保用户体验流畅。最终,原型为开发和推广提供了坚实基础,助力悦购APP成为高效的潮流购物平台。
381 0
|
弹性计算 开发工具 Android开发
阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
阿里云APP备案流程分为六步,确保应用合法上架。首先登录阿里云账号填写APP信息,提交后等待阿里云初审。初审通过后进行工信部短信核验,随后由管局审核。审核通过后,APP即可获得备案号并正式上架分发平台。整个过程需仔细填写主办者及APP详细信息,确保所有资料准确无误。阿小云详细分享了这一流程,帮助开发者顺利完成备案。
|
网络协议 物联网 测试技术
App Inventor 2 MQTT拓展入门(保姆级教程)
本文演示的是App和一个测试客户端进行消息交互的案例,实际应用中,我们的测试客户端可以看着是任意的、支持MQTT协议的硬件,通过订阅及发布消息,联网硬件与我们的App进行双向数据通信,以实现万物互联的智能控制效果。
1223 2
Axure App 垂直滚动
Axure App 垂直滚动
1172 0
|
存储 JavaScript 前端开发
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
|
4月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
894 139
|
4月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
444 137

热门文章

最新文章