Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
"Fracción Quest: La aventura de los números" is an interactive, gamified web application designed for sixth-grade students aged 10 to 11. The primary goal is to strengthen the understanding of fractions through engaging challenges that promote active learning and immediate feedback.

## CORE FEATURES
1. **Interactive Challenges**: Students will face 15 questions across three levels, each designed to reinforce different mathematical concepts related to fractions.
2. **Gamification Elements**: Points, badges, and progress tracking to motivate students. Each correct answer grants points, and completing levels unlocks badges.
3. **User-Friendly Interface**: A colorful and modern design tailored for young learners, with intuitive navigation and clear feedback mechanisms.
4. **Progress Tracking**: A dashboard displaying current scores, unlocked badges, and areas for improvement based on performance in challenges.
5. **Immediate Feedback**: Correct and incorrect answers will yield instant feedback, including explanations to reinforce learning.
6. **Adaptive Design**: Fully responsive layout that works seamlessly across computers, tablets, and mobile devices.

## DESIGN SPECIFICATIONS
- Visual Style: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- Color Mode: Light theme with dark text on light backgrounds
- Primary Color: #1978E5 (accent for buttons, links, highlights)
- Typography: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- Border Radius: 8px (moderately rounded) for buttons, cards, and inputs
- Layout: The main layout will feature a top navigation bar, a central content area for questions and feedback, and a sidebar for progress tracking.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Context API (for managing user progress and scores)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and integrate Tailwind CSS for styling.
2. **Design the Layout**:
   - Create a header component with the title "Fracción Quest" and a navigation menu.
   - Build a main content area for displaying questions and feedback.
   - Develop a sidebar for progress tracking (points, badges, current level).
3. **Create Components**:
   - Design reusable components for questions, buttons, and badges.
   - Implement a progress bar component to visually represent user progress.
4. **Implement Game Logic**:
   - Create a state management system to track user scores, current level, and badges earned.
   - Develop functions to handle answering questions, calculating scores, and providing feedback.
5. **Add Feedback Mechanisms**: Implement immediate feedback for each answer, including positive reinforcement for correct answers and constructive feedback for incorrect responses.
6. **Responsive Design**: Ensure all components adapt to different screen sizes, providing a seamless experience across devices.
7. **Testing**: Conduct thorough testing to ensure all functionalities work correctly, including scoring, navigation, and feedback mechanisms.

## USER EXPERIENCE
Students will start by entering a nickname and selecting an avatar on the home screen. They will then embark on their adventure, progressing through levels by answering questions. After each question, they will receive immediate feedback and see their updated scores. Upon completing all levels, they will receive a summary of their performance, including recommendations for further study based on their answers, encouraging continuous learning and improvement. 

This application aims to create a fun and engaging learning environment, helping students master fractions while enjoying the game mechanics.