Conditions are lead by variables in a graph. A variable is an indicator which can have a varying value.

Here is the value that can have each type of variable:

Boolean: True or False
Number: 1, 2, 3...
Text: chainofcharacters

We will see here how to create the most simple type of vairable 'boolean variables'.

1. To Start in Celestory

Go to https://creator.celestory.io/home/examples

Let's open the example that is titled 'Bot (en)' this is a project that is pre-edited for the purpose of this tutorial.

Simply click on the cover picture to open the project.

Let's delete part of the graph after the first choice to test the Boolean variable.

2. Click on the Main Menu / Variables

To remove a variable go to the Main Menu, in the far left corner with the name of the project file on. Scroll down to Variables click once on Variables to open up a pop up window then click on Remove

Click on Add variable

3. Choose Boolean as the type of the Variable

Name the variable. The variable has its default value set to False.

Let's name it 'Red pill taken' for this example. 

Like in the movie Matrix, following the Storyline, the user will face a choice: 

  • Take the Red 🔴 or the Blue pill 🔵.

The Storyline will be divided into 2 branches, they can then be connected to another block, we need to now change the value of the variable 'Red pill taken'

4. Create an Assign block

An assign block has the feature to change the value of a variable when the Storyline passes through this block.

Right click on an empty space of the Graph and select +Add block then select the Assign block


Click on the dot next to where it is written variable located on the Assign block, then drag the mouse to an empty space.

A pop up menu appears to select the variable you want to change the value of.

Click on the variable (x)Variable Red pill taken to make it appear on the Graph.

5. Edit the Assign block

Double click on the Assign block to change the value of the variable. As the variable is boolean the value can only be True or False.

Change the boolean switch value to True. Exit out of the pop up windon.

Let's connect the Assign block to the previous block choice and then to a Dialogue block. Click and drag the arrow next to 'Red' on the Choice block and drag it to the arrow on the Assign block.


Create a Dialogue Block using the same method; right click anywhere on the graph and +Add block, choose the Dialogue block.

As we don't have to change anything, connect directly the Blue choice to the Dialogue block, by dragging the arrow to the dialogue box.

Therefore we have one true and one false variable.

To move the blocks click on them and drag, blocks can be moved in an direction.

6. Write a conditional sentence in the Dialogue block. 

For example a character can pass that block to enter and play if he has taken the Blue pill in this example.

Click on the Dialogue block and add a sentence to the dialogue box.

 For Example: 'Alex: If you have chosen the blue pill you can enter the Matrix.'

7. Create a Condition block

This allows you to test a condition.

Add a Condition block to the graph and connect the previous Dialogue block to it.

As a boolean variable is already 'True or False' we simply have to click on the dot next to condition on the Condition block and click the 'Red pill taken' variable.

A condition block is the consequence of an action taken in a previous choice block.

For example if you choose the Blue pill and not the red pill you can enter the Matrix.

If the variable had a Number or Text and not just True or False, we could have selected the block Expression to test a logical expression (x).


The condition verified is now added to the graph.


8. Create 2 different Dialogues blocks 

Here are the different consequences:

You can add the sentences to the Dialogue blocks.

  • Alex: 🤔 You took the Red pill. Sorry, you cannot pass.
  • Alex: 😀 You didn't take the Red pill. Welcome to the Matrix!

Close the Dialogue boxes.


9. Verify the condition 

Preview the user path by clicking on Play. Click in the pop up 'Play test' window to drive the Storyline forward.

10. Open the Debug window 

This helps you to test the user path.

Just next to the Play test window is the Debug Window. On the General tab, click on Center view on block to find the current block played by the Storyline.

You can see the block is now highlighted.

See also the block ID here you can double-click on the block ID to search later for this block on Main Menu/Search block.

The Variable tab let's you see the variables value in real time. As you preview your app by clicking on the 'Play test' you can see them changing.

Let's connect the choice Red, the 'Red pill taken' variable becomes True.

In this storyline the condition is if you take the Red pill (True) you cannot enter the Matirx. The Condition block is redirected to the Dialogue box where Alex explains the consequence of the previous actions. The variable 'Red pill taken' is then visible by the user this reminds them of their choices and behaviour.

It is good to note that you don't have to let show all or multiple conditions to the user. We call those variables then invisible.

🌟
Congrats, you gave your scenario its first intelligence! You are now ready to create an in depth simulation where every link in the Storyline can change by an infinity of variables.



To go further and learn how to master Number type variables, go to 🧮 Sep up conditions (advanced)


To understand all the elements in the interface, go see the Tool Elements.




Did this answer your question?