Creating Custom JS driven Table of Contents

Aug 11, 2020


I'm working in Storyline 360 and publishing it to an LMS. What I would like to be able to do is build out a custom javascript driven table of contents. I have a pretty good understanding of the data.js file that outputs when I go to publish the course out of Storyline. Is there a way or has anyone created a method for reading the contents of the data.js file from another file which then inserts a table of contents menu into the main story.html file?

For example, if my course has 5 slides, the data.js file will include the ids for the 5 slides. Is there a way for me to tell another file to read the data.js file, pick out the data blocks pertaining to specific slides, and create hyperlinks for the user to click on if they wish to navigate between the 5 slides.


I'm staying away from the default table of contents as I'd like to customize the look more to suit my client's branding and style guidelines. Any advice or thoughts are appreciated. Thank you in advanced

1 Reply

I haven't tried this specific solution but a non JavaScript solution I use all of the time is to use a lighbox slide as a menu. 

1st, create a new scene and your menu slide. Keep this out of the course path so the user doesn't navigate directly to it.

Then modify the player:

  • Click Player
  • Deselect "Menu"
  • Click the New Tab icon
    • Name the tab Menu
    • Set the Action to Lightbox
    • Select the slide you wish to use as the menu

Using a lighbox slide as a menu gives you a great deal of control over the look and feel of the menu items.

This discussion is closed. You can start a new discussion or contact Articulate Support.