Canvas RPG - A gamified task management system for Canvas LMS !
Inspiration
The inspiration behind Canvas RPG stemmed from observing students' struggles with assignment completion. It's a common issue: tasks pile up, motivation wanes, and the whole learning process can feel overwhelming. We wondered, "What if we could transform the mundane task of completing assignments into an engaging and enjoyable experience?" By gamifying Canvas, we aimed to create a system that would boost student motivation and foster a sense of accomplishment and progress.
What it does
Canvas RPG transforms the traditional Canvas learning management system into an interactive role-playing game. It takes your existing assignments, quizzes, and course materials and integrates them into a game-like environment. Specifically, it functions as a Chrome extension that overlays a dynamic game interface onto your Canvas pages. Completing tasks earns you experience points, unlocks new levels, In essence, it turns your coursework into a quest, making learning more engaging and less like a chore.
Features
- Quest System: Canvas assignments and events appear as quests in your quest scroll
- XP Progression: Gain experience points by completing quests
- Boss Battles: Use your accumulated XP to attack the dragon boss
- Animated Knight: Your character performs random animations and attacks
- Dynamic Backgrounds: Parallax scrolling backgrounds with animated lightning effects
- Time Challenges: Random time-based challenges appear every 15-30 minutes
- Challenge Rewards: Earn bonuses like double XP, bonus loot, or critical hit chances
- Persistent Progress: Your game state is saved between sessions
How we built it
We built Canvas RPG using a combination of web technologies. The frontend utilizes HTML, CSS, and JavaScript to create the interactive game interface. We leveraged the Canvas API to fetch assignment data and student progress. As a Chrome extension, we used the Chrome Extension API to inject our game interface into Canvas pages and manage persistent data storage. The animated visuals, including the knight character, dragon boss, and background effects, were designed using CSS animations and Aseprite.
Challenges we ran into
Initially setting up the code to work with a Canvas API token, deciding on an art style, and properly rendering images in the app.
Accomplishments that we're proud of
- Successfully integrating the Canvas API to create a functional game overlay.
- Developing a user-friendly interface that transforms assignments into engaging quests.
- Creating a system that has the potential to significantly improve student motivation and engagement.
- Creating a working prototype in a short period of time, and having a working Chrome extension.
- Implementing time-based challenges with varied rewards.
- Creating a visually appealing and animated user interface.
What we learned
One member learned some basics of HTML and CSS coding, another learned the importance of keeping on practicing programming as well as the usefulness of GenAI in coding, and we all gained experience working in a team and managing a reasonable project scope.
What's next for Canvas RPG
- Implementing a social tab that allows students to view their rankings, compare progress, and interact with each other.
- Adding more diverse game elements, such as character customization, item collection, and collaborative quests.
- Developing a system for teachers to customize game elements and create personalized quests.
- Implementing more varied reward systems.
Log in or sign up for Devpost to join the conversation.