Many students are facing problems with the fast transition to online learning because of the pandemic. As students ourselves, we struggle with finding motivation to complete our assignments and other tasks due to the many distractions around us! We agreed that if we were in elementary school, our attention span and motivation would be worse than what we are currently experiencing as university students. Thus, we wanted to find a way to help elementary students (Grades 1-5) heighten their motivation and willingness to participate and complete work at home!

What it does

Assignment Zoo is an online learning platform that motivates students from Grade 1-5 to complete their school work through a rewarding system! Students can earn a badge every time they submit and/or do well on assignments or projects. Teachers are able to upload all of their assignments on Assignment Zoo for students to complete and set how many badges they should be earning throughout the school year. Teachers can also assign the amount of badges that a student needs to earn before they can unlock the ability to adopt virtual animal buddies called Progress Pets!

How we built it

First, we created a website layout on AdobeXD which includes all of the features that we want the website to have. Then, we coded the website on QOOM using HTML and CSS. We purchased a custom domain name from, however we were not able to use it because we do not have a premium account on QOOM.

Challenges we ran into

We are beginner coders, and had very limited knowledge in HTML and virtually none in CSS before the hackathon started. It was difficult for us to figure out the mistakes in our code, and simultaneously learn how to format text, images, and tabs on our website in only 48 hours. As for design, we needed to consider how to create an environment that was user friendly for kids, which includes considering colour and font usage, as well as the visuals buttons.

Accomplishments that we're proud of

As beginner programmers, we are proud that we were able to accurately replicate most of the mockup designs that we created in our website, such as the Homepage, About us tab, How it Works and Contact Us. We are also very proud of the designs and logo that we made for Assignment Zoo and that they turned out extremely close to what we envisioned them to look like! As well, we are proud that we have a detailed prototype so that we can accurately convey our concept and what it is supposed to look like for student users.

What we learned

We were able to learn an extensive amount of HTML and CSS, as well as familiarize ourselves with Bootstrap. Specifically, we learned a lot of the basic elements of HTML and CSS which include, formatting and inserting text, images and tabs, adding dividing elements, and changing font styles and sizes.

What's next for Assignment Zoo

We hope to incorporate JavaScript in Assignment Zoo to have more user interactions like logging in, purchasing pets, and creating a game where students can interact with the progress pets they have earned. We would also like to include a calendar feature to help students stay organized with their assignment and project due dates as well as include the visuals/pages from a teacher’s perspective.

Built With

Share this project: