Classnames to act on in Storyline

Hi Math.  I love this concept but we need to update the accessibility field to either provide alt text, or to make the object not visible to accessibility tools. Is it possible to use javascript to achieve this effect and still provide alt text?

Yes you can... depends a bit on your alt texts... but as those are strings nevertheless you can use the values you use for alt texts as selectors for Javascript.

If you have a sample i gladly help.

Kind regards,
Math

with "Alternative text" you can also use to find a special video in the html DOM tree (if there are more then one on a slide)

Jürgen

Hi Math. I have attached a sample file. Any guidance you can give me will be greatly appreciated.

Kind regards
Desiree

I'm out of town now. Will check it when I'm back home 🍹

Basically its easy. For the 2 elements with a acc-text you can use a selector that uses part of the description to find and select the element.

The code below triggers the red fire extinguisher to get selected and animated.
let extinguisher = document.querySelector("[data-acc-text*='Powder Extinguisher']");
gsap.to(extinguisher,{duration:1,scale:0.7,rotation:32, repeat:-1,yoyo:true});

Notice the *= in the selector. That means it will select ALL elements with 'Powder Extinguisher' in the acc-text. If you have multiple elements with that in the acc-text you get a HTML-Collection and need to select the one you want. Eg. extinguisher[0]...

I will add a sample of that in the Storyline.

For the 3rd image its similar.
let asbestos = document.querySelector("[data-acc-text*='Friable asbestos']");
gsap.to(asbestos,{duration:1,scale:0.7,rotation:32, repeat:-1,yoyo:true});

The first image however is not selectable with this approach. However there is another way for that. If you dive into how a page is build up in HTML with the browser inspector you will discover the layers in the Storyline are build up from the bottom. As shown in this image.


So with some Javascript you can select any layer.
First at the start of the timeline you add code to get all elements visible on the Storyline timeline.
var allTimelineElements = document.getElementsByClassName('slide-object slide-object-vectorshape shown');
var player = GetPlayer();
player.SetVar("allTimelineElements",allTimelineElements);
Add a variable to hold those... and set it to the just collected timeline elements.
Now you can select any visible element on the timeline.

Do remember scope in Storyline. So we are getting the elements from the variable.
var player = GetPlayer();
var allTimelineElements = player.GetVar("allTimelineElements");

Offcourse you could also get all elements in the current trigger, but that is a lot of code without proper reuse.

Using the logic shown in the image this will select and animate the image without any acc-text.
Notice i use [1] to select the element on position 1 of the HTMLCollection.

var frame = allTimelineElements[1];
gsap.to(frame,{duration:1,scale:0.7,rotation:32, repeat:-1,yoyo:true});

Adding the Storyline now. Will make some sample on how to stop looping GSAP animations soon.

Thank you so much Math. I really appreciate the clear explanation and the updated example.