💬 Personalize a text/score
To personalize a text, it need to be "formated" by variables in a graph. A variable is an indicator which can see its value vary.
Here is the value that can have each type of variable:
Boolean: True or False
Number: 1, 2, 3...
Text: chainofcharacters
Here, we will see how to create advanced Text types variables.
go to https://creator.celestory.io/home/examples
Open an example by clicking on its cover or create a New Project.
Let's open the Bot example (for example!).
Let's delete the part of the graph after the first choice to test the Type variable.
To remove a variable, go to Main Menu/Variables then click on Remove.
Click on Add variable.
by clicking on Add variable and select Text as Type of the variable.
The fist one will be Colour of the Pill. Then click on Add variable.
Write x as the Initial value.
Doing the same process, let's create a second text variable called User name with the initial value of y.
that has the feature to change the value of a variable when the Storyline passes through this block. Create also a Dialogue block after the choice.
Right-click on an empty space of the Graph and click on Add blocks
Click on the Assign block to make it appear.
Hold the click on the variable dot and drag the mouse to an empty space of the graph.
A contextual menu appears to select the variable you want to changer the value of. Select Colour of the Pill.
Then the variable dot is linked. The value dot is linked too.
Double-click on the Assign block.
Write red the the value case. That means the Storyline, as going into the block Assign, will change the Colour of the Pill from x to red.
You can close the Assign window. Link the Assign bloc to the choice block and the Dialogue block.
Let's do the same process to create another Assign block that transform the Colour of the Pill from x to blue.
by opening the Dialogue block.
Personalized line are called "formated text" and the part to format (aka personalize) has to follow the syntax {{ z }} where z is an unkown.
Let's write the line from the character Alex:
Alex: You chose the colour {{ z }}
When you close the window, the unkown is automatically recognized by the Dialogue block and a z appears.
Click and hold left click on the z dot and extend it to an empty space of the graph. You have to select what z represents.
Select Variable Colour of the Pill in the contextual menu.
A Colour of the Pill variable block appears.
Note that you can create as many variables blocks as you want, but you can also minimize the number of your variables blocks by linking it to multiple representation.
So you also could have done that configuration:
by clicking on Play.
The Play test and the Debug windows appear.
Note that by clicking on the Play test window to preview the user experience, the Storyline illuminates the current block.
Click in the Debug window on the Variables tab to see the current value of the text variables. Colour of the Pill has x and User name y.
As you click on the Red choice for example, the value x becomes red.
In the same time, the Dialogue block displays the personalized text of Alex, showing the user the current value of the text variable.
If we close the Play window and if we do another preview by re-clicking on it, but this time making the Blue choice, the same personalized text will show the other current value: blue.
You can close the Play test window.
by creating the block Imput text.
The Imput text block appears.
Open it.
The button text is the text which will be display on the button to validate the user text entry. It it by default "OK".
You can change the button style with a predefined style or your own (to create in Main Menu/Style).
Then scroll down the window.
The button text style is the design of the validation button.
Imput style let you change the design of the writting zone.
Imput text style let you change the design of the text written by the user.
Let's write on the button text: Validate my name.
Then close the window.
by creating an Assign block.
Extend the variable dot of the Assign block.
Choose User name as it is the variable we want to change the value of.
Then link both blocks by linking the value dot of the Imput text block to the value of the Assign block (it will replace it).
by creating another Dialogue block in which Alex will welcome the user. You can write:
Alex: Welcome {{ z }}.
Link the Dialogue block to the Assign block and extend the z dot to the Username variable.
The User name variable block appears.
You also could have linked the z dot to the previous variable block as their number don't have influence on the Storyline.
by right-clicking on the block and select Play from this block
You preview directly the graph from this point.
Click on the Variable tab of the Debug window. As you haven't made the user path to change the value of the Colour of the Pill variable, its value is still x.
As the user, write your name on the Imput text window. Then click on Validate my name.
Non only you see the User name variable changing of value with here Peter but also the Dialogue line being personalized with the same value.
You can now delete the graph after the Red or Blue choice for the next step.
Indeed you can also use personalized text to display a custom value of Number or a Boolean variable and ou can also display a personalized text on an image.
The Boolean type variable, Red pill taken, has the value False by default.
For example, let's create 2 Number type variables, Courage and Safety.
Be careful while creating the variables to chose the right type.
Let's assume that Courage and Safety have a initial value of 5/10.
by creating a first Assign block after the Red choice, extend the variable dot and choose Red Pill taken as the variable, then double-click on the Assign block to set the change of the value as True.
Then create 4 other blocks: 2 blocks of Increment after the each choice, then 2 blocks of Decrement.
Link then to the following variables and double-click on each block to change the number of points you want the value change of.
Let's say that:
Choosing the red pill adds 4 points of safety and substracts 1 points of courage.
Choosing the blue pill adds 2 points of courage and substracts 3 points of safety.
You should have a sept up like this:
In details, you can see here the changes in the blocks.
If you want, you can write the operation on the block titles like this. You get a visualization of you mathematical changes directly on the graph.
Difference between an Image block and a Display block:
An Image block will show an image on the feed on which you can add a personalized text.
A Display block will show an image on Full screen and it will interrupt the feed. The user will have to click on it to come back to the feed.
Link the Image block to the previous Decrement blocks and double click on it.
Click on + then click on the Eye to select an picture.
Go to Objects folder and select the Laptop white image file by double-clicking on it or clicking on OK.
Scroll down into the Image block window. Here you can change the margins of the text regarding the image. Let write a Top margin of 45 pixels.
You can close the Image bloc window.
by right clicking and select Add block.
Open the Format text block.
Format text block let you overwrite a text on an image with a personalized text.
You can write this in the format section (respect the empty lines between):
💪 Courage {{ a }}/10
⛑️ Safety {{ b }}/10
💊 Red pill taken: {{ c }}
Note that as you write it, the unkown a, b, c appears in the window and on the block on the graph.
You can close the window.
Extend each unknow dot and select the regarding variable: a for Courage, b for Safety, c for Red pill taken.
Then hold and left click on the text dot of the Format text and link it to the text dot of the Image text to replace it.
Change the size of the Image block font
by going into Module Settings/Design, scroll down and click on the Image tab.
Select 15 as the Font size and black as the colour.
You can close the window.
by right-clicking on it and select Play from this block.
As we only start the preview from this block, only the initial values of the variables appears.
by clicking on Play.
Depending on your choice, you will get a different scoreboard. As an example we get here:
In that example, the 3 variables are visibles as the user is aware of them.
🌟
Congrats, you know how to personalize any text in your app ! You are now give feedback to your user in every action he makes.
To learn how to master Boolean type variables, go to ☑️ Set up conditions
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
Here is the value that can have each type of variable:
Boolean: True or False
Number: 1, 2, 3...
Text: chainofcharacters
Here, we will see how to create advanced Text types variables.
1. To Start in Celestory
go to https://creator.celestory.io/home/examples
Open an example by clicking on its cover or create a New Project.
Let's open the Bot example (for example!).
Let's delete the part of the graph after the first choice to test the Type variable.
2. Click on Main Menu/Variables
To remove a variable, go to Main Menu/Variables then click on Remove.
Click on Add variable.
3. Create 2 Text variables
by clicking on Add variable and select Text as Type of the variable.
The fist one will be Colour of the Pill. Then click on Add variable.
Write x as the Initial value.
Doing the same process, let's create a second text variable called User name with the initial value of y.
4. Create an Assign block
that has the feature to change the value of a variable when the Storyline passes through this block. Create also a Dialogue block after the choice.
Right-click on an empty space of the Graph and click on Add blocks
Click on the Assign block to make it appear.
Hold the click on the variable dot and drag the mouse to an empty space of the graph.
A contextual menu appears to select the variable you want to changer the value of. Select Colour of the Pill.
Then the variable dot is linked. The value dot is linked too.
Double-click on the Assign block.
Write red the the value case. That means the Storyline, as going into the block Assign, will change the Colour of the Pill from x to red.
You can close the Assign window. Link the Assign bloc to the choice block and the Dialogue block.
Let's do the same process to create another Assign block that transform the Colour of the Pill from x to blue.
5. Create a personalized line
by opening the Dialogue block.
Personalized line are called "formated text" and the part to format (aka personalize) has to follow the syntax {{ z }} where z is an unkown.
Let's write the line from the character Alex:
Alex: You chose the colour {{ z }}
When you close the window, the unkown is automatically recognized by the Dialogue block and a z appears.
Click and hold left click on the z dot and extend it to an empty space of the graph. You have to select what z represents.
Select Variable Colour of the Pill in the contextual menu.
A Colour of the Pill variable block appears.
Note that you can create as many variables blocks as you want, but you can also minimize the number of your variables blocks by linking it to multiple representation.
So you also could have done that configuration:
6. Preview your graph
by clicking on Play.
The Play test and the Debug windows appear.
Note that by clicking on the Play test window to preview the user experience, the Storyline illuminates the current block.
Click in the Debug window on the Variables tab to see the current value of the text variables. Colour of the Pill has x and User name y.
As you click on the Red choice for example, the value x becomes red.
In the same time, the Dialogue block displays the personalized text of Alex, showing the user the current value of the text variable.
If we close the Play window and if we do another preview by re-clicking on it, but this time making the Blue choice, the same personalized text will show the other current value: blue.
You can close the Play test window.
7. Let the user imput a text
by creating the block Imput text.
The Imput text block appears.
Open it.
The button text is the text which will be display on the button to validate the user text entry. It it by default "OK".
You can change the button style with a predefined style or your own (to create in Main Menu/Style).
Then scroll down the window.
The button text style is the design of the validation button.
Imput style let you change the design of the writting zone.
Imput text style let you change the design of the text written by the user.
Let's write on the button text: Validate my name.
Then close the window.
8. Let' assign the imput value to a variable
by creating an Assign block.
Extend the variable dot of the Assign block.
Choose User name as it is the variable we want to change the value of.
Then link both blocks by linking the value dot of the Imput text block to the value of the Assign block (it will replace it).
9. Personalize the next line
by creating another Dialogue block in which Alex will welcome the user. You can write:
Alex: Welcome {{ z }}.
Link the Dialogue block to the Assign block and extend the z dot to the Username variable.
The User name variable block appears.
You also could have linked the z dot to the previous variable block as their number don't have influence on the Storyline.
10. Play test the graph from the Imput text
by right-clicking on the block and select Play from this block
You preview directly the graph from this point.
Click on the Variable tab of the Debug window. As you haven't made the user path to change the value of the Colour of the Pill variable, its value is still x.
As the user, write your name on the Imput text window. Then click on Validate my name.
Non only you see the User name variable changing of value with here Peter but also the Dialogue line being personalized with the same value.
You can now delete the graph after the Red or Blue choice for the next step.
11. Let's test Personalized text for a score board.
Indeed you can also use personalized text to display a custom value of Number or a Boolean variable and ou can also display a personalized text on an image.
The Boolean type variable, Red pill taken, has the value False by default.
For example, let's create 2 Number type variables, Courage and Safety.
Be careful while creating the variables to chose the right type.
Let's assume that Courage and Safety have a initial value of 5/10.
12. Assign the new values of the variables after the first choice
by creating a first Assign block after the Red choice, extend the variable dot and choose Red Pill taken as the variable, then double-click on the Assign block to set the change of the value as True.
Then create 4 other blocks: 2 blocks of Increment after the each choice, then 2 blocks of Decrement.
Link then to the following variables and double-click on each block to change the number of points you want the value change of.
Let's say that:
Choosing the red pill adds 4 points of safety and substracts 1 points of courage.
Choosing the blue pill adds 2 points of courage and substracts 3 points of safety.
You should have a sept up like this:
In details, you can see here the changes in the blocks.
If you want, you can write the operation on the block titles like this. You get a visualization of you mathematical changes directly on the graph.
13. Create an Image bloc
Difference between an Image block and a Display block:
An Image block will show an image on the feed on which you can add a personalized text.
A Display block will show an image on Full screen and it will interrupt the feed. The user will have to click on it to come back to the feed.
Link the Image block to the previous Decrement blocks and double click on it.
Click on + then click on the Eye to select an picture.
Go to Objects folder and select the Laptop white image file by double-clicking on it or clicking on OK.
Scroll down into the Image block window. Here you can change the margins of the text regarding the image. Let write a Top margin of 45 pixels.
You can close the Image bloc window.
14. Create a Format text block
by right clicking and select Add block.
Open the Format text block.
Format text block let you overwrite a text on an image with a personalized text.
You can write this in the format section (respect the empty lines between):
💪 Courage {{ a }}/10
⛑️ Safety {{ b }}/10
💊 Red pill taken: {{ c }}
Note that as you write it, the unkown a, b, c appears in the window and on the block on the graph.
You can close the window.
Extend each unknow dot and select the regarding variable: a for Courage, b for Safety, c for Red pill taken.
Then hold and left click on the text dot of the Format text and link it to the text dot of the Image text to replace it.
Change the size of the Image block font
by going into Module Settings/Design, scroll down and click on the Image tab.
Select 15 as the Font size and black as the colour.
You can close the window.
15. Preview your Image block
by right-clicking on it and select Play from this block.
As we only start the preview from this block, only the initial values of the variables appears.
16. Test-Play the Graph from the start
by clicking on Play.
Depending on your choice, you will get a different scoreboard. As an example we get here:
In that example, the 3 variables are visibles as the user is aware of them.
🌟
Congrats, you know how to personalize any text in your app ! You are now give feedback to your user in every action he makes.
To learn how to master Boolean type variables, go to ☑️ Set up conditions
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
Updated on: 29/03/2021
Thank you!