Blog Post

E-Learning Challenges
2 MIN READ

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

DavidAnderson's avatar
6 months ago

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:

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

Published 6 months ago
Version 1.0
    • CydWalker_mwhc's avatar
      CydWalker_mwhc
      Community Member
      I didn't realize pinball machine games can be so in depth Ron! Loved seeing the Indiana clip.
  • EvaLudowig's avatar
    EvaLudowig
    Community Member
    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 ...
    • Jayashree_Ravi's avatar
      Jayashree_Ravi
      Community Member
      This is a great example of Rise labeled interactives! Very neat!
    • JodiSansone's avatar
      JodiSansone
      Community Member
      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.
      • EvaLudowig's avatar
        EvaLudowig
        Community Member
        Hi Jodi, Hi Jayashree,
        thanks a lot for giving feedback on my Rise example.
        Have a great day,
        Eva
    • JodiSansone's avatar
      JodiSansone
      Community Member
      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.
    • CydWalker_mwhc's avatar
      CydWalker_mwhc
      Community Member
      I liked how the focused parts stay in color and the rest go grayscale!
    • JodiSansone's avatar
      JodiSansone
      Community Member
      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.
      • MaviDeniz's avatar
        MaviDeniz
        Community Member
        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! 🚢✨
    • CydWalker_mwhc's avatar
      CydWalker_mwhc
      Community Member
      I really like the vintage feel of this to explore parts of the ship Gulsum!
  • 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)
    • JeffreyRiley-9e's avatar
      JeffreyRiley-9e
      Community Member
      Loved this and wonder where do you get the animated flame? Loved all the effects of this.
    • AshiTandon's avatar
      AshiTandon
      Community Member
      Love it.  The background sound definitely gives off an eerie feeling!
    • maren_west's avatar
      maren_west
      Community Member
      Very fun Emily! Like Thierry, my cat also loves belly rubs (most of the time)
      • EmilyRardin's avatar
        EmilyRardin
        Community Member
        Please give your cat a belly rub from me as well - just proceed with caution! :)
    • EmilyRardin's avatar
      EmilyRardin
      Community Member
      Thank you, everyone! This one was such a joy to put together.
    • EvaLudowig's avatar
      EvaLudowig
      Community Member
      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.
    • NormaJohnson-4b's avatar
      NormaJohnson-4b
      Community Member
      Jodi,
      I agree with Jonathan, this should be playing next to the art to explain the inspiration of the art he created.
    • maren_west's avatar
      maren_west
      Community Member
      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
    • StephenTaylor's avatar
      StephenTaylor
      Community Member
      This was a great. I liked how I could play a tune - sort of :-)
    • JodiSansone's avatar
      JodiSansone
      Community Member
      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.
      • JesseWu's avatar
        JesseWu
        Community Member
        Thank you for your kind words. I am glad you like it. :)
  • 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.
    • JodiSansone's avatar
      JodiSansone
      Community Member
      As a hiker I can say you have the most important things covered...especially the cat. :)