Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as an interactive quiz platform designed for group participation. It allows a facilitator to conduct a live quiz with multiple-choice questions, followed by a survey, promoting engagement and real-time feedback among participants.

## CORE FEATURES
1. **Live Quiz with Multiple-Choice Questions**: Facilitators can create quizzes with 6 questions, each offering multiple-choice answers for participants to select from.
2. **Real-Time Response System**: Participants submit their answers via their mobile devices, allowing for immediate feedback and engagement.
3. **Survey Post-Quiz**: After completing the quiz, participants answer a 3-question survey to provide insights on the session's effectiveness.
4. **Facilitator Dashboard**: A dedicated interface for facilitators to manage the session, including controlling the quiz flow and viewing real-time statistics.
5. **Participant Interface**: An intuitive interface for participants to join the quiz using a session code and submit answers without seeing results until the end.
6. **Results Display**: After completing the quiz and survey, the facilitator presents the ranking of participants and a summary of survey results in an engaging format.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will feature a clean, simple aesthetic with ample white space to ensure clarity and focus on the content.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring readability and a pleasant user experience.
- **Layout**: 
  - **Facilitator Interface**: Large session code display, participant list, current question, and real-time response graphs laid out in a vertically stacked format with clear separation.
  - **Participant Interface**: Entry screen with session code and name input at the top, followed by a progress bar, current question display, and clickable answer options.
- **Typography**: Use modern sans-serif fonts (like Inter or Roboto) to maintain readability, with a clear hierarchy for headings, questions, and options.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for efficient and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-made components that align with the minimalist design.
- **State Management**: Implement React Context or Redux for managing application state, especially for real-time responses.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Create a new React app using Create React App with TypeScript template.
2. **Install dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Design the Facilitator Interface**:
   - Create components for session code display, participant list, question display, and real-time graph.
   - Implement state management to track participant responses and quiz progress.
4. **Design the Participant Interface**:
   - Create components for entering the session code and name, displaying questions, and submitting answers.
   - Implement progress bar and response confirmation messages.
5. **Integrate Real-Time Functionality**: Use WebSockets or Firebase to enable real-time updates for responses and graphs.
6. **Implement Survey and Results Display**: Develop components for the survey and final results screens, ensuring smooth transitions between quiz, survey, and results.

## USER EXPERIENCE
Participants will enter their names and session codes on a clean entry screen. They will progress through the quiz with clear navigation and feedback. Facilitators will have a comprehensive dashboard to oversee the quiz, with real-time statistics enhancing the interactive experience. After the quiz, participants will complete the survey, and the final results will be displayed in a clear and engaging format, ensuring a satisfying conclusion to the session.