Timer Tutorial

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.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

  1. Open a new RP file and open Page 1 on the canvas.

  2. Drag a rectangle widget onto the canvas.

2. Create a Counter Variable

  1. In the top menu, go to Project → Global Variables.

  2. In the Global Variables dialog, click Add to add a new variable. Name it CounterVar and set its default value to 0.

  3. Click OK to close the dialog.

3. The Counting Interaction

Display the Variable's Value When the Page Loads

  1. Click a blank spot on the canvas to select the page itself.

  2. Click New Interaction in the Interactions pane.

  3. Select the Page Loaded event in the list that appears, and then select the Set Text action.

  4. Select the rectangle widget in the Target dropdown.

  5. Under Set To, select value of variable. Then select the CounterVar variable in the Variable dropdown.

  6. Click OK to save the action.

Increment the Variable's Value

  1. 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.

  2. Select CounterVar in the Target dropdown.

  3. 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.)

  4. Click OK to save the action.

Set the Loop Interval with a Wait Action

  1. 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.

  2. Leave 1000 in the ms field and click OK to save the action.

Create the Loop by Firing the Page Loaded Event Again

  1. 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.

  2. Select Page in the Target dropdown and click Add Event.

  3. 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

Counting Down

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: [[CounterVar-1]]

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:

    [[Math.floor(CounterVar/60)]]:[[CounterVar%60]]

  • With leading zeros:

    [['0'.concat(Math.floor(CounterVar/60)).slice(-2)]]:[['0'.concat(CounterVar%60).slice(-2)]]

Note

You can learn about the functions used in these expressions in our article on Math, Functions, and Expressions.

← Terms and ConditionsSwiping Slideshow →