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

Random Lottery Draw

1. Click "Start Draw" to randomly select a winner from the list, and there is a flashing switching scrolling effect.
2. Click "Draw Once More", a new round of lottery will be opened, and the winners in the previous round will not be included.
3. After all personnel are drawn, you can click "Restart Drawing" to start a new round of lottery, and all the lists will be loaded again.

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

1. How to store personnel information.
2. How to implement random drawing.
3. How to realize flashing switching between candidates.
4. How to start switching and stop switching (draw candidates).
5. How to exclude the last winning  candidates.

Solutions

1. How to store personnel information.

Add new rows

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.

Sort

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 paging

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.

swithing page

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.

Delete winner
Delete the person on the current page before the next lottery. Delete the line in the repeater where the phone number is equal to the text in the current text field.

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

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.