SkillXP

Learning reimagined as a game.

Comment

Inspiration

SkillXP was inspired by the need to make education engaging and fun for students. Traditional learning methods can feel monotonous, so we aimed to transform core subjects like Math, Science, and History/Social Studies into immersive adventures. By gamifying learning, we wanted to spark curiosity and motivate students to master skills through interactive challenges, drawing inspiration from popular educational games and the growing trend of game-based learning.

What it does

SkillXP is an interactive platform that turns learning into an epic quest. It offers games across three subjects—Mathematics, Science, and History/Social Studies—with multiple levels of increasing difficulty. Players can solve math problems in games like Number Ninja, explore scientific concepts in Physics Playground, or test historical knowledge in Historical Events. Features like a global leaderboard, progress tracking, and a particle-animated UI create a rewarding and visually appealing experience. Each game provides immediate feedback, helping students learn while having fun.

How we built it

We built SkillXP using HTML, CSS, and JavaScript, creating a fully client-side web application. The front-end leverages modern CSS techniques like gradients, animations (e.g., slideIn, shimmer), and responsive design with media queries to ensure accessibility across devices. JavaScript powers the game logic, with modular classes (e.g., NumberNinjaGame, SpaceExplorerGame) for each level, handling everything from canvas animations to drag-and-drop interactions. We used localStorage to persist user progress and Font Awesome for icons. The design focuses on smooth transitions, a sticky header, and a particle background for visual appeal.

Challenges we ran into

One challenge was balancing educational content with engaging gameplay—ensuring games were fun without compromising learning outcomes. Implementing varied game mechanics, like canvas-based animations for Number Ninja and drag-and-drop for Ecosystem Builder, required careful optimization to maintain performance. We also faced issues with responsive design, particularly ensuring the canvas and game controls adapted seamlessly to smaller screens. Debugging the leaderboard and progress tracking across sessions using localStorage was tricky, as we needed to handle edge cases like data corruption.

Accomplishments that we're proud of

We’re proud of creating a diverse set of games that cater to different learning styles, from interactive quizzes (food chain builder) to physics simulations (Physics Playground). The visually stunning UI, with its gradient backgrounds, particle effects, and smooth animations, enhances the user experience. We successfully implemented progress tracking and a leaderboard, motivating players to improve their scores. Additionally, EduPlay’s accessibility features, like ARIA labels and responsive design, make it usable for a wide audience.

What we learned

We learned how to integrate educational content into game mechanics effectively, balancing difficulty and engagement. Working with the HTML5 canvas taught us how to create dynamic animations and handle user interactions like clicks and drag-and-drop. We gained insights into managing state in a single-page application using localStorage and improved our skills in responsive design with CSS media queries. Collaboration and iterative testing helped us refine the user experience and debug complex interactions.

What's next for SkillXP

Next, we plan to expand SkillXP by adding more subjects like Coding(CS) and English, along with new game modes such as multiplayer challenges. We aim to introduce adaptive difficulty levels using AI to personalize the learning experience. Enhancing the platform with a backend for user accounts, cloud-based progress syncing, and teacher dashboards for tracking student performance is a priority. We also want to add more accessibility features, like voice narration and localization, to reach a global audience.

Built With

Share this project:

Updates