Create a React application that generates customized quiz prompts for AI assistants. The application should allow users to configure all parameters dynamically and provide a seamless workflow for creating educational quizzes.
Generate prompts based on this template format:
# {{subject}} Software Engineer Quiz System
## Role
You are an expert {{subject}} {{role}} that creates targeted comprehension quizzes based on {{content-materials}} - allow to add "content".
## Objective
Create a {{question-len}}-question multiple choice quiz testing deep understanding of specific {{subject}} content. Present questions sequentially with increasing difficulty, handle clarifications, and track progress.
## Question Requirements
**Content Scope:**
- Base all questions strictly on {{content-materials}}
- Focus only on the specified {{subject}} topics
- if {{subject}} is about programming, use {{programming-language}} for all code examples and syntax
**Quality Standards:**
- Test comprehension and practical application, not memorization
- Avoid trivial questions, always consider recommended/idiomatic approach to {{subject}} with proper design patterns and algorithms
- Ask about concrete implementations, use cases, and code examples
- Include specific details from the provided material
- Avoid vague or generic questions
- Avoid obvious correct answers
**Example:** Instead of "When is Builder useful?" ask "In the CarBuilder example, what happens if you call `build()` before setting the engine?"
**Question Types:** - make this as dropdown selection for the quiz
{{question-types-list}}
## Quiz Execution
**Question Format:**
Question [X]/{{question-len}}: [Specific question based on content]
1. [Option A]
2. [Option B]
3. [Option C]
4. [Option D if needed]
**Response Protocol:**
- Wait for numerical answer (1-{{question-len}}) or clarification request
- For clarifications: provide brief explanation and repeat the question
- Increase difficulty when proceeding to next questions
- For answers: give "Correct!" or "Incorrect. [Brief explanation]"
- Immediately present next question
- Maintain steady pacing with brief explanations
**Completion:**
After question {{question-len}}: "Quiz Complete! Score: X/{{question-len}} (Y%)"
## Usage Instructions
**Input:** {{content-materials-instruction}}
**Start:** {{start-instruction}}
**Question Clarification**: If a question requires clarification, ask follow-up questions before providing an answer. For questions with single numeric answers, provide only the number. For questions requiring explanation, provide a {{answer-style}} but complete response.
**Progression:** Start with foundational concepts, build to more complex applications
-
Subject
- Text input
- Default: "React"
- Placeholder: "e.g., React, Python, Machine Learning"
-
Role
- Text input
- Default: "tutor"
- Placeholder: "e.g., tutor, instructor, mentor, coach, trainer"
- Helper text: "Define what type of educator role the AI should take"
-
Number of Questions
- Number input
- Default: 10
- Range: 1-50
-
Programming Language
- Text input
- Default: "JavaScript"
- Placeholder: "e.g., JavaScript, Python, Java"
-
Content Materials Source
- Text input
- Default: "Internet or Model's Knowledge"
- Placeholder: "e.g., provided study materials, specific textbook, documentation"
- Helper text: "Specify what content source the quiz should be based on"
-
Answer Style
- Text input with autocomplete dropdown
- Default: "detailed"
- Autocomplete options: detailed, concise, comprehensive, brief, explanatory, step-by-step, technical, beginner-friendly, advanced, practical, theoretical, conversational, formal, example-driven
-
Default Topic (Optional)
- Text input
- Default: empty
- Dynamic placeholder: "{subject} fundamentals, basic {subject} concepts, {subject} basics"
- Helper text: "If set, the quiz will start immediately with basic questions about this topic when prompt is pasted"
-
Question Types (Multi-select dropdown)
-
Default selected options:
- Implementation details and syntax specific to subject - default
- Code pattern identification and analysis - default
- Use case selection and problem-solving approaches - default
- Connections between design patterns and underlying principles - default
-
Additional options:
- Error diagnosis and debugging scenarios
- Performance optimization and trade-off analysis
- Code refactoring and improvement exercises
- Comparative analysis between different approaches
- Real-world application and project integration
- Testing strategies and validation methods
- Best practices and anti-patterns recognition
- Conceptual understanding through analogies
- Step-by-step problem decomposition
- Code review and quality assessment
-
-
Custom Parameters
- Dynamic add/remove functionality
- Each parameter has: name and default value
- "Add Parameter" button with plus icon
- Individual remove buttons with X icon
- When no parameters: show italic text "No custom parameters added. Click 'Add Parameter' to create your own parameters."
- Two-column layout on large screens
- Left column: Configuration panel with settings icon
- Right column: Generated prompt preview with document icon
- Responsive design for mobile/tablet
- Clean form layout with proper spacing
- All input fields with focus states (indigo ring)
- Helper text for complex fields
- Validation for number inputs
- Multi-select checkbox interface for question types
- Custom parameters with inline add/remove controls
- Header with two buttons:
- Copy button: Copy icon, shows "Copied!" with checkmark when clicked
- Open Chat dropdown: External link icon with chevron down
- Scrollable preview area with monospace font
- Real-time updates as user types
- Syntax highlighting with proper spacing
Include these platforms with color indicators:
- Claude (claude.ai) - Orange indicator
- ChatGPT (chat.openai.com) - Green indicator
- Gemini (gemini.google.com) - Blue indicator
- Copilot (copilot.microsoft.com) - Dark blue indicator
- Perplexity (perplexity.ai) - Purple indicator
- Poe (poe.com) - Gray indicator
Each option opens in new tab with external link icon.
- Replace "provided study materials" with user's content materials input
- Update role section: "...based on [content materials]"
- Update content scope: "Base all questions strictly on [content materials]"
- Smart usage instructions based on content type
When Default Topic is SET:
- Add "Auto-Start Configuration" section
- Modify usage instructions to indicate immediate start
- Add auto-start specification: "Begin immediately with 'Question 1/X:' about basic [topic] concepts"
When Default Topic is EMPTY:
- Use traditional workflow
- Include topic specification requirement
- When custom parameters exist, add "Custom Parameters" section
- Format:
**[parameter-name]:** [default-value] - Only include parameters with both name and value
Standard workflow:
- Copy the generated prompt above
- Click "Open Chat" to go directly to your preferred AI platform
- Paste the prompt and provide your study materials/content
- Specify the topic to start the quiz
With Default Topic:
- Copy the generated prompt above
- Click "Open Chat" to go directly to your preferred AI platform
- Paste the prompt - quiz will start immediately!
Include special alert when default topic is set: "Auto-Start Enabled: Quiz will begin immediately with basic '[topic]' questions"
Use as Default Instructions:
- Explain how to set as custom instructions in various platforms:
- Claude: Custom Instructions in settings
- ChatGPT: Custom Instructions or system message
- API: System prompt for consistent behavior
- Agents: Base personality/role definition
- Benefit: Simply say "create a quiz on [topic]" without repeating full prompt
- Use React useState for all form inputs
- Implement controlled components for all inputs
- Handle dropdown states for answer style and chat platforms
- Real-time prompt generation on any input change
- Clipboard API for copy functionality
- Window.open for chat platform links
- Proper focus/blur handling for dropdowns
- Avoid redundant wording (e.g., "expert subject expert role")
- Input validation for number fields
- Graceful handling of empty states
- Use Tailwind CSS utility classes
- Consistent color scheme (indigo primary, appropriate accent colors)
- Proper hover and focus states
- Responsive design principles
- Clean, modern interface design
The application should generate a complete, ready-to-use prompt that can be:
- Copied to clipboard
- Pasted directly into AI chat applications
- Used as default instructions/system context
- Customized for any subject, role, or educational context
The generated prompt should be professionally formatted, comprehensive, and immediately functional for creating educational quizzes across various domains and difficulty levels.