Updating SL360 variables using javascript in web object (not working)

May 01, 2020

I know there are many posts about this topic, some from 6 years ago, but none seem to address my issue.

My web object in SL360 is a surveygizmo form. I like surveygizmo because I can add a custom js action on any page, so I've added a custom js action on the Thank You page after completing a survey. The js should update a variable in SL360, which would then mark the survey completion task "Complete" in SL. This isn't working, and I've tested many different js scripts mentioned in other discussions. I've used the following:

var player=parent.GetPlayer();
player.SetVar("varTask1",Completed);

...OR...

function updateSLVar() {
var player=parent.GetPlayer();
player.SetVar("varTask1",Completed);
alert("Testing alert");

}

updateSLVar();

...and neither are working. I've tested alert ("Testing alert"); by itself, and it is firing, so there's something with the parent.GetPlayer(); that isn't working.

I have published my course to a web server and am using Chrome. I've included a text reference to varTask1 in SL to see if it updates, but it does not.

Any ideas? Thank you!

13 Replies
Artur Trzebunia

I've updated the syntax per your suggestion, and still no luck. I'm including the html source code with the function updateSLVar(). If you search for "updateSLVar" in the attached HTML page you'll see where I've created and ran the function to update the variable in SL. It's still not working. Any issues with the HTML code that you see?

Russell Killips

Hi Artur,

The code that I provided you does work. I have attached an example for you to take a look at.

I think you are running into cross domain issues. The articulate storyline course and form will have to be hosted at the same domain.

If they cannot be hosted on the same domain, then you will have to take a look at using postMessage API.

Artur Trzebunia

Russell, I figured this out using very similar js to what you provided me. Thank you!
I'm concerned about using the "*" in parent.PostMessage("Completed","*"); I'm not sure what the URI should be, and I've tried "https://360.articulate.com" and also "https://app.surveygizmo.com/" and neither worked. Any ideas? Thanks again!

Russell Killips

The "*" is known as the target origin. This could be set to where the course is hosted from.

Also in the Articulate listener JavaScript, you can check for the incoming message origin.

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent,function(e) {
  if(e.origin == 'https://app.surveygizmo.com'){
    var player = GetPlayer();
    player.SetVar("varTask1", e.data);
  }
},false);

Artur Trzebunia

Russell, I'm testing the target origin script above, and I'm having trouble getting the variable to update in SL. I've set up this statement correctly, I believe...

if(e.origin = 'https://www.surveygizmo.com/s3/5588257/ASL3-NEO-Interview-Case-Study-Part-1-Task-2')...

With it, the variable does not update. Without it, it does. Keep in mind that I'm not changing anything in the survey's js. It's still set to:

parent.postMessage("updating varTask1 in SL","*");

I need the parent to listen for the origin because I have other iframes in the course (e.g. lightbox slides) and without the correct origin of the event, my variable will change when I open some lightbox slide in my course instead of completing the survey. I hope this makes sense.

This discussion is closed. You can start a new discussion or contact Articulate Support.