In this tutorial, you'll learn how to make a timer that counts up or down in seconds using an interaction loop.
Tip: You can use the basic structure of this interaction loop to create any sort of interaction that you want to occur over and over again indefinitely.
Check out the blinking text tutorial for another example of an interaction loop.
1. Widget Setup
Open a new RP file and open Page 1 on the canvas.
Drag a rectangle widget onto the canvas.
2. Create a Counter Variable
In the top menu, go to Project > Global Variables.
In the Global Variables dialog, click Add to add a new variable. Name it
CounterVarand set its default value to
Click OK to close the dialog.
3. The Counting Interaction
Display the Variable's Value When the Page Loads
Click a blank spot on the canvas to select the page itself.
Click New Interaction in the Interactions pane.
Select the Page Loaded event in the list that appears, and then select the Set Text action.
Select the rectangle widget in the Target dropdown.
Under Set To, select value of variable. Then select the CounterVar variable in the Variable dropdown.
Click OK to save the action.
Increment the Variable's Value
Click the "+" Insert Action icon at the bottom of the Page Loaded block, and select the Set Variable Value action in the list that appears.
Select CounterVar in the Target dropdown.
In the Value field, enter
[[CounterVar+1]]. (This bracketed expression will add 1 to the variable's current value when the action is executed in the web browser.)
Click OK to save the action.
Set the Loop Interval with a Wait Action
Click the Insert Action icon at the bottom of the Page Loaded block once more, and select the Wait action in the list that appears.
1000in the ms field and click OK to save the action.
Create the Loop by Firing the Page Loaded Event Again
Click the Insert Action icon at the bottom of the Page Loaded block a final time, and select the Fire Event action in the list that appears.
Select Page in the Target dropdown and click Add Event.
Select Page Loaded in the event list and click OK to save the action.
4. Preview the Interaction
Preview the page and watch as the rectangle's text counts up in seconds.
Additional Information and Tips
To make the timer count down instead, set the CounterVar variable's default value to your desired time in seconds. For example, use the default value
300 for a five-minute timer (5 x 60).
Then instead of incrementing the variable's value, decrement it with this expression:
Stopping the Timer at a Certain Value
To prevent the timer from going beyond a certain value, add one of the following conditions to the Page Loaded case:
If the timer counts up:
value of variable — CounterVar — is less than or equals — value — (stop time in seconds)
If the timer counts down:
value of variable — CounterVar — is greater than or equals — value — (stop time in seconds)
Displaying the Time as Minutes and Seconds
To format the timer in minutes and seconds, set the rectangle widget's text to one of the following expressions in the Set Text action by selecting text in the Set To dropdown:
Without leading zeros:
With leading zeros:
Note: You can learn about the functions used in these expressions in our article on Math, Functions, and Expressions.