Creating a Leaderboard with Storyline

As the Instructional Design Librarian at CSUF, I often work with other departments on elearning projects. Last month I was asked by the director of Online Education and Training to partner with her on an online digital display recognizing CSUF faculty that adopted Open Educational Resources.

It was a great project! We surveyed the students of these OER-adopting faculty, and I put the results into a separate Padlet for each professor. Then, I created a Storyline shell into which I embedded the Padlets. I made it interactive. It has a side menu that expands and collapses for navigation (that’s a whole ‘nother post to come!), and as a finishing touch, I added an info page and quiz.

The OER Digital Display was first emailed to all faculty as part of a promotion to encourage faculty to attend our OER Expo that fell right after Open Education Week.

We also planned to featured the OER Digital Display on the library’s huge touchscreen TV. So, of course, I wanted to make it as fun to interact with as possible.

I thought that a simple quiz isn’t enticing. Who wants to take quizzes for fun? But with some minor gamification, perhaps I could make it more engaging – so I added a leaderboard.

And it worked! We chatted up faculty, who perused the student comments, then jumped into the quiz to see if they could land themselves on the leaderboard.

I’ve read a little about how other developers have tacked leaderboards in Storyline. I happen to really like this solution – using javascript in Storyline plus Google Apps add-ons to create a leaderboard in a Google Sheet. That lets anyone participate, no matter where they are!

I wasn’t up to puzzling this out, though – I just wanted to create a one-time use leaderboard for our Expo event. So, I programmed it all into Storyline with preset names that attendees could dethrone.

Developing the Leaderboard

The quiz was already set. It’s 18 questions in a question bank, and the actual quiz randomly pulls 10 questions for attendees to answer. I wanted the quiz results to feed into the leaderboard.

First, I just used a word document to start sketching out the necessary variables and the logic:

I tried to sketch out the logic for each place. I planned for the leaderboard to have only 5 positions to keep it simple at first.

Then, I set the variables in Storyline, and started developing the logic.

I ended up creating a separate slide for each place for learners to enter their name. I realized that some of the triggers would go onto the Results slide (jump to relevant slide after that depending on score) and that the triggers that actually fed into the leaderboard itself should live on each name-entering slide.

Here’s the map of the entire quiz and leaderboard:

The welcome slides leads to the quiz/question bank, which goes to the results slide. Then, the learner branches to the relevant place slide, or goes straight to the leaderboard. Each place slide has a text entry box for the learner to enter their name, and then they go on to the Leaderboard to see the final ranking.

Here are the triggers that live on the Results slide:

When users click Next from here, the player jumps to the relevant place slide.

Here are the triggers that live on each place slide (example here is 1st place). The triggers were much easier to manage by breaking them up and putting them onto separate slides for each ranking:

I realized through trial and error that I would want the player to clear out the existing name so that it wasn’t already entered into the text entry box. I had already figured that the names would have to cascade down the list to make room for each new player. I’m sure there’s an elegant way to do this via Javascript, but this worked fine.

I pre-entered names for each of the five rankings to give the illusion that this was an ongoing leaderboard. Part of the charm of gamification is being able to compete against other players – it’s a social aspect! The first person to play the game would see a blank leaderboard otherwise, which I’m sure would also be fine, but it seemed more satisfying to me if the first person to play would be able to immediately dethrone someone.

The lowest score already on the leaderboard was 30 points for 5th place, so new players had no problem landing on the board.

At the expo, this quiz was loaded onto the touchscreen TV and we had a great time attracting attendees to play. Faculty ended up standing around in a group challenging each other. The randomized nature of the quiz kept it really interesting. Just watching another player wouldn’t get you all the answers, because each player got slightly different questions!

Try out the quiz and leaderboard for yourself! Will YOU get a high score?