Google Code-in

Currently, the toolbars for Music Blocks are implemented in easel.js - for reasons of practicality and extensibility, we would like to have these implemented using HTML rather than easel.js.

Specifically, we would like to implement the top horizontal toolbar, left-hand palette selector and the 'Cartesian'/'Clean'/'Collapse' buttons in HTML - we would also like to have the subtoolbars created by these implemented in HTML.

To make implementation easier, especially with a large codebase, it is important to understand the pre-existing code, and how what you code will affect what is already there. To help you do so, this task is to:

Find all references to the toolbars and buttons mentioned above in the Music Blocks codebase, and collate them in a document. This will include event handlers, rendering functions, strings, SVG handlers etc. An essay is not required here - something like _makeButton

L#4487 of activity.js
function _makeButton(name, label, x, y, size, rotation, parent)
Creates an easel.js container with a button in it - this can then be added to a toolbar.
The container handles mouseover, mouseout ... events.
Called by...

will suffice for each function.

Then draft an implementation plan outlining how you propose to migrate the toolbars to HTML. You can (and are encouraged to) include HTML mockups, JavaScript snippets and/or pseudocode if you feel these are helpful when explaining your design.

Submit both documents to complete the task.