JavaScript Object Targeting in Storyline (The Ultimate Guide)

[@raffel2001]

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.

[@LearningDojo]

Oh that is a great tip! Didn't even think of that to make it easier to find.

[@Jasynn54321]

Great vid man. If Articulate wants to open up JS users in Storyline, they either need to display that ID in the interface, or add a simple field in properties that lets us add a custom name for the ID.

[@LearningDojo]

Totally agree!

[@debnew6195]

I learn so much watching your videos.

[@LearningDojo]

I'm so glad!

[@Welddar2]

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.

[@LearningDojo]

Yeah possibly, maybe I need to use that more :)

[@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.

[@LearningDojo]

It sound like if I am understanding that you could just do this based on a trigger. So instead of doing JS, add a trigger when the video is clicked to change the variable. Or maybe if that does not work add a hotspot that when clicked plays the video and hides so you can get that without doing any JS.

[@keyonv]

@@LearningDojo Thank you. I was able to find out how to structure my JavaScript so that it changes the variable to true (mostly thanks to this video). I wanted to challenge myself since I know the work arounds you mentioned. It works on regular web objects, but I found out the hard way that some players (e.g. - Kaltura player) have their own little ecosystem. I would have to read Kaltura documentation to figure out how to structure all of this. At least I was able to experiment a little bit using JavaScript. I would love to see more videos on JavaScript and how we can use it as a learning developer. Thanks again for your videos!

[@DaiseiSub]

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

[@LearningDojo]

Like just random pages? You can lock the menu in the player settings but not sure if you are talking about just 1 page

[@lex_m_]

Is there a way to loop animations using JavaScript?

[@LearningDojo]

Yep! Using greensock you can loop animations. I have a video on that here kzbin.info/www/bejne/o3uwk5-jnpKLa7M

[@kocobudo403]

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

[@LearningDojo]

It could simplify the code a bit if you have a lot of accessibility text or if the accessibility text changes than you don't have to change your code as well since the ID stays the same unless you delete the object. So may be more reliable than accessibility. Hope that helps.

[@kocobudo403]

it does. Thanks for the content. Keep up the great work!@@LearningDojo

[@lukedominicodonnell2347]

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?

[@LearningDojo]

Yeah there is an easier way than I showed in this video. Gonna do an updated video soon that addresses this.

[@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?

[@iteasdal]

Just tried it. It works great.

[@LearningDojo]

Yeah you could do that. I also found a way to find it easier than what I showed in the video so for sure other ways to find it.

[@michaelkocher6178]

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.

[@LearningDojo]

You know, of all my years doing Web development, I have never actually tried that tool. Yes a much better way, thanks!

[@dilshansamaraweera4187]

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.

[@LearningDojo]

Hmm, where is the course ID stored? In the LMS? Or is that something that is in your course?

[@dilshansamaraweera4187]

​@@LearningDojo In LMS, sir. The course is created in the LMS and articulate content that I am reffering is only a module of that course. Therefore I am trying to pass the courseId to the articulate content that I am creating. I set the courseId to LaunchUrl querystring( where actor, basic auth, and endpoint are set) as a custom parameter and was also able to capture it from my articulate content through a javascript trigger and store it in an articulate variable. Then, using that variable, I was able to send that custom value information to the LRS through a custom xApi statement. My concern is how I can set that custom variable to their built-in xApi statements.

[@LearningDojo]

@@dilshansamaraweera4187 Aw - so you cannot really edit the built in xAPI statements. You have to trigger your own with the data. So you could send a custom xAPI trigger and add the variable data through the trigger wizard but it is a new and extra xAPI statement and not one of the out of the box xAPI statements. I really do wish Storyline opens up the ability for us to customize the out of the box xAPI statements.

[@kevynhorton9032]

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.

[@LearningDojo]

It is actually done with the accessibility text. Check out my other greensock videos. I show how to use that specifically.

[@denbatteful]

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

[@LearningDojo]

Thanks for sharing

[@emrahakan1711]

"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!"

[@LearningDojo]

Since this video was released I did discover that. I click on the arrow on the top left and then select the object. Storyline told me this will get easier soon.