LMS API - Embedding a survey in Storyline which automatically adds LMS Student ID into the survey

Jun 25, 2015

I was recently given the task to use a 3rd party survey tool embedded into an elearning course in Storyline. The reason for this was that the client wanted to match the users results from the LMS with the survey data gathered.

The survey data would remain anonymous so we couldn't ask the users to input their name, so the solution we came up with was to use the Student ID from the LMS that the course was ran from. However, the users are not aware of their Student ID so we couldn't ask them to input it themselves. So we had to:

  1. Use a survey tool which would allow us to have a hidden question which populates with information depending on what URL the user accessed the survey.
  2. Embed the survey URL into a Storyline slide, but use a JavaScript trigger to add the Student ID onto the end of the survey URL. This Student ID data would then populate the hidden question in the survey.

So we found a suitable survey tool and then wrote a JavaScript trigger on a blank slide. The JavaScript would basically create an iframe inside the blank slide and load the URL inside this iframe. We then usedĀ lmsAPI.GetStudentID() to get the Student ID from the LMS and added this to the end of the URL.

When the user then reached the slide with this JavaScript trigger, it would display the survey inside the Storyline player with the Student ID automatically populating the hidden field in the survey. The survey tool also allowed us to prevent the user from taking the survey more than once by remembering if the Student ID number had already been submitted.

This allowed the client to run reports on the course data from the LMS and then match it with the survey data received.

A couple problems we encounter were:

  • You have to run the html5 version of the Storyline course for it to work correctly.
  • The iframe we created didn't show unless we changed the z-index to 3. (Basically bringing it to the front in the order.)
  • This created another problem because we wanted to have a message appear when the user clicks 'Next' on the player to warn the user that they were leaving the survey and that they should make sure they submit the results before continuing (they had to submit the results from a button inside the survey iframe). We created this message as a layer in Storyline. However, now we had set the iframe to z-index: 3, the layer with the message box appeared underneath the iframe. To solve this we put another JavaScript trigger on the message layer which would reset the z-index of iframe to 0. This worked, but again it created another problem. If the user decided they hadn't completed the survey and clicked cancel to return to it, the survey iframe would remain hidden. So we then had to add another JavaScript trigger to move the iframe back to z-index: 3, that would only trigger if the user had visited the message layer. So we used a variable that was set to 'False' but would change to 'True' once the user visited the message layer. There was then a condition on the JavaScript trigger to make sure the variable was set to 'True' otherwise it wouldn't trigger.

I have attached a one slide example of this. You'll have to add your own survey URL into the JavaScript trigger.

1 Reply

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