Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Quiz System Platform is a web application designed for ATOMA, a leading telecommunications provider in Afghanistan. Its primary goal is to create a secure, scalable, and user-friendly platform that facilitates interactive assessments and real-time performance tracking. This application will support a wide range of users and devices, ensuring an engaging and seamless experience.

## CORE FEATURES
1. **Quiz Creation**: Administrators can add an unlimited number of questions to a centralized question bank, which can then be utilized to generate quizzes tailored to specific needs.
2. **Randomization**: The system automatically reshuffles quiz questions for each user attempt, significantly reducing the chances of cheating and promoting fair assessments.
3. **Navigation**: Participants can easily navigate between questions and pages during quizzes, allowing them to review and modify their answers as needed.
4. **Feedback & Results**: After completing a quiz, users receive immediate feedback, including incorrect answers and the correct responses, enhancing learning opportunities.
5. **Reporting & Analytics**: Robust reporting features allow for detailed analysis of quiz results, user performance, and activity logs, with customizable filters for better insights.
6. **Multi-language Support**: The application supports Pashto, Dari, and English, ensuring accessibility for a diverse user base.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will feature a clean and simple aesthetic with ample white space, focusing on clarity and usability.
- **Color Mode**: The application will utilize a light theme with dark text on light backgrounds to enhance readability and user experience.
- **Layout**: The main layout will consist of a header for navigation, a sidebar for user options, a main content area for quizzes and results, and a footer for additional information and links.
- **Typography**: The font choices will prioritize legibility and professionalism, using a sans-serif font for body text and a slightly bolder variant for headings to establish a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and robust component management.
- **Styling**: Tailwind CSS for utility-first styling, ensuring a responsive and adaptable design.
- **UI Components**: Integration of shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Utilize React's built-in state management or consider Context API for managing user sessions and quiz states.

## IMPLEMENTATION STEPS
1. Set up the project structure using Create React App with TypeScript template.
2. Install Tailwind CSS and configure it for global styles and utility classes.
3. Design the main layout components: Header, Sidebar, and Footer.
4. Create the Quiz Component featuring question rendering, navigation, and answer submission functionalities.
5. Implement the question bank management for admins to add, remove, and edit questions.
6. Develop the randomization algorithm to ensure unique question orders for each quiz attempt.
7. Design and implement the feedback system to display results and correct answers post-quiz.
8. Build reporting functionalities for quiz performance analysis, including export options.
9. Integrate multi-language support to allow switching between Pashto, Dari, and English.
10. Conduct thorough testing across devices and browsers to ensure a responsive and bug-free experience.

## USER EXPERIENCE
Users will begin their journey by logging in via a secure authentication process, including Two-Factor Authentication (2FA). Once logged in, they can easily navigate to available quizzes, select one to attempt, and move through questions seamlessly. After submission, users will receive immediate feedback, helping them to identify areas for improvement. Administrators will have dedicated functionality for managing the question bank, viewing performance analytics, and generating reports, ensuring a holistic approach to quiz management and user engagement. The overall design emphasizes simplicity and usability, making it easy for all users to interact with the platform effectively.