Using Interactive Dials and Knobs in E-Learning #151

Using Dials and Knobs in E-Learning #151

Using Dials in E-Learning #151: Challenge | Recap

One of my favorite features in Storyline 360 is the new dials interaction. Not only are the prebuilt dials super easy to customize, any object, graphic, or image can be converted to a custom dial in a single click.

How are Dials and Knobs Used in E-Learning?

Interactive knobs and dials are a great way to simulate real-world objects and tasks in your e-learning courses.

Dials are similar to sliders, but where sliders move along a straight path, dials move in an arc or a circular path. Dials also use less space than sliders, so learners can quickly scroll through large amounts of data.

Dials and knobs can be used to:

Explore cause-and-effect relationships
Scroll through a lot data quickly
Navigate menu items or options

Challenge of the Week

This week, your challenge is to share an example that demonstrates how interactive dials and knobs can be used in e-learning.

NOTE: Your entry can be anything from a rough concept to a polished example. The challenges are open to everyone, regardless of experience or skill level. If you need technical or creative help with your project, please ask in our forums and reference the challenge number you’re working on.

Resources

Community Examples of Dials Interactions

Tutorials

Storyline 360: Working with Dials
Storyline 360: Creating a Dial Interaction

Downloads

Storyline 360: Telecom Dial Interaction
Storyline 360: Multimedia Dial Template
Storyline 360: Bloom's Taxonomy Dial Interaction Download

Last Week’s Challenge:

Before you dial into this week’s challenge, check out the countdown timers your fellow community members shared over the past week:

Animated Timers in E-Learning #150: Challenge | Recap

Hoping your week goes to 11, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

***NOTE: Please don’t use Dropbox to host your projects. Dropbox recently announced that they’re no longer going to support HTML projects.

You can use our Dropbox file request link to send me your zipped output: https://www.dropbox.com/request/jrqHXAxWwbts234Y4xak. Please include your first and last name and challenge number in the file name: DavidAnderson_122.zip.

133 Comments

Linda Lorenzetti
Hero

almost 7 years ago11/19/16 at 10:03 pm (UTC)

Do you have to use Storyline 360 to enter?

almost 7 years ago11/19/16 at 10:17 pm (UTC)

You can use whatever tool you want.

almost 7 years ago11/20/16 at 7:15 am (UTC)

That's so good to know! I have never taken part in these challenges because I thought you had to use Storyline (which I don't have)

Alexander Salas

almost 7 years ago11/20/16 at 7:36 pm (UTC)

Here's an experiment I'm working with http://bit.ly/2gbBvxz

almost 7 years ago11/20/16 at 10:12 pm (UTC)

I like this one, it's a lot of fun!

almost 7 years ago11/21/16 at 1:01 am (UTC)

Thank you Linda, not fully done but, almost there.

almost 7 years ago11/21/16 at 8:18 am (UTC)

fun indeed! Tell me Alex, is the Canon a dial is well?

almost 7 years ago11/21/16 at 5:32 pm (UTC)

yes indeed Jeff! An invisible dial ; ) I did something similar with a transparent slider here: http://stylelearn.com/elhchallenges/cupid/story.html

almost 7 years ago11/21/16 at 10:58 am (UTC)

Fun Alex!

almost 7 years ago11/21/16 at 2:13 pm (UTC)

Quite interesting concept Alex.

almost 7 years ago11/21/16 at 5:48 pm (UTC)

BOOM!

almost 7 years ago11/22/16 at 6:45 am (UTC)

Out of the box example!

almost 7 years ago11/22/16 at 9:29 am (UTC)

Oh, This one is so cool. I was a bit short of ideas for this challenge. Your example started something in my mind. Hope I can finish it this week. Thank you for the inspiration Alex.

almost 7 years ago11/23/16 at 2:27 am (UTC)

Thank you guys ; )

Nancy Woinoski
Hero

almost 7 years ago11/20/16 at 7:58 pm (UTC)

Here is mine - Done using the new dial object in Storyline 360. http://www.blog.pinchedhead.com/?p=2621 I am loading this into a lightbox in my Wordpress blog. I just noticed that is does not play nicely on my android phone or iPad. I don't think the player likes the lightbox.

almost 7 years ago11/20/16 at 10:18 pm (UTC)

Cool idea Nancy!

almost 7 years ago11/21/16 at 1:00 am (UTC)

Loved this one Nancy, nice layout.

almost 7 years ago11/21/16 at 4:34 am (UTC)

This is cool... I have been thinking of something similar for a driver safety module. I think you have the brake trigger setup on the clutch, though :)

almost 7 years ago11/21/16 at 2:50 pm (UTC)

LOL, I guess that explains why I never mastered driving a car with a manual transmission.

almost 7 years ago11/21/16 at 8:25 am (UTC)

Nice Nancy! I read your blog post as well. I can see this working with some simpler background images that jump left and right. I'm digging the creative use of dials already!

almost 7 years ago11/21/16 at 2:52 pm (UTC)

I agree about the background. I might try removing the video and using a simpler background. Maybe even something like you designed for your dial would work nicely for this.

almost 7 years ago11/21/16 at 11:01 am (UTC)

That's great Nancy!

almost 7 years ago11/21/16 at 5:54 pm (UTC)

NIce Job Nancy! Hey do I get points for the rabbit? I think I'm getting car sick. ; )

almost 7 years ago11/22/16 at 6:53 pm (UTC)

No points for the rabbit Richard. He is impossible to hit because I am a do no harm to animals type of gal. Sorry about the car sickness maybe I'll put some Gravol in the glove box.

almost 7 years ago11/22/16 at 6:34 am (UTC)

Wow, loved it Nancy!

over 6 years ago01/11/17 at 12:11 pm (UTC)

I noticed you said that you can't put motion paths onto a video; It is possible, I've managed to do this in one of the course I'm currently building (which has now changed to have a "normal" menu; after I'd built a sliding menu that moved all the content on the slide to the right; which included videos)

Montse
Hero

almost 7 years ago11/21/16 at 12:08 am (UTC)

Here’s a quick idea for using a fill effect with the dial: http://elearningdesigner.com/storyline/dials-interactions/index.html I still need to tweak it a bit to better align the dial with the background but the general idea is there.

almost 7 years ago11/21/16 at 12:43 am (UTC)

Neat!

almost 7 years ago11/21/16 at 12:57 am (UTC)

Very smooth Montse! I can see this being useful in many approaches.

almost 7 years ago11/21/16 at 1:00 am (UTC)

Nice one Montse

almost 7 years ago11/21/16 at 8:26 am (UTC)

A beauty, but should it add up to 360? :)

almost 7 years ago11/21/16 at 11:04 am (UTC)

That's super creative Montse!

almost 7 years ago11/21/16 at 5:57 pm (UTC)

Perdy! Very good UI Montse.

almost 7 years ago11/22/16 at 6:27 am (UTC)

Pretty slick, Montse!

almost 7 years ago11/22/16 at 9:15 am (UTC)

Eye-catching! I really liked to play with it :)

almost 7 years ago11/24/16 at 12:41 am (UTC)

great idea!

almost 7 years ago12/07/16 at 3:27 pm (UTC)

This is awesome! I have a project where I need to use something super similar. Would you be willing to share how you accomplished it!?

Montse
Hero
Siarah Flanagan

almost 7 years ago12/07/16 at 3:45 pm (UTC)

Hi Siarah! Sure I can share. Let me clean it up and post later today.

almost 7 years ago12/07/16 at 3:52 pm (UTC)

Thank you!!

Ashi (Neha) Tandon

almost 7 years ago11/21/16 at 8:25 am (UTC)

Entry: http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1b1ohq2iajmk19931vlg15401pad9/story_html5.html Download: https://community.articulate.com/discussions/building-better-courses/storyline-360-dial-freebie

almost 7 years ago11/21/16 at 11:05 am (UTC)

Beautiful design Ashi!

almost 7 years ago11/21/16 at 2:03 pm (UTC)

I like this Ashi!

Gnaneswar R
Ashi (Neha) Tandon

almost 7 years ago11/21/16 at 2:14 pm (UTC)

Simple and neat design Ashi

Richard Hill
Ashi (Neha) Tandon

almost 7 years ago11/21/16 at 6:01 pm (UTC)

Cool Slider - Dial integration Ashi! Hmm, Tea time is almost Happy Hour time over here. : )

almost 7 years ago11/22/16 at 9:19 am (UTC)

Cool design Ashi.

almost 7 years ago11/23/16 at 2:28 am (UTC)

I love dem colors Ashi!

Jeff Kortenbosch
Hero

almost 7 years ago11/21/16 at 9:01 am (UTC)

I mocked up a quick concept. Don't have SL360 here right now. The idea is to use the dial as a choice navigator in an interactive story. Hope this inspires others to do some creative dial interactions! http://bit.ly/DialConcept

almost 7 years ago11/21/16 at 11:06 am (UTC)

Ooh, nice design Jeff!

almost 7 years ago11/21/16 at 12:18 pm (UTC)

LOL, that's just a PowerPoint quicky! What do you think about the concept? I think it could really liven up a scenario.

almost 7 years ago11/21/16 at 1:48 pm (UTC)

Yeah, but it looks so clean and gps-y! I think it would great for a branching scenario, definitely.

almost 7 years ago11/21/16 at 2:04 pm (UTC)

Nice concept Jeff.

almost 7 years ago11/21/16 at 6:04 pm (UTC)

The moral of my story is to FIRST read THEN click. I was clicking and poking until I saw the .png suffix in the URL window. BTW it's a great idea for an interactive story Jeff. : )

Richard Hill

almost 7 years ago11/21/16 at 5:39 pm (UTC)

Here's a goniometer simulation for medical angular measurements using SL360. http://www.richardleehill.com/hero/elc151/

almost 7 years ago11/21/16 at 6:08 pm (UTC)

Cool example, Richard!

almost 7 years ago11/21/16 at 6:14 pm (UTC)

Great idea, Richard!

almost 7 years ago11/22/16 at 6:25 am (UTC)

Nicely done Rick!

almost 7 years ago11/22/16 at 9:22 am (UTC)

Richard Hill; Creative as usual!

almost 7 years ago11/22/16 at 10:26 am (UTC)

That's amazing Richard! So useful

almost 7 years ago12/09/16 at 8:37 pm (UTC)

Fantastic!

Rebecca Newsham

almost 7 years ago11/21/16 at 9:22 pm (UTC)

Here is a quick example I used to create the look of a dial with SL2: http://chilp.it/c6ff749

almost 7 years ago11/22/16 at 8:10 am (UTC)

very cute - Didn't even occur to me to use a dial like that. Very strange considering I just finished including a clock face in a recent file. :)

almost 7 years ago11/22/16 at 10:27 am (UTC)

That's really nice Rebecca!

almost 7 years ago11/22/16 at 8:09 pm (UTC)

How fun Rebecca! What a nice way to teach temperatures to little ones.

Sandy Shailes

almost 7 years ago11/22/16 at 8:08 am (UTC)

Ok, so I don't have 360 so got creative Storyline. Say "Welcome Back" to the Etch-A-Sketch !!!! http://vitalsigns.net.au/E-Learning%20Challenge%20%23151%20-%20Storyline%20output/story.html

almost 7 years ago11/22/16 at 10:28 am (UTC)

Gotta love a good ol' etch-a-sketch Sandy, well done!

Veronica Budnikas
Hero

almost 7 years ago11/22/16 at 10:24 am (UTC)

Hi everyone, I created a radio! Blog, demo and videos: http://veronicab.com.au/create-radio-dial/ Straight to demo: http://veronicab.com.au/wp/wp-content/uploads/articulate_uploads/Radio/story_flash.html

almost 7 years ago11/22/16 at 1:07 pm (UTC)

Hey Veronica, That's a real radio! Really really nicely done!

almost 7 years ago11/22/16 at 2:59 pm (UTC)

Nice one Veronica, I was planning to do something similar. We'll see how much time I have to be original :)

almost 7 years ago11/22/16 at 9:57 pm (UTC)

Thanks guys!

almost 7 years ago11/23/16 at 4:48 am (UTC)

Pure Awesomeness!

almost 7 years ago11/23/16 at 4:55 am (UTC)

Thank you Ashi, I really appreciate it :)

Amanda Allen

almost 7 years ago11/22/16 at 1:50 pm (UTC)

Thanks to the hand-holding of Linda I was able to get this uploaded via FTP on my site. I didn't spend a lot of time on graphics and instead focused on functionality. http://ignitelearning.net/challenges/dials/story_html5.html

almost 7 years ago11/22/16 at 2:42 pm (UTC)

Nicely done, Amanda!

almost 7 years ago11/22/16 at 2:48 pm (UTC)

Very effective use of a 360 dial Amanda!

almost 7 years ago11/22/16 at 9:59 pm (UTC)

Nice work Amanda, could be very useful!

Lisa Crowe

almost 7 years ago11/22/16 at 6:27 pm (UTC)

How do you actually submit something for these challenges?

almost 7 years ago11/23/16 at 2:32 am (UTC)

Hi Lisa, Welcome to the best elearning community evah! You build your awesome interaction and publish it to a zip file. Then move it and extract it to a cool place like your own website or AmazonS3 https://aws.amazon.com/s3/ Share the link with us and boom shakalakah!

Jane Lomas

almost 7 years ago11/23/16 at 5:31 pm (UTC)

I've created an Articulate Storyline 2 learning package on Hairdressing Colour Wheel and how to use it to correct colour. Within this I've used dials. You can read all about it here: http://bit.ly/2fpiYMl You can download the .story file here: http://bit.ly/2fRJW2M

Godwin Vinny Carole

almost 7 years ago11/24/16 at 6:45 pm (UTC)

Hello everyone! Been experimenting with the new storyline 360 and its dial interaction. I’ve created an interaction to control earth’s rotation using a dial that also shows present time in different time zones. It wouldn’t be possible for me to present such huge data of 33 time zones on a single slide without using a dial. I love how easy it was to work with dials. Here's my entry: http://www.swiftelearningservices.com/samples/sl360_dialer_dialer_interaction/story_flash.html Note: Might take a little longer to load than usual due to heavy functionality and high quality images. Hope you guys like it!

almost 7 years ago11/24/16 at 8:18 pm (UTC)

This is really nice Godwin. I especially like how you changed the clock in the different time zones.

almost 7 years ago11/26/16 at 7:15 pm (UTC)

Great use of dials, Godwin! Thanks for joining the challenges. I updated the recap to feature your example: https://community.articulate.com/articles/using-interactive-dials-elearning#GodwinVinnyCarole

almost 7 years ago11/28/16 at 3:40 am (UTC)

this one was really awesome. A great use of the dial!

John Blum
Godwin Vinny Carole

almost 7 years ago11/28/16 at 4:59 pm (UTC)

Great job Godwin! By any chance would you be willing to share the .story file? There are some ways we could use this at our company. We'd be willing to provide attribution. Thank you, John

almost 7 years ago11/29/16 at 4:17 pm (UTC)

Hi John, I'm really glad, you found my work useful. I wrote a blog on creating custom dials in storyline 360. You can download the source file from there. All you need to do is just provide your basic details before downloading. Heres the link to my blog : http://www.swiftelearningservices.com/custom-dial-interaction-in-storyline-360 Feel free to let me know if you need anything else, I'm happy to help. Cheers.

Richard Hill

almost 7 years ago11/24/16 at 7:06 pm (UTC)

Happy Thanksgiving! Here's my second dial .( I'll post it in last weeks challenge too.) http://www.richardleehill.com/hero/elc151b/

almost 7 years ago11/26/16 at 7:19 pm (UTC)

Happy Thanksgiving, Richard! Cool timer example. Recap updated: https://community.articulate.com/articles/using-interactive-dials-elearning#RichardHill2

Coniqua Abdul-Malik

almost 7 years ago11/25/16 at 5:09 am (UTC)

Hi all! This is my first time posting for a challenge (and trying to use Amazon SWS) I'm having trouble with my amazon link loading, so I put in on tempshare for now. http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1b2ctcsahkibdvb1vc6ogqcq79/story.html

almost 7 years ago11/26/16 at 10:23 pm (UTC)

Welcome to the challenges, Coniqua! I really like the way you used a dial for navigation. Nicely done! I updated the recap to feature your example: https://community.articulate.com/articles/using-interactive-dials-elearning#ConiquaAbdulMalik I noticed you used Tempshare for your entry. Tempshare is great for quickly sharing projects but it Tempshare auto-deletes everything after 10 days. Would you mind sending me a zip file of your published output? You can use this page to upload your files: https://www.dropbox.com/request/jrqHXAxWwbts234Y4xak I'll be more than happy to host your project files on our server. Thank you so much for sharing this week.

almost 7 years ago11/28/16 at 3:32 am (UTC)

I just submitted the file. Thanks so much for hosting it. Hopefully I'll get the Amazon Web Services sorted before my next challenge entry.

Kay Herbert

almost 7 years ago11/25/16 at 4:19 pm (UTC)

I've thrown a quick one together. Thought I'd share through review too! https://360.articulate.com/review/content/ea293d5a-5474-45c3-9506-64f78e98f480/review

almost 7 years ago11/26/16 at 10:24 pm (UTC)

Welcome to the challenges, James! I liked the way you used the dials to melt the ice caps. That's a really powerful example. I've updated the recap page to feature your entry: https://community.articulate.com/articles/using-interactive-dials-elearning#JamesBlackburn Oh and bonus points for using Review to host your example!

Ginger Nichols

almost 7 years ago11/28/16 at 3:10 am (UTC)

Hi everyone. This is the first challenge that I've done. I love what everyone did with the dials and I think they will be really cool to use when building courses. Anyway, enjoy some really bad robot jokes. http://www.gingernichols.com/portfolio/bad-robot-jokes-storyline-360

almost 7 years ago11/28/16 at 3:20 am (UTC)

Hi Ginger, welcome to the challenges. Unlike the jokes, this interaction was very good. I like the way you gave it the feel of a big production. Well done!

Phil Eagles

almost 7 years ago11/28/16 at 9:44 am (UTC)

Here is my attempt to replicate a dimmer switch controlling a light bulb. This is probably best viewed on a desktop has it's quite tough on processing! http://setup.proofing.brayleinolearning.co.uk/Dimmerswitch/story.html Thanks

Muhammad Nurul islam

almost 7 years ago11/28/16 at 12:12 pm (UTC)

Here is my attempt on dials http://examples.roelworks.com/elearning/button360/story.html

Rick Maranta

almost 7 years ago11/28/16 at 10:24 pm (UTC)

I am a little late to the party but here is my 2D space-shooter using a Dial for 8 way flight. The collision detection is still a bit wonky when objects are grouped but you can shoot some of the items on the screen. Still need to refine getting to all quadrants of the map - after a while it gets out of sync. Mars is in the top right and Earth in the bottom left. http://makethisgo.com/demos/ship/story.html

Rick Maranta

almost 7 years ago11/29/16 at 8:45 pm (UTC)

Here is another I did. This uses 2 dials for the wheels and one to control the speed. It allows for variable speeds. http://makethisgo.com/demos/dial_wheels/story_html5.html

over 6 years ago12/31/16 at 8:46 pm (UTC)

Welcome to the challenges, Richard! Those are both really cool examples of dials. I really liked your collision detection demo. I updated the recap to feature both of your examples: https://community.articulate.com/articles/using-interactive-dials-elearning#RichardMaranta

over 6 years ago01/01/17 at 5:15 am (UTC)

body { font-family: "Calibri","Slate Pro",sans-serif,"sans-serif"; color:#262626 } Thanks so much! Sent from my awesomely weird and wide BlackBerry Passport.

Joanna Kurpiewska

almost 7 years ago12/01/16 at 9:25 pm (UTC)

As it's never too late to upload a challenge project - here's my entry with a mini freebie: http://bit.ly/2fL1OgZ @David could add my demo to the recap list please

almost 7 years ago12/01/16 at 9:46 pm (UTC)

A.M.A.Z.I.N.G

almost 7 years ago12/01/16 at 10:27 pm (UTC)

Nice.

Sarah Brown

almost 7 years ago12/05/16 at 9:03 pm (UTC)

Just had a go at using two dials to show the relationship between two variables http://kitfry.com/portfolio/Dial-Demo/story_html5.html

over 6 years ago12/31/16 at 9:33 pm (UTC)

Very use good use of dials, Christopher.

David Charney

almost 7 years ago12/09/16 at 8:38 pm (UTC)

Late to the game but here is my use of dials to create a working clock: http://elearninglocker.com/storyline_files/eLearningLocker_161208A/story_html5.html

over 6 years ago12/31/16 at 9:37 pm (UTC)

I love your clock, David. I heard you talking about it in your podcast, but I found it difficult to follow. I think in elearning there are some things that are better seen than discussed. Could you do a blog post on this?

over 6 years ago01/28/17 at 10:59 am (UTC)

Yeah I assumed talking about how a visual clock works without visuals wouldn't do it justice on the podcast. Here is a video I made about it: https://www.youtube.com/watch?v=tBHKH4HVL_o Sorry it took me so long to notice the comment! Sometimes these community comments get lost in my email.

over 6 years ago01/29/17 at 2:52 am (UTC)

Thanks for your reply David. I did find your video, thanks again.

Using Interactive Dials and Knobs in E-Learning #151

How are Dials and Knobs Used in E-Learning?

Challenge of the Week

Resources

Last Week’s Challenge:

New to the E-Learning Challenges?

Related Content

Using Interactive Dials and Knobs in E-Learning 2018 #210

Using Dials to Design Interactive Infographics #261

5 Dial and Slider Freebies That’ll Help You Add Irresistible Interactivity

133 Comments