Our web application, Learn by Listening, was inspired by our passion for wide tastes in music from different decades and genres. We believe that music is an integral part of learning that has been overlooked by the Ontario education system. Although music is a large part of mainstream media, many disregard the educational purposes that music can provide. Music has been proven to strengthen the weak areas of a brain of a child with learning abilities, including the auditory, visual, spatial and motor cortices of the brain. Going further, music can help those with mental illnesses such as depression and anxiety.

We strived to create a project that would be memorable, educational and very fun!

What it does

"Learn by Listening" is a web application meant to educate and provide entertainment for its users. Studies show that music not only improves students' ability to learn, but can have a large effect on mood. We believe that categorizing our game into different genres/moods will promote good mental health and well-being. Our website caters towards all three learning styles, making it accessible for everyone. We cater the music to your mood!

Features include:

  • Fun facts about old bands - learn the history!
  • Guess the Song - a total of 4 mood settings and 8 genres. Currently, the first 2 genres in the "Happy" category are released, but we are working on releasing more!
  • Music Trivia - if you're feeling motivated (this is a hint), learn the technicalities of music, from history to instrument facts!

How we built it

Our application was built primarily of JavaScript, with elements of HTML and CSS. The design was roughly prototyped and created using HTML and CSS framework. Using a variety of image and audio assets, both computed generated and from the internet, we implemented these into our design. The game portion was primarily constructed using JavaScript methods.

Challenges we ran into

Debugging our JavaScript methods took much longer than anticipated. Our team expected to have more code reusability when creating different genres and questions. However, many MANY modifications were made when creating different game categories. We spent the entire Saturday attempting to debug our code.

Accomplishments that we're proud of

This is the first Hackathon for 2/3 of the team, and the second Hackathon for the other member on the team as 1st/2nd year students. Furthermore, none of our team members were proficient in JavaScript, and it was the first time using JavaScript for a few of us. Although we may not be as technically skilled due to less experience, we persevered and created a product we are proud of. We are pleasantly surprised with both the functionality and the design of our application.

What we learned

Websites require more effort than one might think. Our team gained knowledge on how to build web applications using JavaScript, HTML and CSS, project management, and teamwork!

What's next for Learn By Listening

Our team would like to develop this web application further by implementing the "Sad" and "Angry categories to make our program suited for the audience we intend. We have a strong idea of our intentions, and we would like to carry through developing this into a public website. Please stay tuned!

Share this project: