Introduction

This article explains how the "Race Start Reaction Game" sample experience was built and how you can reuse it for your own needs. To access this sample, use the Examples tab of the Experiences panel in Composer.

This sample demonstrates how the ChronometerMS, Countdown, and Random Number Generator Interface Assets can be combined to create a reaction-time game inspired by a motorsport starting-light sequence.

About the "Race Start Reaction Game" experience

You can interact with the experience below. Go ahead - test your reaction time!

What you are seeing above is this web-published experience running within an iFrame. Below is the HTML code. Note that the "src" value is the URL of the published experience. Pasting that URL into a browser tab will run the experience in full screen. (Feel free to try it!)

<iframe src="https://web.intuiface.com/race-start-reaction-game" frameborder="0" width="100%" height="auto"></iframe>

The objective of the game is to wait for all five starting lights to go out and then tap the screen as quickly as possible. Once the player taps the screen, the game measures reaction time in milliseconds and displays it as the result.

Timing is important. Tapping before the lights go out results in a false start, while failing to react within the configured time results in a "Too Slow!" message.

How is this experience built?

This experience uses three Interface Assets - ChronometerMS, Countdown, and Random Number Generator - to manage the timing and logic of the game.

The Random Number Generator Interface Asset generates a random delay for each attempt. This value is bound to the Countdown Interface Asset and determines how long the starting lights remain illuminated before going out.

The Countdown Interface Asset manages the starting sequence. Once it reaches zero, the lights are turned off and the ChronometerMS Interface Asset begins measuring how long it takes the player to react.

The ChronometerMS is paused when the player taps after the lights have gone out. Its elapsed time is then used as the player's reaction time.

The five starting lights are created using Ellipse assets. Two Toggle Buttons - Lights On and Lights OFF - are used to manage their visual state and control the transition between waiting for the lights and measuring the player's reaction.

Two additional buttons are used to detect player interaction. The False Start Button detects a tap made while the lights are illuminated, while the Activation Button detects the player's valid reaction after the lights have gone out.

Together, these assets create the complete game sequence: illuminate the lights, wait for a randomized delay, turn the lights off, measure the player's reaction, and display the appropriate result.

The stylesheet, located above the scene and only visible in Composer's Edit Mode, serves as the primary resource for defining elements such as colors and fonts used throughout the experience. If you modify the fonts and colors here, the changes will be reflected throughout the experience.

Scene breakdown

"Game" scene

Within the "Game" scene, you are initially presented with the Start Instructions Group Collection, which explains how to play the game.

The instructions guide the player through the three stages of the challenge: watch the lights, wait for them to go out, and then tap the screen as quickly as possible.

The five starting lights are created using Ellipse assets and are initially displayed in their inactive state. The game does not begin until the "Start" button is pressed.

Starting the game

When the "Start" button is released, several actions are used to prepare the experience for a new attempt.

The Lights On Toggle Button is checked, the Random Number Generator generates a new value, and both the ChronometerMS and Countdown Interface Assets are reset. The Race Start Instructions group is then hidden and the invisible False Start Button is displayed.

The value generated by the Random Number Generator is bound to the duration of the Countdown. A new value is generated each time the game begins, creating a different delay before the lights go out. This prevents the player from learning the timing of the starting sequence and anticipating when to tap.

Controlling the starting lights

The five starting lights are created using individual Ellipse assets. The Lights On and Lights OFF Toggle Buttons are used to control their fill colors and the current state of the game.

When the Lights On Toggle Button is checked, its Is checked trigger performs two key tasks: it starts the Countdown Interface Asset and changes the fill color of all five Ellipse assets to red.

The player must now wait for the lights to go out.

When the Countdown reaches zero, its Time is reached trigger checks the Lights OFF Toggle Button.

The Is checked trigger of the Lights OFF Toggle Button then changes the fill color of each of the five Ellipse assets to its lights-off state, hides the invisible False Start Button, and starts the ChronometerMS Interface Asset.

Starting the Chronometer at this point ensures that reaction time is measured from the moment the player visually sees the lights go out.

Handling a false start

While the five lights are illuminated, the invisible False Start Button is displayed over the playable area.

If the player taps before the Countdown reaches zero, the False Start Button captures the interaction. This indicates that the player has reacted before the lights have gone out.

The attempt is then ended and the False Start group is displayed, informing the player that they jumped the start.

A second conditional trigger on the Countdown interface asset, Seconds Changed, is used to reset the timing logic after a false start. This trigger checks whether the False Start group is visible. When the condition is true, both the ChronometerMS and Countdown Interface Assets are reset.

Once the Countdown reaches zero and the Lights OFF Toggle Button is checked, the invisible False Start Button is hidden. This prevents it from capturing the player's interaction once the valid reaction period has begun.

The "Play Again" button can be used to reset the experience and begin another attempt.

Measuring the reaction time

Once the lights have gone out, the ChronometerMS Interface Asset begins measuring the player's reaction time.

At this point, the invisible Activation Button is used to detect the player's tap. When the Activation Button is tapped and released, it raises the Pause action of the ChronometerMS Interface Asset.

Pausing the ChronometerMS captures the elapsed time between the lights going out and the player's tap. This elapsed value represents the player's reaction time and is displayed in either seconds or milliseconds, depending on the recorded time.

Evaluating and displaying the reaction time

The ChronometerMS uses three Paused triggers to evaluate and display the player's reaction time. Two of these triggers contain conditions, while the third is a trigger.

The first conditional Paused trigger checks whether Milliseconds is less than 600 and Seconds equals 0.

When both conditions are met, the player's reaction is considered fast. The experience updates the result feedback, displays the Milliseconds group, and hides the Seconds with Milliseconds group. This enables a reaction time such as 300 milliseconds to be displayed as 300 ms.

The second conditional Paused trigger checks whether Seconds is greater than 0.

When this condition is met, the experience displays the Seconds with Milliseconds group and hides the Milliseconds group. This ensures reaction times of one second or longer use the appropriate format. For example, a reaction time of one second and 300 milliseconds can be displayed as 1.300 s.

An additional Paused trigger has no condition and simply displays the Result group. Because it is a trigger, it is raised whenever the Chronometer is paused, ensuring that the result screen is shown after the player reacts.

Together, these triggers evaluate the player's performance and control how the recorded reaction time is presented. A reaction time below 600 ms is considered fast, while a reaction time of 600 ms or more receives the slower reaction feedback. Separate display groups are used so sub-second results can be shown purely in milliseconds, while results of one second or longer can be shown using seconds with milliseconds.

Taking too long to react

The experience also handles situations where the lights have gone out but the player does not react.

A conditional Seconds Changed trigger on the ChronometerMS checks whether the elapsed time has reached 3 seconds.

When this condition is met, the Result group is displayed, the standard reaction-time assets are hidden, and the "Too Slow!" feedback is shown. The ChronometerMS is also reset, preventing it from continuing to run once the player has exceeded the allowed reaction time.

This ensures that the game reaches an outcome even if the player does not tap after the lights have gone out.

The complete sequence can therefore result in three types of outcome:

• The player taps after the lights go out and their reaction time is recorded.
• The player taps before the lights go out and triggers a false start.
• The player does not react within 3 seconds and displays the "Too Slow!" result.

How to reuse this experience

The easiest way to reuse this experience is to carry out the following steps:

1. Open the "Race Start Reaction Game" experience in Composer.
2. Use Save As to create a copy of the experience with a custom name.
3. Customize the experience to suit your needs by replacing the background imagery, modifying the stylesheet, changing the instructional text, or adjusting the appearance of the starting lights.

The range used by the Random Number Generator can be adjusted to control the possible delay between the lights illuminating and going out. Increasing the range can make the starting sequence more unpredictable.

The conditional triggers associated with the ChronometerMS Interface Asset can also be modified to control how the player's reaction time is displayed. In this sample, separate groups are used to display reaction times in milliseconds or in seconds with milliseconds, depending on the recorded time. These conditions and display formats can be customized to suit your own experience.

The visual presentation of the starting sequence can also be completely customized. Because the five lights are created using standard Ellipse assets, you can change their size, position, colors, or replace the motorsport-inspired design with your own visual cue while retaining the same underlying game logic.