JS Input Hackathon - Giulio Gratta

Projects

• "Mirror": Simple 'Hello World' project that works well as a barebones starter.
• "Piano": More complicated project that demonstrates more advanced use of JS Input

Mirror

#####Files:#####

• mirror.html: Extensively commented HTML file, for use as basis for custom problems. Has CSS and JS sections included for portability, but larger projects should separate these into their own files.
• mirror.xml: Problem code in xml, for use in edX JS Input Studio problem type.

#####Usage:#####

1. Download mirror.html and make any changes you wish, following the comments.
2. Rename the file!
3. Upload the file/s to your course.
4. Download mirror.xml and follow the comments in it to make any changes necessary (Make sure you change and match the name of your .html file in this file!).
5. Replace the contents of your edX JS Input problem with your edited mirror.xml.

Piano

#####Files:#####

• piano.html: Main JS Input file, contains the HTML, CSS and Custom JS.
• piano.xml: Problem code in xml, for use in edX JS Input Studio problem type.
• raphael-min.js: SVG canvas drawing library. Used by keyboard and music notation libraries. (http://www.raphaeljs.com)
• vexflow-min.js: Music notation library. Renders the musical notes based on simple JS commands. (http://www.vexflow.com)
• qwerty-hancock.js: Keyboard rendering library. (http://www.stuartmemo.com/qwerty-hancock/)