232 lines
11 KiB
Markdown
232 lines
11 KiB
Markdown
# Quiz Editor Feature Plan
|
|
|
|
## Overview
|
|
|
|
Add the ability to view and edit quizzes:
|
|
1. **Post-generation editing** - Review/edit AI-generated quizzes before starting a game
|
|
2. **Library editing** - Edit saved quizzes from the quiz library
|
|
|
|
## Current Flow
|
|
|
|
```
|
|
AI Generation → Lobby (with save prompt) → Start Game
|
|
Library Load → Lobby → Start Game
|
|
```
|
|
|
|
## Proposed Flow
|
|
|
|
```
|
|
AI Generation → Quiz Editor → Lobby (with save prompt) → Start Game
|
|
Library Load → Quiz Editor → Lobby → Start Game
|
|
↓
|
|
Save changes back to library (if from library)
|
|
```
|
|
|
|
## User Stories
|
|
|
|
1. As a host, I want to review AI-generated questions before starting a game so I can remove inappropriate or incorrect questions
|
|
2. As a host, I want to edit question text and answers to fix mistakes or improve clarity
|
|
3. As a host, I want to delete questions I don't want to include
|
|
4. As a host, I want to add new questions to an AI-generated or saved quiz
|
|
5. As a host, I want to reorder questions
|
|
6. As a host, I want to edit quizzes from my library and save changes
|
|
|
|
## UI Design
|
|
|
|
### Quiz Editor Screen
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ ← Back [Save to Library] │
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ Quiz Title (editable) ✏️ │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ Questions (12) [+ Add Question] │
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ ≡ 1. What is the capital of France? ✏️ 🗑️ │ │
|
|
│ │ ○ London ○ Berlin ● Paris ○ Madrid │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ ≡ 2. Which planet is known as the Red Planet? ✏️ 🗑️│ │
|
|
│ │ ○ Venus ● Mars ○ Jupiter ○ Saturn │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ... (scrollable list) │
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ [Start Game with 12 Questions] │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Question Edit Modal
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Edit Question ✕ │
|
|
│ │
|
|
│ Question Text │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ What is the capital of France? │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ Time Limit: [20] seconds │
|
|
│ │
|
|
│ Options (select correct answer) │
|
|
│ │
|
|
│ ○ ┌──────────────────────────────────────────┐ 🗑️ │
|
|
│ │ London │ │
|
|
│ └──────────────────────────────────────────┘ │
|
|
│ Reason: ┌──────────────────────────────────┐ │
|
|
│ │ London is the capital of the UK │ │
|
|
│ └──────────────────────────────────┘ │
|
|
│ │
|
|
│ ● ┌──────────────────────────────────────────┐ 🗑️ │
|
|
│ │ Paris │ │
|
|
│ └──────────────────────────────────────────┘ │
|
|
│ Reason: ┌──────────────────────────────────┐ │
|
|
│ │ Paris has been France's capital │ │
|
|
│ │ since the 10th century │ │
|
|
│ └──────────────────────────────────┘ │
|
|
│ ... │
|
|
│ │
|
|
│ [+ Add Option] │
|
|
│ │
|
|
│ ┌───────────────┐ ┌───────────────────────────────────┐ │
|
|
│ │ Cancel │ │ Save Changes │ │
|
|
│ └───────────────┘ └───────────────────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## Implementation Phases
|
|
|
|
### Phase 1: Quiz Editor Component
|
|
|
|
**New files:**
|
|
- `components/QuizEditor.tsx` - Main editor screen
|
|
- `components/QuestionCard.tsx` - Collapsible question display card
|
|
- `components/QuestionEditModal.tsx` - Modal for editing a single question
|
|
|
|
**Features:**
|
|
- Display quiz title (editable inline)
|
|
- List all questions in collapsible cards
|
|
- Show question text and options in collapsed view
|
|
- Expand to see answer reasons
|
|
- Edit/delete buttons per question
|
|
- Drag handle for reordering (optional, Phase 2)
|
|
|
|
### Phase 2: Question Editing
|
|
|
|
**Features:**
|
|
- Edit question text
|
|
- Edit option text and reasons
|
|
- Change correct answer (radio button)
|
|
- Delete options (minimum 2 required)
|
|
- Add new options (maximum 6)
|
|
- Edit time limit per question
|
|
- Validation before save
|
|
|
|
### Phase 3: Add/Delete Questions
|
|
|
|
**Features:**
|
|
- Delete question with confirmation
|
|
- Add new blank question
|
|
- Duplicate existing question
|
|
- Minimum 1 question required to start game
|
|
|
|
### Phase 4: Drag-and-Drop Reordering
|
|
|
|
**Dependencies:**
|
|
- `@dnd-kit/core` and `@dnd-kit/sortable` (already may be available, or add)
|
|
|
|
**Features:**
|
|
- Drag handle on each question card
|
|
- Visual feedback during drag
|
|
- Reorder questions in the list
|
|
|
|
### Phase 5: Integration with Flows
|
|
|
|
**Modifications to existing files:**
|
|
|
|
1. `App.tsx`
|
|
- Add `EDITING` game state
|
|
- Route to QuizEditor after generation or library load
|
|
- Pass quiz and callbacks to editor
|
|
|
|
2. `hooks/useGame.ts`
|
|
- Add `editQuiz()` function to update quiz state
|
|
- Add `startGameFromEditor()` to proceed to lobby
|
|
- Track if quiz came from library (for save-back)
|
|
|
|
3. `types.ts`
|
|
- Add `EDITING` to GameState type
|
|
|
|
4. `components/QuizLibrary.tsx`
|
|
- Change "Load" to open editor instead of going directly to lobby
|
|
- Or add separate "Edit" button alongside "Load"
|
|
|
|
### Phase 6: Save Changes to Library
|
|
|
|
**Features:**
|
|
- "Save to Library" button in editor
|
|
- If quiz was loaded from library, offer "Save Changes" (PUT)
|
|
- If quiz is new (AI-generated), offer "Save as New" (POST)
|
|
- Show save confirmation toast
|
|
|
|
**API:**
|
|
- Existing `PUT /api/quizzes/:id` endpoint already supports updates
|
|
|
|
## State Management
|
|
|
|
```typescript
|
|
// New state in useGame or separate useQuizEditor hook
|
|
interface EditorState {
|
|
originalQuiz: Quiz | null; // For detecting changes
|
|
editedQuiz: Quiz; // Current working copy
|
|
sourceQuizId: string | null; // If loaded from library
|
|
hasUnsavedChanges: boolean;
|
|
validationErrors: string[];
|
|
}
|
|
```
|
|
|
|
## File Changes Summary
|
|
|
|
| File | Changes |
|
|
|------|---------|
|
|
| `components/QuizEditor.tsx` | NEW - Main editor component |
|
|
| `components/QuestionCard.tsx` | NEW - Question display card |
|
|
| `components/QuestionEditModal.tsx` | NEW - Edit modal |
|
|
| `App.tsx` | Add EDITING state routing |
|
|
| `hooks/useGame.ts` | Add editor-related functions |
|
|
| `types.ts` | Add EDITING to GameState |
|
|
| `components/QuizLibrary.tsx` | Add edit button/flow |
|
|
|
|
## Validation Rules
|
|
|
|
1. Quiz must have a title
|
|
2. Quiz must have at least 1 question
|
|
3. Each question must have text
|
|
4. Each question must have 2-6 options
|
|
5. Each question must have exactly 1 correct answer
|
|
6. Each option must have text
|
|
7. Time limit must be 5-60 seconds
|
|
|
|
## Edge Cases
|
|
|
|
1. **Empty quiz from AI** - Show error, allow retry or manual add
|
|
2. **Unsaved changes on back** - Confirm dialog "Discard changes?"
|
|
3. **Delete last question** - Prevent, show error
|
|
4. **Delete correct answer option** - Auto-select another as correct, or prevent
|
|
5. **Network error on save** - Show error toast, keep editor open
|
|
|
|
## Future Enhancements (Out of Scope)
|
|
|
|
- Image support in questions
|
|
- Bulk import/export (JSON, CSV)
|
|
- Question bank / templates
|
|
- Collaborative editing
|
|
- Version history
|