Canvas Pets

Turning online to-do lists into an interactive/competitive game to promote engagement and participation in a class (k-12)

Comment

Inspiration

Our team was inspired by other browser extension tools and games that add a bit of fun to otherwise mundane activities. We wanted to create a similar tool that can turn managing schoolwork into a fun game to not only help younger students (K-8) build good time management habits but also keep them engaged with their school work and promote class participation in a fun and competitive way.

What it does

Canvas Pets is similar to other to-do list tracking app, except we took it a step further and turned it into a game. The user starts out with a little pet turtle in their ocean-themed sidebar window and their is job to keep the turtle happy by completing work and submitting assignments on time! The user gets in-game coins from each assignment they submit, the amount depending on how close to the due date the assignment is submitted the less you procrastinate the better!. The closer to the deadline you leave assignments, your turtle's happiness decreases. There is also a shop for you to spend the coins you earn to unlock other pets and cool accessories.

How we built it

We built the project with an HTML/CSS front end and a FastAPI/Python/Javascript back end.

Challenges we ran into

Some challenges we ran into is figuring out what features we would be able to implement within the time constraints, merging front end interfaces that relied on different architecture, and refactoring the code to more modular models to allow for easier product iteration.

Accomplishments that we're proud of

  • ALL assets are entirely original and designed in Aseprite!
  • Project UI design looks nice.
  • Fully integrated information pipeline using FastAPI with real-time updates.
  • Extension stores data through FastAPI json which could later be saved to a database for improved tracking.

What we learned

We learned the importance of designing a project with modularity in mind initially. While we were able to push a MVP with the frame of what we wanted, some of the additional features (shop transactions, expanded level system, etc.) were unachievable in our given timeframe. This dilemma is ultimately unique to hackathons as an we had to sacrifice our future flexibility in exchange of deploying a functioning product. In the future, more deliberate setup of the backend may be considered to improve future iteration.

What's next for Canvas Pets

The leftover modular branch is still public, and is worth further exploration because we would still like to integrate a list of features.

  • Add tons of more pets! (Armadillo in progress)
  • Pet rarity system
  • Correct shop/item overlay
  • Pop animation on task completion
  • Background bubble gifs
  • Birthday hat sprite swap on Student Birthday
  • Seamless integration with Canvas using data scraping (Canvas API isn't publicly available)
  • Modular students and pets
  • Ability for students to interact with pets
  • Ability for students to see classmates' pets
  • Battle system (?)

Built With

Share this project:

Updates