How Can I Make a Dial More Engaging?

Want to create e-Learning that’ll spin your learners right round? Learning theory suggests that bestowing knowledge should involve actively engaging the learner because the more engaging your content is, the more easily it’s retained. In e-Learning, this requires creativity on the part of the developer!

At Yukon Learning, we’re always striving toward newer, fresher interactions to shake things up for the learner. Plus, wouldn’t it be great if that unique interaction was fast to build, and meets accessibility guidelines? Enter: the custom Dial.

With a Dial, learners rotate a knob in a circular motion, typically to reveal content as the Dial turns. To incorporate this interaction, we often open the Insert tab and pick a visual style. Instead, together let’s try a more custom approach so your project stands out among the rest!

The Visuals

Before inserting the Dial, choose a shape or photo you’d want the learner to rotate. For example, it might resemble an old television set dial that changes what’s on the screen, or perhaps the rotating element you’d prefer isn’t circular at all!

1. Once you have the image chosen, insert it directly onto the slide (Insert tab).
2. With the graphic still selected, navigate to the Insert tab | Dial | Convert to Dial.

Just like that, we’ve easily transformed an image or shape into an interactive, rotating object. Graphics that are round translate to Dials well, be it a full moon (like Articulate’s example here, changing states of a moon), or perhaps a steering wheel, “driving” your learners down “the road to success,” but as you can see in our pencil example here, we’re not limited to the shape or style. The Dial can be anything you like!

Finally, we could make some minor adjustments based on our build. Let’s explore those options.

Axis Point

From where do you want the Dial to rotate? Drag to move the crosshairs symbol to determine the Dial’s Axis Point, which is the position from which it rotates. In our example, the learner spins the pencil from its very center (Check out Slide 1 in our example to see that in action), or the Axis Point could be at the eraser end, rotating from the pencil base to allow for a larger circumference (See Slide 2).

 

In the above image of Slide 1, the Axis Point at the center remains in place and the two pencil ends change position as the Dial rotates.

 

On Slide 2, the Axis Point sits at the base of the pencil, meaning it rotates from the eraser. The eraser remains in place as the Dial spins.

Rotation

How far around would you like the Dial to rotate? With your Dial selected, edit the “Rotation” field on the Dial Tools/Design tab to adjust the default 180-degree rotation to a rotation of 90 degrees within a quadrant (See Slide 3), or a full spin at 360 degrees (See Slide 4). (You can also adjust Rotation directly on the slide by dragging the starting and ending positions—the Dial’s green and red flags.)

 

On Slide 3, the pencil rotates 90 degrees.

 

On Slide 4, the Dial rotates at a full 360 degrees.

 

Starting, Ending, and Everything Between

Dials run on the power of number variables, so functionality is based in numeric values. To conclude our build (See Slide 5), let’s determine the number of stops we want.

To include a starting position and three stops that reveal content, our “Start Value” can remain “0” and our “End Value” field is “3.” The positions of 0, 1, 2, and 3 equate to four total stops.

Now, which direction should the Dial initially face when the slide first opens? That’s our “Initial Value” field. (You can also adjust the Initial Value by dragging the yellow diamond in Slide View.)

Finally, “Step Value” refers to the increments in which the Dial jumps. We can leave that at 1.

Time to Spin the Wheel

What’s the learner going to experience? The actions that the Dial executes is up to you—playing audio, or changing states perhaps. The final slide in our pencil example reveals layers of content through “Show layer” triggers. These triggers also rely on a Condition, so Storyline prompts you for that. Download our Storyline 360 file here to check under the hood.

Dial triggers are dependent on a number variable.

 

Yukon Learning Tip: Now that we’ve taken the time to customize the Dial, remember whenever using Sliders or Dials to always initialize their variable. This one trigger adjusts the variable back to its starting value, effectively resetting the Dial or Slider, in case the learner revisits or restarts the slide.

Each Dial has its own variable, so remember to initialize each!

 

For the pencil sketch build, we included sound effects and animating objects within layers. That content works as a placeholder for this blog entry, but the build is reminiscent of a typical Dial activity when we want to allow the learner an opportunity to uncover content. Remember that when you keep your learners interacting, they’ll remain engaged with the material!

We hope this article has “rounded out” your knowledge of Dials. As you apply these tricks to bring it “full-circle,” feel free to reach out to Yukon Learning by simply posting your comments below. Now, it’s your “turn!”

Dizzy yet?

Stay tuned for the next blog post when we’ll traverse customizing Sliders!

~ Alex

Update: Please note that the interface of the faster new trigger workflow (in Storyline 360 update 3.33.20625.0 or later) will appear slightly different! While the process is the same, this article uses screen captures from the classic trigger workflow.