Hi there,

I've created a piano question type. If you need some tips, click here for a 5-minute piano lesson.

The piano widget is my own work. The key range is dynamically generated from a question parameter using Javascript and CSS. I also use Keith Horwood's audiosynth.js library to play each key when you click it.

The marking algorithm was tricky. The valid_response may specify exactly which note/s should be selected, or just generic tones (A thru G-sharp, without an explicit octave), or a mix of both. This way, the question type automatically supports permutations/inversions of a chord.

Some other things I thought of adding:

• Question parameters to turn on/off the sound effect, key labels, and to limit the number of keys that can be selected.
• A Clear button to deselect all keys. A Play All button to hear all selected keys at once.
• Fade effects at the ends of the keyboard to indicate if/when it is scrollable.

Total time spent: 8hrs including setup, implementation, CSS & documentation.

Tested on Chrome 43, Safari 7.1.6, Apache 2.2, PHP 5.4.

-Jordan.