“Gamification.” We recognize the benefits (even through all the hype) and we would like to add it to our courses. But where to begin? It is not enough just to add a game to your course. We need a way to make it social. After all, bragging rights go a long way towards reinforcing learning.
I think one of the easiest ways to tip your toe into eLearning gamification is to add a Leaderboard to your course. Leaderboards remind learners that they are not alone, others are completing the same training. They also create some friendly competition and let learners see how they rank among their peers. And often, if they rank low, they will go back and try again on all their own.
But how to add a Leaderboard? And how to do it for free? Google Sheets and a little code provide the solution. I know a lot of you use Google Docs every day. You may not realize that Google allows users to develop add-ons and applications on top of Docs using Google Apps Script (GAS). GAS looks a lot like JavaScript and it hooks into Google Docs to enable you to create all sorts of new tools. I have used it in the past to create printable certificates, detailed course interaction reports, and even a sort of scaled down LMS.
I decided to use Google Sheets and GAS to create a sort of database and API for a Leaderboard. With GAS I was able to turn a spreadsheet into a web application that will receive data from a course and send back a list of the top ten users. I added some JavaScript to my course to handle the sending and receiving from that end. I packaged it all up for you and wrote some directions, which you'll find below. This week I am adding a Leaderboard to Storyline 2. (See the live demo.) If you are familiar with JavaScript and feel adventurous you can adapt this to work for Captivate, Lectora, HTML5, etc. And soon I will post code and videos for those tools as well.
The files linked in the resources section of this post have the GAS code and JavaScript in them. Using the instructions below (and watching the videos) you will be able to learn how to create a leaderboard for eLearning with Google:
- Create a Google Sheet
- Add GAS to the Sheet
- Setup the Sheet
- Deploy the Sheet as a Web App
- Add the required variables to your Storyline 2 course
- Trigger the JavaScript to send and receive the data
- Display the Leaderboard to learners
Instructions for Spreadsheet
Create new empty spreadsheet and save it with whatever name you like.
We will be adding some Google Apps Script (GAS) and deploying it as a Web App.
- Click: Tools>Script Editor
- Delete the default code
- Paste in new code from Leaderboard GAS file
- Save (Enter a project name)
- Click: Run > setup
- An Authorization Dialog will appear. Click Continue
- Click Allow (It is safe because it is your app. You can see/edit all the code)
- Click: Publish > Deploy as web app
- Set Execute app as to 'me'
- Set access to 'anyone, even anonymously
- Click Deploy
- Copy and save the URL; you will need it for the JavaScript
- Click OK
https://www.youtube.com/watch?v=0Sc1qTiaxEM
Instructions for Storyline 2
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 Storyline. 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 Storyline 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 Variables section of these instructions.
In Storyline create three variables:
- userScore (number)
- userName (text)
- topTen (text)
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 topTen variable wherever you want the leaderboard to appear.
Once you have set the user’s score and name, use a JavaScript trigger to send the data to the spreadsheet and retrieve the top ten list. This trigger could be on a button, when a slide starts, etc. Create your trigger and paste the JavaScript included with the download into Storyline (make sure you update the URL)
Publish your course and test it from a web server or LMS.
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.
https://www.youtube.com/watch?v=_e8udVLc5jk
Resources
JavaScript for Storyline Trigger
Let us know what you think of the leaderboard in the comments below! And while you're at it, try out this live example and see how you rank!
Update 2/11/16: The instructions for Adobe Captivate and Lectora can now be found in this blog here:
How to Create a Leaderboard for eLearning with Google (Part 2)
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.
