Skip to content

WIZARD_FLOW_DOCUMENTATION.md

Latest commit

 

History

History
269 lines (225 loc) · 7.54 KB

WIZARD_FLOW_DOCUMENTATION.md

File metadata and controls

269 lines (225 loc) · 7.54 KB
Raw

Multi-Page Interview Wizard Implementation

Overview

Refactored the interview application from a single-page design to a multi-page wizard flow with the following pages:

  1. Interview Form Page (/) - Generate questions
  2. Question Answer Page (/interview/:interviewId) - Answer questions one at a time
  3. Results Page (/results/:interviewId) - View overall score and detailed feedback

Key Features

✅ Implemented Requirements

  1. Separate Pages

    • Question generation form is now its own dedicated page
    • Questions are answered on a separate page
    • Results are shown on a final summary page

  2. One Question at a Time

    • Each question is displayed individually with navigation
    • Clean, focused UI without distractions
    • Progress bar shows completion status

  3. Database Storage

    • Questions generated by AI are stored immediately in DB
    • Questions are fetched one-by-one from the backend
    • All answers are persisted to database

  4. Auto-Save & Evaluate

    • User clicks "Save & Next" button
    • Answer is saved to DB
    • AI evaluation happens in background (fire-and-forget)
    • User is immediately navigated to next question
    • No waiting for evaluation to complete

  5. Results at the End

    • Evaluation results are NOT shown immediately
    • After last question, user is redirected to results page
    • Results page shows:
      • Overall score with animated circular progress indicator
      • Grade badge (Excellent, Good, Average, etc.)
      • Detailed breakdown for each question
      • Individual AI feedback (expandable cards)

  6. Auto-Navigation

    • After saving answer, automatically moves to next question
    • No manual "next" button click needed
    • Smooth transition between questions

User Flow

Start Interview Form
      ↓
Enter Details & Generate Questions
      ↓
Questions Saved to DB
      ↓
Redirect to /interview/:id?question=0
      ↓
Answer Question 1
      ↓
Click "Save & Next"
      ↓
Save to DB + Trigger Background Evaluation
      ↓
Auto-Navigate to Question 2
      ↓
... (repeat for all questions)
      ↓
On Last Question: Click "Save & View Results"
      ↓
Redirect to /results/:id
      ↓
View Overall Score & Detailed Feedback

New Components

1. QuestionAnswerComponent

Location: web/src/app/components/question-answer/

Features:

  • Displays one question at a time
  • Progress bar (e.g., "Question 3 of 10 - 30% Complete")
  • Large textarea with character count validation (max 5000)
  • Navigation buttons:
    • Previous (go back to previous question)
    • Skip Question (skip without answering)
    • Save & Next (save answer and move forward)
  • Auto-navigation after successful save
  • Query param management (?question=0)
  • Background AI evaluation (non-blocking)

Routes:

  • /interview/:interviewId - Main entry point
  • /interview/:interviewId?question=2 - Specific question

2. ResultsComponent

Location: web/src/app/components/results/

Features:

  • Animated circular progress indicator
  • Overall score calculation (average of all question scores)
  • Color-coded grade badge:
    • Excellent: 9-10 (Green gradient)
    • Good: 7-8.9 (Purple gradient)
    • Average: 5-6.9 (Yellow gradient)
    • Below Average: 3-4.9 (Orange gradient)
    • Poor: 0-2.9 (Red gradient)
  • Statistics cards:
    • Questions Answered
    • Total Questions
    • Success Rate (percentage)
  • Detailed breakdown with expandable cards:
    • Each question shows score badge
    • Click to expand and view:
      • Your answer
      • AI evaluation feedback
      • Strengths and improvements
  • Action buttons:
    • Retake Interview (restart from first question)
    • Start New Interview (go to home page)

Route: /results/:interviewId

Routing Configuration

const routes: Routes = [
  { path: '', component: InterviewFormComponent },
  { path: 'interview/:interviewId', component: QuestionAnswerComponent },
  { path: 'results/:interviewId', component: ResultsComponent },
  { path: '**', redirectTo: '' }
];

Backend API Usage

Generate Questions

POST /api/interview/generate

  • Creates interview and questions in DB
  • Returns interview_id
  • Frontend redirects to /interview/:interviewId

Get Questions

GET /api/interview/questions/:interviewId

  • Fetches all questions for the interview
  • Returns questions with any existing answers
  • Used by both QuestionAnswerComponent and ResultsComponent

Submit Answer

POST /api/interview/answer

{
  "question_id": 123,
  "answer_text": "User's answer..."
}
  • Saves or updates answer in DB
  • Returns answer_id
  • Frontend then triggers evaluation

Evaluate Answer

POST /api/interview/evaluate/:answerId

  • Calls Gemini AI to evaluate the answer
  • Updates DB with score and feedback
  • Called in background - response not awaited

UI/UX Highlights

Design Features

  • Glassmorphism effects on progress bars and tips sections
  • Gradient backgrounds (purple/blue theme throughout)
  • Smooth animations:
    • Slide up on page load
    • Fade in for messages
    • Slide down for expandable sections
  • Loading states with spinners
  • Error handling with user-friendly messages
  • Character counter with color coding (green → yellow → red)
  • Responsive design for mobile devices

Color Scheme

  • Primary: Purple gradient (#667eea → #764ba2)
  • Success: Green gradient (#11998e → #38ef7d)
  • Warning: Yellow gradient (#f7971e → #ffd200)
  • Error: Red gradient (#ee0979 → #ff6a00)
  • Secondary: Gray (#6c757d)

State Management

QuestionAnswerComponent

  • Stores all questions in memory after fetching
  • Tracks current question index
  • Updates URL query params (?question=N)
  • Manages loading and saving states per question

ResultsComponent

  • Fetches questions fresh from API
  • Calculates overall score from all questions
  • Manages expanded/collapsed state for details

Performance Optimizations

  1. Background Evaluation

    • Evaluation happens asynchronously
    • User doesn't wait for AI response
    • Fire-and-forget pattern for better UX

  2. Smart Navigation

    • Query params preserve state
    • User can refresh and stay on same question
    • Back button works correctly

  3. Lazy Data Loading

    • Questions loaded once and cached
    • Only fetch when necessary
    • Minimal API calls

Testing Instructions

  1. Start Backend

    cd interviewi-api
python app.py

  2. Start Frontend

    cd web
npm start

  3. Test Flow

    • Open http://localhost:4200
    • Fill in interview form
    • Click "Generate Questions"
    • Should redirect to /interview/:id?question=0
    • Answer first question
    • Click "Save & Next"
    • Should auto-navigate to question 2
    • Continue until last question
    • Click "Save & View Results"
    • Should redirect to /results/:id
    • Verify overall score and feedback are displayed
    • Click on question cards to expand details
    • Test "Retake Interview" button
    • Test "Start New Interview" button

Browser Compatibility

  • Chrome/Edge: ✅ Full support
  • Firefox: ✅ Full support
  • Safari: ✅ Full support (with backdrop-filter)
  • Mobile browsers: ✅ Responsive design

Future Enhancements

  • Add timer for each question
  • Save draft answers automatically while typing
  • Add ability to flag questions for review
  • Export results as PDF
  • Email results to user
  • Add interview history dashboard
  • Implement answer comparison (show improvement over time)
  • Add hints/tips for difficult questions
  • Real-time collaborative interviews
  • Video recording for answers