How to Create a Custom Glossary in Articulate Storyline

How to Create a Custom Glossary in Articulate Storyline

Skilled Articulate Storyline eLearning Designer and Developer

Rema Merrick is owner, lead instructional designer and eLearning developer at Enovate Learning LLC. She has eight years of experience developing eLearning (CBTs and WBTs) and other training modalities for corporations in the airline, utilities and other industries. She holds a master of science in Instructional Technology from Bloomsburg University of Pennsylvania and is a member of ATD Florida Suncoast. Her hobbies include running, practicing yoga and participating in Articulate’s E-Learning Heroes E-Learning Challenges.

Author: Rema Merrick, MSIT
Published: November 26, 2022
Time to Read: 8 minutes  

Summary

Glossaries make terms and definitions easy for users to access during an eLearning activity. Here’s an example of a glossary I created for a recent Articulate E-Learning Heroes E-Learning challenge. The Human Skull Bones project presents content about the bones that make up the human skull.

Completed Custom Glossary

Articulate Storyline has a system glossary that allows you to manually add terms, or import terms from a CSV file, into the glossary. However, if you want more flexibility with how the glossary behaves or to change the look of the glossary, your options are limited with the system glossary. To have more freedom with the behavior and design, you can create a custom glossary.

In this post, I outline how I created a custom glossary for the Human Skull Bones project. Feel free to use this project as a framework to develop your own custom glossary. In addition to the glossary, the project has other slides and interactions. I did not include instructions for building these slides and interactions in this post. This post only includes instructions for creating a custom glossary. Mentions of “the project” in this post refer to the Human Skull Bones project. 

Specifications

Below are the specifications I used for the project.

  • Slide Size: 720 pixels by 540 pixels
  • Glossary Letter Button: Articulate Extra Bold, 12-point
  • Content Text: Calibri Light, 16-point
  • Rectangle Shape Color: HTML #00B0F0
  • Icon Color: HTML #00B0F0

Assets

  • Image: 3-D image of human skull; I found the image on the Adobe Stock website and used Adobe Dimensions to edit it and save it as a .PNG file.

Development Time

The full project includes 19 slides. It took me six hours to design, build and QA (quality assurance check) all 19 slides.

Prerequisites

To successfully complete this interaction, you’ll need to know how to do the following tasks in Articulate Storyline.

  • How to create a new project
  • How to insert a new slide
  • How to add text, images and objects to a slide
  • How to create a slide layer
  • How to create a variable
  • How to create an object trigger
  • How to create a lightbox 

Introduction

This project develops in two main steps: 1) create a content slide to access the glossary; and 2) create the glossary lightbox slide.  

Development Process

Start the Project

  1. Create a new project.

Create the Content Slide.

  1. Insert a new slide and name the slide Skull. Users will access the glossary from this slide.
  2. Insert a skull icon from the Content Library 360. Change the color of the icon to white. Name the icon Skull Icon. Adjust the size and position to X = 533 px, Y = 51 px, Width = 52 px, Height = 69 px.
  3. Insert a rectangle shape; type Glossary in the shape. Name the shape Glossary Text. Change the color of the shape to HTML #00B0F0, if not already. Adjust the size and position to X = 569, Y = 57 px, Width = 125 px, Height = 48 px.
  4. Insert a rectangle shape; remove the shape fill and outline from the rectangle. Name the shape Glossary Button. Adjust the size and position to X = 533, Y = 51 px, Width = 161 px, Height = 68 px.
Illustrates Steps 2, and 4

5. Add an object trigger that opens the glossary lightbox when the user clicks the Glossary Button.   

Illustrates Step 5

Create the Glossary Slide

Add the Object Shapes to the Base Layer

  1. Add a rectangle shape; name the shape Background. Change the shape color to HTML #00B0F0, if not already. Adjust the size and position to X = 60 px, Y = 29 px, Width = 300 px, Height = 482 px.
  2. Add the skull image; name the image Skull Image. Adjust the size and position to X = 360 px, Y = 29 px, Width = 300 px, Height = 482 px.
Illustrates Steps 1 and 2
  1. Add one rectangle shape. Change the size of the shape to Width = 53 px, Height = 51 px. Change the outline color of the shape to white, if not already.
  2. Duplicate the rectangle shape 27 times. You should have 28 shapes total.
  3. Change the name and position of each shape in as indicated in Table 1. Type the corresponding letter of the alphabet in each rectangle shape (e.g., Type A in the A Button shape). Leave the last two shapes blank.
Table 1 Shows Information for Step 5

Download a PDF version of the table.

  1. Recall the first unique letter of each glossary term. In the project, the glossary terms start with an E, F, L, M, N, O, P, S, T or Z. Change the shape fill color of these rectangle shapes to HTML #00B0F0, if not already. Change the transparency of the shapes to 50%.
  2. Notice the rectangle shapes with the remaining letters. These are the shapes with letters you will not need for the glossary. In the project, these letters are A, B, C, D, G, H, I, J, K, Q, R, U, V, W, X and Y. Change the shape fill color of these rectangles to white, if not already.
Illustration of Steps 6 and 7

Add the Slide Layers

  1. Add a new slide layer. Name the layer the first letter of the first term in the glossary. In the project, it’s an E.
  2. Add a text box. Adjust the size and position to X = 360 px, Y = 29 px, Width = 300 px, Height = 482 px.
  3. Change the shape fill color to HTML #F2F2F2, if not already.
  4. Duplicate the layer for the remaining letters you will use in the glossary. In the project, there will be 10 layers total, one for each letter: E, F, L, M, N, O, P, S, T and Z.
  5. Change the name of each duplicated layer to match each remaining letter in the glossary. For the project, the remaining letters are F, L, M, N, O, P, S, T and Z.
  6. Type the appropriate term(s) and definition(s) in each text box on each layer. You may add an image or any other resources that may benefit the user.

Add the Object Triggers to the Base Slide

  1. Add the trigger Show layer E when the user hovers over E Button; Hide layer when the user hovers out.
  2. Repeat step 1 for the remaining slide layers. In the project the slide layers are F, L, M, N, O, P, S, T and Z.
Illustrates Steps 1 and 2

Hide the System Close Button on the Glossary Slide

  1. Add an Execute JavaScript trigger when the timeline starts on the glossary slide.
  2. Select the JavaScript link to open the JavaScript Editor.
  3. Type the following JavaScript code. This code hides the system close button: Document.getElementById(“light-box-close”).style.display = “none”;   
Illustrates Steps 1, 2 and 3

NOTE: The system close button displays on the lightbox slide in preview mode. Once you publish the file, the system close button disappears.

Add a Custom Close Button to the Glossary Slide

  1. Add a close button icon from the Content Library 360. Name the icon Close Icon. Adjust the position and size to X = 637, Y = 29, Width = 57, Height = 57.
  2. Add a rectangle shape. Name the shape Exit/Close Button. Remove the shape fill and outline. Adjust the position and size to X = 637, Y = 29, Width = 57, Height = 57.
Illustrates Steps 1 and 2
  1. Add an object trigger to close the lightbox when the user clicks the Exit Button.
Illustrates Step 3
  1. Notice the final product.
Shows the Completed Glossary

Wrap Up

Creating the custom glossary involves two main steps. First, create the content slide with the glossary button, which allows the user to access the glossary. Then, create the glossary slide

Please share your comments regarding the project and development process. I would love your feedback on what you found helpful, what you found confusing and what additional information would have been more helpful.

ENOVATE LEARNING HOW -TO CREATE INTERACTIONS GUIDE

Contact

If you have any questions about this article or our company, please contact us at info@enovatelearning.com or (727) 897-5456.