JavaScript Object Targeting in Storyline (The Ultimate Guide)

In the past, I showed you how to talk to and target specific items in your storyline stage by targeting accessibility text. Today, I will show you how to do the same thing with an object ID instead. That way, you don't have to use the accessibility text; you can use a simple number to talk to an object.

This comes in handy when you add custom JavaScript and want a specific object to hide, show, animate, or do something custom. It becomes incredibly useful with any custom JavaScript code.

*Chapters*
00:00 Introduction
00:24 What does it mean to reference an object
01:03 JavaScript Basics
01:53 Referencing with Accessibility Text
03:10 Referencing the Model ID
05:47 Comparing Both Options
07:26 How to find the Model ID
11:43 Easier Way of Finding the Model ID
13:11 Conclusion

*🥷 Link to Full Courses*

[raffel]

Hi Jeff, thanks a lot for this great idea. I know an easy way to find the ID immediately in the source code:
1. Give the object an accessability text like "temp info rectangle 1".
2. Preview the slide with this object.
3. Use Inspect
4. Press CTRL+F and search for this: "temp info rectangle 1
It is important to have the " before the search text, otherwise it will guide you to another code line.
With the " before the search text it will guide you the correct line and the ID is in there as well.

[Welddar]

Hey Jeff. Doesn't the select element tool (on the left of the "Element" text) work to find the object's id ?
Just like in the chome.

[keyonv]

Hi, Jeff. Thank you for the videos!
Is finding the data-model-id for a web object video any different? I was able to locate the data-model-id like your video instructed. However, I'm unable to add an event listener using JavaScript to listen for a click on the video. I have a variable within my Storyline set as false. I'm basically trying to have the user click the video so that the click turns the Storyline variable to true (which will enable the continue button). If you do see this and reply, I'll forever be grateful for your help! Thank you.

[lukedominicodonnell]

Jeff! I'm so glad I found you and these videos. I do have to ask is there a way to do this using a web object so functions for objects can be widgetized?

[iteasdal]

Jeff, I just added "gribnif" as the accessibility text, then previewed the slide in Storyline, searched for "gribnif", found the ID, then changed the accessibility text to whatever I wanted. That seems a more simple way. Am I missing something?

[DaiseiSub]

Hi Jeff! Is there a way to lock a specific Menu item using JavaScript?

[kocobudo]

Hey Jeff, what benefit does using the objects ID have over referencing the accessibility text?

[lex_m_]

Is there a way to loop animations using JavaScript?

[dilshansamaraweera]

Hello sir, your videos helped me a lot. Currently, I am trying to pass a custom value (courseid) using a query string to my articulate content. Unfortunately, when I checked my LRS, custom values didn't apply to the built-in articulate XApi statements. I want to know if this is possible, and if so, can you provide a video tutorial regarding that or even a general direction on how to achieve it? Thank you, sir.

[kevynhorton]

Hey Jeff, great video for finding the ID! I have a JavaScript question: how would I retrieve the 'data-acc-text' (whatever it is [from 57 possible options]) from a dropped item, to use in adjusting another text variable? I really enjoy your videos.

[michaelkocher]

If you use the tool in the top left (the dotted square with the corner arrow) you can just click on it and jump right there.

[denbatteful]

Var and let have different behaviour. I would advise using var, as let is more strict and a bit more unforgiving.

[emrahakan]

"Hello, thanks for the video, but I can show you a very basic way to get the data-model-id. Please make a new video with this method.

First, you need to preview the slide.
Then, click Inspect.
If you are using Windows, press Ctrl+Shift+C.
If you are using a Mac, press Command+Option+C.
Then you can click on square, triangle or whatever you are searching for, and it will automatically focus, so you can easily find the data-model-id.
Hope this helps you guys!"