Embedded Survey Monkey Quiz

Hi Leslie,

I am looking to do the exact same thing with the next button!

Hopefully someone can help!

Dee

Hi there,

I found a way to do this by applying some tricks I use in Captivate and using this post by Richard Hill as a model.

The basic premise is that your survey needs to be placed in an iframe within an HTML page that you create, and that page will be your web object in Storyline. This is because there's no way to directly know for certain a user has completed the quiz or survey in SurveyMonkey. However, we might be able to assume the user has done so if the survey URL changes - which is exactly what happens when the user clicks the Done or Continue button at the bottom of the survey, if the survey is set to return to a thank you page and not close the window. By placing the survey in an iframe of our own, we can write a simple function that detects a change in the iframe's URL, and take action based on that (e.g., show a layer, jump to a scene or slide, or enable the Next button).

1. Create a standalone HTML page. This page will become the web object in Storyline.

2. In the new HTML page, create an iframe and style it as you wish. Give the iframe a unique ID and an onload function call. In my case, the iframe looks like this, only with my survey URL in it:

<iframe id="survey" src="FULL_LINK_TO_YOUR_SURVEY" style="width:100%; height:500px;" frameborder="0" onload="checkSurvey();"></iframe>

3. In the same HTML page, you need to create two variables: one that counts the number of times the iframe contents have changed (because a change in the iframe indicates that the user has clicked the Done or Continue button at the bottom of your SurveyMonkey quiz/survey), and another for the Storyline player object (this allows your page to communicate with your course). Here is how my variables look:

var loadcount = 0;
var player = parent.GetPlayer();

4. Next, still in the same HTML page, you need to declare your onload function. All this function does is check to see if the loadcount is greater than or equal to 1, and if it is, tell Storyline to set our variable to true. My function looks like this:

function checkSurvey() {
  if (loadcount >= 1) {
    var myVar = player.SetVar("surveySubmitted", true);
  }
  loadcount++;
}

5. In Storyline, you will need a variable that corresponds to the one listed in the function above. In my case, that is "surveySubmitted." It should be a true/false type and initially be set to false.

6. In Storyline, create a trigger that performs the action you want (in my case that was to show a slide layer; in your case, it would be to change the state of the Next Button to normal, assuming you already have it set to disabled or hidden on this slide). Set the trigger to occur when the "surveySubmitted" (or whatever your variable name is) changes, on condition that the variable == true.

7. Add your HTML page as a web object, publish, and test.

8. If you need to make changes to your HTML page outside of Storyline to tweak the look/feel or fix issues, you will have to delete the web object and insert it again. It's the only way I could get be sure that my changes were reflected in the published course.

This solution is not perfect because it cannot tell what the user actually did with the SurveyMonkey quiz or survey. It only knows that the iframe contents changed by the user clicking the button at the bottom.

You can only test this in published courses, and I recommend Firefox for that just for testing purposes. You cannot preview it.

I'm sorry but I'm not able to attach a sample at this time because our SurveyMonkey admin is out of the office and it won't let me log in. I'd rather not attach my working sample because it uses a live survey and I don't want to receive test submissions. :-)