Create a counter

With the counter you can score points after user actions, display the result and trigger actions based on the result. Make your counter by creating a Score variable or use an invisible Multi-State component.

Create a score variable

A variable associates a unique identifier with a value that can change. You can create this "score" variable using the data provider and reuse it to display the final result.

Let's take the example of a 20 question quiz, each question scores one point. The objective is to increment the score with the correct answers and display the user's final score.

Create the "score" variable

Go to the  Data Provider and create a new  Property
Rename this property:  score
It is of Number type and has a default value of  0.

Increment value

Prepare the questions and answers, and the links between the different questions.
For correct answers, you need to increment the score value.
Select the correct answer and click on Actions.
Choose the action Interact with a component > select the data provider and the action Modify data. Here are the parameters of your action: 
Data: /score 
Function: Increment
Value: 1

Display "score" final value

Now let's display the score result at the end of the quiz, i.e. the final value of the variable "score". 
Prepare your final screen. Insert a block of text that will represent the number of points. 
In the Properties window, click on the Dynamic Data icon and the Add > Text button.

Replace my-bind by: 


Trigger an action based on score

If you want to trigger an action based on the score, you need to create a condition.

Use an invisible Multi-state component

The Multi-state component allows you to reproduce a counter and all its states. For a 20 questions quizz where each question yields one point, the component includes n+1 states, where n is the number of points. This solution is not viable if the number of points is too high, you have to create a score variable.

Insert the Multi-state component

Click on Components and insert the Multi-state component. Place it in your foreground so that it is persistent in spite of the screen change and place it out of focus. Rename it "score".

Create 21 states inside this component. Rename state 1 "zero", state 2 "one" etc... 

Increment the component

For each correct answer, the score must be incremented. 
Select the correct answer and click on Actions.
Create an action Interact with a component > Multi-state > Go to next state
At the end of the exercise, the Multi-state component is on the state corresponding to the final score.

Display a score

To display the score, the Multi-State component must be used. 
On the final screen, you present the results. Prepare a new Multi-state component that visually displays all possible scores. Rename it "result".
Select your "counter" multistate component and create a trigger for each state. 
For each trigger, create an action Interact with the component (Result) > Go to selected state.

 Tip : it is possible to go further and assign different scores depending on the answers. The Go to next state action includes an interval and it is possible to increment the number of your choice. It is also possible to make people lose points by using the Go to previous state action.

Still need help? Contact Us Contact Us