Automatically send quiz results from Captivate in HTML5

Captivate 8 review
Since the move to HTML5 I have been trying to find a way to automatically send e-Learning data from Captivate without using the users’ email client. In flash I used the CPGURU email reporting widget and have been unable to replicate it’s functionality with HTML5. Until now. Last month I stumbled onto Marius Craciunoiu blog post about the Mandrill App. With a few tweaks here and there I was able to get emails automatically send from Captivate in HTML5, sending both user variables and Captivates quiz variables.

View Demo  Download source files

Once you have downloaded the source files (see big purple button) there are five steps to get this working in your own project:

  1. Get a free Mandrill API key.
  2. Insert mailto.html into your Captivate project.
  3. Set up the variables.
  4. Edit the email.
  5. Generate your project.

Step 1: Getting an API key

Getting a Mandrill API key is simple, all you need to do is follow the steps below:

  1. Sign up to Mandrill by following the link.
  2. Once you have told them about yourself you will be directed to the dashboard. Here you need to select Get API Keys on the right.
  3. On the next screen you need to select Add API Key. This will generate an API key.

You can set up multiple API keys and use different ones for different Captivate projects.

Step 2: Getting the mailto.html file into Captivate

Once you have your API key you need to copy it into the mailto.html.

  1. On line 51 of mailto.html you should see the words Your Key Here. This is where you paste in your API key. Make sure that the key is still in between the two apostrophes and then save the document.
  2. Now open your Captivate project and go to the slide you want the email to send from.
  3. I use the slide after the quiz results. This is because when I had it on the results slide it sent an email every time I failed as well as passed, this felt like overkill.

  4. Now it is just the case of inserting the mailto.html file as a web object. In Captivate 8 this is done by selecting Objects >> Web from the ribbon.
  5. In the web object address field type mailto.html. You can also name the web object if you wish.

When you generate your project you will have to copy the html file into the output each time, unless you edit the Captivate template.

Step 3: Setting up variables

The Captivate project you have downloaded comes with a number of custom variables as listed below.

  • vemail
  • vfirstname
  • vlastname
  • vjobrole
  • vcustom1-10

These variables are set by the user when they enter their information in the text-entry boxes on the first slide. To be able to send these variables you must get these variables out of Captivate and into the mailto.html. This is done on lines 14-38 in the file. Each line follows the pattern:

var NewVariableName = parent.GetFromCaptivate(“CaptivateVariable”);

You can use this structure to get any variable that is in your Captivate project to display in the email.

As the mailto.html file is not technically part of the Captivate project, it is embedded as an iframe, you must use the parent. prefix to access the variables.

Using the custom variables

You can use the custom variables 1-10 however you wish, but I thought I’d share how I use them. I usually giving each variable the default string value of “incorrect”. Then for each question, when the user gets it correct I add an advanced action that assigns the value “Correct” to the relevant variable. This means that you can start to see which questions learners are getting wrong, which is invaluable when it comes to evaluating your course.

Step 4: Editing the email

The chances are that the template I have built isn’t exactly what you want. The good news is that it can easily be edited to show more or less information.

If there is one small error in your JavaScript the email will not send. So make sure you make regular backups.

Editing text

If you want to edit the description that displays before the variable you can. Displayed text will be between two apostrophes. You can add whatever you want. You can even use basic HTML mark-up or style it with CSS.

If you want no description, make sure you delete both apostrophes.

Removing a variable

Removing a variable is simple. You just delete the relevant line in the maito.html file. For example, if you want to remove the time taken variable all you have to do is select all the content on line 75 and delete it.

Adding a variable

The easiest way to add a variable is to copy and paste the line before. This lowers the chance of a coding mistake. Once you have pasted the line in you will need to replace the variable name with the one you want and add a relevant description.

For example, to add the number of correct answers to the email you add this line to the code:

+ ‘<br>Correct Answers: ‘ + correctAnswers

If you want to use a variable that I have not defined then you will have to define it yourself. To do this follow the stucture outlined in step 3.

Adding a variable from Captivate to other fields

You are not limited to having variables in the body of the email only. You can have them in any field. Although you should take care with the email fields as they have to be an email address.

For example, if you want the email subject to change dynamically you can do this by incorporating the project title variable. This is done by overwriting the ‘Email results’ on line 66 with coursename.

You don’t use apostrophes with variables.

Step 5: Generate your project

This needs no explanation, but make sure you copied your mailto.html file into the generated folder. Once you have the copied the files, upload your project to a server and you will start to see the results flying in.

Summary

And there you have it, a relatively simple email reporting system without spending a penny, enjoy! If you have any questions leave a comment and I’ll try to get back to you as quickly as possible. Happy emailing.

Automatically send quiz results from Captivate in HTML5

27 thoughts on “Automatically send quiz results from Captivate in HTML5

  • January 3, 2015 at 9:01 pm
    Permalink

    This is a neat little trick, got it working in 10 minutes. Thanks for sharing.

    Reply
  • January 15, 2015 at 6:49 pm
    Permalink

    I am interested in a similar functionality except I need the captivate results to go to a text file. I intend on loading the data from the text file into a sql server database. Any thoughts?

    Reply
  • March 21, 2015 at 8:14 am
    Permalink

    hi
    this is really great. thank you.

    instead of displaying the correct or incorrect, is possible to display the answers of the learner?
    What variable we must use?

    Reply
    • March 22, 2015 at 10:50 pm
      Permalink

      Hey Arnaud.
      As far as I know you can’t get this functionality with the default quiz slides. However, if you build your quiz from scratch using click boxes/smart shapes and advanced actions you would be able to have each answer set a variable with a specific value. It would take some time to set up but it would be pretty useful to be able to track quizzes in this much detail.

      Reply
      • March 23, 2015 at 12:14 pm
        Permalink

        hi Georges
        ok and thank you for your answers.
        you will continue in this direction? if you have time. we hope:)

        Reply
  • March 30, 2015 at 10:37 am
    Permalink

    the api is not well documented, mandrill gives no support, no activities or answers on fb, the mail using mandrill service takes about 30 min to arrive – this is NO solution

    Reply
    • March 30, 2015 at 11:07 am
      Permalink

      Well you haven’t really given me much to help you with there!

      Personally I have never had to wait longer than 5mins for an email to come through with my fairly extensive testing – this is with pretty much every major email provider and a number of different companies internal email systems. A slow sending time can be caused by an error in the JS, have you been running it with the console open? Where there any error messages?

      As far as support goes, no it’s not great, that is why I tried to explain the set-up here. I have managed to get a few replies from Mandrill via Twitter – maybe try that.

      Obviously I disagree with your NO solution comment. For people who don’t want to go down the LMS route this is a fairly quick, free way to get results out of Captivate. Is it as good as an LMS? No, but it does a job.

      Reply
    • March 30, 2015 at 11:15 am
      Permalink

      Sorry for you waldemar
      I try this solution and it is very good for me
      i don t need to wait 3 min for to receive the email in my box

      Reply
  • April 8, 2015 at 8:46 am
    Permalink

    Good Morning
    I would liketo have your advice or your help .
    I change my quiz result by removing the revision area.
    I made an action advance: TestScore
    if cpQuizinfoTotalQuizPoints 30 then it displays a different message B in a SmartShape .
    it works well.

    Now I will wish to display this message of the SmartShape in the mailto file based on points earned by the participant.
    do you think that is possible ?
    I don t know what variable I can use
    can you help me?
    Thanks you

    Reply
  • April 8, 2015 at 9:44 am
    Permalink

    sorry, text is missing

    I made an action advance: TestScore
    if cpQuizinfoTotalQuizPoints 30 then it displays a different message B in a SmartShape .
    Now I will wish to display this message of the SmartShape in the mailto file based on points earned by the participant.

    Reply
    • April 8, 2015 at 10:36 am
      Permalink

      Hey Arnaud,

      I would create a variable called vfeedback. Set it’s default value to your failed caption text eg “Unlucky you failed”. Then add to your advanced action in the true section assign variable vfeedback to “congratulations you passed”

      You can then easily pull the vfeedback variable into the mailto script as described above.

      Hope this helps

      Reply
  • April 8, 2015 at 11:13 am
    Permalink

    thanks you Georges for your quickly answers.

    This is the same procedure if I have 4 messages instead of 2 (failed and congratultion) ?

    exemple in my advanced action:
    if cpQuizinfoTotalQuizPoints = 30 and = 55 and = 82
    then message: Congratulations

    Reply
    • April 8, 2015 at 11:23 am
      Permalink

      I have 4 possibilities of messages instead of 2
      if cpQuizinfoTotalQuizPoints is lower 30 then you failed
      if cpQuizinfoTotalQuizPoints is highter 30 and lower 55 then you just passed
      if cpQuizinfoTotalQuizPoints is highter 55 and lower 82 then good
      if cpQuizinfoTotalQuizPoints is highter 82 then “Congratulations”

      can i use the same variable vfeedback for these 4 messages?

      Reply
  • April 8, 2015 at 12:40 pm
    Permalink

    Yes, if have the the four messages appearing then all you need to do is add assign variable vfeedback “Comment” to the advanced actions controlling them.

    Reply
    • April 8, 2015 at 2:05 pm
      Permalink

      Thanks you Georges.
      It works well.
      🙂

      Reply
  • May 20, 2015 at 8:04 pm
    Permalink

    I’m not very tech savvy, but am working with captivate for a school research project. I’m trying to use the process you detailed above for reporting, but am having trouble with one of the first steps. I can’t seem to open the “mailto.html” properly to be able to insert my API key and variables. Any advice?

    Thanks!

    Reply
    • May 20, 2015 at 9:33 pm
      Permalink

      Hi Nick. So you need to open the file in a code editor. Brackets and Notepad++ are free. Once you have it open you will be able to edit the code. You can use notepad also but the code editors are nicer to use.

      Reply
  • May 27, 2015 at 9:42 pm
    Permalink

    I am struggling to open the Captivate Source File. Was this made in Captivate 8? I know they are not backwards compatible… Not sure how to create my own version. How do I add the proper variables?

    Reply
    • May 27, 2015 at 10:01 pm
      Permalink

      Yes, it was made in Captivate 8. But it is quite quick to set up, all you have to do is assign a variable to a text entry box. The variables I used are all listed in the htm file but you can use your own.

      Reply
  • June 15, 2015 at 11:10 pm
    Permalink

    Hi there.

    Got an API key on Mandrill placed it into mailto.html, tried testing it locally, no go. Also tried testing the included demo download, locally, not much luck.
    Here’s my question: Do I need to include all the custom variables on the Quiz Results slide by hand and insert a web-object (mailto.html)? Or just insert mailto.html.
    Also, are there any specific server settings necessary for this to run?

    Reply
    • June 16, 2015 at 9:21 am
      Permalink

      Hi Anton, I’ve just emailed you. I will have to have a look at the files.

      Reply
  • July 14, 2015 at 7:39 pm
    Permalink

    Hey George!

    Great tutorial, this is super helpful! I just have two issues that I’m sure I’m doing something wrong to cause, some help would be fantastic!

    1. The form at the beginning is not properly validating that I have information in the fields. I’ve checked my variables and everything seems fine, but it won’t submit the form properly.
    2. I don’t really understand step 5. In publishing the file to the web, am I supposed to zip up both the HTML file AND the captivate file? Some more information on precisely how to do that would be really fantastic!

    Thanks again!

    Reply
    • July 15, 2015 at 1:04 pm
      Permalink

      So i can give a few pointers on your second 2 question. Basically you need to do what you do with your content as normal when you go live. So just upload the generated files (index.htm et al) to a some sort of server. This is so you can access your e-Learning/quiz as if you were an end user. You may need to ask you IT guys and gals to do this for you.

      The form issue will be a Captivate issue which i can solve without seeing the files I’ll drop you an email to talk about this.

      Reply
  • October 15, 2015 at 12:42 pm
    Permalink

    If i want to insert a web object. i cant find the “mailto.html”.
    i can only insert
    *.oam
    *.pdf
    *.zip

    if i zip the mailto.html file and then i insert this zip(mailto.html)
    it doesnt work in the output

    What do i wrong?

    Reply
    • October 15, 2015 at 12:50 pm
      Permalink

      It looks like you are inserting an HTML5 animation not a web object. Web object is found in the Objects menu option not media. Hope this helps

      Reply
  • October 25, 2015 at 8:03 pm
    Permalink

    Works like a charm. Thanks for sharing this great option to get basic result reporting without an LMS!

    Reply
  • September 5, 2017 at 9:07 am
    Permalink

    Hello George
    I cant get i working.
    Can it be a problem because mandril is now a part of mailchimp?

    please help
    Pim

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *