Draggable Music Notation Jquery

I’d like simple php&jQuery webpage implementing a quiz that will ask the user to arrange the notes on the music staff in a certain way defined by the teacher. This quiz will teach the students about key signatures. The notes will be draggable.

I’m wondering if it’s possible to use the wonderful html5 API http://www.vexflow.com/ for this purpose somehow linking it to draggable jQuery object. Other suggestions are welcome as well.

The use case will be as follows:
1. Teacher starts with a blank staff and drags the notes onto it creating the starting point for the user.
2. Teacher then does it again creating the correct answer the student is supposed to arrange the notes into.
3. Both staffs are saved to database.
4.The students sees the starting point music and arranges the notes into the answer.
4. Both answers are compared and the score is given.

Leave a Reply

Your email address will not be published. Required fields are marked *