In this tutorial, you will learn how to use the “Number” type variable.
This type of variable allows you to quantify user actions and, depending on the expected scenario, create one or more consequences. This variable can be a positive or negative number, integer or non-integer.
In order to see how to use the numeric variable, we will perform the scenario below:
“In the experiment, we have one gauge and two buttons. When you click on one of the two buttons, the gauge moves one step forward. Conversely, when you click on the other button, the gauge moves one step backward."
Before starting, click to watch and test the final rendering.
To perform this experiment, you can use the image elements available in the Speedernet Sphere online library.
Note that the picture element of the gauge has 3 aspects.
Once the elements are in place, here are the steps to follow:
- Add a numeric variable
- Create the interactions necessary to change the value of the variable
- Define the consequence(s) following a change of variable
Step 1: Add an numeric variable
At the bottom of the elements column, open the variables window.
In this window, you will add and configure the variables of your project:
- Add a numeric variable; “Add a number”.
- Click on the cogwheel to access the "Edit variable" window.
In this window, specify the necessary parameters:
- Name the variable
- Choose the type of variable; "Number"
- Set the default value for your variable. In our example, the default is “1”.
- Validate before leaving the window.
Step 2: Create the interactions necessary to change the value of the variables
In this step, we will create interactions that let us change the value of our variable.
Remember that in our example we have two buttons which, on click, change the value of the variable.
Interaction with the plus button “+”
When the “+” button is clicked, the value of the variable will be incremented by 1. In addition, the value must stop at 3 (maximum value) after consecutive clicks.
In the “plus button” conditionals window, add a new conditional, then define the interaction below:
Trigger: If click
Condition: And if the value of the gauge variable “Var-gauge” is “smaller” (type of comparison) than “3”
Consequence : Then the variable “Var-gauge” adds (action to be performed on the variable) “1”
Interaction with the minus button “-”
By clicking on the "-" button the value of the variable will be decremented by 1. After several clicks, the value should stop at "1" (the minimum value).
In the “minus button” implications window, add a new implication and define the interaction below:
Trigger: If click
Condition: And if the value of the gauge variable is “greater” (type of comparison) than “1”
Consequence: Then the variable “Var-gauge” subtracted (action to be performed on the variable) “1”
As you can see, Speedernet Sphere offers you different types of comparisons as well as different actions to perform at the level of the numeric variable. You can use them and combine them according to your scenario.
Step 3: Define the consequence(s) following a change of variable
In this last step, it is necessary to define the expected consequence(s) after changing the variable.
Open the variable conditionals window; located at the bottom of the elements column.
Add a conditional for each expected consequence according to the value of the variable:
If the variable “Var-gauge” is equal to “1”
Then, the aspect of the element "gauge" is in aspect 1 (image with a lit star)
Proceed in the same way for the following cases; if variable is equal to 2 then to 3.
This tutorial presents one use case of the numeric variable. You can use this variable for other types of scenarios.
Share with us the scenarios in which you will use this type of variable and give us your feedback!
See you soon for the next tutorial!
I also invite you to consult the following tutorials: