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
Love it James - thanks for sharing it here!
Hey Jim! This is pretty clever work. Well done!
Ashley and Gary,
I the discussion now includes getting the scene slide count.
Thanks,
Jim
Thanks James for that update and being able to add that element in.
Jim,
Does this work in Storyline 1 as well? I tried but with no luck.
Any thoughts?
gabriella
I'll assume it only works for HTML5 content not Flash
Yes, this is for HTML5.
For those listening, a flash designer with an AS3 background should be able to pull the same info and send back to Storyline.
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. :-)
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:
Hi James,
This doesn't work in storyline 360. I get the following error in javascript console "story not defined". Can you please guide me on how to do this in storyline 360?
Hi Prashant,
I don't know how this will behave in Storyline 360, so you may want to reach out to James directly since he may not be subscribed to this forum discussion.
Also not working in Storyline 3. It displays 0 of 0 for every slide when tested on a server. If there are any adjustments to make it work, that would be great, been wishing this was a built-in feature since Storyline 1
Currently, this only works for HTML5 content, not Flash.
are viewing the story_html5.html
Hi! Yes, I am looking at the story_html5.html on a server.
Does it work for you published out of Storyline 3? I am getting the same error as the 360 person who posted above. The error in the console is that "story is not defined"
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?
Hi Ashley, I can't share our client's file but following the steps James outlines even in a new project I think would do the same thing. Thanks for working on it!
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.
Hi all,
Just tried it in Storyline 360 and uploaded it as an HTML5 SCORM file to an ILIAS server, but indeed, it did not work.
It only shows the variables in the textboxes on the pages.
Any news on using this script in 360/3?
Hi Marcel,
No updates yet - our team is looking into how we could incorporate the types of features that folks were working around with these unsupported methods in Storyline 2, now that Storyline 3/360 had the player behavior rewritten.
Thanks for working on this feature, Ashley. It really is something that should be native to StoryLine. Is there a planned release date for getting V3 to recognize JavaScript the same as V2?
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.
Check this.
Ways to Insert Slide Numbers in Articulate Storyline
way to insert page-numbers
Is there a demo of this somewhere?
Hi there,
Does anyone have any update on that particular topic?
Are the system variable still not taken into account properly in SL3?
Thanks,
Olivier