JS Hero logo in text.

JS Hero

As a teacher I used to teach Front-end Development to roughly two kinds of students. Those who absolutely loved to code and those who absolutely didn’t. JS Hero is designed to be played over and over to provide constant feedback to help students improve their programming knowledge and skills.

JS Hero is a game aimed at teaching JavaScript in a fun and accessible way by using game mechanics. While the game aims to stay as close as possible to actual programming to maximise transfer to the real world, the different dimensions of learning were taken into account too. Players could decide themselves where to start, so they’d experience a state of flow from the start of their programming endeavours, even when they weren’t as experienced. My struggling students who felt they’d never be able to complete the JavaScript courses, described their experience with JS Hero as a tool that made learning JavaScript actually achievable.

I’ve build a prototype in C# using Unity to allow for testing with students on an iPhone.

A note describing the first knowledge dimension, remembering, in relation to the use of quizzes in the game.
Different types of activities used to form a game loop, related to different knowledge dimensions for learning according to Bloom.

Knowledge and Skills

The game has been designed so players can practise remembering, understanding, application, analysis, evaluation and creation within the context of programming JavaScript. Each dimension within Bloom’s Taxonomy is incorporated in the game, to create a learning loop for each separate aspect of the programming language. This is translated to specific activities, each accompanied by a rating and type, similar to how different testing strategies are employed for regular exams. 

Remembering is tested through the use of quizzes, which can be redone whenever the player feels the need to repeat something. Other dimensions are tested with an interface that shows the actual syntax of JavaScript to keep it as close as possible to what programming JavaScript would look like in a real editor to optimise transfer to real world coding.

Accessible Programming

Learning to code can be overwhelming if you’ve never seen an editor and have no clue what programming is. JS Hero allows the player to focus on composing JavaScript syntax, without having to deal with other things like understanding error messages. Instead of default debug messages, the game provides feedback using plain language that aligns with the level of the player.

Finding the right solution for a programming problem can sometimes feel like solving a puzzle. That’s why I designed the Quests like different types of puzzles. The learner plays as a programmer, who has to solve all sorts of problems to learn to program. The player starts coding from her bedroom and slowly works her way up the ranks towards becoming an expert.

The programming interface is split up in two segments. One inventory segment contains the different parts of code, which can be dragged to 'write' code in the editor segment.
By providing the necessary segments of code, the player can focus on practising the sequence for building syntactically correct statements.
A list of different programming topics, each displaying a status concerning completion and related information.
The game offers quizzes to practise with information which should be remembered.

Game Structure

Each difficulty level in the game is bound to a specific level of knowledge and skills. When a player shows the necessary level of knowledge and skills by completing Quests, she will receive rewards which she can use to unlock new topics. The player is able to unlock any topic as long as the knowledge- and skill level is compatible with the potential unlock. The game provides this structure based on the amount of coins per completed Quest, as the level of the content is balanced with the costs of unlocking it. This design should result in an optimal flow for the player.

A list of available and completed quests, with information about the quest title, difficulty level and rewards.
The quests are aligned with the knowledge and skill level of the player.
A code segment is dragged in between existing code segments.
A user-friendly interface to place and move the code segments.
A question is displayed on the top of the screen, followed by four options to choose from.
The quiz interface is used for learning factual knowledge, the player will receive instant feedback after providing an answer.