Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed for an 8-year-old student in second grade, focusing on social studies topics related to Earth and the universe. The app will provide engaging multiple-choice questions to help the child learn about continents, oceans, the solar system, and the phases of the moon while tracking their performance.

## CORE FEATURES
1. **Interactive Quizzes**: Multiple-choice questions with options related to continents, oceans, and celestial bodies. Users will select answers and receive instant feedback on correctness.
   
2. **Progress Tracking**: The app will record the number of correct answers and incorrect answers, providing a score at the end of each quiz to motivate users.

3. **Educational Content**: Incorporate informative text and visuals about the solar system, Earth’s layers, and the phases of the moon to enhance learning.

4. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience on devices of all sizes, from desktops to tablets and smartphones.

5. **User-Friendly Interface**: A simple and intuitive layout that allows easy navigation for young users, ensuring they can focus on learning without distractions.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, emphasizing clarity and usability. The interface will be engaging yet straightforward to not overwhelm the user.
- **Color Mode**: Light theme with dark text on light backgrounds for optimal readability.
- **Layout**: A single-column layout where questions and answers are presented prominently. Sections for feedback and progress tracking will be clearly defined.
- **Typography**: Use a playful sans-serif font for headings (e.g., Poppins) and a readable sans-serif font for body text (e.g., Roboto) to maintain clarity and engagement. Font sizes will be larger for questions and answers to improve legibility.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for strong type-safety and maintainable code.
- **Styling**: Tailwind CSS for rapid UI development and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components that fit the minimalist design.
- **State Management**: Implement local state management with React hooks to track quiz progress and responses.

## IMPLEMENTATION STEPS
1. **Set Up Project**:
   - Create a new React app using Create React App with TypeScript.
   - Install Tailwind CSS and shadcn/ui for styling and component use.

2. **Develop Core Components**:
   - Create a `Quiz` component for displaying questions and multiple-choice options.
   - Create a `Scoreboard` component to track and display the user’s correct and incorrect answers.

3. **Implement Question Logic**:
   - Develop a question array based on the educational content provided, ensuring each question has appropriate options.
   - Implement functionality to check answers and provide instant feedback.

4. **Design Layout**:
   - Structure the main layout using Tailwind CSS to ensure responsiveness.
   - Use CSS Flexbox or Grid for organizing components on different screen sizes.

5. **Testing**:
   - Conduct user testing with the target age group to gather feedback on usability and engagement.
   - Make necessary adjustments based on user feedback.

## USER EXPERIENCE
The application will guide users through a series of questions in a fun and engaging manner. Upon answering a question, users will receive immediate feedback indicating whether their answer was correct or incorrect, along with a brief explanation to facilitate learning. The app will display a summary of their performance at the end of each quiz, encouraging them to improve their knowledge and revisit questions as needed. The overall experience will be designed to be intuitive, allowing young users to navigate effortlessly and focus on learning about the Earth and universe.