--- title: How to Create a Leaderboard for eLearning with Google description: By following these instructions, you can learn how to create a leaderboard for eLearning with Google that will encourage gamification in your training. image: https://blog.elblearning.com/hubfs/Imported_Blog_Media/Blog-Graphics19_blog-header-copy-30.jpg --- [![ELB-Learning_Logo_ColorRGB-white-text-1](https://blog.elblearning.com/hubfs/ELB-Learning_Logo_ColorRGB-white-text-1.png) ](https://elblearning.com/) ![](https://blog.elblearning.com/hubfs/Imported_Blog_Media/Blog-Graphics19_blog-header-copy-30.jpg) # How to Create a Leaderboard for eLearning with Google by [James Kingsley](https://blog.elblearning.com/author/james-kingsley) | Jan 19, 2016 ![leaderboard](https://blog.elblearning.com/hs-fs/hubfs/Imported_Blog_Media/Blog-Graphics19_blog-header-copy-30.jpg?width=801&height=350&name=Blog-Graphics19_blog-header-copy-30.jpg) “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.](http://elbrotherscustom.com/jk/blogs/leaderboard/story.html)) 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. 1. Click: Tools>Script Editor 2. Delete the default code 3. Paste in new code from Leaderboard GAS file 4. Save (Enter a project name) 5. Click: Run > setup 6. An Authorization Dialog will appear. Click Continue 7. Click Allow (It is safe because it is your app. You can see/edit all the code) 8. Click: Publish > Deploy as web app 9. Set Execute app as to 'me' 10. Set access to 'anyone, even anonymously 11. Click Deploy 12. Copy and save the URL; you will need it for the JavaScript 13. 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](https://www.sublimetext.com/). 1. Open the JavaScript file. 2. Replace the YOUR_URL_HERE text with the URL you saved earlier. 3. 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 [Google Apps Script](https://gist.github.com/onEnterFrame/464ea79d400b839c92a2) [JavaScript for Storyline Trigger](https://gist.github.com/onEnterFrame/6f31997c385a4ae7b38f) [Sample Storyline File](https://goo.gl/cuoPps) Let us know what you think of the leaderboard in the comments below! And while you're at it, try out this [live example](http://elbrotherscustom.com/jk/blogs/leaderboard/story.html) 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)](http://elearningbrothers.com/how-to-create-a-leaderboard-elearning-google-part-2/) *[![James-Kingsley-Bio](https://blog.elblearning.com/hs-fs/hubfs/Imported_Blog_Media/Kingsley-Bio-260x260-3.jpg?width=100&height=100&name=Kingsley-Bio-260x260-3.jpg)](https://blog.elblearning.com/hubfs/Imported_Blog_Media/Kingsley-Bio-Dec-14-2020-08-49-18-58-PM.jpg)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](https://www.reviewmyelearning.com/).*   [eLearning-](https://blog.elblearning.com/tag/elearning), [Developer Resources-](https://blog.elblearning.com/tag/developer-resources), [Resources-](https://blog.elblearning.com/tag/tips-tricks) ### Related Posts [![Staff Augmentation: Savvy or Sad?](https://blog.elblearning.com/hs-fs/hubfs/Staff%20Augmentation-Savvy%20or%20Sad_Blog%20Featured%20Image%20800x500.png?width=388&name=Staff%20Augmentation-Savvy%20or%20Sad_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/staff-augmentation-savvy-or-sad) [Staff Augmentation: Savvy or Sad?](https://blog.elblearning.com/staff-augmentation-savvy-or-sad) [![Improving L&D with AI Work Augmentation](https://blog.elblearning.com/hs-fs/hubfs/Improving%20L%26D%20with%20AI%20Work%20Augmentation_Blog%20Featured%20Image%20800x500.png?width=388&name=Improving%20L&D%20with%20AI%20Work%20Augmentation_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/improving-ld-with-ai-work-augmentation) [Improving L&D with AI Work Augmentation](https://blog.elblearning.com/improving-ld-with-ai-work-augmentation) [![A Brief History of Instructional Design](https://blog.elblearning.com/hs-fs/hubfs/A%20Brief%20History%20of%20Instructional%20Design_Blog%20Featured%20Image%20800x500.png?width=388&name=A%20Brief%20History%20of%20Instructional%20Design_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/a-brief-history-of-instructional-design) [A Brief History of Instructional Design](https://blog.elblearning.com/a-brief-history-of-instructional-design) [![eLearning Brothers Is Now ELB Learning](https://blog.elblearning.com/hs-fs/hubfs/eLearning%20Brothers%20Is%20Now%20ELB%20Learning_Blog%20Featured%20Image%20800x500.png?width=388&name=eLearning%20Brothers%20Is%20Now%20ELB%20Learning_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/elearning-brothers-is-now-elb-learning) [eLearning Brothers Is Now ELB Learning](https://blog.elblearning.com/elearning-brothers-is-now-elb-learning) [![HCD Meets ID: Part 2- Developing Learner Empathy](https://blog.elblearning.com/hs-fs/hubfs/HCD%20Meets%20ID-%20Part%202-%20Developing%20Learner%20Empathy%20_Blog%20Featured%20Image%20800x500.png?width=388&name=HCD%20Meets%20ID-%20Part%202-%20Developing%20Learner%20Empathy%20_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/blog/hcd-meets-id-part-2-developing-learner-empathy) [HCD Meets ID: Part 2- Developing Learner Empathy](https://blog.elblearning.com/blog/hcd-meets-id-part-2-developing-learner-empathy) [![HCD Meets ID: Part 1 - What is HCD?](https://blog.elblearning.com/hs-fs/hubfs/HCD%20Meets%20ID-%20Part%201-%20What%20is%20HCD_%20_Blog%20Featured%20Image%20800x500.png?width=388&name=HCD%20Meets%20ID-%20Part%201-%20What%20is%20HCD_%20_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/blog/hcd-meets-id-part-1-what-is-hcd) [HCD Meets ID: Part 1 - What is HCD?](https://blog.elblearning.com/blog/hcd-meets-id-part-1-what-is-hcd) - [** Facebook ](http://www.facebook.com/sharer.php?u=https://blog.elblearning.com/blog/how-to-create-a-leaderboard-elearning-google%2F&t=How%20to%20Create%20a%20Leaderboard%20for%20eLearning%20with%20Google) - [** Twitter ](http://twitter.com/share?text=How%20to%20Create%20a%20Leaderboard%20for%20eLearning%20with%20Google&url=https://blog.elblearning.com/blog/how-to-create-a-leaderboard-elearning-google) - [** Pinterest ](http://pinterest.com/pin/create/button/?url=https://blog.elblearning.com/blog/how-to-create-a-leaderboard-elearning-google&media=https://f.hubspotusercontent30.net/hubfs/5108583/Imported_Blog_Media/Blog-Graphics19_blog-header-copy-30.jpg&description=How%20to%20Create%20a%20Leaderboard%20for%20eLearning%20with%20Google) - [** LinkedIn ](http://www.linkedin.com/shareArticle?mini=true&url=https://blog.elblearning.com/blog/how-to-create-a-leaderboard-elearning-google%2F&title=How%20to%20Create%20a%20Leaderboard%20for%20eLearning%20with%20Google) - [** Gmail ](https://mail.google.com/mail/u/0/?view=cm&fs=1&su=How%20to%20Create%20a%20Leaderboard%20for%20eLearning%20with%20Google&body=https://blog.elblearning.com/blog/how-to-create-a-leaderboard-elearning-google%2F&ui=2&tf=1) - [** reddit ](http://www.reddit.com/submit?url=https://blog.elblearning.com/blog/how-to-create-a-leaderboard-elearning-google%2F&title=How%20to%20Create%20a%20Leaderboard%20for%20eLearning%20with%20Google) © 2025 ELB Learning. All rights reserved.  | [ Terms of Use](https://www.elblearning.com/legal/terms-of-use)  |  [Privacy Policy ](https://www.elblearning.com/legal/privacy-policy)|  [Legal Notices](https://www.elblearning.com/legal/legal-notices)