Despite our increasingly ‘touchscreen’ and ‘hands-free’ world, dials are still a big part of everyday life. If you need to emulate a dial in your e-learning experience, this feature can make your interaction more realistic, tactile, and relevant for the learner.

For the Using Interactive Dials E-Learning Challenge, I created a Storyline 360 example that used dials as a sort of drag-and-drop. Along the way, I tried out some creative techniques that helped this project work in unexpected ways—including using the dial feature to animate an object and an unconventional approach to enable the dial to spin in both directions.

Here’s a behind-the-scenes look at how this project works.

Project Overview

This demo project teaches people some simple map navigation techniques. You can try it out for yourself here and download the Storyline 360 project file here.


To complete the activity, you end up interacting with three ‘picture as dial’ controls:

  • To start the course, you need to turn the compass so its edge connects Point A and Point B
  • Then, you have to turn the compass housing to the correct orientation to get your bearing
  • While you’re doing this, the compass needle—which is also a dial locked in a disabled state—will oscillate slightly

Creating my dial graphics

I created the compass in PowerPoint and exported it as a large, hi-res PNG image. I doubled its height using Pixlr and used Storyline’s Convert to Dial feature to create a custom dial.
A screenshot of the custom dial graphics for the course. On the left is a graphic that looks like a plastic compass. On the right is the same graphic in a program called Pixlr that was used to increase the image size.

Using the dial as a drag-and-drop

This dial has four states, which are triggered by changes to the associated Compass_Base variable:

Screenshot of the Storyline States for the compass base image. The normal state looks like a fill compass. The Set to 61 state shows the compass needle aligned with the red arrow on the compass base. The disabled state removes the compass needle. And the Start state has some additional guidelines on the top of the compass base.

Changes to the same variable also trigger events within the demo, effectively making this a drag-and-drop activity, but with a fixed axis. Unlike most drag-and-drops, though, it is accessible via the keyboard.

Allowing the dial to turn in both directions

In its default setting, a dial can only make one complete turn, which is limiting when you are trying to mimic a real-life object that can turn in both directions. To overcome this, the second dial in my demo has a 1440° rotation and its starting position is 687°—about halfway, just left of center—to match the appearance of the compass base.

Screenshot of the compass base image inserted as a dial on a Storyline slide. The dial tools are open on the top ribbon. The variable is compass, the update sestting is when dial is dragged, the rotation setting is 1440. The show arc setting is always, the start value is 0. The end value is 1440. The initial value is 687. And the step value is 1.

This dial can turn clockwise or counterclockwise for two rotations in each direction before coming to a stop. But that does make it quite tricky to use its position to calculate a bearing, as positions 0, 360, 720, 1080, and 1440 all point north.

To compensate for this, I asked ChatGPT to write some custom JavaScript for me:

// Function to calculate the heading
function calculateHeading(compass) {
    // Calculate the heading with special handling for multiples of 360
    var heading = 360 - (compass % 360);

    // Adjust heading for cases where it's 360 but should be 0
    if (heading === 360) {
        heading = 0;
    }

    return heading;
}

// Function to adjust heading to 0 whenever it becomes 360
function adjustHeading(heading) {
    if (heading === 360) {
        heading = 0;
    }
    return heading;
}

// Get the value of the Storyline variable Compass and calculate Heading
var Compass = player.GetVar("Compass"); // Assuming "Compass" is the name of your Storyline variable
var Heading = calculateHeading(Compass);

// Adjust Heading to 0 whenever it becomes 360
Heading = adjustHeading(Heading);

// Set the Storyline variable "Heading" to the adjusted value
player.SetVar("Heading", Heading); // Assuming "Heading" is the name of your Storyline variable

 

And this is the result:

With this code, I can tell if the compass housing is upside down even if it has been turned more than once. Pointing the compass housing south is a common mistake for novice navigators, but my demo will spot this and provide correction.

Using animation to enhance the dial experience

The third dial is purely for decoration. During the second part of the activity, I wanted the compass needle to move gently as you were turning the compass housing—just as it does in real life.

This dial has a more limited rotation and range:

Screenshot of the compass needle image inserted as a dial on a Storyline slide. The dial tools are open on the top ribbon and many dial settings can be seen. The variable setting is Compass_Needle. The update setting is when dial is dragged. The rotation is 45. The show arc setting is always. the start value is 1. The end value is 20. The initial value is 11. And the step value is 1.

I used ChatGPT again to create some custom JavaScript that makes the compass needle oscillate each time the compass housing is turned:

// Function to randomly adjust Compass_Needle between 8 and 15, returning to 11 within 0.50 seconds
function adjustCompassNeedle() {
    var randomValue = Math.floor(Math.random() * 8) + 8; // Generates a random number between 8 and 15
    player.SetVar("Compass_Needle", randomValue);

    setTimeout(function() {
        player.SetVar("Compass_Needle", 11); // Return Compass_Needle to 11 after 0.50 seconds
    }, 500);
}

// Variable to store the previous value of Compass
var previousCompassValue;

// Function to handle changes in the Compass variable
function handleCompassChange() {
    var currentCompassValue = player.GetVar("Compass"); // Get the current value of the Compass variable

    // Check if the Compass value has changed
    if (currentCompassValue !== previousCompassValue) {
        // Call the function to adjust Compass_Needle
        adjustCompassNeedle();
        // Update the previous value of Compass
        previousCompassValue = currentCompassValue;
    }
}


And here’s a close-up of the result:


Wrap-Up

As you can see, there are lots of creative ways to use dials to produce all sorts of fascinating interactions! And I hope these insights about my project creation process give you ideas to try in your own work.

As you might imagine, there’s quite a bit more going on in this demo beyond just dials—notably some Jump to Time–powered animations and an approach for controlling a Zoom panel with pause/play timeline triggers. So be sure to check out the project Storyline 360 file to see how the whole experience comes together. And please dial me up if you have any more questions!

Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox. If you have questions, please share them in the comments.

5 Comments