Storyline 2: Adding Dynamic Slide Numbers Simplified

Sep 16, 2016

This discussion demonstrates how to add dynamic slide numbers to a course within Articulate Storyline 2. And allow you to add, move, and delete slides without affecting the current slide number or slide count.

Remember: Due to local browser security issues JavaScript is not supported in the preview mode, or when viewing the flash version of your course locally. When working with JavaScript in storyline always test your course on a web server.

You should have an understanding of the following:

  • How to create variables
  • Now to navigate the to the slide master
  • How to use the trigger wizard and insert JavaScript
  • How to add variable references to a slide

1. Navigate to the slide master and add the following JavaScript trigger and set it to execute when the timeline start.

// -- Get Player

var player = GetPlayer();

 

// -- get current slide number

// ---- NOTE: Quiz Question must be in the Scene and not Drawn from a Bank

var thisSlideIndex = story.allSlides[player.slideIndex].sceneSlideIndex+1;

player.SetVar("vCurrentSldNum",thisSlideIndex);

 

// -- get Scene Slide Count
var thisSceneSlideCnt = story.allSlides[player.slideIndex].parent.slides.length;
player.SetVar("vScneSldeCnt",thisSceneSlideCnt);

2. Navigate to the triggers panel and create two number type variable for the scene slide number and scene slide count with default value of 0.

vCurrentSldNum
vScneSldeCnt

3. Navigate to each “Slide Master Layout” where you want to display the current slide number and scene slide count. Insert a text box with variable reference for vCurrentSldNum and vScneSldeCnt.
Note: The first variable reference is current slide number and the second is scene slide count.

%vCurrentSldNum% of %vScneSldeCnt%

4. Now publish your storyline course view using HTML 5 output.

30 Replies
steve cc

James, I have seen something similar before.  However relying on the total number of pages in the Story file is not always practical.  For instance it becomes tricky when you have 'extra' pages being used for a light-box.  

I've also been conducting an informal poll (and would welcome anyone on the blog sight to post responses) asking the practical purpose for using page numbers anymore.  With the advent of learner branching the 'number of slides' in a learner path is different depending on the choices they make going through the training.  Additionally many other development platforms are now using 'web page style' learning (think more top-to-bottom versus left-to-right) where the concept of a page really doesn't matter anymore.  (To think about this last point differently, does anyone really worry about what page number they are on when they surf a company site? )

Thanks again and thanks to anyone else who wants to add their 2.5 cents.  :-)

James Holt

Steve, 

The "thisSceneSlideCnt = story.allSlides[player.slideIndex].parent.slides.length;" drawn from the parent or current scene and not from the overall course or storyline file. 

I agree with you there are instances when slide numbers are not practical, light boxes, branching, system simulation are among the few. For those instances, I use a layout that does not have the current slide number/scene slide count references.   

Example course flow:

A course containing 2 linear sections with several slides that are lightbox and a branching exercise between the linear sections.

Could look something like:

  • Four scenes
  • Scene 1 Linear (with slide number reference)
  • Scene 2 Branching Exercise (without slide number reference)
  • Scene 3 Linear (w/slide number reference)
  • Scene 4 contains all of the lightbox slides (without slide number reference)
Ashley Terwilliger-Pollard

Hi A, 

Storyline 3 and 360 are based on the same set up for HTML5 and Flash content, and I know that some Javascript elements for Storyline 3/360 are not working correctly in the HTML5 output which our team is investigating. Do you have a copy of this .story file that you'd like to share with our Support Engineers to confirm if it's the same issue? 

Ashley Terwilliger-Pollard

Hi A,

I certainly understand if you can't share the file. The Javascript shared here was for Storyline 2, and Storyline 3/360 changed the files created during publish and so the same type of code may not work. The issue I mentioned is specific to Javascript code about passing completion status, accessing some player variables, etc. so it may be different than what was sharing here.

We'll keep folks posted on the latter described issue and I'll keep my eyes out for other issues to report to our team that match what you've described.

Ashley Terwilliger-Pollard

Hi Tracy,

Storyline 3 still recognizes Javascript triggers the same as Storyline 2, the difference is the use of internal/system variables such as those mentioned for gathering slide numbers or passing completion.

Based on the rewrite of Storyline 3/360's publishing engine it changed access to those things (one of the reasons why we've shied away from opening those up as if changes are made to the publishing process it impacts those pieces). 

Our team is looking into options to allow those concepts and ideas as built in features vs. having to modify the published output. So it's a bit further out on the horizon, but on our radar to continue investigating.