Blog

This week’s eLearning Heroes Challenge was to build an interactive glossary. For this challenge, I decided to use a Spotify-inspired graphical treatment. This was fun for the demo, if not practical for an actual course. For the functionality, I wanted to build a glossary that has traditional browsing capabilities with the ability to search for what you want.

I knew building this kind of glossary would have a lot of components to it. As far as organization, I’d need to have clickable letters, then clickable words within that, then finally the definitions for each of those words. In addition, I wanted the search to be able to pull up specific definitions, rather than just taking the user to the relevant letter’s page. This would mean that I wouldn’t have to build separate systems for browsing vs. searching. I also wanted this to be on a single slide.

Building Browsing Functionality

Given all of that, this was the structure I decided on: a layer related to running a search and then layers for each letter of the alphabet that has glossary terms. The layers for letters would be set to hide all other slides when they appear, whereas the search layer would not.

For the term names and definitions, I decided to make them a single object by putting the definition in the Selected state. This would come in handy later when I built the search functionality.

Building the browsing functionality was pretty simple with that organization in mind. First, I created triggers that opened the letter layers when the corresponding letter was clicked on. Next, I added all of the term buttons on a layer to a button set so they’d be mutually exclusive. The built-in Selected state took care of displaying the definitions when the user clicks on individual terms.

Building Search Functionality

Next, I added in search functionality. In Storyline, you have to tell the program what to do for each search term. For a full alphabet, that means you’ll need A LOT of triggers. Whenever you’re making something like this that’s going to need a lot of triggers or layers, make one with full functionality, then duplicate it. Otherwise, the project build will take forever!

I started by creating a search icon on the base layer of the slide, then a “searching” layer with the search field expanded. Besides the rounded rectangle of the search field, I added in a text entry box for the user to type in. This text entry would change a variable to the user’s input when the control lost focus (by pressing a key or clicking the magnifying glass icon to run a search).

Once the user’s search term is stored as a variable, you can execute the search using a trigger like this:

That will open the correct layer. Then, you can use a trigger on the letter layer like this to display the correct term:

Making It Even Better

So that’s the basic functionality taken care of. But now, we need to account for user behavior. When I Google something, I tend to type in my search term and press the Enter key. I don’t often use my mouse to hit the search button. To allow for that behavior in my glossary, I duplicated all of the Show Layer triggers based on search terms and modified the When condition:

Next, I needed to account for no search results. What happens when the user searches for a term that doesn’t exist in the glossary? I didn’t want nothing to happen, so I built a “No Results” object that’s defaulted to a Hidden state and overlaps the search field. I then created a trigger to set the search term variable to noresult if it wasn’t on the list of available search terms. When the user tries to run a search by clicking the search button or pressing enter, it would display the No Results object. That object will disappear and reset the search term when the user clicks on it.

Finally, I reset the search whenever the user clicked on a term in a letter layer. That way, they could search, browse, and go back to search without seeing their previous search term in the box.

The Result

See the glossary in action here.

If you’d like to use this for your own project, download the Storyline 360 .story file here.

The definitions used in this demo came from Designveloper, Zymo, and Circle Studio. The photo used on the title page is from Pexels and the font is a free font called Montserrat.