Blog Post

E-Learning Challenges
2 MIN READ

Using Hotspots and Invisible Buttons in E-Learning #296

DavidAnderson's avatar
5 years ago

Hotspots and Invisible Buttons in E-Learning #296: Challenge | Recap

Hotspots are interactive objects that work a lot like regular buttons. They can show layers, change states, jump to slides, and do almost everything standard buttons can do. What makes hotspots so unique is they’re invisible buttons. 

Because they’re invisible, you can test learners’ ability to identify parts of an image without providing hints or guides for the learner. To help you out in working with hotspots, Storyline displays the hotpots as transparent green shapes.

Click-and-reveal interactions are just one use case for hotspots.

Hotspots can control sorting order and drop targets in custom drag-and-drop interactions. They can be used as transparent barriers to prevent learners from clicking other objects on the slide. What else can you do with hotspots? That’s what this week’s challenge is all about!

Challenge of the Week

This week, your challenge is to show how hotspots and invisible buttons can be used in e-learning. 

Never used hotspots? No problem. You can learn all about them in our user guide: Working with Hotspots.

Share Your E-Learning Work

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own 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 back to your posts so the great work you’re sharing gets even more exposure.

Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you dive into this week's challenge, test your knowledge in the eighth grade e-learning quizzes:

1912 Eight Grade Quiz Makeover RECAP #295: Challenge | Recap

Wishing you a great week, 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.

Published 5 years ago
Version 1.0
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      Thanks all - hopefully that first screen wasn't too frustrating and the 'repetition/reward curve' isn't too steep!

      As you'll see from the download (to follow), you can adjust the timing as you see fit. My own tests indicate that it takes users between 3-7 times to clear the windmill first time, but once they have the knack they can often do it in just 1 or 2 attempts.

      Was fun to set up. Haven't built a 'game engine' in this way for a while.
    • SunetSullivan-7's avatar
      SunetSullivan-7
      Community Member
      Ha ha, I think you demo matches the real life experience quite well, what a great way to get the learner's attention!
    • JenniferEdgerto's avatar
      JenniferEdgerto
      Community Member
      Well, it appears I am no better at fake miniature golf than I am at real miniature golf (we call it putt-putt also). It took me a few tries on the first hole. I love how you presented this, Jonathan. The motion graphics were perfect and very creative - a very nice micro-module!
      • KOsunero's avatar
        KOsunero
        Community Member
        First, I put hotspots over each section of the palette and tied that to trigger different states to change the color of the paint bucket next to it to match the color. I also added true/false variables so that clicking on the section of the palette will set it to "true", while setting the other sections as "false".

        Next, I put freeform shapes over each part of the dinosaur that I wanted to be colored in, with different states corresponding to the different colors on the palette. I added hotspots over each of these pieces as well.

        I then added triggers to change the states of the shapes over each part of the dinosaur to change a certain color when (1) selecting the corresponding hotspot and (2) to change to the color that matches the color on the palette that is set to "true".

        I just added my source file to the demo in the comments on the right-hand sidebar if you want to explore how I did this. Let me know if you have any additional questions!
    • SunetSullivan-7's avatar
      SunetSullivan-7
      Community Member
      This is so cool Kimberly, and very addictive, I had to try out quite a few looks for my dinosaur!
    • Kristy_Moede's avatar
      Kristy_Moede
      Community Member
      Oh man - that was hard - lol! I move my mouse too fast. Cool idea
      • Ron_Katz's avatar
        Ron_Katz
        Community Member
        Thanks, Kiristy. I've tried on my computer with a mouse and with the trakpad. The mouse is definitely easier but I bet a trackball would be best. I have not tried with a touchscreen device. Thanks for the feedback.
    • KatyTran-0aa8d9's avatar
      KatyTran-0aa8d9
      Community Member
      It's amazing Ron. It's really appealing game I've ever tried. I put a lot of effort moving the cursor from left to right and so on to find the markers.
      • Ron_Katz's avatar
        Ron_Katz
        Community Member
        Thank you Katy for your kind words. It is much more challenging with a smart phone, tablet or laptop. It works best if you have a mouse or trackball.
    • SunetSullivan-7's avatar
      SunetSullivan-7
      Community Member
      I like how you are giving the boy and girl turns to search for the Afikomen and the hints you put on the navigation are great. I managed to find the Afikomen quite easily, but I am with Jen on this one, it looks like it was a lot of work.
      • Ron_Katz's avatar
        Ron_Katz
        Community Member
        Yes. The Afikomen is in a random place each time you play. Sometimes you find it quickly, sometimes you go to every room before it is discovered. Yes. It was a lot of work to create but now I (or anyone) can take the basic framework and turn it into an Easter Egg Hunt or a Scavenger Hunt or a Hunt for My Self-Esteem (smile.) Thanks for your kind words.
  • Hi guys

    I use hotspot functionality more frequently to prevent learners from clicking on certain items and that is what I did in this example. My hotspots are on the instruction layers and correct and incorrect feedback layers on this slider interaction to prevent the learner from moving the slider until they have hidden the feedback or instruction.
    Some of you might remember this burro racing theme from ELHC 280. I am busy developing the second and third level of this project and hope to share it again when all levels have been developed.
    I would appreciate any feedback.

    Demo: https://sunet-elh-challenges.s3.eu-west-2.amazonaws.com/ELHC%23296Leadville/story.html
    • DCopenhaver's avatar
      DCopenhaver
      Community Member
      I didn't find the carpel and it still told me I found everything. ;) I like the graphics. Tips would be a fun idea too.
    • KOsunero's avatar
      KOsunero
      Community Member
      I imagine this involved programming many hotspots! Great work!
    • SunetSullivan-7's avatar
      SunetSullivan-7
      Community Member
      I love the way you introduced this interaction by having the email pop up with instructions, what a fun activity!
    • KOsunero's avatar
      KOsunero
      Community Member
      I love this! So many great details, from the little hints scattered throughout the room to the zoom-in on the things you select.
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      I escaped the office. (I kind of miss the office with this on Covid thing going on).

      This was a fun interaction. I like the little surprises along the way.

      Graphics were visually appealing yet simple.

      Nicely done, Sydney.
    • KOsunero's avatar
      KOsunero
      Community Member
      This was fun to explore! It was also a nice way to chunk information without being overwhelmed.
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      This was a visually appealing interaction. Thanks for the great share.
    • Kristy_Moede's avatar
      Kristy_Moede
      Community Member
      Super fun! Very nice - loved the lists and arrows to adjust things
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      Armando, What a super interaction. I think I actually just learned how to make chocolate chip cookies. I did notice that the recipe said 9-11 minutes but the interaction wanted to cook them for 15 minutes. Would they have burned if I let them cook the whole time?
      • armandolopez-3a's avatar
        armandolopez-3a
        Community Member
        Thanks you are totally correct! I updated it to the correct time otherwise they would probably get a smokey/burn taste ;)