How we created a game using Learnosity’s APIs in just two weeks

Read Time 5 Mins

They say the best way of learning is by doing. Learnosity’s two-week bootcamp proved that to be the case.

I enjoy playing group trivia games on my phone. Getting a little friendly competition going among friends is a good way to shorten a commute or break the ice at social events.

The ice-breaker for new starters at Learnosity is a lot more intense but just as much fun. It involves a two-week training course in which everyone is challenged to build a project from scratch using the Learnosity APIs. Inspired by the trivia games I enjoy, my team decided to make one of our own.

It was no small challenge: although we had a team of three, we could only spend half our time on the project, so we weren’t totally sure if we could get everything wrapped up in time at first. But thanks to the flexible, easy-to-use APIs we were building with – along with a dash of team ingenuity – we managed to build something we feel quite proud of.

Traveling the world through trivia

Our game, Trivia Travel, was designed for a group of people playing in the same room. Players must answer 30 randomly selected trivia questions to progress around the world. The first player to reach a correct score of 15 (and reach Sydney on the map) is the winner.

Player ready

Of course it wouldn’t be right to talk about how we created a playable game without making it available for everyone to try out, so here’s a link to get started!

To play, you first need to launch “Central Display” on a screen that’s visible to everyone. Each player must then launch a separate “Player View” on their own device (it can be either on desktop or mobile). Players can join the game by entering a name along with the game code as shown on the Central Display. Once everyone has selected “Ready” on their individual views, their names will be visible on the Central Display. To get going, just hit the “Start Game” button on the Central Display and off you go.

Most of the questions we used are general knowledge, but we also added some geography questions to suit the “Trivia Travel” theme. Because we were tight for time, the questions are generally multiple choice but we did also add in image hotspot, drag and drop, and image cloze to give the quiz some variety.

Games aren’t fun without a challenge

We faced several challenges along the way. The first was actually deciding what to create. We had a few ideas that we dismissed because they were too ambitious. Eventually, we settled on a trivia game since we felt we could build a very simple MVP while leaving plenty of room for future improvements. We avoided the problem of scope creep by having well-defined goals and working on the highest priority goals first.

Deciding on a theme was another challenge. We didn’t want to just make a bland, generic trivia game because that wouldn’t leave an impression on players. We opted for a “travelling the world” theme because that would let us do visualizations of players’ progress. Having a UX designer on our team was a major help since she helped create a sleek user interface and drew up the world map graphic.

The toughest challenges were technical. We had trouble passing the player data from the Player Display to the Central Display so that the players would show on the leaderboard. Our solution wasn’t so simple either – have a read of the technical section below to see why.

Problem solving and innovation are skills that are fostered in the Learnosity team. Click To Tweet

The two-week bootcamp included lessons on the full Learnosity product suite. Thanks to those, we knew exactly how to leverage the different APIs effectively. Since we had so little time, we had to utilize whatever resources we could find. The public documentation, advice from our colleagues, and a good deal of perseverance got us through with something we were happy with. Problem solving and innovation are skills that are fostered in the Learnosity team as they help improve and drive the product forward for clients. This project was a good example of the development of those skills.

Getting into the details

We built the game using the Learnosity Items and Assess APIs as the Player View, and the Reports and Data APIs (along with React) to create the Central Display. We created the list of questions using Learnosity’s Author Site and grouped them into a single activity template. On the player view, we used the Items API to load the questions from that activity template and give users the ability to answer questions and move on. All of this worked out-of-the-box. However, we did have to write custom code to handle joining the game, finishing the game, and displaying the score.

Before the game begins

All players must be connected to the same Activity Id. We had to make sure that each Activity Id was unique so there were no collisions between different games. We also needed to share the Activity Id between all players. To solve this, we came up with the Game Code.

Each Game Code has five uppercase alphanumeric characters. The first character is the current hour (from 0 to 23, encoded as a character) and the last four characters are randomized. The Activity Id is a MD5 hash of the Game Code and the “Snapback Timestamp” – the most recent timestamp in which the hour in the timestamp equals the hour in the game code, and with the minutes and seconds set to zero. This means we only have to worry about collisions between Activity Ids in the last 24 hours, and those collisions will be very unlikely anyhow.

The Items API and the Assess Player are only initialized after the user clicks the “Join” button. Once players click “Ready”, which is normally the start button in the Assess Player, their assessment is programmatically submitted and then paused.

The Central Display then lists the readied users by polling the sessions/scores endpoint in Data API for all sessions that have submitted to the generated Activity ID.

Each user is then added to a “Live Activity Status by User” report that’s used to listen to further events from each user. Central Display uses Reports API in a No UI mode so we used it for its data only.

Clicking the “Start Game” button on the Central Display sends the “resume” action to all users tracked by the report.

Game in progress

When a user answers a question, the assessment is also submitted, and the “submitted” event received by the report sets off a query to the Data API to fetch the players’ scores and update the display.

End of game

Once a player has reached the winning score, the Central Display uses the report to send an “exit” command to every player – we used exitAndSave and exitAndDiscard to distinguish the winners from the losers and redirect each player to the correct end screen.

Greater potential through a greater product suite

At the moment, Learnosity APIs are mostly used for online assessments. However, as the Learnosity product suite expands, there’ll be a growing number of opportunities for applications outside that domain. We had to work our way around the current limitations in our APIs to build our project.

As the Learnosity product expands, there’ll be more opportunities for applications beyond assessment. Click To Tweet

For example, we decided not to use Events API for the project because it wasn’t mature yet. However, once it’s ready, it’ll be easier to build applications such as ours. This will enable the team to explore new possibilities, such as the gamification of e-learning, which research suggests can increase learner engagement, motivation, and retention. There are many opportunities ahead, and we’re excited to have the chance to explore their potential.

Michal Huzevka is a software developer at Learnosity.

Micheál Heffernan

Senior Editor

More articles from Micheál

Let’s make it official

Get behind the scenes at Learnosity with monthly insights, inspiration, and updates.