How to Set Unique Slide IDs and Enable JavaScript Navigation in Articulate Storyline 360

Step 1:  Open Your Project and Access Slide Master

✔ Launch your Storyline 360 project. 
✔ From the top ribbon, click View > Slide Master.
✔ This gives you a central place to control behaviors across multiple slides and layouts.

Step 2: Create Slide ID Variable

You’ll need a variable to store the unique ID of each slide.

✔ Go to Variables > Click + 
✔ Create a new Text variable named: slide.id 

This variable will be updated with a unique value (e.g., slide_intro, slide_quiz1, etc.) each time a new slide is loaded.

Step 3: Assign Unique IDs to Each Slide

For each slide or layout:

Add a Trigger:

✔ Trigger Action: Adjust variable slide.id
✔ Value: “slide_welcome”, “slide_menu”, etc.
✔ When: Timeline starts

This ensures every slide has a unique, identifiable reference.

Step 4: Create a Navigation Trigger Variable

✔ Next, create a Number variable named: JumpToSlide.

This variable will be used to control navigation through JavaScript.

Step 5: Set Button Actions on the Slide Master

Now assign values to your buttons that correspond to specific slides:

✔ Button 1 → Set JumpToSlide = 0
✔ Button 2 → Set JumpToSlide = 1
✔ And so on…

These numbers will match the index of your slide ID list in the JavaScript code.

Step 6: Add a JavaScript Trigger for Navigation

On your Slide Master, create a trigger to run JavaScript when JumpToSlide changes.

Use this JavaScript script:

var idList = [“6XsRYr98ERZ”, “6OeymDUTdyp”, “6g6O2ngUya3”, “6cUWADLFfdl”, “6Ha68Y4P6Nx”, “5kZqpnMY0lD”];

var choice = GetPlayer().GetVar(“btnNum”);

GetPlayer().JumpToSlide(idList[choice]);

Note: Make sure slide IDs in the JavaScript match the ones assigned in Step 3.

Step 7: Test Your Navigation in Review 360

✔ Publish the course to Review 360
✔ Test all navigation buttons
✔ Make sure each slide jump behaves as expected

Making JavaScript Work in SCORM-Enabled LMS

When publishing to SCORM, JavaScript sometimes fails due to LMS restrictions. Here’s a quick fix:

Step 8: Edit story.html Manually

After publishing your course:

✔ Go to your published output folder.
✔ Open story.html in a code editor like Notepad++ or Brackets.
✔ Scroll to the bottom and find the closing tag.
✔ Paste the following HTML script just before that tag:

HTML script:

window.autoSpider = true;

✔ Save the files
✔ Zip your course folder and upload it to your LMS
✔ Test the navigation again in the LMS environment