Making Sliders with Sliders

Storyline 2 has a new interactive feature called sliders where learners can slide up and down a scale of options and see the results of their choices. David Anderson presented us with an e-learning challenge to create an interaction using this new feature. I decided to go the obvious route, showing users how to cook sliders using sliders!

Click here to make sliders with Bert!

Click here to make sliders with Bert!

Who’s Bert?
On a couple previous challenges; I introduced the world to a somewhat unrefined character named Bert (aka: my right hand). In one story, an e-learning challenge master, Jackie Van Nice shows Bert going on a day trip to the beach with an overworked e-learning developer taking a much-needed break from the office.

And in another appearance, Bert and his crew are shown on an interactive organizational chart where they tell learners about their roles and responsibilities running Bert’s first tour of the US.

Bert’s Sliders
This brings us to our latest installment in the Bert saga. Bert has just opened a new restaurant, Bert’s Sliders. You’ve been hired in the kitchen and need to learn how to cook the perfect hamburger. Using two sliders, you set the cooking time and temperature, click the “Serve it up” button and see what Bert thinks of your burger.

Using Sliders to Make Sliders

Using Sliders to Make Sliders

Two Sliders are Better Than One
Since I like to make my life difficult, I decided to have two sliders working together, one for the cooking time and the other for the temperature. I learned there are two factors that go into the number of possible outcomes when you use multiple sliders for one task; the number of sliders, and the number of settings on each slider. In my case, I had 3 temperature and 3 time settings, 3 x 3 = 9 possible outcomes.

I also deduced that some of these combinations of settings would essentially get the same result. So, if you chose the highest temperature and the shortest cooking time, or the lowest temperature and the longest cooking time, you’d get a pretty bloody, rare hamburger. Ultimately, I ended up with six possible outcomes based on any of the 9 combinations possible.

A Bloody Rare Burger

A Bloody Rare Burger

Trigger Happy
Storyline 2 automatically creates the variables once you decide on the number of settings for each slider. All I had to do was create triggers that would take learners to the appropriate results slide with a video showing Bert’s reaction to the their choices. The trigger settings for these different outcomes say that when the user clicks the “Serve it up” button, go to Slide XX if variables XX and YY are selected.

When creating this trigger, you need to click the “Show Conditions” button and add the two variables in.

Don’t Forget the Zero
I also learned with sliders, you have to have a zero or off setting. Otherwise, it’s impossible for Storyline to detect when the lowest setting on either slider is selected. This is because the variables Storyline automatically creates are based on either the user sliding over one of the settings or sliding and landing on a setting. If the learner doesn’t move the slider, Storyline has no way of knowing what setting they’ve selected.

Therefore, I added a cooking time of zero and a temperature setting of off. Then I created triggers that said whenever learners hit the “Serve it up” button without moving either slider, or with either slider on the zero or off setting, to show them a layer saying they need to select a higher cooking time and temperature than zero.

Zero Option

Zero Option

Now for the fun stuff…
Jackie Van Nice was kind enough to shoot the videos with my iPhone in front of her large monitor displaying a high resolution picture of a diner. No fancy green screens were used on this production. As luck would have it, the light from her lamp had just the right tone to match Bert’s complexion (again, we’re talking about my right hand) with the lighting in the picture. I used some ketchup, charcoal, olive oil, and paprika for Bert’s “makeup” in the different scenes.

Someone call the fire dept!

Someone call the fire dept!

The jingle was sung and recorded by yours truly in the spirit of a cheesy hamburger commercial meets barbershop quartet style. I used Cubase SX and an Audio Technica microphone and layered about 4 vocals with harmonies. I also threw in some sound effects of a restaurant, fryer, and crows to add atmosphere to some of the scenes.

So, come on down to Bert’s Sliders and brush up on your cooking skills. Good luck!

Advertisements

One thought on “Making Sliders with Sliders

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s