"Stopwatch" in Speedernet Sphere

In this tutorial, you will discover how to use the “Stopwatch” variable.

This variable allows you to create a time tracker as the user navigates the experience.

You could use it in a training course or an escape game, for example, to:

• See how much time the user spends on a particular action or the whole experience (for improvement purposes)
• Trigger other actions or display elements at a specific moment

In this tutorial, we will perform this example of scenario:

“In this experience, there are 4 images. On click on the “Play” image, a 40-second countdown starts. When the time reaches 30 seconds, the first smiley is greyed out. At 20 seconds, the other smiley is greyed out too. At 10 seconds, music is played”.

Steps

Once the elements are placed, here are the steps to follow:

• Create a Stopwatch type of variable
• Create the required conditionals to change the value of the variable
• Define the right conditional consequences after the variable switch
• Display the variable

Step 1: Add a Time variable

In the left panel, open the “Variable Manager” by clicking the variable button  .

 In the “Variable Manager”, you can add and configure all your variables.

Now:

1. Click "Add a variable"
2. Rename the variable
3. Choose the “Stopwatch” type

Step 2 : Create conditionals to change the variable

Access the “Scenario Mode”  and add a conditional for each element related to the time variable.

Remember that in our example, we have an image that changes its aspect after a certain amount of time.

Step 3: Define the consequence when the variable is launched

You must here define the expected consequence(s) after the variable switch.

Create a conditional for each expected consequence according to the value of the variable:

For this example of scenario, here are our conditionals:

Step 4: Display the “Stopwatch” timer

Let’s see how to display the “Stopwatch” timer in your experience. This could be useful for example in a training course or a game in order to display the time spent on one specific action.

First, you have to add a new Text element.

You should already have created a “Stopwatch” variable that you will now rename “Stopwatch”.

Let’s now fill in our text with the same name we called our variable, i.e. “Stopwatch”.

The text should now appear with curly brackets without any spaces: {Stopwatch}.

You could also customize the background and text color of the element.

For the displayed stopwatch to work properly, a conditional should be configured.

For example: By clicking an image, the “Stopwatch” variable starts.

Please note that our variable will appear as a text (“Stopwatch”) in the design mode, but it will be displayed as a real timer with seconds ticking away in the preview mode and in the real experience.

Here is the final result:

Please share your scenarios and comments!

See you soon in our next tutorial.

You can also have a look at the other articles about variables:

• Number type variable
• Boolean type variable
• Enumeration type variable
• Timer variable