Home / Blog

The Easier Way to Get Data-Model-IDs in Articulate Storyline

By Nathan Stoker · January 10, 2026 · 5 min read

The Easier Way to Get Data-Model-IDs in Articulate Storyline

If you've ever written JavaScript in Storyline, you've dealt with data-model-ids. They're the unique identifiers Storyline assigns to every object so your scripts can find and control them.

For years, the common advice was to crack open browser DevTools and dig through the DOM. It worked, but it was slow, tedious, and honestly kind of fragile. Good news: you don't need to do that anymore.

Storyline now gives you two built-in ways to grab object IDs—both faster and more reliable than anything involving DevTools.

The Old Way: A JavaScript Workaround

I had published a blog with the same title August 8th 2024, before Storyline added native ID retrieval, I put together a JavaScript function that made the process easier. You'd paste this into a trigger, and it would log the data-model-id to the console based on an object's accessibility text:

function getDataIdOfElement(altText) {
  const selector = `[data-acc-text="${altText}"]`;
  const element = document.querySelector(selector);
  console.log("Selector used:", selector);

  if (element) {
    const dataModelId = element.getAttribute("data-model-id");
    console.log("Data model ID:", dataModelId);
    return dataModelId;
  } else {
    console.log("Element not found");
    return null;
  }
}

// Usage:
getDataIdOfElement("your accessibility text");

To use it, you'd set the accessibility text on your object (like "dogs" for an image of a dog), then call getDataIdOfElement("dogs"). The function logs the selector and the ID to the console so you can copy it.

This was a solid workaround at the time—way better than manually digging through DevTools. But it still required previewing, opening the console, and copying values out. It added steps to something that should be simple.

The good news? You don't need this anymore.

Why the Old Methods Aren't Worth It

Whether you were using my JavaScript function or the classic DevTools inspection approach, both methods share the same problems:

  • They require previewing and opening browser tools

  • They don't scale well with lots of objects

  • They're prone to copy/paste mistakes

  • They teach beginners the hard way first

Storyline now has better options built in. Let's look at those.

Option A: Right-Click and Copy the Object ID

When you just need one or two IDs, this is the fastest route.

  1. Open your Storyline project (Edit view or Preview both work)

  2. Right-click the object you want—shape, button, image, whatever

  3. Select Copy Object ID (or similar wording)

  4. Paste the ID wherever you need it

That's it. This works great for one-off interactions, quick testing, or small scripts where you're not juggling a dozen elements.

Option B: Use the JavaScript Trigger Dropdown

When you're working with a bunch of objects, the JavaScript trigger interface keeps everything organized.

  1. Add a JavaScript trigger (any trigger event works)

  2. Open the object dropdown in the trigger panel

  3. Select an object

  4. Copy the exposed object ID

  5. Repeat for everything you need to reference

  6. Delete the temporary trigger when you're done

This approach eliminates manual inspection, cuts down on errors, and scales cleanly when your interaction gets complex.

Working with Multiple IDs? Centralize Them

Once you're referencing more than a few objects, scattering IDs throughout your code becomes a headache. The solution: group them at the top of your script.

This keeps everything readable, reusable, and easy to update later.

Grouping Similar Objects

Use an array when multiple objects share the same behavior:

const STEP_IDS = [
  '5w9p1oRm1rx',
  '6LmAsv0kF5T',
  '5ddRPB2TKrk',
  '5ZR8p16WR7N'
];

This works well for steps in a process, multiple click targets, animated elements, or progress indicators.

Mapping IDs by Role

Use an object when elements serve different purposes:

const UI_IDS = {
  nextButton: '6qo1Hi8eitj',
  prevButton: '65bxjWnzY0A',
  submitButton: '6Sq05MbsCPK',
  feedbackPanel: '5rcTZR6tWHp'
};

This is handy for navigation controls, overlays, panels, or any state-based UI.

Grouping by Feature

For larger interactions, organize by feature:

const QUIZ_IDS = {
  answers: [
    '6ZhjskvWz68',
    '6cBNoE7ywlC',
    '5vXsqk4CNrG'
  ],
  submit: '5jXsazaVcmW',
  feedback: '62FQ7yZyEnl'
};

Quizzes, scenarios, accordions, tab systems—anything with multiple moving parts benefits from this structure.

What to Avoid

Don't hard-code IDs directly inside your logic:

// ❌ Hard to maintain
document.querySelector('[data-model-id="5w9p1oRm1rx"]');
document.querySelector('[data-model-id="6LmAsv0kF5T"]');

Centralizing prevents duplication, confusion, and future headaches.

Things to Keep in Mind

A few notes that'll save you trouble:

  • Object IDs stay stable unless you delete and recreate the object

  • IDs aren't slide-specific—they're project-wide

  • Collect your IDs after your layout is mostly locked in

  • Always prefer Storyline's native methods over browser inspection

The Takeaway

Stop digging through the DOM. Use the tools Storyline already gives you, centralize your IDs, and spend your time building interactions instead of debugging fragile workflows.