KhanQuest: Bringing Khan Academy-based Learning to a Fantasy Video Game

Thus marks the end of the Third Annual "Healthy Hackathon", Khan Academy's weekend-long celebration, which featured awesome improvements to our CS platform, awesome (and hilarious) fundraising efforts, and awesome (and hilarious) music videos, to name but a few of the fantastic hacks.

P.S.: If you hate words and just want to play KhanQuest, click here.

Aside: Hackathons Can Be Healthy?

What separates the "Healthy Hackathon" from your typical hackathon is, well, everything about it. I'm not a big fan of the "competitive" hackathon, where hundreds of hackers stay up all night drinking Red Bull, racing to slap together the best crowd pleaser and "win" (see: the Cash-omatic). But I digress!

In more concrete terms, what sets Khan Academy's Healthy Hackathon apart is that:

1. There is no staying up all night: Everyone is kicked out at midnight, lest they face the wrath of the Nerf gun. From then, the office doors remain locked until 9:30am.
2. There is no (or, very limited) junk food: All the catered food errs towards "healthy".
3. There is no "winning" and there are no "judges": Everyone gets a raffle ticket for participating, with additional tickets doled out for cool hacks via anonymous voting. The prizes also err more towards gag (think: favorite company board games) than prestige.

It's an opportunity to go off in a new direction among friends and work on something exciting that you'd otherwise defer or put off. That can lead to software that ships and software that doesn't, both of which are totally fine. In fact, one of the guiding principles of the hackathon is that your "hack" doesn't have to involve code.

You can read more on Ben Kamens' blog.

KhanQuest

This year, my colleague Zach Gotsch rallied a few of us together on Thursday evening around a simple idea: take Khan Academy's core learning mechanics and philosophies, and wrap them within a fantasy video game (think Pokemon meets Final Fantasy meets Harry Potter). The team consisted of myself, Zach, Joel Burget, Desmond Brand, Jack Toole, and Michelle Todd, with a special shoutout to Elizabeth Lin for lending her (unreal) design skills.

After a few solid days of hacking, we demoed "KhanQuest". All the code is available on GitHub, and you play it immediately (at your own risk) @ this link.

It's totally imperfect, and we love it.

The core plot line: our beloved Salman Khan has been kidnapped by an evil warlock (I think?), and it's your job as the trusty delivery boy/girl (who happens to look like some sort of mage) to save him, learning the requisite magic along the way.

Here's an extended screencast (with commentary):

(Confession: I had to crop out ~30 seconds of me struggling with a basic geometry problem around 3:10.)

Game Mechanics

The mapping between game and Khan Academy mechanic actually worked out pretty well:

• Each subject within mathematics mapped to a type of spell (e.g., geometry mapped to fire spells, while algebra mapped to frost spells).
• Each exercise within a subject mapped to a specific spell (e.g., calculating the area of a triangle mapped to "Fireball").
• Completing a question on Khan Academy mapped to casting a spell (e.g., successfully calculating the area of a triangle mapped to casting "Fireball").

To bake in some of Khan Academy's learning philosophies, we also added a few minor tweaks:

• Spells temporarily grew in strength as they weren't used. This sounds unintuitive, but the goal was to encourage players to go back and review (or tackle more difficult exercises), while giving them some payoff for doing so. For example, if you moved past basic addition, we'd want to make sure that you'd retained mastery of this basic skill even as you began to work on multiplication (or geometry or algebra). By giving a small boost to the basic addition spell that incremented over time, you'd be incentivized to go back at some point in the future and review that exercise, which would then reset this incremental boost.
• Random monster encounters encouraged practice. While boss battles would encourage you to master new skills, random encounters with spiders, wolves, and other classic video-game enemies would encourage you to build on your abilities.

At the end of the weekend, the game was playable through the first few levels, complete with monster encounters, a variety of spells, dialog, and more.

However, there was plenty that we didn't get around to implementing. Be sure to check out Joel's blog post for a better discussion of (existing) bugs and flaws, as well as the challenges we faced.

Technology

After settling on a browser-based game, we went all-in on React (Khan Academy is one of the larger production users (see, e.g., Perseus), so we all had some experience with it) and built the entire game under the Flux architecture. Flux was entirely new to me and very fun to learn (hackathons are always a great time to experiment, especially when they're not made 'competitive')—here's hoping I can use it again the near future.

One of my more demoable contributions was the implementation of fun HTML5 Canvas-based effects to simulate snowfall, rainfall, fog, and spell casting (see below, or the embedded video above for the weather effects), the code for which can be found here.

Beyond that, I also took care of a grab-bag of UI implementations (e.g., the spellbook and transition animations), game mechanics (e.g., the 'unused spells grow in strength' behavior), and core features (e.g., Perseus exercise rendering via the Khan Academy API).

Going Forward

As I mentioned, the game is now online here. It's still in the incredibly rough form we left it in when we demoed, and in all likelihood, that won't change. You'll run into bugs and console errors; but hey, even the healthiest of hackathons inspire last-minute fixes and monkey-patching!

Jokes aside, I consider this my best hackathon experience yet—one that I'll look back on very fondly. And amidst the explanations of yak shaving and extended metaphors for software development, we pumped out some (reasonably) good code and a (reasonably) fun game. Three cheers for healthy hacking!

P.S.: In parting, I leave you with a hilarious GIF from an early rendition of the game.