Axure 教程:知識競賽/答題app、小程序原型
今天教大家用中繼器做一個知識競賽/答題app的原型,該原型使用方便簡單,制作完成后,所有交互都已經設定好,您只需要在中繼器中導入問題、答案、每題的分數即可完成!
1. 效果展示
在線演示地址:http://cloud.axureshop.com/l2jd3n/#g=1&p=%E7%9F%A5%E8%AF%86%E7%AB%9E%E8%B5%9B
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 彈窗
按自己喜好做一個彈窗,然后在上面答案按鈕鼠標單擊時加一個事件,如果該行時中繼器最后一行,顯示彈窗,并且讓彈窗里的分數=上面記錄分數的文本。
這樣就制作完成了,以后使用,僅需簡單填寫中繼器的內容,即可自動生成,所以強烈推薦給各位使用。
本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
我就在做這樣的軟件,也已經有一定的用戶群體。
是不是只適合只有單選題的情況
您好,很牛!原文件可以分享學習一下嗎?
感謝老鐵分享
3.2.4 答案按鈕交互 這一步具體怎么操作的?能指導下嗎?你的Axure 是什么版本的呢?我實在沒有找到
原型預覽及下載地址:
https://axhub.im/pro/9783b97025114924