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.
If you would like learn more visit learningdojo.n....
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
Пікірлер: 30
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
4 ай бұрын
Oh that is a great tip! Didn't even think of that to make it easier to find.
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
4 ай бұрын
Yeah possibly, maybe I need to use that more :)
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
2 ай бұрын
You know, of all my years doing Web development, I have never actually tried that tool. Yes a much better way, thanks!
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
2 ай бұрын
Yeah there is an easier way than I showed in this video. Gonna do an updated video soon that addresses this.
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
4 ай бұрын
Totally agree!
I learn so much watching your videos.
@LearningDojo
4 ай бұрын
I'm so glad!
Hey Jeff, what benefit does using the objects ID have over referencing the accessibility text?
@LearningDojo
4 ай бұрын
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
4 ай бұрын
it does. Thanks for the content. Keep up the great work!@@LearningDojo
Var and let have different behaviour. I would advise using var, as let is more strict and a bit more unforgiving.
@LearningDojo
4 ай бұрын
Thanks for sharing
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
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
4 ай бұрын
Just tried it. It works great.
@LearningDojo
4 ай бұрын
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.
Is there a way to loop animations using JavaScript?
@LearningDojo
4 ай бұрын
Yep! Using greensock you can loop animations. I have a video on that here kzread.info/dash/bejne/n36BxM6mmZC-ZbQ.html
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
4 ай бұрын
Hmm, where is the course ID stored? In the LMS? Or is that something that is in your course?
@dilshansamaraweera4187
4 ай бұрын
@@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
4 ай бұрын
@@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.
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
4 ай бұрын
It is actually done with the accessibility text. Check out my other greensock videos. I show how to use that specifically.