How HubSpot Academy is Gamifying Your Learning with HubDB

[#1]

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

[#2]

Thanks for posting @Ty - great to see examples of how these COS tools can be used. Can't beleive this is also from a single custom module! Is there a way to directly share your score / promote the game itself on social?

Cc'ing @nickdeckerdevs @ThomasReitz @Hubmate @ParkerShort on this post, as I've seen some great insights/contributions on HubDB previously. 

[#3]

Hey @roisinkirby,

Of course! We wanted to make it easily shareable so everyone could challenge their friends and colleagues. If you play through and hit the scoreboard, you should see a "challenge your friends" button that look slike this:

Clicking the button will open up a pop-up dialog like this:

Choosing one of the social networks will yield a pop-up window like these:

[#4]

Hi Dear @roisinkirby, this is a cool game. Only, I think the game shows all 4 answers to this question are wrong. Am I right? Have you met this question while playing the game?

Thank you.

[#5]

Hey @LilitM this will be a question for our makers - @Ty and @Julien 

[#6]

Thank you @roisinkirby.

[#7]

Hi @LilitM,

I'll took a look at our JSON file. For this question, the correct answer would be that it is not measurable. "Increase Leads" is missing it's measurable stat, such as "by 20%". 

Our JSON Schema shows that the first option is set to true, I'll test the game and see if I can encounter this error. Thanks for pointing this out!

--Ty

[#8]

Thank you @Ty.

[#9]

Very, very cool. Any chance you would open source it? Would love to look around under the hood. Thanks.

Parker

[#10]

Hi @ParkerShort,

I'd love to opensource it, but at this moment, I don't believe we want to show the full product. I will talk with @Julien and see what he thinks about maybe releasing some of our code we did for our mininum viable product(MVP) when we were pitching the idea. Also if you'd like, I could explain more in depth of how things work, just let me know!

-- Ty

[#11]

At this point, we're not quite ready to fully open source what is under the hood. Are you looking for more information on what the board build was or the implementation with HubDB @ParkerShort?

[#12]

Here is a basic node/heroku server that can push data into hubdb when you make a push/post request to it (eg with jQuery). 

https://github.com/telega/PSAcademyServer

[#13]

Hey everyone,

@Julien and I just posted the Inbound Speed Round on Product Hunt! If anyone wants to give us some feedback there, we'd appreciate it. Here's the link to the Product Hunt project. 

Inbound Speed Round

Thanks so much!

-- Ty