Trigger when clicking on a web-object

Hi, Rutwin: I would first try placing a transparent shape over the web object, and then creating a trigger executing whatever ever action you want to have happen based on the learner interacting with the transparent shape/web object. Took a screenshot of my approach. Placed transparent object in front of web object on timeline. Hope that helps. Let me know if it doesn't. --Daniel

Hi Daniel,

Thanks for your advice, unfortunately this won't work in this particular case since there also has to be an interaction with the underlying web object.

Please bear with me, since I really appreciate someone looking into this, perhaps you can tell me if I am doing something that could be achieved a lot easier

I would like to have a javascript triggered at the same time the user clicks on a web object.....(The user needs to click on a button displayed by the web object)

I've tried the following things so far:

• I tried using a frame (shape) but this won't work with web objects somehow, SL will prevent clicking on objects behind the frame.
• Same problem occurs when I made my own frame. Other objects behind a frame, like buttons, can be clicked on without an issue...but not web-objects.
• I've tried placing 4 rectangles around the web object, and set a trigger to go off when a user "clicks outside" those rectangles....but there were 2 issues here: 1. there is no option to change the condition into "and" instead of "or" for all 4 shapes. 2. a futile pursuit anyway since storyline isn't even aware of clicks being made on web objects.
• Last thing I desperately tried was to place again 4 rectangles around the web object (just a cm2) and set a trigger to go off whenever the mouse hovers over one of them....this works..however, the trigger needs to fire after the user clicks on the web object and not before...there is a chance the user won't move the mouse back over the rectangles.....and thus the trigger won't go......

I hope you could follow that and maybe you have some other idea that I haven't thought of?

Regards,

Rutwin

Hi Rutwin - 

What do you want to have happen as a result of clicking on the button in the Web object? If you want something to happen in Storyline, you could use a relative reference to access the player API and update a variable in Storyline when the button in the Web object is accessed.

For example, on the button in your web object, trigger a JavaScript function something like this:

var player=parent.GetPlayer();

player.SetVar("StorylineVar","someValue");

Something like that would let Storyline know that the object within the Web object has been triggered.

As an extension of this, you could use some JavaScript or Jquery to fire the "SetVar" above whenever anything in your Web object is clicked. 

Hi Steve,

I've heard you're the JavaScript hero here, so thanks for popping by!

I don't know a whole lot about JavaScript, but the part that puzzles me the most here is the "separate playing fields": SL and the browser.... 

(I even thought of locally storing the Jquery library and only code in SL)

..on the button in your web object, trigger a JavaScript function something like this:

   var player=parent.GetPlayer();

   player.SetVar("StorylineVar","someValue");

Something like that would let Storyline know that the object within the Web object has been triggered.

This JavaScript has to be triggered from the server I suppose, not from within StoryLine...correct?

you could use some JavaScript or Jquery to fire the "SetVar" above whenever anything in your Web object is clicked.

Actually after the web object is clicked there will be a variable stored in the localStorage or sessionStorage which I would like to bring in StoryLine.

Could you take a look at the following thread where I posted the source of the web object, it will make things a bit clearer I think:

http://community.articulate.com/forums/t/39976.aspx

Thanks

or maybe there is a way to call the webspeech API from within SL? that would be very nice.

I used the following code to make this work:

Somehow I am not getting this.  I would like to trigger something in SL based on a click on a web object.

Currently the code in the webobject is:

====================================================================

var bar = document.getElementById('bar').addEventListener('click', function (e) {
 //alert("clicking progress ind");
    // setPauseInStoryline();
  var player=parent.GetPlayer();
  function setVar() {
  player.SetVar("pause", true);
  var jsInput=player.GetVar("pause");
  alert(jsInput);
 }

});

=======================================================================

I have tried this with Chrome and Firefox with no joy.

Any thoughts?

-Marc Lee

Denver

Hi Marc,

This thread is a bit older, so I'm not certain Rutwin or others are still subscribed, but I did want to point out that when testing such content you'll want to test within the intended environment, as you'll see described here specific to Google Chrome not executing javascript triggers in the local published version.  You may also want to review the Javascript best practices mentioned here. 

You could also try sending a private message to the other users here to see if they could take a look at your code and offere any other advice. 

Hi Ashley,

I use this

var player=parent.GetPlayer();

player.SetVar("StorylineVar","someValue");

for web objects click. When I run in Chrome, it doesn't work in Chrome. It can work very well in Firefox and IE. How to solve to work in Chrome?

Chrome uses a different Flash player installation by default than the other two and can be more difficult when testing locally. The Flash Player Security feature prevents communication between Flash and the browser by default. Adding your publish location is different for Chrome. Do you still see this problem when uploading to a web host?

I found a much easier way that works for me. Place a rectangle over the web object. Make it so there is no fill (but leave the outline of the rectangle). Add a trigger so when the mouse hovers over the rectangle the event is triggered. Make sure to uncheck the "restore on mouse leave" option. 

Thanks for sharing Jordan!