Advanced · Axure Promotion · Axure RP · Draw · Learn axure · Repeater · Jan 18, 2022

Axure Tutorial: Grid Style Lottery Drawing Prototype

by WELLJOE

Introduction

Random function is a commonly used function in Axure, which is often used in verification code, lottery and other cases. Next, let's learn how to make a high fidelity grid lottery prototype. The prototype is mainly made by using the repeater and random function. The lottery is realized by filling in the repeater table or copying the excel table to the repeater table.

Grid Lottery Draw

Preview the completed prototype for this tutorial

Features to be Realized

1. When you click the draw button, the selected and unselected effect will be continuously switched in the table item. Until a certain times selection, the last selected item will be drawn.

2. The last selected item cannot be selected next.

3. The drawn items cannot be selected in the future drawing.

4. The selections surplus and the draw surplus can be set.

Thoughts on How to Realize

1. Constantly switch between selected and unselected when both Selection surplus and Draw surplus are greater than 0. Through the Trigger event to loop.

2. Calculate and pass randomly selected items by adding a new repeater. Add a filter to the new repeater to filter out the items that were not selected last time, and then randomly select the remaining items, and then pass the value back to the original repeater.

3. Delete the response row in the new repeater after the last draw. This row's item will not be selected in the next drawing.

4. Add two text fields to accept the set values.

Widgets Setup

1. Add a repeater and set it to Wrap and Items per col to 3, you can change as needed. Name it Left.

2. Set its data as 4 columns, and the column names are: No, Name, Selected, Winner. Set the data default value of the selected column to - 1 (Unselected), and leave the winner column blank.

3. Copy the repeater Left, name the new repeater Right, and delete the winner column. Since Right repeater is only used for data calculation and transmission, it is hidden.

4. Form widgets setup:

· Drag a button with the text Draw, and create it as a dynamic panel. The text of status 2 is Draw Again.
· Drag a Restart button.

· Drag a Selection Surplus label and a text field.
· Drag a Draw Surplus label and a text field.
· Drag a Selected Item label and a Random Number to receive data.
· Drag Complete notice texts into the canvas and hide it.

Name these widgets according to their text and meaning.

Interactions Setup

1. When each item of the Left repeater is loaded, if item.Selected is not equal to 1. Set the rectangle in the repeater to unselected. If equal to 1, set to selected.

2. When each item of the right repeater is loaded, if item.Selected equals 1. Set the text of selected item to item.No of Right repeater. The value of this label is mainly used to pass data.

3. When the draw button is clicked, the following actions are performed:

· Disable the Draw button and the Draw Again button to prevent them from being clicked when the operation is not completed.

· Change the last selected item of the Right repeater to unselected(-1).

· Change the data in the selected column of the left repeater to unselected (- 1), when the data in the no column is the same as the selected item label text.

· Add a filter to the right repeater to filter out the last unselected items.

· Calculate randomly selected items. Store its text on the random number tag. Here you need to use the visible items of the right repeater.

· Then set the value of the selected column of the right repeater to 1, When the index of its row is equal to the value of the random number tag.

· After 100ms, reduce the value of Selection Suplus by - 1.

· Fire Click event on Draw button to loop.

4. When the text in the Selection Surplus text field changes, if the text is equal to 0, the last round of drawing is completed, Reduce the value of Draw Surplus by - 1; Delete the response row in the right repeater; change the value of the winner column of the response row in the left repeater to 1.

5. When the text of the Draw Plus text field changes, if the text is not equal to 0, change the Draw button to the Draw Again state; Enable draw again; Hide the complete notice. Otherwise, show the complete notice.