Building a Circular Menu Navigation

The latest ELH Challenge asked members to build a circular menu navigation. One of the inspirations for this challenge was Joshua Stoner’s excellent circular menu with animation post.

circular menu colorsWhen Joshua first shared his nested menu, I really liked what he built. In fact, I modified his design and built a nested timeline. For this challenge, the requirement was to keep it a circular menu.

I frequently like to build challenge entries that serve as helpful tools to use when building in Storyline. I happened to be looking for background photos for a project and was experimenting with color overlays. So I thought I’d create a menu that allowed the user to change the color on overlays for a photo. I picked a transparency value of 75% for each color.

I created the animated SHOW/HIDE animation using Joshua’s technique. I added 6 sub-buttons so as to cover the ROYGBV color spectrum.

different layer colorsNext, I found a background picture from Content Library. Rather than use layers for color changes, I added six states to the background image, one for each color. On each state I added a rectangle overlay for that particular color and changed the transparency to 75%.

Clicking each color circle changes the background to that color overlay and allows me to decide on a color. I also added a trigger to change the background image back to Normal when the user clicks the HIDE button.

Launch Demo


Source File

Limiting and Persisting Choices in Storyline

I recently read Michael Hinze’s Limiting Choices – a Storyline Question, which was a response to a question in the Heroes community where a member wanted to limit learners to making exactly 3 out of 8 choices and then display the choices on the following slide. If you aren’t already, you should follow Michael’s work on his blog, on Twitter, and in the Heroes community.

When I saw his post, I immediately thought of a course I worked on several years ago where I did something similar (in Storyline 1), so I thought I would share how I tackled the problem. The course had a few extra twists, the first being the need for two columns of items to select, but only one set that needs to persist to the next slide.

The first slide has a list of strategies for doing a particular task. The learner reads through the list and selects a check mark if he/she has used the technique. They can check as many or few of these as they like.

strategies selected with check marksstrategies have used and want to practice






Then the learner must select 3 strategies in which they will practice the technique. These are the yellow stars. So this is where the limit comes in – exactly 3 – no more, no less.

Let’s start with the check marks. I created True/False variables for each of the check marks and set the default value to False. I created a Normal (grey) and Selected (green) state for each check mark. I also created hotspots for each check and star.

check mark triggers in StorylineNext, I added the following triggers to each check hotspot. The first trigger toggles the Checkbox trigger between True and False. The default value is False. If the learner clicks a check, the variable changes to True and the second trigger takes affect, changing the check from grey to green. If the learner clicks the check again, the third trigger changes Checkmark back to False and the color of the check changes back to grey. Each check hotspot has these three triggers, so the learner can select as many or few of these as desired. The check marks serve as a type of review for the learner. Have I done these things or not? These do not persist to the following slide.

Now, on to the stars. I created True/False variables for each of the stars and set the default value to False. Each star has two states, Normal (grey) and Selected (yellow).

Storyline triggers for the stars.Next, I added triggers to each star hotspot. The first three triggers are the same as those I created for the check hotspots – a toggle that changes the value of the variable, and triggers that change the state of the stars between Normal and Selected. Again, the learner can select as many or as few as they want. But, I only want them to select three stars. So I added another variable, Total, to keep count of how many stars are selected, and two additional triggers that either add 1.00 to Total if True (selected) or subtract 1.00 from Total if False (not selected). The Total variable is a numeric variable with a default value of 0.

Storyline triggers for Next buttonFinally, I add two triggers to the Next button. I add a layer to the slide as a gate screen. If the Total variable is greater than 3 or less than or equal to 2, the layer displays with a message reminding the learner to select three starred items. Then, when they select three items (when Total = 3), they advance to the next slide.

So that takes care of the requirement for only 3 items. The next challenge is making sure the selected 3 items appear on the next slide.

selected strategies with yellow starsFor slide 2, I copied the 8 strategy text boxes and the 8 stars. I removed the Selected state from each star and added a Disabled state. I set the initial state for each star to Hidden. I also added a Chosen state to each text box with a dark rectangle to better highlight which strategy is chosen.

Storyline star trigger for slide 2For each star I added a trigger that changes the state of the star to Disabled if the associated variable is equal to True. Variables persist throughout a course, so when you select your three stars on the previous slide, the variables associated with those stars changed to True.

Storyline trigger for strategy textI also added a trigger that changes the state of the strategy text to Chosen if the associated star variable is True.

Another twist in this course was the request to have the learner think about and type in their plan for practicing each of their starred strategies.

selected strategies and planning tabstext entry for plan 1For this I added a 3-tab interaction to the slide. Each tab displays a layer. Each layer has a text entry box for learners to type their plan. When the learner is done entering their plans, they click Submit. Their entries are stored and displayed in a review slide at the end of the course via a reference variable (e.g., %plan1%).

I’ve included a demo and the source file (SL 360) if you would like to take a closer look.

Launch Demo


Source File

3 from 1: Multiple Storyline Builds from One Idea

While completing my 12 Days of E-learning Sharing series where I shared twelve reusable interactions and templates, I frequently came up with an idea and then thought of multiple ways to build it in Storyline. One of the challenges in e-learning design is not building the same thing over and over in different (or even the same) courses.

So I thought I would start an occasional series of posts where I take an idea and show three different methods to build it in Storyline.

Break a slide into diagonal wedges and have each wedge contain additional content emanating from the bottom center of the slide.

dial green sectionBuild #1 – Dial
I’ll start with the example I used in the 12 Days post. In this example, I built a dial interaction to reveal more content. Each wedge has a selected state that reveals more content when the dial turns to a certain position. The wedges are grouped into a button set so that only one wedge can be in the Selected state at a time.


click and reveal section 2Build #2 – Click and Reveal
The obvious and easiest choice is to make this interaction a click and reveal item. Each wedge has a selected state that reveals more content when the learner clicks on a particular wedge. The wedges are grouped into a button set so that only one wedge can be in the Selected state at a time.


slider section 1Build #3 – Slider
The slider is similar to the dial interaction, except the learner is sliding for the different wedge states vs. turning a dial.



pick one choice 4Bonus: Build #4 – Pick One
I duplicated the Click and Reveal slide and used the Convert to Freeform > Pick One interaction. Each wedge is a choice with only one wedge being the correct answer. The part that took the longest (which really wasn’t very long) on this one was customizing the feedback layers.


The main difference on these four slides is the bottom center area. The dial interaction obviously contains the dial. The click and reveal contains instructional text. The slider contains the slider and instructional text. And the pick one contains instructions and a custom submit button.

In future posts I’ll show additional examples of this 3 from 1 concept. My goal is to help people see beyond the “one, right way” to build things, or to always take the easy, repetitive route of developing in Storyline. I’d love to hear your thoughts on additional ways to develop the slide in this post or any other creative insights.

Launch Demo


Source File