Pedaplus Blog

This is the simplest game I’ve written so far. Unlike the other games, it only provides minimal scoring, does not use any HTML5-specific features, and works on older browsers — or at least it works in IE 8.

The idea for the user is to toggle black keys on or off to create the correct keyboard pattern for a given starting note. That’s it! The drill uses three sizes: eight, eleven, and fifteen white keys. The starting note is chosen at random; when the user correctly draws the keyboard and presses the “DONE” button, all of the note names appear on the white keys.

All of the drawing (including the “DONE” and “CONTINUE” buttons) for the game itself is done on a Raphael SVG canvas. Raphael provides a nice API for adding event handlers — click listeners, etc — and this made it fairly easy to create the game.

You can try out the game here.

Finally, the fifth game is up and running. Each of these iterations results in some new learning experience for me. With this game I decided to add some basic audio, using the excellent soundmanager2 javascript library. This library automatically detects whether or not HTML5 audio is supported, but also falls back to Flash if HTML5 audio is not supported. It also allows Flash to be the preferred delivery method, which is good, because in general Flash audio is much more robust than HTML5 audio.

Unfortunately, when I tested the audio on the iPad, I found the latency to be so bad as to be unusable. So the interval games are visual-only on the iPad, with no listening component.

From a design and programming perspective, I found the Intervals game to be a little trickier than the other games. I wanted the interval generation to be random within the level parameters for the game. But there are a number of variables when dealing with intervals that are not an issue with plain notes or key signatures. For example, depending on the chosen “base” note, certain intervals may or not be possible. If B# is the base note, it is not possible to generate an Augmented 5th above it (B# – F## is a perfect 5th), to cite one instance.

However, I think the Javascript dynamic programming capabilities are cool: it was relatively easy to set up data structures that could use the same identifiers for note specs for the VexFlow notation rendering as for generating the appropriate sounds using the
SoundManager2 APIs.

The fourth game in this series of “flash” (as in “flash cards,” not “Flash plugin”) games is a bit more challenging. It is a scale-degree identification game. Scale degrees are identified three ways: as numbers, as solfege symbols, and as technical names. For example, if the key signature is F major, and the note is “A”, the correct answer will be 3, mi, or mediant, depending on which option is available. The game levels determine the type of answer.

In addition to working on this third game, I’ve also spent some time working with the VexFlow notation api, and even submitted a small contribution to the project: automatic key signature placement of accidentals depending on the current clef.

Some of the design decisions for these games are based on the idea that a student will be more motivated if there is a certain amount of time pressure, and the idea of progressive level advancement. There is no penalty for being slow, only for being inaccurate. So as a player works on a given level, he can continue to work at that level for as long as necessary, and will only have to start the game over if a certain wrong-answer threshold is reached (typically five wrong answers). Also, at any level, the correct answer must be given before advancing to the next question.

I have seen many online music games that look for a specific answer, and if the answer is wrong, some kind of negative “WRONG!” response is given, and the question advances to the next item regardless. I think that’s about as “de-motivational” as a game could be. So I like the idea of having multiple lives, multiple chances, and time limits.

Speaking of time limits, a recent blog entry from JogNog seems to reinforce the value of placing time limits on tasks.