Javascript to trigger multiple elements in Storyline

May 07, 2021

Math Notermans
By Math Notermans

A user needed a sample of a Javascript to trigger an audio on all elements on a slide. Offcourse that is possible so i made a sample.

https://360.articulate.com/review/content/a477f9f5-6348-4570-88fd-f9060ecdb7dd/review

Main thing to know is how to get to all page elements you want to be clickable.
Basically this line does that...
var allClickableElements = document.querySelectorAll("[data-acc-text*='.png']");

You need some string that is used in all your images on the page. If you want all pngs be clickable...well then the line above creates an array that you can loop and use in Javascript. Depending on your elements you can ofcourse use another string.

In the part of your code where you want to loop through your array to do something with all elements you can use a for if loop. Something like this..
for(var i = 0; i < allClickableElements.length;i++){
allClickableElements[i].addEventListener("mouseup", MouseUpHandler);
allClickableElements[i].addEventListener("mouseup", MouseUpHandler);
}

My complete code looks like this...
jsCode
In the sample i made i exported all images from Illustrator at double scale. So they get named 'image@2x.png'. This makes it easy for me to select all images with a selector. If you have an existing Storyline where you donot have a proper naming of your assets so you can select all easily... you need to set 'accessibility names' directly in Storyline.
In the image below you see that when importing images in Storyline they get automatically assigned the sources name.
accNames

So in the Javascript code we now can select all our elements. In the MouseUpHandler i just set the variable 'playAudio' in Storyline.
In Storyline a trigger on that variable opens up the AudioLayer1 and then the audio plays.
playAudio

Thats basically it...
Adding my Storyline..


9 Replies
Pete Brown
10 months ago06/26/23 at 11:55 am (UTC)

Hi Math

Your ways are always creative! Thanks for sharing.

On a slight tangent, once you've found the DOM elements you want to work with in javascript, do you know a way to CLICK them from inside the javascript? I.e., if you want to simulate a user clicking them.

Using a click() event or dispatchEvent doesn't seem to work.

In particular, I've tried to programatically  'click' a Storyline marker object, but can't make it happen.

I'd really appreciate any insight, experience or thoughts you've had with something like this.

PeteB

larry van wave
8 months ago08/16/23 at 4:58 pm (UTC)

I am trying to get an element to have a listener, and I used most of your code, but missing something. Can you diagnosis this.

var TopButton = document.querySelectorAll("[data-acc-text='ImmEnroll']");
var player = GetPlayer();


TopButton.addEventListener("mouseup", MouseUpHandler);


function MouseUpHandler(e)
{
 var e = window.event || e;
 alert("Mouse");
}

Jürgen Schoenemeyer
8 months ago08/16/23 at 5:44 pm (UTC)

with

document.querySelectorAll

you get a list (array) of results, but this function

TopButton.addEventListener

don't work with lists, only for a single result

here is a version, which works for one and multiple search results

var player = GetPlayer();
var TopButtons = document.querySelectorAll("[data-acc-text='ImmEnroll']");

TopButtons.forEach( item => {
  item.addEventListener('mouseup', MouseUpHandler )
});
  
function MouseUpHandler( event ) {
  console.log( event );
  alert("Mouse");
}

https://360.articulate.com/review/content/de746630-26bb-4f04-9e5f-aa6c2dd4eba0/review

Math Notermans
8 months ago08/17/23 at 10:22 am (UTC)

Although Jurgens sample is perfect i shortly want to point the difference between 'querySelectorAll' and 'querySelector' out to you. As you used querySelectorAll you get a list with multiple elements and thus your code as is didnot work. If you used querySelector instead it works fine though. Nevertheless is Jurgens solution better as it loops over all the items in the list. But its always good to be aware of why something does or doesnot work.

larry van wave
8 months ago08/17/23 at 2:16 pm (UTC)

Another follow up question, is there a way to use "this" as in place of the actual variable name in the gsap function? Just so I could refer to the function without having to use the name of the variable, this way I can reused the code, (see example below).

 

var player = GetPlayer();
var TopButtons = document.querySelectorAll("[data-acc-text='ImmEnroll']");

var TranButton =document.querySelectorAll("[data-acc-text='Transport']");

TranButton.forEach( item => {
item.addEventListener('mouseup', MouseUpHandler )
});

TopButtons.forEach( item => {
item.addEventListener('mouseup', MouseUpHandler )
});


function MouseUpHandler( event ) {
   gsap.to(this, {duration:.5, alpha:.5})
}

Sign In to Reply