How HubSpot Academy is Gamifying Your Learning with HubDB
- last edited on by
kaitscott
.png "HubSpot Alumni"){kind=icon}
Hi Everyone!
After creating the community and seeing it thrive with a handful of developers always trying to push the envelope in the COS, we ( @Julien, @robertainslie and I) have decided to share what we have been working on to those with a little more web knowledge. The whole idea behind this post is to show you that with a little outside of the box thinking (like I see most of you doing everyday) you can build some pretty awesome interactive stuff!
OVERVIEW
If you were at INBOUND16, you may remember this game we built for a way to test your Inbound knowledge and hand out prizes:
Well, it was a fun little experiement that people LOVED, and the thing that blew developer's and marketer's minds alike, was that the majority of it was all built on the COS and HubSpot Tools (minus some javascript/json and a fairly simple heroku app). In fact, this whole game is a single custom module.
HOW IT WORKS
By now, you can probably guess that this game has a lot of moving parts, but I'll try to explain it in simplified steps, and what is going on in the background, up until a user reaches the scoreboard.
Step 0 (onload): Game is loaded, JS does a GET request on our questions.json file, appends info into appropriate sections
Step 1: Player enters their information starts 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 inputed 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 scorepage
- Player's info is pulled from localStorage and inputed to the page
- GET request prints the top 50 of our HubDB scoreboard
- Append a number value to the players in the leaderboard (starting at 1)
FEATURES OF THE GAME
Here is a basic little feature list we are using to track updates between the Phases. This shows the changes between our Phase 1 MVP and Phase 2 where we began to flesh out all of the features we needed to make an autonomous game.
However, like alot of things in web, it's not perfect 😞
Some of the issues 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 pyhton 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 version with whole different set of questions
- More browser compatibility
So without further explanation, I present Phase 2!
For a deeper dive on some of the Ui changes, here's some explanation.
- Click 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
To give you an idea of the size of this project, there were mainly 3 people involved. The majority of the frame work was built by 1 person, the questions were handled mostly by 1 person, and 1 more person to spin up the node app and some python scripts. That's it. You don't need a team of 15 devs and designers to create some awesome stuff!
Check out the game here, and don't forget to submit your score and challenge your friends! Looking forward to seeing you all on the leaderboard!
Let me know if you have any questions!
Thanks for checking it out!
-- Ty, Julien and Rob
