In this video tutorial, we’ll explore how to click on objects in Articulate Storyline 360 and register those clicks using mouse click event listeners in Javascript. We’re going to click on multiple objects affect their properties, all by using only one trigger - the execute Javascript trigger.

To exemplify this, I made a hidden objects mini game. In it, you have to click on each of the objects scattered throughout the slide. Once clicked, the object will move and then disappear. And the name of the object will be crossed off a list. This is really amazing if you want to implement gamification into your projects.

This is something I’ve been looking forward to do for a long time, and I’m so glad I got it to work! Enjoy!

Here’s the video

Code used

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

var shuttle = document.querySelector("[data-acc-text='shuttle']");
var satellite = document.querySelector("[data-acc-text='satellite']");
var lander = document.querySelector("[data-acc-text='lander']");
var telescope = document.querySelector("[data-acc-text='telescope']");

var shuttleText = document.querySelector("[data-acc-text='shuttleText']");
var satelliteText = document.querySelector("[data-acc-text='satelliteText']");
var landerText = document.querySelector("[data-acc-text='landerText']");
var telescopeText = document.querySelector("[data-acc-text='telescopeText']");

let timeline = gsap.timeline();

function addAnimation_MoveAndDisappear(target, targetText){
    timeline.to(target, {y:"-=100", duration:0.5, ease:"power1.out"});
    timeline.set(target, {opacity:0});
    timeline.set(targetText, {opacity:0})
}



shuttle.addEventListener('click', () => {
    addAnimation_MoveAndDisappear(shuttle, shuttleText);
    timeline.play();
});

satellite.addEventListener('click', () => {
    addAnimation_MoveAndDisappear(satellite, satelliteText);
    timeline.play();
});

lander.addEventListener('click', () => {
    addAnimation_MoveAndDisappear(lander, landerText);
    timeline.play();
});

telescope.addEventListener('click', () => {
    addAnimation_MoveAndDisappear(telescope, telescopeText);
    timeline.play();
});