Creating Exploration Activities with Interactive Markers in E-Learning #464

Using Labeled Graphics in E-Learning #464: Challenge | Recap

Labeled graphics are one of the most popular explore-type interactions in e-learning. And creating them in Rise 360 or Storyline 360 is a breeze—just drop some markers on an image, add your content to the labels, and voilà! You've got an engaging interaction in minutes.

But here's the best part: labeled graphics aren't just quick and easy to build; they're also incredibly flexible. They're perfect for getting learners to drill down into timelines, maps, floorplans, diagrams, org charts, screenshots—you name it.

🏆 Challenge of the Week

This week, your challenge is to share an example of a labeled graphics interaction. You can use Rise 360, Storyline 360, or any tool you like. Just show us how you’re using interactive markers to create explore-type activities.

In case you missed it, this week’s Storyline 360 update included the option to easily adjust interactive marker sizes to optimize accessibility for any screen.

🧰 Resources

Check out the previous labeled graphics challenge recap to see how this popular interaction can be used in e-learning:

Labeled Graphics in E-Learning RECAP #371: Challenge | Recap

✨ 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 drill down into this week’s challenge, check out the progressive disclosure techniques your fellow challengers shared over the past week:

Progressive Disclosure in E-Learning RECAP #463: 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.

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

108 Comments

Jonathan Hill
Hero

21 days ago05/31/24 at 4:43 pm (UTC)

Hello! I'm on holiday in the Welsh mountains at the moment, but 'here's one I made earlier'. PACKING FOR A HIKE WITH A 9-YEAR-OLD Demo: https://bit.ly/elhc464 Download: https://bit.ly/elhc464dl No Javascript shenanigans this week, just some masking tricks using vector images from Freepik and I've created my own 'interactive markers' using the emphasis animations and state changes.

19 days ago06/01/24 at 6:22 pm (UTC)

It smacks of “it really happened in real life”.

18 days ago06/03/24 at 2:06 pm (UTC)

Love the objects animations and zipper effects!

18 days ago06/03/24 at 5:08 pm (UTC)

As a hiker I can say you have the most important things covered...especially the cat. :)

Jesse Wu

21 days ago05/31/24 at 4:45 pm (UTC)

Hello all, My entry for this week is a 5-piece drum set simulator. It might be off-topic as I only attached minimal information on the labels, drum kits in this case. I hope my entry at least inspires you. Keywords: Hover-to-reveal, Toggle-to-reveal, Click trigger, Key press trigger https://360.articulate.com/review/content/5a812d73-8ead-46e6-b100-87dbfb366ab5/review

18 days ago06/03/24 at 5:28 pm (UTC)

There's a lot I like about your demo. I had the sound off on my computer when I first looked at it, so I missed the drum audio examples the first time through. I liked hearing the differences in the drums' sound, and the key stroke option is something I appreciate since I hate using a mouse.

Jesse Wu
Jodi M. Sansone

17 days ago06/03/24 at 6:32 pm (UTC)

Thank you for your kind words. I am glad you like it. :)

16 days ago06/05/24 at 8:25 am (UTC)

This was a great. I liked how I could play a tune - sort of :-)

Jodi M. Sansone

21 days ago05/31/24 at 5:23 pm (UTC)

Picasso's "Guernica" Demo: https://jodisdemos.s3.amazonaws.com/464+Guernica/story.html I've had this painting on my mind for a demo for some time. This challenge seemed like a good fit.

21 days ago05/31/24 at 5:42 pm (UTC)

I've had the privilege of seeing Guernica in person, and I can imagine this demo running nearby in a museum. Great work.

20 days ago05/31/24 at 7:55 pm (UTC)

I especially love your art-focused projects, Jodi! What a powerful painting and excellent learning experience.

20 days ago06/01/24 at 12:55 pm (UTC)

I enjoyed you interpretation of the various elements, Jodi. I was always perplexed by the painting and could never quite figure out what it was supposed to be depicting.

19 days ago06/01/24 at 6:12 pm (UTC)

Indispensable explanation of the pictorial work, Jodi. Well done. And I admire "le beau geste", the way you went beyond the subject of the challenge, allowing the labeled graphics to be precisely invisible to bring the work closer to the foreground.

Cyd Walker
Jodi M. Sansone

18 days ago06/03/24 at 2:16 pm (UTC)

I appreciate the art themed projects as well, learn so much. Echoing Thierry, liked how the labeled graphics brought focus in an emotionally complex depiction.

18 days ago06/03/24 at 5:13 pm (UTC)

Thanks for all the kind comments on this demo. I'm afraid the experience of seeing Guernica in person is fading from my memory. I saw it in 1983 after it was returned to Spain, then again in 1992. I'll have to get back to Madrid soon! The Museo Reina Sofia has an in depth look at the painting: https://guernica.museoreinasofia.es/en

Cyd Walker
Jodi M. Sansone

16 days ago06/05/24 at 12:59 pm (UTC)

To see it would be awe inspiring!

15 days ago06/06/24 at 4:53 pm (UTC)

What a powerful piece of art! Sadly, its depiction is still very relevant today.

14 days ago06/06/24 at 8:30 pm (UTC)

thats amazing!!

Maren West
Jodi M. Sansone

14 days ago06/07/24 at 3:50 pm (UTC)

Great use of graphic markers Jodi! As Jonathan said I could see this as an interactive activity within the museum's gallery. I also like how you matched the course theme to the painting to really emphasis his use of black and white. I'm going to Madrid in the fall and am excited to see the painting in person

10 days ago06/10/24 at 8:26 pm (UTC)

Jodi, I agree with Jonathan, this should be playing next to the art to explain the inspiration of the art he created.

7 days ago06/14/24 at 2:20 pm (UTC)

What a nice and well-designed interaction, Jodi. I especially like the design of the hotspots and the close buttons that clearly stand-out and make navigation very easy.

Emily Williams

20 days ago05/31/24 at 8:35 pm (UTC)

Diagram of Furry Friends Demo: https://williamsportfolio.s3.us-east-2.amazonaws.com/Diagram+of+Furry+Friends/story.html These are absolutely 100% scientifically accurate diagrams of cat and dog anatomy. No need to question anything because these are facts.

19 days ago06/01/24 at 6:19 pm (UTC)

I love humor, music, drawings and facts, Emily, because I love cats. But my cat Mélo's belly is a caress magnet, I assure you.

18 days ago06/03/24 at 2:37 pm (UTC)

In that case, please give Mélo a belly rub from me!

17 days ago06/03/24 at 6:30 pm (UTC)

Done.

18 days ago06/03/24 at 2:26 pm (UTC)

Engaging journey into better understanding of cats and dogs Emily! The music enhances the playfulness, and the graphics bring joy to the playground.

18 days ago06/03/24 at 5:15 pm (UTC)

The facts indeed! Sweet!

17 days ago06/03/24 at 7:01 pm (UTC)

Okay, that is truly adorable. Thank you for sharing!

16 days ago06/05/24 at 9:09 am (UTC)

This is such a cute entry!

16 days ago06/05/24 at 3:22 pm (UTC)

Thank you, everyone! This one was such a joy to put together.

14 days ago06/07/24 at 3:53 pm (UTC)

Very fun Emily! Like Thierry, my cat also loves belly rubs (most of the time)

14 days ago06/07/24 at 4:20 pm (UTC)

Please give your cat a belly rub from me as well - just proceed with caution! :)

Thierry EMMANUEL

20 days ago06/01/24 at 5:58 pm (UTC)

Bonjour Heroes. The funny thing is that I had absolutely no idea when I started the demo this morning. I opened an SL file and... a little light began to shine in the darkness. I concentrated on customizing the labeled graphics, that's all. And a few details to give a strangely cool escape game vibe. https://360.articulate.com/review/content/9748c4aa-1094-4afe-94e6-942b9130804b/review (you can leave the room with the labeled graphics. Find out how)

Cyd Walker
Thierry EMMANUEL

18 days ago06/03/24 at 2:19 pm (UTC)

Love the mysterious vibe and the effects on this one Thierry!

18 days ago06/03/24 at 5:16 pm (UTC)

Nice vibe and I like the animated markers too. They bring the demo more to life.

15 days ago06/06/24 at 4:41 pm (UTC)

Love it. The background sound definitely gives off an eerie feeling!

9 days ago06/12/24 at 2:50 pm (UTC)

Loved this and wonder where do you get the animated flame? Loved all the effects of this.

8 days ago06/12/24 at 7:54 pm (UTC)

This is amazingly clever - so funny

Gülsüm Güneşen Yıldız

18 days ago06/02/24 at 8:46 pm (UTC)

Hi everyone, I wanted to create a learning module that combines visual appeal with interactivity, making it easier for users to grasp complex information about places of ship. https://storage.googleapis.com/ggcreative/challenge/464-labelled%20graphics/story.html

Cyd Walker
Gülsüm Güneşen Yıldız

18 days ago06/03/24 at 2:21 pm (UTC)

I really like the vintage feel of this to explore parts of the ship Gulsum!

17 days ago06/04/24 at 6:21 am (UTC)

Thanks a lot for your comment.

Jodi M. Sansone
Gülsüm Güneşen Yıldız

18 days ago06/03/24 at 5:19 pm (UTC)

I liked how you articulated what was happening in each area of the ship. Attaching the function of the area to what people are doing in it made it feel more accessible to me.

17 days ago06/04/24 at 6:23 am (UTC)

My goal was to make the information as relatable and easy to understand as possible by connecting it to real-life activities. Your comment reassures me that this approach is effective. Thanks again for taking the time to share your thoughts! 🚢✨

eLearn Dev

18 days ago06/03/24 at 9:10 am (UTC)

Hello everyone, For this week's Articulate challenge, we created "Inspect and Clean Machinery," an e-learning sample that uses interactive markers to enhance learning. Users can click on different parts of a bulldozer to learn step-by-step inspection and cleaning procedures. https://www.swiftelearningservices.com/articulate-challenge-464/

18 days ago06/03/24 at 2:22 pm (UTC)

I liked how the focused parts stay in color and the rest go grayscale!

18 days ago06/03/24 at 5:21 pm (UTC)

I love excavators. I just watched one being used to rescue a car from the lake behind my house. I learned a lot from your demo.

Eva Ludowig

18 days ago06/03/24 at 5:03 pm (UTC)

Hi everyone, I tried out a combination of the Rise labeled graphic with just audio snippets: https://knowledge2brain.com/Portfolio/SMART%20Learninggoals_EN/scormcontent/index.html It would be great if there would be a possibility to let the audio play directly after pushing the hotspot... This was the reason why I initially started with creating the complete hotspot graph in storyline. But then it only plays nicely in a web browser, but not on mobile (there, the user sees a black background with a play button and then the storyline interaction opens in a new window). I tried to find the code in the SCORM export that would initiate this behavior - but it seems to be more difficult to find than I was hoping ...

17 days ago06/03/24 at 9:25 pm (UTC)

I thought this was a good use of the Rise labeled graphic. I have never used that block with audio in the labels, so you gave me some new ideas.

7 days ago06/14/24 at 2:09 pm (UTC)

Hi Jodi, Hi Jayashree, thanks a lot for giving feedback on my Rise example. Have a great day, Eva

16 days ago06/05/24 at 9:10 am (UTC)

This is a great example of Rise labeled interactives! Very neat!

Ron Katz

17 days ago06/03/24 at 10:43 pm (UTC)

Hello Heroes! Here is my entry for the week. A labeled graphic of an Indiana Jones Pinball Machine. Demo: https://360.articulate.com/review/content/e41dd815-b155-4fb6-9b12-a2576409b971/review Download available in the comments/feedback section of Review 360. LinkedIn Post: https://www.linkedin.com/groups/4864787/ Click all 21 markers for a special surprise.

16 days ago06/05/24 at 12:56 pm (UTC)

I didn't realize pinball machine games can be so in depth Ron! Loved seeing the Indiana clip.

Suzanne Neafus

16 days ago06/05/24 at 5:02 am (UTC)

Greetings everyone - Here is what I have been working on. The videos are from an online session my community handbell group produced in 2021. Demo: https://tinyurl.com/5kbnbs8y Link to Storyline File: https://tinyurl.com/bddchw44 Is it possible to view a video if another one is stacked on top of it? For example, you hear the audio in my far-right marker but cannot see the visual. In the worst case, I can redo the items. One thought was using a lightbox slide, as I did for Shake, but I am open to other suggestions. Thank you - Suzanne

16 days ago06/05/24 at 6:05 am (UTC)

Hi Suzanne! Yes, it is possible to stack videos and use the visibility settings in layers to determine which videos are seen. I used this technique in the recent 'Roulette Wheel' challenge. LIFE CHOICES Demo: https://bit.ly/elhc458 Download: https://bit.ly/elhc458dl The audio element is a little trickier. You'll need to include triggers that stop the videos from playing when they're not being viewed, or separate the audio and have it play on the layer, as I have done here.

16 days ago06/05/24 at 11:06 am (UTC)

Thank you. I thought I had seen it done recently. I look forward to examining what you have done and then using it to modify mine.

Jayashree Ravi

16 days ago06/05/24 at 9:06 am (UTC)

In a world where learning needs heroes, these designers stand out with unmatched skills and passion. These superheroes embody eight extraordinary characteristics. How many of these match your own superpowers as a learning designer? Are you ready to be inspired? Link - https://360.articulate.com/review/content/54647492-7f06-4d66-819d-e4abb42dfe09/review

16 days ago06/05/24 at 12:54 pm (UTC)

Love the superhero theme and the design size Jayashree! It's a happy boost to realize all the things we have in common.

15 days ago06/06/24 at 6:51 am (UTC)

Thank you!

Ron Katz
Jayashree Ravi

16 days ago06/05/24 at 5:06 pm (UTC)

I like the look and feel of the interaction. The voice was sufficiently enthusiastic. Was that AI?

15 days ago06/06/24 at 6:51 am (UTC)

Thanks Ron! I used WellSaid Labs for the voiceover.

7 days ago06/14/24 at 2:23 pm (UTC)

I already feel like a super-hero, thank you :-) I also liked the AI voice and the overall idea is great.

Ashi (Neha) Tandon

16 days ago06/05/24 at 3:17 pm (UTC)

Hello...I didn't know how to use a fire extinguisher until recently. It serves as inspiration for this challenge: https://www.ashitandon.com//Storyline%20Files//ELH464/story.html

Cyd Walker
Ashi (Neha) Tandon

16 days ago06/05/24 at 3:51 pm (UTC)

Really like the practice using the fire extinguisher! Well done! One of those skills that always needs refreshing because we hope we don't have to use it.

15 days ago06/06/24 at 6:53 am (UTC)

This is very well done, Ashi! The "Try it" part is very smooth! Like the minimal yet effective animations.

Samuel Apata
Ashi (Neha) Tandon

15 days ago06/06/24 at 1:52 pm (UTC)

So good!

15 days ago06/06/24 at 4:35 pm (UTC)

Thank you, everyone.

15 days ago06/06/24 at 4:55 pm (UTC)

Love it. I have to remind myself from time to time how to do this because you don't know how you'll react in the moment a fire happens. I just purchased some fire repression blankets for my kitchen too because my instinct is to throw something on top of a fire first.

Tom Kuhlmann
Staff

16 days ago06/05/24 at 3:46 pm (UTC)

Here are a couple prototypes I was using for a workshop on markers. https://360.articulate.com/review/content/9dfc2913-d11d-4c70-aac2-0909deb2d434/review

16 days ago06/05/24 at 3:53 pm (UTC)

Great inspiration, thanks Tom!

15 days ago06/06/24 at 4:34 pm (UTC)

So slick! Loved the animations!

Tom Kuhlmann
Staff

15 days ago06/05/24 at 8:23 pm (UTC)

Here's another one I used with a slider. https://360.articulate.com/review/content/f60f5376-a10a-4ad2-817b-ba310a16938c/review

7 days ago06/14/24 at 7:48 am (UTC)

Oh I love that one!

Sneha Sivaprakash

15 days ago06/06/24 at 11:34 am (UTC)

Hi! In my demo, "Jordan's Journey: Smart Steps to Bank Deposits," learners are guided through the process of depositing money in a bank. I used a combination of custom built markers and built-in ones, Vyond for video and Adobe Stock for images to provide an enjoyable experience. Link to demo: https://storage.googleapis.com/snehaselearningprojects/%23464%20Labelled%20Graphics/story.html

bylittle learning

15 days ago06/06/24 at 1:13 pm (UTC)

Hey!! Here's our demo - Early intervention strategies in newborns. We used labeled graphics in a 360 interaction of a hospital room. Have a look at what we did over here: https://360.articulate.com/review/content/051e1e05-1280-4d06-baff-b5360e2467c3/review And here is the .story file if you'd like to have fun with it: https://www.dropbox.com/scl/fi/cfwyvoxku65nyu9b016af/bylittle-Learning-ELH-464.story?rlkey=ddwnmo67yxzjuy5073whmsqyv&st=j2wczy88&dl=1

Samuel Apata

15 days ago06/06/24 at 1:47 pm (UTC)

Player One: https://360.articulate.com/review/content/c8288600-4ff7-4e74-ae03-e162cc97c2e4/review

15 days ago06/06/24 at 4:31 pm (UTC)

I managed to find all 15 :)

Kate Golomshtok

15 days ago06/06/24 at 4:06 pm (UTC)

Hello everyone! I decided to create a template of labeled graphic for the restaurant industry https://360.articulate.com/review/content/9ec95434-ed53-45cf-bcc2-735bdb427045/review

15 days ago06/06/24 at 4:29 pm (UTC)

This is so well done!

14 days ago06/07/24 at 3:02 pm (UTC)

I loved the style, immediate feedback and sims diamond :-D

Ron Katz
Kate Golomshtok

10 days ago06/11/24 at 1:45 pm (UTC)

Good use of isometric prospective. Initial instruction to start with the manager does a great job of introducing the topic. Allowing free selection of the bullet points is a nice touch. Tracking whether item has been visited or hovered over gives feedback as to completion of the project. The simple change of state for each bit of advice is helpful to insure we didn't miss anything. Nicely done.

Preston Ruddell

14 days ago06/06/24 at 6:21 pm (UTC)

Hello all! Here are two examples of labeled graphics that I included in a Bike Safety course that I recently built: https://360.articulate.com/review/content/14e4abaa-b729-4fb3-b1a9-0ea022188603/review

Ron Katz
Preston Ruddell

10 days ago06/11/24 at 1:42 pm (UTC)

Great example with clear photographic examples of the hows/whys of bike lane vs sidewalk.

Sabrina Sgoda

14 days ago06/07/24 at 2:40 pm (UTC)

I call this the "shiny hover info" because it works very well with fancy product shots on white backgrounds. There's 3 different kinds to do this. Probably more. But who has the time? Check it out: https://360.articulate.com/review/content/7cdff231-08ed-4c18-b650-63cad787a076/review

Maren West

13 days ago06/07/24 at 9:37 pm (UTC)

Short and sweet Rise clickable graphic about some of the different types of pasta: https://360.articulate.com/review/content/6ab59eac-8ef3-4cd8-9749-828276b37035/review

Ange CM

13 days ago06/08/24 at 4:04 pm (UTC)

Hello! Can you speak Macaque? Barbary macaques communication through facial expressions. https://360.articulate.com/review/content/e45f9dd2-4291-4147-8460-7182adeea488/review

13 days ago06/08/24 at 4:17 pm (UTC)

Great, Ange. I finally understand what the other French drivers are trying to tell me from their own cars.

Ange CM
Thierry EMMANUEL

13 days ago06/08/24 at 4:28 pm (UTC)

Ha! Ha! Thierry, You definitely have a great point there. I would extend it to all drivers and in many more situations. It's amazing how our expressions/silent communication are so similar to theirs'.

10 days ago06/11/24 at 1:35 pm (UTC)

A subject I wouldn't have thought of, yet quite interesting. Thanks for including the source material. I suppose if you wanted you could continue their study by having us actually select what we perceived the macaque's expression to mean and then stored our responses in a GoogleSheet. Then you could have let us know if our perceptions were correct or not. I like the simplicity of the design and the selection of colors and photo sizes.

7 days ago06/14/24 at 1:47 pm (UTC)

Thank you Ron,The collation of responses and feedback is an interesting idea. Have to hone my SL/Google sheets SL/word doc skills.

Stephen Taylor

11 days ago06/10/24 at 8:23 am (UTC)

Hello everyone. My contribution - a very simple module explaining the key components of a bicycle and how you can use them to ride more safely and efficiently: https://360.articulate.com/review/content/c7e5d118-d594-41c1-b1d0-e6cc115ed3b9/review

11 days ago06/10/24 at 3:56 pm (UTC)

Enjoyed bike operational reminders Stephen, especially the brakes and weigh distribution. Loved the moving back ground and how it stops when selecting a marker.

10 days ago06/11/24 at 4:04 pm (UTC)

Thanks very much, Cyd. Glad you liked it. I used to teach people how to ride bicycles. one of the best bits was training them to do emergency stops. Weight distribution was very important!

Ron Katz
Stephen Taylor

10 days ago06/11/24 at 1:28 pm (UTC)

I like the background movement keeping the action going until a layer is opened to provide detail. It looks really good (simple) and the advice is great.

10 days ago06/11/24 at 4:05 pm (UTC)

Thanks Ron. I though the moving background would add something to what is otherwise a simple piece of content - pausing the background when a topic seemed a good idea too.

10 days ago06/11/24 at 4:06 pm (UTC)

It is cool to use moving BG. Love it.

3 days ago06/17/24 at 7:29 pm (UTC)

I loved this piece. How did you get the background to flow continuously?

Fabienne Werder

9 days ago06/12/24 at 6:43 am (UTC)

Hi everyone I have found a labeled graphic that I have created in an online learning module which was just published recently. I created it before the emphasize animations were introduced, so there was a lot of "timeline-action" needed to program this (pausing, jumping back, resuming). Hope you like it, and I'm curious about your feedback! https://360.articulate.com/review/content/86c5614e-0e6b-4eaa-a1d0-1199823e63aa/review

Daniel Canaveral

9 days ago06/12/24 at 4:54 pm (UTC)

For funsies: https://360.articulate.com/review/content/bb3addb4-5f8c-4b6e-a159-3b6f5a085c00/review

How are Course Designers Using Labeled Graphics in E-Learning? #464

🏆 Challenge of the Week

🧰 Resources

✨ Share Your E-Learning Work

🙌 Last Week’s Challenge:

👋 New to the E-Learning Challenges?

🚨 2024 Articulate User Conference Call for Proposals

Related Content

How are Designers Using Progressive Disclosure in E-Learning? #463

Moving Beyond E-Learning's Next Button #462

15 Ways to Progressively Disclose Information in E-Learning #463

108 Comments