Jan 4, 2017 11:15 AM - last edited on Feb 13, 2017 12:04 PM by kaitscott
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!
If you were at INBOUND16, you may remember this game we built for a way to test your Inbound knowledge and hand out prizes:
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
Jan 6, 2017 12:53 PM
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.
Jan 6, 2017 1:02 PM - edited Jan 6, 2017 1:02 PM
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:
Apr 5, 2017 8:54 AM
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!
Jan 9, 2017 8:05 AM
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! 🙂
Mar 6, 2017 11:45 AM