How HubSpot Academy uses HubDB to Gamify Learning

HubSpot Academy strives to educate in innovative ways, especially through in-person training. INBOUND16, HubSpot's annual sales and marketing event, was no exception. HubSpot Academy's Designer, Ty Stelmach (@TyStelmach) set out create a new game for the event and hoped to push the boundaries of what can be created on the COS. Stelmach led a small team --three in total-- to create an interactive game for in-person play using HubDB to power the game board. We're going to take a look under the hood of the Inbound Speed Round game. Hopefully you'll have some ideas for how to use HubDB for creating interactive content on your own website!

OVERVIEW

If you were at INBOUND16, you may have played this to test your inbound knowledge and get some prizes. Here's the Inbound Speed Round game board:

Screen Shot 2017-01-04 at 9.41.51 AM.png

While it was a fun little experiment that people LOVED, the thing that blew developers and marketers minds alike, was that the majority of it was built on the COS with HubSpot Tools and HubDB, save for some additional JavaScript, JSON APIs, and a fairly simple Heroku app. In fact, the whole game is a single custom module in a page template.

HOW IT WORKS

By now, you can probably guess that this game has a lot of moving parts. Let's walk through what's happening in the background of the game during a user play of Inbound Speed Round:

Step 0 (onload): Game is loaded, JS does a GET request on our questions.json file and appends info into appropriate sections

Step 1: Player enters their information which starts their game

- Player's info is stored in JS Vars and localStorage

- Player begins to change their score variable

Step 2: Player finishes their game, final modal pops up

- Player's info is inputted to a hidden form

- When player clicks "Share Score" 2 things happen

a. Heroku app is woken up, info is sent, then piped into our HubSpot contacts DB

b: Form is submitted to our HubDB and user's row is created

Step 3: Player is redirected to the score page

- Player's info is pulled from localStorage and inputted to the page

- GET request prints the top 50 of our HubDB scoreboard

- Append a number value to the players in the leader board (starting at 1)

DATA STORAGE

In the Step 1 of the game play the user submits their information in a form and clicks the start button. Storing the player data is critical to the leaderboard build, so how are the data variables written and the information stored?

Upon click, variables are created for each player based on their form submission to start the game. Then, the function of saveUser() is run; which creates a new local storage item that is saved in the user's browser. The saveUser() function is listed below:

$("#startGame").click( function(){
var playersFirstName = $("#playersFirstName").val();
var playersLastName = $("#playersLastName").val();
var playersEmail = $("#playersEmail").val(); var submitDate = Math.round(+new Date()/1000);

function saveUser(){
localStorage.setItem("playersFirstName", playersFirstName);
localStorage.setItem("playersLastName", playersLastName);
localStorage.setItem("score", score);
}
});

saveUser();

Once the user variables are saved and most notably, the score, the leaderboard is ready for the intake of a new row.

FEATURES OF THE GAME

When we first conceptualized all of the features that we'd want the game to have and compared against our countdown to INBOUND, we knew we'd have to have a second round revisions to fully achieve what we needed in the game.

The development was broken into two phases: Phase 1 for a minimum viable product for in-person play and Phase 2 for a fully autonomous game. You can see the basic feature list here:

Screen Shot 2017-01-04 at 11.04.05 AM.png

Additionally, the game underwent a face lift to match HubSpot's brand styling. Here's how Inbound Speed Round game board (Phase 2) looks:

Screen Shot 2017-01-04 at 10.21.29 AM.png

PHASE 2 - UI CHANGE DETAILS

In addition to style changes, Phase 2 included some UI changes as you'll see below:

Clock now counts in actual MM : SS format, instead of just seconds
Clock turns red at 0:10

Screen Shot 2017-01-04 at 10.27.47 AM.png

Score turns red if negative

Screen Shot 2017-01-04 at 10.25.37 AM.png

Distinct change of cards for correct/wrong answers

Screen Shot 2017-01-04 at 10.25.10 AM.png

WHAT'S NEXT?

The success and sheer fun of the educational game has led us to start planning Phase 3 of Inbound Speed Round. Some changes we are planning to tackle in Phase 3 are:

Storing the player's info better between the pages
Larger database storage / automatic export/dropping -currently using HubDB [max 10,000 rows] and manually exporting to .CSV, then dumping with a Python script from Terminal
Moving to a paid Heroku app so that our app doesn't have to 'wake up' after 30mins of inactivity
Adding even more randomized questions
Releasing another edition of the game with a completely different topic to learn
More browser compatibility

One more thing is coming soon for Phase 3: be on the look out for an open source of Phase 1 if you're interested in seeing the code that makes this work!

THIS SOUNDS EASY ENOUGH. CAN YOU MAKE SOMETHING TOO?

A team of three people were able to build the project. The work was divided amongst them in three parts: handling the front-end design and building the framework, curating the game questions that were written by the Academy team, and setting up the node app and some python scripts. That's it. You don't need a team of fifteen developers and designers to create some awesome stuff! Check out the game here and don't forget to submit your score to get on the leader boards if you play.

What's your next --or maybe your first -- project that you're building with HubDB? Let us know in the comments below!