William Ratke

Tonic Tutor

Tonic Tutor was something I started working on in collaboration with composer and educator Christine Donkin after finishing a one year Internet and Media Technology after-degree certificate at Algonquin College in 2009. It was an opportunity to continue building and expanding upon the skills I'd learned in that program, but I was also motivated by the opportunity to build something unique for music educators. It began with a few standalone Flash games that used an Object Oriented structure since a lot of the games reused elements. This allowed me to create classes for the interface and game objects and extend them as needed and avoid duplicating a lot of code. Once I added the concept of weekly lessons that track a student's progress over time, something much more comprehensive began to evolve as I continued to add additional features around the games. Other music game websites that used Flash at the time were limited to a few different levels with no options to change the game settings or track student progress. I used AMFPHP to allow Flash to interface with a MySQL database where I could pull game settings and record the results for the games which made them much more flexible and provided teachers with really useful feedback. I used the CakePHP framework (a Ruby on Rails inspired PHP framework) to build the website around the games, which provided a MVC structure and ensured that the project remained manageable as it increased in scope. It's templating structure allowed me to reduce the amount of boilerplate code required and reuse common elements. Throughout the application, I focused on making sure that most of the application logic was kept in the controller and not cluttering up the view, using the models (which map to each table in the database) to keep the controllers as lean as possible.

I launched Tonic Tutor with 10 games in 2010 and a minimal set of features in 2010, integrating Paypal so that when teachers created or canceled a subscription to the website, it would automatically handle those events, though it didn't allow customers to upgrade or downgrade without canceling their existing subscription and creating a new one. Teachers set a lesson time for each student, and a Cron Job on the server runs every five minutes to reset student lessons, compiling statistics that are available to teachers and creating a new lesson for the student. I continued to add games and features over the next few years, incorporating user feedback as much as possible, while trying to find a balance so that I didn't end up making Tonic Tutor too complex for new users. I added in AJAX using Jquery to many of the pages so that changes would be saved without having to submit a form or reload the page. I used TCPDF to create the option to export some of the data teachers had access to in a PDF format. I provided customer support, fixed bugs, and continued to work on improving Tonic Tutor whenever I didn't have any other active projects to work on. I added in several different systems to reward students including Stickers, Contests, Goals, Achievements, and Freeplay which they had access to after completing their lesson to encourage self-directed learning. There was no easy way to upgrade or downgrade an existing Paypal subscription, so I switched over to Chargify in 2011 and integrated it into the site using their API which simplified subscriptions for both myself and my customers. In 2013 I worked on an iOS app version of Tonic Tutor that had all of the functionality of the website, learning Objective C and Swift (find out more about that project here). I used JSON to create a custom API that synced data with the server.

In 2016 I started working on a complete overhaul of the front-end using Foundation 6. The original design wasn't responsive, so it didn't work well on mobile, and a lot of inconsistencies had been introduced adding new features and making changes over the years. The redesign was an opportunity to make sure there was a consistent look across the site, focusing on improving usability, navigation, and streamlining the website by removing or simplifying some of the existing functionality that no longer seemed necessary. I'd dabbled in converting the Flash games to HTML5 and Javascript in 2013, but there were inconsistencies in how sound was handled across different browsers at the time which prevented me from making much progress. After Adobe signaled that they were going to abandon support for Flash, I renewed work on converting the Flash games over to HTML5 Canvas using the CreateJS framework (more about that process here). That was a large undertaking that I completed in 2019. I continued to add in new features up until recently, including Lesson Plans (which allow teachers to queue up lessons for students or groups), and Lesson Caching (which was made possible by converting the games to HTML5 and allows teachers to make changes for the next lesson without affecting the current lesson and uses Memcached).

I started out with shared hosting early on, but quickly realized that a dynamic application like Tonic Tutor would require more horsepower. I switched over to a managed VPS in 2010 where I could tinker and explore while having a safety net to rely on just in case anything went wrong. Over the years, I've worked on optimizing everything, using caching for some of the data pulled from the database. I've made structural changes to the MySQL database over the years, using CakePHP shell scripts to convert tables from the command line after tunneling into the server using SSH on the command line (Terminal while I'm using a Mac, and SmarTTY on PC). I also created indexes using PHPMyAdmin: some of the tables now have millions of entries, and indexing greatly improves query performance. While CakePHP has an ORM that makes queries straightforward, I've done work with MySQL on the command line (to dump the database from the server and import it locally), along with work with queries in PHPMyAdmin when needed.

Tonic Tutor has evolved a lot over the past decade, with input from teachers that have been using it for as long as it's existed. My own skills and knowledge have evolved along with it — it's been a passion project that's served as an invaluable opportunity to learn and evolve as a developer. Tonic Tutor is the project where I've been able to bring everything I learn together, allowing me to develop a broad foundation of skills and become a well rounded developer that can communicate efficiently, bridging the gaps that exist between front-end and back-end design with ease.

Designed by: William Ratke

Technology: CakePHP, CreateJS, RequireJS, HTML5, CSS, SCSS, Foundation 6, MySQL, PHPMyAdmin, Jquery, Javascript, Illustrator, Animate, Photoshop, Memcached, Git

View Tonic Tutor online

My Students Page
My Students Page
Dancing Jelly Beans
Game Settings
Freeplay
Student Activity Overview
Student Groups
Goals
Lesson Results
Achievements
Stickers
Contests