Get info from active element in Storyline

Aug 16, 2021

Math Notermans
By Math Notermans

getinfoAs 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

6 Replies
Fiona Macelli
almost 2 years ago05/11/22 at 4:44 pm (UTC)

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.

Math Notermans
almost 2 years ago05/13/22 at 2:58 pm (UTC)

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

Math Notermans
almost 2 years ago05/13/22 at 3:47 pm (UTC)

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.


Sign In to Reply