Forum Discussion
Get info from active element in Storyline
As another user asked a question in the forum about how to get info of the current selected object, i jumped onto that to figure it out. Actually getting the actual focused element was easy enough.var activeEl = document.activeElement;
This line of code does that. And as GSAP is build into Storyline360 its quite easy to get any info you want from that focused element with the 'getProperty' function of GSAP.var accName = gsap.getProperty(activeEl,"data-acc-text");
But often you want some other element on the page act upon a hover or click of some button. Storyline's timeline acts as a layered HTML5-document, so you can get all of the visible Storyline elements and use z-index to target the one you need.
Here you see a sample implementation of this.
https://360.articulate.com/review/content/ee022197-e948-4f45-8df6-2576c475e5c4/review
Im adding the Storyline as is to this post...so anyone who wants to dive into this can...
Kind regards,
Math
Thanks Math for doing all this, really helpful!
hi i use SL3 so i cant see your story project. Can U help me? I really need this for my projects but i don't understand how it's work
Storyline3 doesnot have GSAP build in. You have to add it first. As i dont have SL3 i cannot help further.
Hi Math, I'd like to be able to get the text string out of certain Storyline 360 check box objects and pass them into a JS script to do something with (compile the text from the check boxes that the user selected and feed them back later in the course or print them out as a reminder of what they chose). Can GSAP be used do this? I.e. is the text string of the Storyline checkbox object stored as a property in such a way that it could be accessed using JS?
Note that the contents I'm trying to pass to JS are not text entry boxes and thus are not currently stored as text variables in Storyline. They also won't be the "currently active" objects.
Yes it can. The biggest problem is getting the correct selector. As Storyline doesnot make normal proper HTML but changes all texts into SVG. So you have to dive into the selectors and figure out what <tspan> or whatever to select. I am gonna mock a sample this weekend.
Kind regards,
Math
Just did some tests and looks like with a default checkbox in Storyline the text of the checkbox is actually exact the same as its 'accessibility name'. So Basically this code will retrieve a checkboxes text.
var allTimelineElements = document.getElementsByClassName('slide-object slide-object-vectorshape shown');
var accNameElement2Change = gsap.getProperty(allTimelineElements[6],"data-acc-text");
console.log("allTimelineElements: "+allTimelineElements.length+" | "+accNameElement2Change);
Where the number is your current layer...count from below.
