How to Create a Drop-down List Interaction in Articulate Storyline

Recently, a question came up about how to let users select items from a list using a drop-down interaction instead of radio buttons. Here is one easy way to do this using object states and layers. You can see a published  example here.

The first step is to create the initial drop-down box. This can be a simple text box formatted to your liking or, if you prefer, you can use an image instead.

For this drop-down box create one custom state that corresponds to each item in your drop-down list. This will be used to display the selection that is made.

Next, create a new layer to display the the list items when the drop-down is expanded. Although not necessary, adding a hover state to each item in your list will give it a nice, realistic effect.

To show what selection is made by the user we need to set a trigger on each list item that changes the state of the original drop-down box to the state that matches the selected item. For example, selecting “Training” from the list changes the state of the original drop-down box to the “Training” state to reflect the choice that was made.

Finally, you’ll need a second trigger on each list item that hides the current layer containing the list.

View published demo   |   Download .story file

This example is for a single question. If you need more than one drop-down on a slide, just create a separate layer and set of buttons for each question. You can use this interaction as a freeform question or combine it with variables for a variety of other uses. 

Drop-down lists are also a good option for e-learning course navigation, as Nicole demonstrates in this tutorial.

Do you have any examples or other ideas for using drop-down interactions in your e-learning courses? Share them in the Storyline forum.