Using a Storyline 360 Lightbox for a Glossary Slide

You can use lightbox slides in Storyline 360 to display content in a “pop-up” window over the current slide you’re viewing. They come in handy when you need to provide additional content in which the learner can access from any slide in your course. Here are a few things you can use them for:

• Resources
• Reference Guides
• FAQs
• Table of Content
• Navigational Instructions

In Articulate Challenge (#413), course designers were asked to show how a lightbox slide could be used as performance support in e-learning. In other words, use a lightbox that allows someone to perform a task “at the moment of need.” For my task, I chose to use the lightbox to provide a glossary for a fictitious course on photographing birds and the associated camera settings.

Key elements used in this mockup

• Background music: The ability to add background music tracks to Storyline 360 became available in April 2023. I added it to this mockup!
• Full-Screen Toggle: This feature came out in November 2022. It allowed you to scale the content to fill the screen. Of course, give it a try when you view this mockup.
• Cover Photo: This feature, which came out in late 2021, allowed you to address an interesting situation that occurred when you used media on the first slide of your course. In 2018, browser autoplay policies changed and became more restrictive. In my case, I used a video as a backdrop for the title slide. If I had not added a cover photo, you would see a black screen with a play button.
• *Javascript: The lightbox in Storyline 360 uses “X” to close and return to the current slide. This “X” is often placed in the upper right corner and is not always as visible as it should be. I removed the “X” and replaced it with my own custom button to close the slide. I did this by using the following Javascript trigger executed when the timeline started on the lightbox slide: document.getElementById(“light-box-close”).style.display = “none”
• Lightbox: I used the lightbox to display glossary terms. David Anderson provided a similar idea: each term was placed in a different layer. This provided a central location to establish and manage the glossary terms.
• Variables: T/F variables were used to determine which layer on the lightbox slide would be displayed after a learner clicked on a term. When the learner closed the lightbox slide, the variable reset to its default value of False.

*Jonathan Hill (another developer who posted his sample on this same challenge) mentioned using this same Javascript trigger. I mentioned his name here as he reminded me it was possible to remove the "X". This same script has been mentioned in several Elearning Heroes posts over the past 4-5 years.

This line of code is hiding an HTML element with an id attribute value of "light-box-close" by setting its display style to "none".

My submission