Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create an interactive web application for the National Science Olympiad (OSN) for elementary school students. The app will provide a fun and educational platform for students to practice and test their knowledge in subjects such as Mathematics, Science, and Social Studies, using a user-friendly interface that incorporates engaging visuals and sounds.

## CORE FEATURES
1. **Participant Identity Page**: A registration form for students to input their personal details, select competition subjects, and create an account with a username and password.
2. **Question Structure**: A variety of questions based on HOTS (Higher-Order Thinking Skills) tailored for each subject, with multiple-choice formats and stimulus-based questions.
3. **Timer and Navigation**: Timers for each subject, along with navigation options to move between questions and mark questions for review.
4. **Results and Review**: After completion, students can view their total scores and detailed explanations for each question, enhancing their learning experience.
5. **Leaderboard**: Display results in a podium format, showing the top three participants and their scores with animations.
6. **Account Management**: Login/logout functionality with history tracking and the ability to retake the practice tests.

## 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 be structured with a header for navigation, a content area for forms and questions, and a footer for additional resources and information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux (if needed)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React application using create-react-app with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS for styling and shadcn/ui for UI components.
3. **Create Components**: Build components for the participant identity page, question display, results page, and leaderboard.
4. **Implement Routing**: Use React Router for navigation between different sections of the app.
5. **Develop Question Logic**: Implement the question structure and navigation logic, including timers for each subject.
6. **Add Audio Features**: Integrate background music and sound effects with on/off controls.
7. **Database Integration**: Set up a backend to store participant data, scores, and question data using Firebase or a similar service.
8. **Testing**: Conduct thorough testing to ensure all aspects of the application function as intended, including user account management and score tracking.

## USER EXPERIENCE
Students will be greeted with a bright, friendly interface that makes registration easy and engaging. They will navigate through the app smoothly, answering questions with clear instructions and visual aids. After completing the test, they will receive instant feedback and have the opportunity to review their performance, making the app both educational and enjoyable.