Axure Advanced Tutorial: Random Lottery
Introduction
Lucky draw is often used in sign in or game scenes. This time, we realize the simple lottery feature through the repeater.
Several Features to be Realized
Pre-Requisite
1. Master the usage of repeater.
2. Master the usage of dynamic panel.
3. Master the usage of variables.
4. Master the use of conditional logic
Preview the completed prototype for this tutorial
Key Thinkings
Solutions
1. How to store personnel information.
Use the repeater to store the personnel list. Here, you should not add directly in the repeater data table, but add new rows when the repeater is loadied, because functions cannot be used when adding the data table directly.
2. How to implement random drawing.
Give each person a random number (Sort Column), and then add sorting to achieve the random effect.
3. How to realize flashing switching between candidates.
Set repeater paging, and only one line of information is displayed on one page. After a certain time, turn to the next page to realize switching.
When you get to the last page, you need to move to the first page.
4. How to start switching and stop switching (draw candidates).
How to keep the repeater switching pages and stopping when you want.
Then we need to set a global variable. I name it start or stop. It will have two assignments, start and stop.
When this value is equal to Start, the repeater keeps switching pages. When this value is equal to Stop, the repeater stops switching pages.
Then consider what actions can always trigger page switching. This can be achieved with a text field, because the text field has the action when the text changes. When the text filed text changes, you can switch the page. Because the mobile phone number is unique, use the mobile phone number as the text filed.
So how do we stop it? Make the global variable Stop when you need it. In this prototype, I set the global variable equal to Stop after three seconds In fact, it can also be that when you click a button, and the current page is equal to the selected candidate.
5. How to exclude the last winning candidates.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.
Leave a comment