Storyline 2: Adding Dynamic Slide Numbers Simplified

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.