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!
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:
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)
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:
var playersFirstName = $("#playersFirstName").val();
var playersLastName = $("#playersLastName").val();
var playersEmail = $("#playersEmail").val(); var submitDate = Math.round(+new Date()/1000);
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:
Additionally, the game underwent a face lift to match HubSpot's brand styling. Here's how Inbound Speed Round game board (Phase 2) looks:
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
- Score turns red if negative
- Distinct change of cards for correct/wrong answers
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!