Using Markers to Transform Graphics into Interactive Elements #484

Interactive Markers in E-Learning #484: Challenge | Recap

Storyline’s built-in markers make it super easy to design professional-looking labeled graphics. Just drop a marker onto an image, pop in a title, a quick description, maybe even some supporting media, and you’ve got one of the most popular e-learning interactions ready to go. It’s fast, it’s easy, and it looks awesome.

If you want something more custom, you’re usually looking at starting from scratch with your own graphics, labels, captions, and several supporting triggers. Or you could leverage a lesser-known feature in the built-in markers.

Marker’s Hidden Superpowers

The interactive markers come with a couple of nifty triggers that are exclusive to markers: Content Opens and Content Closes. These let you detect exactly when a marker is opened or closed, which opens up some cool possibilities. Check out the following example to see what's going on.

View the project | Download the source file

Why is this interesting?

Generally, markers are the only interactive element, while the background image remains static.

But in this example, the background isn't a single image. It's actually composed of several individual graphics, each with its own visited state.

With the marker's Content Opens trigger, we can detect when a marker is opened and use that to trigger visual states of the background images. Brilliant!

Sure, you could add hover or visited states, but that means manually setting up each one for the markers.

Instead, the built-in trigger does the work for you, skips an extra step, and lets you try out a feature you might not have played with before. And that's what this week's e-learning challenge is all about.

🏆 Challenge of the Week

This week, your challenge is to work with the content opens or content closes triggers to make something else happen. You can recreate something like the coffee example featured in this post or take your demo in a completely different direction.

✨ 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 open (or close) this week's challenge, check out the brutal examples your fellow challengers shared in last week's design challenge:

Neubrutalist Designs in E-Learning RECAP #483: 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.