Inspiration
The inspiration for ToneType came to a member of the developer team as she listened to Flight of the Bumblee while preparing for an upcoming typing competition. Why not use music as an integrated motivation tool for experienced typists, or even as a teaching tool for beginners?
What it does
ToneType contains a library of piano music and keybindings. Each song assigns certain keyboard keys to notes on a piano, and the typist is provided with a scrolling list of characters to type to generate the song. Users are intended to progress from easy levels such as "Ode to Joy" and "Linus and Lucy", learning the Home Row and easy-reach keys, into harder levels where more keys, numbers, and punctuation are introduced.
How we built it
The back-end was forked and adapted from a dockerized Flask portfolio project developed earlier in the fellowship. The PostgreSQL database was reconfigured to contain serialized JSON objects storing song titles, keybindings, piano ranges, and typing instructions. A new /admin endpoint was developed for developers to easily submit new songs into the database.
The front-end was designed using simple HTML and CSS and animated with javascript. Keybindings were accomplished using an open-source javascript library called Mousetrap. The original versions of the project contained hardcoded keybinding and piano display code for one song, and later versions shifted to automated display and user interaction based on data retried from the JSON files.
Challenges we ran into
The piano tone library we used had several notes named incorrectly, resulting in confusion when the right file name was playing but the wrong sound was sounding. This was fixed by playing the files individually next to a tuner and renaming them appropriately.
A major hurdle was incorporating JS libraries into the flask web app logic and connecting the piano frontend css with most of the backend.
Accomplishments that we're proud of
We are proud of making our login and register pages along with the database full of song info. We communicated well with each other and were able to delegate tasks and made a fully functioning web application. We worked together and coordinated while also handling our personal life as well.
We are proud to have a fast-paced, fun game that can be played by a wide range of ability levels!
What we learned
Members of our team learned:
- How to play audio files triggered by user interaction
- How to animate HTML elements using javascript and CSS
- How to display parts of a webpage based on data from a JSON file
What's next for Tonetype.tech
- More songs!
- Keyboard-based site navigation
- "Win/Loss" of a level based on accuracy
Log in or sign up for Devpost to join the conversation.