Introducing Our New Chrome Extension: Easily Find and Copy Storyline [data-model-id]s

When working on Articulate Storyline courses, developers often need to implement custom JavaScript on specific slide objects. However, to do this effectively, you need to locate the [data-model-id] of the HTML element you want to target. In the past, this process has been cumbersome, requiring manual searches in the browser inspector or custom code added to the course itself.

To simplify this, we at ReviewMyElearning.com are excited to introduce a new Chrome Extension that makes finding and copying these [data-model-id]s easier than ever before!

How the Extension Works

Our Chrome Extension is designed with simplicity in mind. Here’s how it works:

1. Click to Highlight: With a single click, the extension automatically highlights all elements on the slide that have a [data-model-id]. Each element’s ID is displayed in the corner of the object, making it easy to see which element is associated with which ID.

2. Click to Copy: Want to copy a specific ID for use in your JavaScript? Just click on the element, and its [data-model-id] is instantly copied to your clipboard—no need to dive into the browser inspector or manually look through the code.

3. Toggle On/Off: You can easily toggle the extension on or off with a click, giving you full control over when you need to use it.

This tool takes the hassle out of finding and copying Storyline element IDs, giving you more time to focus on what matters: building and improving your eLearning courses.

What the Extension Is Used For

If you’re developing custom JavaScript for Articulate Storyline courses, you already know how important it is to accurately target the right HTML elements. This extension helps developers by:

• Identifying element IDs quickly and easily on any slide.
• Reducing the time spent manually searching for [data-model-id]s using browser developer tools.
• Improving the workflow for course developers who need to integrate custom JavaScript, ensuring they can focus on functionality instead of troubleshooting.

This is particularly helpful when adding interactivity or custom tracking features to courses, where you need to pinpoint specific slide elements.

Why We Created This Extension

At ReviewMyElearning.com, we are dedicated to helping eLearning developers and instructional designers create the best possible courses. We know how frustrating it can be to hunt down the exact element you need to modify or work with, especially when it’s buried in layers of HTML.

After hearing from many developers that they struggled with this process, we set out to create a solution that would make it easier to identify and copy the [data-model-id]s of Storyline elements. By automating the process, this extension helps speed up development time and reduces the risk of human error.

We created this extension to:

• Save developers time and effort by removing the manual process of inspecting HTML elements.
• Simplify workflows so developers can focus on building courses, not on technical roadblocks.
• Empower developers to add custom JS functionality to their Storyline courses with greater ease and precision.

Who This Extension Is For

This extension is ideal for:

• eLearning Developers: Those who are responsible for adding custom functionality or integrating JavaScript into Storyline courses.
• Instructional Designers: Those who collaborate with developers and want a quicker way to identify and work with Storyline slide elements.
• QA/Testers: Those responsible for testing courses and need to verify or troubleshoot specific elements.

Whether you’re a seasoned developer or just getting started with Storyline, this tool will make your life easier by eliminating the time-consuming process of manually finding IDs and reducing potential errors.

How to Get the Extension

You can easily download and install the extension from the Chrome Web Store. Once installed, just click the extension icon whenever you need to highlight or copy Storyline [data-model-id]s, and you’re good to go!

Demo

Inspiration 

This extension was partially inspired by Nathan Stocker and Jeff Batt.

Conclusion

At ReviewMyElearning.com, we are always looking for ways to streamline the development process for eLearning professionals. Our new Chrome Extension is just one of the tools we’ve developed to help you create better courses, faster.

Give it a try today, and let us know how it’s improving your workflow. We’d love to hear your feedback!