2 Ways to Insert Slide Numbers in Articulate Storyline

2 Ways to Insert Slide Numbers in Articulate Storyline

2 Ways to Insert Slide Numbers in Articulate Storyline

Slide numbers are the best way to make learners aware of what extent he/she has completed the course. In Articulate Storyline, it is possible to add slide numbers in two ways. One is using triggers and the other is using a trigger with JavaScript coding. The former is an easy way and used by most of the developers, whereas the latter is used by a few and needs a little knowledge in JavaScript.

For both the processes, place the text box with the variable name between the two  ‘%’ symbols  (as shown below) at the place where you want to see the slide number.  This adds the value to the variable in the text box that is between the two ‘%’ symbols in the preview.

Page Numbers

Let’s see both the strategies.

1. Using trigger

It’s an easy way to add slide numbers in Storyline using triggers. It involves just 2 steps.

  1. Create a new variable and set the name as ‘pageNumber’ and set its type to ‘Number’ and retain its initial value as zero (default).

    Create a new variable

  2. The second and last step is to add a trigger, which changes the pageNumber to a number which you want to add to your slide. For our illustration, let’s set it to 1.

add a trigger which changes the pageNumber

We can now preview the slide to find the page number added.

2. Using trigger along with JavaScript

This is an easy and also interesting approach of adding page numbers. This requires just 2 lines of JavaScript code. The only single step we have to do is to add a single trigger, i.e., execute a piece of JavaScript code when timeline starts.

execute a piece of JavaScript code

The script will be included to the trigger by clicking on the Script button, which is highlighted on the above screenshot/image. All we have to do is just paste the below code in to the script area and click the OK button.

var player = GetPlayer();

Click on OK button

Here GetPlayer is the method used to get the properties of our storyline player and SetVar is to set the page number to 1. Replace 1 in the code above with the desired number in each slide to add that as current slide number.

That’s it! We have now finished the two ways of adding slide numbers in Storyline.

Do you find this useful? Please do share your comments and information, if any.

View eBook on Articulate Storyline for Building E-learning Courses

  • estelle


    Thanks a lot for your ideas.
    However i ‘ve tried both ways and none seems to work. I’m not sure what i do wrong. (I’m not a developer and know nothing about javascript, i’m just a teacher :-))
    On to which part of the slide is the page number supposed to be diplayed ?

    Thanks for your help