Hola! ¡Tenemos nuestra Comunidad en Español!

How HubSpot Academy is Gamifying Your Learning with HubDB

Community Manager
Community Manager

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:

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

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.

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

 

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.

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

However, like alot of things in web, it's not perfect Smiley Sad

 

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!

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

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

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

 

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

12 Replies 12
Community Manager

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. 

Reply
0 Upvotes
Community Manager
Community Manager

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:

Screen Shot 2017-01-06 at 12.58.02 PM.png

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

Screen Shot 2017-01-06 at 12.58.09 PM.png

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

 

Screen Shot 2017-01-06 at 12.58.23 PM.pngScreen Shot 2017-01-06 at 1.00.52 PM.png

Occasional Contributor

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.

 

Pic.png

Reply
0 Upvotes
Community Manager

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

Reply
0 Upvotes
Occasional Contributor

Thank you @roisinkirby.

Community Manager
Community Manager

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%". 

 

Screen Shot 2017-04-05 at 8.52.42 AM.png

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

Reply
0 Upvotes
Occasional Contributor

Thank you @Ty.

Highlighted
Regular Contributor | Platinum Partner

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

 

Parker

Community Manager
Community Manager

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! Smiley Happy

 

-- Ty

Reply
0 Upvotes
Academy Team

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?

Reply
0 Upvotes
Occasional Contributor

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

Reply
0 Upvotes
Community Manager
Community Manager

ISR-img-1.png

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. Smiley Happy

Inbound Speed Round

 

Thanks so much!

-- Ty