XP-Quest

• 

  question

• 

  wrong answer

💡## Inspiration We were inspired by the core challenge of learning: motivation and retention. Traditional flashcards and quizzing apps feel like chores. We wanted to fuse the inherent reward loops found in popular RPG and adventure games—the satisfaction of seeing an XP bar fill up and the excitement of a Level-Up—with effective study techniques. Our goal was to create a system where the desire to "Level Up" would override the desire to procrastinate.

💻 What it does

XP-Quest is a gamified flashcard training platform that transforms concept mastery into a structured, rewarding progression.

Gamified Feedback: Replaces simple "Correct/Incorrect" tracking with Experience Points (XP) for every correct answer.

Level Progression: Accumulating 100 XP triggers a satisfying Level-Up, unlocking the next stage of the learning journey and providing a clear, long-term metric of progress.

Focus on Mastery: By focusing on XP gain and Level advancement, the platform shifts the user's focus from temporary scores to permanent skill progression.

🛠️ How we built it

We aimed for maximum speed and portability by building a single, self-contained file:

Front-End Structure: Built using HTML5 to define the core layout (Flashcard, Input, Stat Displays).

Styling & UX: Utilized Tailwind CSS (via CDN) for rapid, modern, and responsive styling, giving the application a clean, "dark mode" game-like aesthetic.

Gamification Logic: The core functionality was implemented with Vanilla JavaScript, handling the state management, including:

Tracking currentXP and currentLevel.

The checkAnswer() function, which awards XP and initiates the checkLevelUp() sequence.

Dynamic DOM manipulation to visually update the XP bar and Level text.

🚧 Challenges we ran into Our primary challenge was implementing the Level-Up logic cleanly under a strict time limit. Specifically:

XP Carryover: Ensuring that when a user gains more XP than needed to reach Level N, the remaining XP is correctly carried over to start Level N+1 (e.g., if you need 10 XP but gain 20 XP, you level up and start the new level with 10 XP). We solved this by using currentXP -= XP_PER_LEVEL; in our checkLevelUp function.

Visual Smoothness: Making the XP bar transition smoothly while ensuring the Level change was immediate and visually impactful.

✨ Accomplishments that we're proud of Core Gamification Loop: Successfully implemented a functional and compelling Level/XP system that is visually responsive and immediately understandable, perfectly addressing the "Gamify the Learning Journey" track.

Speed and Efficiency: Delivering a fully working, well-styled prototype in a single, lightweight HTML file, maximizing our development speed.

Positive User Experience: The use of clear visual feedback (green for correct, red for incorrect) combined with the filling progress bar makes the experience intrinsically rewarding.

🧠 What we learned

We learned the power of Utility-First CSS (Tailwind) for rapid prototyping—it allowed us to achieve a polished, game-like UI far faster than writing custom CSS would have permitted. We also reinforced the principle that for engagement, visual feedback and progress metrics are often more motivational than raw scores.

⏭️ What's next for XP-Quest

Persistence: Integrate a back-end (like Firebase) to save the user's Level and XP, allowing them to truly build a permanent "mastery profile."

Multiple Decks & Difficulty: Allow users to switch between different card sets (e.g., "Web Dev Fundamentals," "Calculus Concepts") and link Level progression to unlocking harder decks.

Loot and Rewards: Introduce cosmetic rewards (e.g., changing the color of the XP bar, virtual badges) upon Level-Up to further incentivize continuous play and mastery.

Built With

• css
• html5
• javascript
• tailwind