Designing a countdown timer

With Justinmind, you can create a countdown clock or ticker in your prototypes.interactive-prototypes-countdown-with-variables
To learn how, follow the steps below:

Designing the countdown

  1. Create a new mobile prototype with two screens.
  2. On Screen 1, drag three Text widgets and a Button to the Canvas to match our example. Type in a ‘welcome’ message for the top Text element, ’10’ in the next text element, ‘seconds’ in the next, a ‘waiting’ message in the next text element, and finally, type ‘Start download’ into the Button’s value. Style them as preferred, making sure to change the Button’s color to gray, so it appears inactive.Place elements onto Canvas
  3. Select the Button and the ‘waiting’ text element, right-click on them, and select ‘Group in Dynamic Panel’.Group text and button into dynamic panel
  4. Select Panel 1 in the Canvas, right-click, and select ‘Duplicate Panel’. Change the Button’s color to Black, and change the text element to say ‘Reset link’.2-interactive-prototypes-countdown-with-variables
  5. Go to Screen 2 and drag two Text widgets and an icon to the Canvas to match our example.Screen 2 contents
  6. Go to the Variables palette and create a variable. Name it “Countdown” and type the number ’11’ as its default value.3-interactive-prototypes-countdown-with-variables

Adding the events

  1. We’ll add events to Screen 1 to make the countdown start automatically upon page load.

    Select Screen 1 in the Outline palette and then go to the Events palette. Add an “On Page Load” + “Set Value” event, selecting the ‘Countdown’ variable as the target of the action. For the value, click the ‘Calculated’ radio button and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.Set value to variable countdown
  2. In the builder, drag the Countdown variable from the Variables tab to the open space in the expression, followed by the “Minus” (‘-‘) function to the space. Type the number ‘1’ in the open space that appears.Load value to countdown variable
  3. Back in the Events palette, create an “On Variable Change” + “Set Value” event, choosing the ‘Countdown’ variable as the variable to check, and the text element that contains the countdown seconds as the target of the action. For the value, select the ‘Calculated’ radio button and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.

    In the builder, click to the variables tab, and drag the ‘Countdown’ variable into the open space in the expression.Countdown variable change
  4. In the Events palette, click the ‘add condition’ text next to the Event you just created. You’ll see the Conditional Expression builder appear. In the the builder, drag the ‘Countdown’ variable to the open space in the expression, followed by the “Greater than or equal to” function. Type the number ‘0’ in the open space that appears.Add condition for countdown
  5. Back in the Events palette, right click on the action you’ve just created and select “Add action after selected”.

    Leave the “On Variable Change” trigger, but change the resulting action to “Pause”. Change the number of milliseconds to 1000ms.
  6. Right click on this action you just created in the Events palette and select “Add action after selected” again. Leave the “On Variable Change” trigger, but change the resulting action to “Set Value”. Select the ‘Countdown’ variable as the target of the action. For the value, select the ‘Calculated’ radio button and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.

    In the builder, drag the ‘Countdown’ to the open space in the expression, followed by the “Minus” (‘-‘) function. Type the number ‘1’ in the open space that appears.5-interactive-prototypes-countdown-with-variables
  7. Create another event. Choose the “On Variable Change” trigger and the “Set Active Panel” action, selecting Panel 2 to be set as active.
  8. Back in the Events palette, click the “add condition” text next to the Event you just created. In the Conditional Expression builder, drag the ‘Countdown’ variable to the open space in the expression, followed by the “Equals” function. Type the number ‘0’ in the open space that appears. Here’s how your events should look so far:On variable change events
  9. Next, we’ll add events to the “Reset Link” text so that the user can reset the countdown.

    Select the “Reset Link” text box from Panel 2 and create an “On Tap” + “Set Value” event, selecting the variable as the target of the action. For the value, type in the number ’10’.Reset link countdown variable
  10. Right click on the event you’ve just created and select “Add action after selected”. Add an “On Tap” + “Set Active Panel” event, selecting Panel 1 as the active panel.Reset link active panel 1
  11. Now, we’ll add events to Link the buttons back to the first screen, so the user can repeat the interaction.

    Go to Screen 2 and select the ‘back’ text element and create an “On Click” + “Link To” event, linking to Screen 1 with a slide right transition effect.
  12. In the Events palette, right-click on the event you just created and select ‘add action after selected’. Create an “On Click” + “Set Value” event, setting the value to the ‘Countdown’ variable. For the value, type in ’10’.Events for back link

And that’s it! Click “Simulate” to see and interact with your prototype.

You can download our example here.