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.
Using the dial as a drag-and-drop
This dial has four states, which are triggered by changes to the associated Compass_Base variable:
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.
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:
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.
Published 7 months ago
Version 1.0
