How Are Designers Using Toggle Buttons in E-Learning? #460

Toggle Buttons in E-Learning #460: Challenge | Recap

🏆 Challenge of the Week

This week, your challenge is to share an example that shows how toggle buttons and switches can be used in e-learning.

You can create a simple example using normal and selected states with button sets or build something more advanced using variables. Let us know if you get stuck or need help with your project.

🧰 Resources

E-Learning Challenge #97:

35+ Wicked Toggle Button Effects for E-Learning Designers

Video tutorial:

Here's how you can create a toggle button effect using Storyline's

✨ Share Your E-Learning Work

Comments: Use the comments section below to link your published example and blog post.
Forums: Start a new thread and share a link to your published example.
Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

🙌 Last Week’s Challenge:

Before you switch to this week’s challenge, check out the creative ways your fellow course designers use photo collages to create interactions:

Interactive Photo Collage Examples RECAP #459: Challenge | Recap

👋 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.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.

📆 Upcoming Challenges

Challenge #461 (05.10): Interactive Podcasts. See ELC364 for a related challenge. This time, the questions will focus on the value of working out loud, weekly challenges, and growing your skills.
Challenge #462 (05.17): Click. Hover. Drag. See ELC144 for a general idea of what we're doing.

🚨2024 Articulate User Conference Call for Proposals

We’re now accepting proposals for this year’s in-person user day conference co-hosted at DevLearn in Las Vegas. Learn more about the proposal process.

81 Comments

David Anderson
Author

15 days ago05/03/24 at 1:58 pm (UTC)

Looking forward to this week's demos!

Jonathan Hill
Hero

15 days ago05/03/24 at 2:09 pm (UTC)

Hello! This demo includes a custom-built music on/off switch, and the interaction is comprised of five specially designed toggle buttons. You'll discover that certain toggle buttons affect others, and to efficiently pick the lock, you'll need to deduce and adopt a particular strategy. LOCKPICK Demo: https://bit.ly/elhc460 Download: https://bit.ly/elhc460dl

15 days ago05/03/24 at 3:07 pm (UTC)

I do like a good puzzle and this was no exception! The animation and sound effects brings it all together nicely and I like the clever visual effect of the music notes being masked by the slider thumb. 👍

15 days ago05/03/24 at 6:40 pm (UTC)

Been a while since I had to use that skill set, but good to see I still got it. Side note; did you see that the new Frank Turner album dropped today?

Chris Hodgson

15 days ago05/03/24 at 2:13 pm (UTC)

Here's a moment of calm built in Articulate Storyline 360, using a single toggle button that transforms the scene from day to night: https://discoverelearninguk.com/projects/a-moment-of-calm-train-journey-storyline-360/

15 days ago05/03/24 at 2:19 pm (UTC)

Love every detail of this. A fine example of making a light/dark mode toggle part of the overall course design.

14 days ago05/04/24 at 5:54 pm (UTC)

I like the attention to details, Chris, with the subtle animations and the different light treatment in the foreground and background that make the atmosphere of this little scene really successful.

14 days ago05/05/24 at 2:03 am (UTC)

Love it.

12 days ago05/06/24 at 9:20 am (UTC)

Looks amazing!

12 days ago05/06/24 at 1:31 pm (UTC)

This opens up a lot of ideas, Chris! Wonderful!

11 days ago05/07/24 at 3:38 pm (UTC)

I love the aesthetic of this!

Jodi M. Sansone

15 days ago05/03/24 at 3:59 pm (UTC)

Take a Hike Demo: https://jodisdemos.s3.amazonaws.com/460+Hike+Toggle/story.html What kind of hike do you want to take today? Long or short? Easy or hard? Creek view or amazing vista? I used toggle buttons with T/F variables and the built in lightbox feature to help you select your hike. I think you could use something like this to customize a learning path.

14 days ago05/04/24 at 6:01 pm (UTC)

I definitely prefer hikes that follow a river, Jodi. And, given the arid mountains around, I think it's safer to have water nearby. (that's a Kokopelli drawing on your intro screen, isn't it?)

14 days ago05/05/24 at 2:00 am (UTC)

Pretty neat. I liked the loading animation a lot.

13 days ago05/05/24 at 9:16 am (UTC)

A great use case for toggle buttons, executed with your usual style.

11 days ago05/07/24 at 3:38 pm (UTC)

I'd love to have a tool like this to identify hiking trails in my area. Very cool sample, Jodi!

Ron Katz

15 days ago05/03/24 at 5:58 pm (UTC)

If one toggle button is good, 64 are better. Toggle the buttons to answer each of the questions. Demo: https://360.articulate.com/review/content/84edbef9-9a7c-4564-8066-dfcdf9878733/review Download: Available in Feedback/Comments section of Review 360 Download: Avaliable in comments/feedback section

14 days ago05/04/24 at 5:46 pm (UTC)

Unexpectedly... attractive, Ron. Is there a better answer to every riddle? For example, I got 20 on the first question. Is there a better way to do 21? 22?

13 days ago05/05/24 at 9:17 am (UTC)

The layout reminds me of a classic British gameshow called Blockbusters. Simple but effective toggle design.

11 days ago05/07/24 at 3:41 pm (UTC)

Cool game! And challenging.

9 days ago05/09/24 at 3:47 pm (UTC)

Thanks Thierry, Jonathan, and Thaddaeus

Matt Wright

15 days ago05/03/24 at 6:38 pm (UTC)

Here is something I have been working on to increase accessibility across the company. Here in the Tampa area 27% of the population speaks spanish so having a toggle to let them choose between english and spanish is an easy way to increase the ability for more users to get training. https://360.articulate.com/review/content/9fe2c7fa-0f30-4ba1-a451-d4dbb2556c4a/review

15 days ago05/03/24 at 8:41 pm (UTC)

Great idea!

14 days ago05/04/24 at 6:20 pm (UTC)

I'm curious, Matt. Is the button used to select 1 of 2 different slides from your module (so the start of 2 modules in parallel), or 2 “states” of the same slide. In your opinion, and based on your experience, which is the best choice when you have 100 slides? I would choose (and have chosen) a fork. And you?

12 days ago05/06/24 at 1:24 pm (UTC)

I did 2 states of the same slide. If I had to do 100+ I may do it differently, but for the shorter ones I find that two states works fine.

14 days ago05/05/24 at 1:53 am (UTC)

Good one!

Kari Edmonds

14 days ago05/04/24 at 5:30 am (UTC)

Glad to get to take on another challenge! This demo uses a few toggles so users can build a burger: https://360.articulate.com/review/content/c2799523-6062-4c9e-9a06-f51e92f8b333/review Note: I added the ability to toggle with hitting keyboard keys rather than just by clicking. This works right away in preview mode, but when published it still needs a single click on the slide before it works. I think this is to ensure the "focus" is on the slide. I think this would work within a larger e-learning as the focus would already be on the slides. However, if someone knows something I'm missing, please let me know!

Amy DeMarco

14 days ago05/04/24 at 7:02 am (UTC)

Happy May the Fourth! Design your own light saber in this interactive: https://360.articulate.com/review/content/cf66bb50-ceea-4c9b-a67f-bdedfbff2a8c/review

Thierry EMMANUEL

14 days ago05/04/24 at 9:18 am (UTC)

Bonjour Heroes. I know you've all worked hard, so I'm offering you almost 40 hours of relaxation. Don't thank me, it's my pleasure. https://360.articulate.com/review/content/10a28fe8-9bba-4a5a-9eff-a5775cf03dc6/review I used sliders to create my buttons in order to have the sliding movement, as well as the click for the off position (also accessible via the keyboard). I ran into a number of problems I'd never encountered before, and learned how to offer videos that launch automatically. A good day.

12 days ago05/06/24 at 3:59 am (UTC)

This is so good, Thierry!

11 days ago05/07/24 at 3:51 pm (UTC)

Very nice, Thierry! I could use this in my everyday life! The videos are not playing for me, though. I just see the image and I cannot press the play button and they don't play automatically.

8 days ago05/10/24 at 9:35 am (UTC)

Sooo relaxing! I ran into the issue that the videos wouldn't play (neither automaticcaly nor clicking on it) the first time I toggled each ambience. Once I toggled trough each of them, they started to play automatically. May be related to loading issues due to video size?

8 days ago05/10/24 at 4:35 pm (UTC)

Thanks for your feedback, Thaddaeus and Sabrina. Yes, the videos should start automatically (with the settings in SL). Sorry for the problems that make my demo not so relaxing. But I don't know how to solve them. Jayashree and the others (?) don't seem to have encountered them. So perhaps it's more a question of your browsers' settings refusing automatic launches of (inappropriate) videos. Good to know.

8 days ago05/10/24 at 6:35 pm (UTC)

For your information: videos are not integrated into the module (so there's no problem with weight). I used Youtube videos inserted as web objects, following the procedure described here: https://access.articulate.com/fr-FR/support/article/How-to-Add-YouTube-Videos-to-Articulate-Storyline-360-Courses (sorry, I can't find this page in English). So the web object address is https://www.youtube.com/embed/video_id?autoplay=1 where I replace “video_id” with the Youtube video ID, then “?autoplay=1” which automatically starts playback. This works for me. I don't know why it blocks for others.

5 days ago05/13/24 at 7:11 am (UTC)

Très intéressant! I wanted to try it in another browser (Chrome instead of Edge) an now only the fullscreen toggle button seems to work. Did you change anything?

5 days ago05/13/24 at 9:57 am (UTC)

Thank you Sabrina for taking more time to try my demo again. I haven't done anything more because I don't know what to do. I also tried with Edge and Chrome and the videos don't start and the play buttons aren't clickable, it's true (but the first video frame appears fine). I think I'll post a message on the community forum as this problem is way beyond my skills. (I'll just add a message on my demo warning that it's having problems on Edge and Chrome and that I'm trying to find a solution)

21 hours ago05/17/24 at 7:01 pm (UTC)

MANY THANKS TO ANGE CM, who was kind enough to respond to my request for help on the "Building Better Course" discussion and who noticed (how stupid of me!) that I'd placed a rectangle above the videos to prevent pausing/playing when the videos had started automatically (on Firefox, but on no other browser apparently). And I'd forgotten about those rectangles! Chrome and Edge users can now relax and enjoy the fully functional demo. Thanks Ange.

Jayashree Ravi

14 days ago05/04/24 at 9:55 am (UTC)

"The Magical Garden" puts players in the role of a gardener tasked with nurturing a mystical garden. Using toggle buttons, they control the weather to influence plant growth and attract magical creatures. Demo - https://360.articulate.com/review/content/9837c7b3-c96c-4fb3-9df9-78cda37b5186/review

14 days ago05/04/24 at 9:58 am (UTC)

@David - it seems my entry was inadvertently missed in the recaps for the past two challenges (#459 and #452). I understand that oversights can happen, and I just wanted to kindly ask if there was a chance for my entries to be included in the recap! Thanks!

14 days ago05/04/24 at 6:27 pm (UTC)

@Jayashree - Evidently, I missed some other users' examples over the past couple of challenges. I updated both of your entries, so you should be current: #452: https://community.articulate.com/articles/examples-of-ai-and-elearning#Jayashree #459: https://community.articulate.com/articles/interactive-photo-collages-in-elearning#Jayashree And if I miss another entry, please don't hesitate to contact me directly: david@articulate.com

13 days ago05/05/24 at 5:10 am (UTC)

Thank you, David!

Ashi (Neha) Tandon

14 days ago05/05/24 at 1:50 am (UTC)

Hello...Mine is a pretty simple toggle button with a couple of animations: https://www.ashitandon.com//Storyline%20Files//ELH460/story.html

8 days ago05/10/24 at 2:49 pm (UTC)

I really like your vertical treatment. You always find a new way to reveal content that I never thought of trying! Thank you!

Sneha Sivaprakash

13 days ago05/05/24 at 10:30 pm (UTC)

Hi, I applied the toggle feature to uncover animated illustrations showcasing safe and unsafe methods to deal with a common workplace safety scenario. https://storage.googleapis.com/snehaselearningprojects/ELH%20%23460/story.html

12 days ago05/06/24 at 3:51 am (UTC)

Fun!

12 days ago05/06/24 at 3:56 am (UTC)

Love this!

11 days ago05/07/24 at 3:52 pm (UTC)

I really like the animations in this!

Sherry Stancil

12 days ago05/06/24 at 3:41 am (UTC)

Hey there. I created customized toggle buttons for background music... and for toggling the pros and "cons" of eating fruits in high consumption. First time creating toggles in hidden states and with true/false variables. https://360.articulate.com/review/content/668f5d49-559d-4d79-922f-acdd56ea183a/review

8 days ago05/10/24 at 2:54 pm (UTC)

I liked how you incorporated the potential downsides of each choice. Your audio made me feel like I was outside in my backyard in Connecticut, which I miss a lot! It was very relaxing.

Laura Hansen

12 days ago05/06/24 at 8:19 pm (UTC)

I've been working on a UI/UX certification, so I thought I would show you how a simple toggle can make your content more accessible to learners. https://360.articulate.com/review/content/a4bc6e2b-e55c-4e08-a7e2-221ff6a03c9b/review

8 days ago05/10/24 at 2:55 pm (UTC)

I gravitate toward the calm palette. Your demo did a great job of showing the contrasts.

Design Wagon

12 days ago05/06/24 at 10:28 pm (UTC)

Anyone else working on the new Workplace Violence Prevention Plan training for CA employees? I used this challenge as inspiration for a Storyline Block interaction within Rise. The idea is to present learners with a potential workplace hazard and to have them toggle off the warning and present prevention information (I used markers and some very basic text). Here's a link to the demo: https://360.articulate.com/review/content/573dab69-9322-4f57-a420-e68ac80f0352/review

Thaddaeus Smith

12 days ago05/07/24 at 12:38 am (UTC)

Hello! I went crazy for toggles with this sample! I have always loved tumbling marble games and was inspired to create one in Storyline for this challenge. There a six toggles in total. One is used to release a marble. Another is used to change the background from light to dark. The other four are used to change the orientation of platforms to change the path of the marble. Here is the link: https://360.articulate.com/review/content/ed07e184-9110-4823-acb6-4b11e54d8a7f/review

11 days ago05/07/24 at 5:59 am (UTC)

Wow Thaddaeus, you've set the bar so high with this entry! Love this! Reminds of the retro pinball game! Well done!

11 days ago05/07/24 at 3:36 pm (UTC)

Thanks, Jayashree! I was definitely going for a retro look. I'd love to try to make an actual pinball game, but I think that is beyond my grasp for now!

11 days ago05/07/24 at 8:21 am (UTC)

This is excellent, Thaddaeus. An imaginative use of toggle buttons, very well executed!

11 days ago05/07/24 at 3:37 pm (UTC)

Thank you, Chris. I appreciate the kind words!

11 days ago05/07/24 at 8:32 pm (UTC)

This is awesome! Very creative, Thaddaeus.

11 days ago05/07/24 at 10:02 pm (UTC)

Thank you, Sneha!

10 days ago05/08/24 at 1:33 pm (UTC)

Well played, sir.

10 days ago05/08/24 at 7:40 pm (UTC)

Thanks, Jonathan!

8 days ago05/10/24 at 2:58 pm (UTC)

Terrific! I wouldn't even know where to start with this.

Thierry EMMANUEL

11 days ago05/07/24 at 5:38 am (UTC)

Brilliant and very well done, Thaddaeus. I would have liked to have this idea to illustrate this challenge.

Thaddaeus Smith

11 days ago05/07/24 at 3:37 pm (UTC)

Thank you, Thierry! I'm glad you like it!

Ciamé M'Bongo

10 days ago05/08/24 at 7:52 am (UTC)

OMG your submissions are so mind-blowing! This is my new favourite way to spend way too much time on the internet lol. Anyway here's my submission for this challenge. Has absolutely nothing to do with e-learning, but I couldn't help myself :) https://360.articulate.com/review/content/c5c39178-c695-472a-beb9-57cc3cecb31d/review

Ron Katz
Ciamé M'Bongo

10 days ago05/08/24 at 12:41 pm (UTC)

This is SOOOO fun. Simple but awesome sauce!

Kate Golomshtok

10 days ago05/08/24 at 2:34 pm (UTC)

Awesome, what a cool feature, and it's such a shame I didn't know about it before! Suggest taking a closer look at a famous painting https://360.articulate.com/review/content/f54e3dc9-3ca4-481b-bdb1-5742611e3544/review

8 days ago05/10/24 at 9:45 am (UTC)

I love everything about it!

Zachariah Dornisch

10 days ago05/09/24 at 1:58 am (UTC)

Hello Everyone! I am submitting my first Challenge of the Week. Compared to some other designs here, I definitely took a simpler route. I used toggle buttons in two different ways in this challenge. I created a course settings menu allowing users to toggle narration and closed captions on and off. I also used toggles similar to check boxes to enabling learners to select their answers with a toggle switch. My two dogs inspired my work, including some images I have been playing around with. For another project, I was looking at converting images to comic book-style images with ChatGPT. Here is the link: https://360.articulate.com/review/content/947d491c-45d3-41cb-9c65-63daa7f758db/review Zach

Brooke South

9 days ago05/09/24 at 3:38 pm (UTC)

Hi! This is extremely basic in comparison to the others here, but fun, none the less. Here's different examples of color blindness and what those folks see when looking at the picture. https://360.articulate.com/review/content/863d92a4-5aa2-4ace-8cbd-57ee1c33d152/review

Ruslan Karimov

9 days ago05/09/24 at 6:27 pm (UTC)

Okay, E-learning Heroes, who's ready for a little self-discovery with a side of laughter? I built a "What's Your Flavor?" personality quiz. Get your result and share it in the comments! Let's see what kind of quirky crew we have here. https://360.articulate.com/review/content/889a4864-2258-48cb-8b06-a697169fbc9a/review And here is my blog post process breakdown: https://www.karimovdesign.com/post/building-a-quirky-personality-quiz-in-articulate-storyline

9 days ago05/10/24 at 3:19 am (UTC)

This is well done!

Sabrina Sgoda

8 days ago05/10/24 at 11:14 am (UTC)

This Gamification Tipp just got an upgrade! I've added a Toggle Button to show hints. This way the user can adjust the difficulty. Enjoy! https://360.articulate.com/review/content/75cec75e-873c-476d-8fb7-127dbd326a63/review

8 days ago05/10/24 at 2:24 pm (UTC)

This is a great use case for toggle buttons.

Angelique Duncker

6 days ago05/12/24 at 4:41 pm (UTC)

This is a simple toggle between an alien world and Earth. This is my first E-Heroes challenge, and I had great fun. I give it five stars and will do it again! Project: https://360.articulate.com/review/content/21395950-b6e4-4eb8-8c4b-4762434ae571/review

How Are Designers Using Toggle Buttons in E-Learning? #460

🏆 Challenge of the Week

🧰 Resources

✨ Share Your E-Learning Work

🙌 Last Week’s Challenge:

👋 New to the E-Learning Challenges?

📆 Upcoming Challenges

🚨2024 Articulate User Conference Call for Proposals

Related Content

Using Photo Mosaics to Design Interactive Stories #459

Audio Interviews with E-Learning Challenge Heroes #461

E-Learning Challenges - Complete List!

81 Comments