File Breakdown

The CSS and JS files are split into pieces purely for organization.

CSS

bachmain - Background and main elements (intro text, Logo, titles, location of portraits and captions, album buttons, click and hover effects
extrabuttons - Extra menu buttons (Stop play button, Auto button, Cue Visualization, Piece Number select)
menulevels - Placement of menu, Fugue and Prelude, Keyboard wrapper,
pianokey - Keyboard itself, entirely in CSS. This is separated out so that it's easy to inject elsewhere.
scatterplot - Everything about the dropdown scatterplot under Cue Visualization
scoredisplay - Score images and Editor tabs on the right-hand side
tempoplot - Tempo plot on the bottom right, placement for the HTML canvas drawings, etc
screen_370 - Removes performer/editor caption on really small screens.
screen_550 - Mobile-version styling!

Javascript

Initial Setup

I-pre - All initial properties and variable declaration.
I - The crux of the applet. Outlines prototypes that automatically build for whatever data is put in.

Data Injection

II-Pieces - Stores object declarations for all the data using prototypes
II-Scores - Stores object declarations for all the pieces (to grab score images)

Controls and Functionality

III - Codes all other functionality in the applet

Final Settings

IV-Hotkeys - Hotkeys for easy-usage
IV-Init - Initializing settings to change appearance according to different app "modes"

Written by Kyle Gauder

Development of this tool was funded by an NSERC Undergraduate Student Research Award Grant. Special thanks to Marsha Natadiria for crosschecking data for errors and collecting information on all performers and editors (and running participants)