Happy Canvas

• 

  Confetti flying after submission

Inspiration

Although celebration animations have existed in Canvas since April 2020, many instructors don’t turn it on. Additionally, when the submission is not on-time, no confetti happens. We believe that the effort of all assignments should be celebrated.

We know, from the bottom of our hearts, that UBC is better than SFU. Therefore, we cannot lose in any aspect. We have decided that the lack of a confetti animation when work is submitted on Canvas is the most urgent problem in UBC’s education program. Due to popular request from the UBC student body and to maintain our superiority over SFU, we have decided to take matters into our own hands and create Happy Canvas, the shiny browser extension that makes Canvas a happier place.

What it does

Happy Canvas is a lightweight browser extension that helps you celebrate the submission of your assignments and quizzes on the Canvas Instructure LMS platform. After submitting any assignment or quiz on Canvas, you are rewarded with a pop of flying confetti.

How we built it

Happy Canvas was built with lots of love in vanilla Javascript, as a Chrome-focused browser extension to Manifest v2 specifications. Confetti animations are provided by a module called canvas-confetti (unrelated to Canvas Instructure).

Challenges we ran into

Challenges we ran into include the lack of mutations on a quiz page upon submit. Canvas reloads the page after the Submit button is clicked, so confetti fired on click would disappear shortly after. To work around this, the main function of the extension runs on window reload, rather than on click, However, due to the lack of mutations on a quiz page post-submission, it was difficult to find an appropriate trigger to fire the confetti. We found a sneaky workaround by parsing the submission date and comparing it to the current time, with a tolerance of 1 minute.

What's next for Happy Canvas

Happy Canvas will be actively developed and maintained, as long as students ask for it. Currently, there is no variation in the celebratory confetti. The same animation will play each time, quickly becoming old and no longer serving to positively reinforce submissions. In future versions of Happy Canvas, we want to

• [] mix and match colours from a harmonic palette, add rare 1-in-100 animations, and look to expand beyond just confetti flying on the screen. For example, we’d like to explore the redesign of the post-submission popup message, or play some sort of validating jingle (think: sound effect that plays when connecting your phone charger). Additionally, we’d like to implement options for the user to choose from, regarding audio, visual elements, and frequency of celebrations.

As Happy Canvas is supposed to be a shiny aftermarket addition to an otherwise boring LMS interface, the main objective is to avoid user burnout, and never let them feel that Happy Canvas is just another thing that happens in the background.

QOL changes: We’d like to add a toggle button in the extension popup, to easily enable and disable Happy Canvas.

Built With

• canvas-confetti
• html5
• instructure-canvas
• javascript
• npm