A few weeks ago, I wrote an article highlighting how you can use a Google Sheet (with some Google Apps Script) as a leaderboard in your eLearning course. That article also showcased how to integrate that leaderboard into Articulate Storyline. Today, as promised, I would like to show how you can do this for Adobe Captivate and Lectora as well!
It will be important to read the previous article first in order to properly set up the Google Sheet. So, make sure you click on the link below and read through that now:
How to Create a Leaderboard for eLearning with Google (Part 1)
Instructions for Captivate
Play with a live demo here.
First update the JavaScript provided with the URL you copied when you deployed the code above as a web app. It is easier to edit the JavaScript in an editor before you paste it into Captivate. I recommend Sublime Text 3.
- Open the JavaScript file.
- Replace the YOUR_URL_HERE text with the URL you saved earlier.
- Save the JS file.
The JavaScript we’ll use needs to access some variables in the Captivate course. We will create them using the names I used in the sample. If you already have one or more of these with some other name see the ‘advanced’ section of these instructions.
In Captivate create three variables:
- userScore
- userName
- topTenMsg
In your course, you will need to set the values of userScore and userName. Probably let the user enter their own name. And get the score from a game or interaction.
Display the topTenMsg variable wherever you want the leaderboard to appear. Ensure when you insert the variable into the text box you increase the maximum length; 800 characters should be enough.
After you have set the user’s score and name during the course; use a JavaScript Action to send the data to the spreadsheet and retrieve the top ten list. This trigger could be on a button, when the a slide starts, etc. Create your trigger and paste the JavaScript include with the download into Captivate (make sure you updated the URL)
Publish your course and test it from a web server or LMS.
http://www.youtube.com/watch?v=k7p8AyaoTIA
Instructions for Lectora
Play with a live demo here.
First update the JavaScript provided with the URL you copied when you deployed the code above as a web app. It is easier to edit the JavaScript in an editor before you paste it into Lectora. I recommend Sublime Text 3.
- Open the JavaScript file.
- Replace the YOUR_URL_HERE text with the URL you saved earlier.
- Save the JS file.
The JavaScript we’ll use needs to access some variables in the Lectora course. We will create them using the names I used in the sample. If you already have one or more of these with some other name see the ‘advanced’ section of these instructions.
In Lectora create three variables:
- userScore
- userName (most likely will be an entry field)
- topTenMsg
In your course you will need to set the values of userScore and userName. Probably let the user enter their own name. And get the score from a game or interaction.
Create a text block that we will use to display the topTenMsg variable wherever you want the leaderboard to appear.
Once you have set the user’s score and name use a JavaScript Action to send the data to the spreadsheet and retrieve the top ten list. This action could be on a button, when the a slide starts, etc. Create your trigger and paste the JavaScript include with the download into Lectora (make sure you updated the URL)
Create another action to change the content of the text block to the value of the topTenMsg variable. Because Lectora will not update a displayed variable automatically when it changes we need to update it after our JS is done running. So set this action to delay 2 seconds. That should give the JS enough time to send the data to the server, receive the top ten, and update the variable.
Publish your course and test it from a web server or LMS.
https://www.youtube.com/watch?v=P77OtR2ZUO0
*Advanced Variables:
If you already have a variable for one of the three items above you can update the JavaScript to use it (rather than my names). Lines three through five of the JavaScript file are used to set the names of the variables.
Files/Scripts/Demo
James Kingsley has worked in the eLearning Industry for over 15 years. He has won several awards for combining technologies to produce better eLearning. He is an Articulate MVP. James is the Senior Technology Architect for eLearning Brothers and the Co-Founder of ReviewMyElearning.com.
