add changes

backend/routes/quiz.routes.js

@@ -30,6 +30,8 @@ const authenticateUserOrGuest = async (req, res, next) => {
 
   // Try to verify guest token
   const guestToken = req.headers['x-guest-token'];
+  console.log(guestToken);
+
   if (guestToken) {
     try {
       await new Promise((resolve, reject) => {

frontend/src/app/app.ts

@@ -88,7 +88,7 @@ export class App implements OnInit {
     this.authService.verifyToken().subscribe({
       next: (response) => {
         this.isInitializing.set(false);
-        if (!response.valid) {
+        if (!response.success) {
           this.toastService.warning('Session expired. Please login again.');
           this.router.navigate(['/login']);
         }

frontend/src/app/core/models/category.model.ts

@@ -61,7 +61,7 @@ export interface QuestionPreview {
 /**
  * Question Types
  */
-export type QuestionType = 'multiple_choice' | 'true_false' | 'written';
+export type QuestionType = 'multiple' | 'trueFalse' | 'written';
 
 /**
  * Difficulty Levels

frontend/src/app/core/models/dashboard.model.ts

@@ -1,5 +1,5 @@
 import { User } from './user.model';
-import { QuizSession } from './quiz.model';
+import { QuizSession, QuizSessionHistory } from './quiz.model';
 
 /**
  * User Dashboard Response
@@ -33,8 +33,20 @@ export interface CategoryPerformance {
  */
 export interface QuizHistoryResponse {
   success: boolean;
-  sessions: QuizSession[];
+  data: {
-  pagination: PaginationInfo;
+    sessions: QuizSessionHistory[];
+    pagination: PaginationInfo;
+    filters: {
+      "category": null,
+      "status": null,
+      "startDate": null,
+      "endDate": null
+    }
+    "sorting": {
+      "sortBy": string
+      "sortOrder": string
+    }
+  };
 }
 
 /**

frontend/src/app/core/models/question.model.ts

@@ -19,7 +19,7 @@ export interface Question {
     color?: string;
     guestAccessible?: boolean;
   };
-  options?: string[]; // For multiple choice
+  options?: string[] | { id: string; text: string }[]; // For multiple choice
   correctAnswer: string | string[];
   explanation: string;
   points: number;

frontend/src/app/core/models/quiz.model.ts

@@ -1,5 +1,42 @@
+import { Category } from './category.model';
 import { Question } from './question.model';
 
+export interface QuizSessionHistory {
+
+  "time": {
+    "spent": number,
+    "limit": number | null,
+    "percentage": number
+  },
+  "createdAt": "2025-12-19T18:49:58.000Z"
+  id: string;
+
+  category?: {
+    id: string;
+    name: string;
+    slug: string;
+    icon: string;
+    color: string;
+  };
+  quizType: QuizType;
+  difficulty: string;
+  questions: {
+    answered: number,
+    total: number,
+    correct: number,
+    accuracy: number
+  };
+  score: {
+    earned: number
+    total: number
+    percentage: number
+  };
+
+  status: QuizStatus;
+  startedAt: string;
+  completedAt?: string;
+  isPassed?: boolean;
+}
 /**
  * Quiz Session Interface
  * Represents an active or completed quiz session
@@ -40,6 +77,16 @@ export type QuizStatus = 'in_progress' | 'completed' | 'abandoned';
  * Quiz Start Request
  */
 export interface QuizStartRequest {
+  success: true;
+  data: {
+    categoryId: string;
+    questionCount: number;
+    difficulty?: string; // 'easy', 'medium', 'hard', 'mixed'
+    quizType?: QuizType;
+  };
+}
+export interface QuizStartFormRequest {
+
   categoryId: string;
   questionCount: number;
   difficulty?: string; // 'easy', 'medium', 'hard', 'mixed'
@@ -51,10 +98,12 @@ export interface QuizStartRequest {
  */
 export interface QuizStartResponse {
   success: boolean;
-  sessionId: string;
+  data: {
-  questions: Question[];
+    sessionId: string;
-  totalQuestions: number;
+    questions: Question[];
-  message?: string;
+    totalQuestions: number;
+    message?: string;
+  };
 }
 
 /**

frontend/src/app/core/services/auth.service.ts

@@ -162,7 +162,7 @@ export class AuthService {
   /**
    * Verify JWT token validity
    */
-  verifyToken(): Observable<{ valid: boolean; user?: User }> {
+  verifyToken(): Observable<{ success: boolean; data: { user?: User }, message: string }> {
     const token = this.storageService.getToken();
 
     if (!token) {
@@ -176,12 +176,12 @@ export class AuthService {
 
     this.setLoading(true);
 
-    return this.http.get<{ valid: boolean; user?: User }>(`${this.API_URL}/verify`).pipe(
+    return this.http.get<{ success: boolean; data: { user?: User }, message: string }>(`${this.API_URL}/verify`).pipe(
       tap((response) => {
-        if (response.valid && response.user) {
+        if (response.success && response.data.user) {
           // Update user data
-          this.storageService.setUserData(response.user);
+          this.storageService.setUserData(response.data.user);
-          this.updateAuthState(response.user, null);
+          this.updateAuthState(response.data.user, null);
         } else {
           // Token invalid, clear auth
           this.clearAuth();

frontend/src/app/core/services/guest.service.ts

@@ -38,21 +38,21 @@ export class GuestService {
    * Start a new guest session
    * Generates device ID and creates session on backend
    */
-  startSession(): Observable<GuestSession> {
+  startSession(): Observable<{ success: boolean, message: string, data: GuestSession }> {
     this.setLoading(true);
 
     const deviceId = this.getOrCreateDeviceId();
 
-    return this.http.post<GuestSession>(`${this.API_URL}/start-session`, { deviceId }).pipe(
+    return this.http.post<{ success: boolean, message: string, data: GuestSession }>(`${this.API_URL}/start-session`, { deviceId }).pipe(
-      tap((session: GuestSession) => {
+      tap((session: { success: boolean, message: string, data: GuestSession }) => {
         // Store guest session data
-        this.storageService.setItem(this.GUEST_TOKEN_KEY, session.sessionToken);
+        this.storageService.setItem(this.GUEST_ID_KEY, session.data.guestId);
-        this.storageService.setItem(this.GUEST_ID_KEY, session.guestId);
+        this.storageService.setGuestToken(session.data.sessionToken);
 
         // Update guest state
         this.guestStateSignal.update(state => ({
           ...state,
-          session,
+          session: session.data,
           isGuest: true,
           isLoading: false,
           error: null

frontend/src/app/core/services/quiz.service.ts

@@ -9,7 +9,8 @@ import {
   QuizStartResponse,
   QuizAnswerSubmission,
   QuizAnswerResponse,
-  QuizResults
+  QuizResults,
+  QuizStartFormRequest
 } from '../models/quiz.model';
 import { ToastService } from './toast.service';
 import { StorageService } from './storage.service';
@@ -62,7 +63,7 @@ export class QuizService {
   /**
    * Start a new quiz session
    */
-  startQuiz(request: QuizStartRequest): Observable<QuizStartResponse> {
+  startQuiz(request: QuizStartFormRequest): Observable<QuizStartResponse> {
     // Validate category accessibility
     if (!this.canAccessCategory(request.categoryId)) {
       this.toastService.error('You do not have access to this category');
@@ -87,13 +88,13 @@ export class QuizService {
         if (response.success) {
           // Store session data
           const session: QuizSession = {
-            id: response.sessionId,
+            id: response.data.sessionId,
             userId: this.storageService.getUserData()?.id,
             guestSessionId: this.guestService.guestState().session?.guestId,
             categoryId: request.categoryId,
             quizType: request.quizType || 'practice',
             difficulty: request.difficulty || 'mixed',
-            totalQuestions: response.totalQuestions,
+            totalQuestions: response.data.totalQuestions,
             currentQuestionIndex: 0,
             score: 0,
             correctAnswers: 0,
@@ -106,12 +107,12 @@ export class QuizService {
           this._activeSession.set(session);
 
           // Store questions from response
-          if (response.questions) {
+          if (response.data.questions) {
-            this._questions.set(response.questions);
+            this._questions.set(response.data.questions);
           }
 
           // Store session ID for restoration
-          this.storeSessionId(response.sessionId);
+          this.storeSessionId(response.data.sessionId);
 
           this.toastService.success('Quiz started successfully!');
         }

frontend/src/app/core/services/storage.service.ts

@@ -14,25 +14,21 @@ export class StorageService {
   private readonly THEME_KEY = 'app_theme';
   private readonly REMEMBER_ME_KEY = 'remember_me';
 
-  constructor() {}
+  constructor() { }
 
   /**
    * Get item from storage (checks localStorage first, then sessionStorage)
    */
-   getItem(key: string): string | null {
+  getItem(key: string): string | null {
-    return localStorage.getItem(key) || sessionStorage.getItem(key);
+    return localStorage.getItem(key);
   }
 
   /**
    * Set item in storage
    * Uses localStorage if rememberMe is true, otherwise sessionStorage
    */
-   setItem(key: string, value: string, persistent: boolean = true): void {
+  setItem(key: string, value: string, persistent: boolean = true): void {
-    if (persistent) {
+    localStorage.setItem(key, value);
-      localStorage.setItem(key, value);
-    } else {
-      sessionStorage.setItem(key, value);
-    }
   }
 
   // Auth Token Methods
@@ -55,7 +51,7 @@ export class StorageService {
   }
 
   setGuestToken(token: string): void {
-    this.setItem(this.GUEST_TOKEN_KEY, token, true);
+    this.setItem(this.GUEST_TOKEN_KEY, token);
   }
 
   clearGuestToken(): void {
@@ -118,6 +114,5 @@ export class StorageService {
   // Remove a specific item from storage
   removeItem(key: string): void {
     localStorage.removeItem(key);
-    sessionStorage.removeItem(key);
   }
 }

frontend/src/app/features/admin/admin-question-form/admin-question-form.component.html

@@ -2,60 +2,56 @@
   <!-- Header -->
   <div class="form-header">
     @if (isEditMode()) {
-      <h1>
+    <h1>
-        <mat-icon>edit</mat-icon>
+      <mat-icon>edit</mat-icon>
-        Edit Question
+      Edit Question
-      </h1>
+    </h1>
-      <p class="subtitle">Update the details below to modify the quiz question</p>
+    <p class="subtitle">Update the details below to modify the quiz question</p>
-      @if (questionId()) {
+    @if (questionId()) {
-        <p class="question-id">Question ID: {{ questionId() }}</p>
+    <p class="question-id">Question ID: {{ questionId() }}</p>
-      }
+    }
     } @else {
-      <h1>
+    <h1>
-        <mat-icon>add_circle</mat-icon>
+      <mat-icon>add_circle</mat-icon>
-        Create New Question
+      Create New Question
-      </h1>
+    </h1>
-      <p class="subtitle">Fill in the details below to create a new quiz question</p>
+    <p class="subtitle">Fill in the details below to create a new quiz question</p>
     }
   </div>
 
   <div class="form-layout">
     <!-- Loading State -->
     @if (isLoadingQuestion()) {
-      <mat-card class="form-card loading-card">
+    <mat-card class="form-card loading-card">
-        <mat-card-content>
+      <mat-card-content>
-          <div class="loading-container">
+        <div class="loading-container">
-            <mat-icon class="loading-icon">hourglass_empty</mat-icon>
+          <mat-icon class="loading-icon">hourglass_empty</mat-icon>
-            <p>Loading question data...</p>
+          <p>Loading question data...</p>
-          </div>
+        </div>
-        </mat-card-content>
+      </mat-card-content>
-      </mat-card>
+    </mat-card>
     } @else {
-      <!-- Form Section -->
+    <!-- Form Section -->
-      <mat-card class="form-card">
+    <mat-card class="form-card">
-        <mat-card-content>
+      <mat-card-content>
-          <form [formGroup]="questionForm" (ngSubmit)="onSubmit()">
+        <form [formGroup]="questionForm" (ngSubmit)="onSubmit()">
-            <!-- Form-level Error -->
+          <!-- Form-level Error -->
           @if (getFormError()) {
-            <div class="form-error">
+          <div class="form-error">
-              <mat-icon>error</mat-icon>
+            <mat-icon>error</mat-icon>
-              <span>{{ getFormError() }}</span>
+            <span>{{ getFormError() }}</span>
-            </div>
+          </div>
           }
 
           <!-- Question Text -->
           <mat-form-field appearance="outline" class="full-width">
             <mat-label>Question Text</mat-label>
-            <textarea
+            <textarea matInput formControlName="questionText" placeholder="Enter your question here..." rows="4"
-              matInput
-              formControlName="questionText"
-              placeholder="Enter your question here..."
-              rows="4"
               required>
             </textarea>
             <mat-hint>Minimum 10 characters</mat-hint>
             @if (getErrorMessage('questionText')) {
-              <mat-error>{{ getErrorMessage('questionText') }}</mat-error>
+            <mat-error>{{ getErrorMessage('questionText') }}</mat-error>
             }
           </mat-form-field>
 
@@ -65,13 +61,13 @@
               <mat-label>Question Type</mat-label>
               <mat-select formControlName="questionType" required>
                 @for (type of questionTypes; track type.value) {
-                  <mat-option [value]="type.value">
+                <mat-option [value]="type.value">
-                    {{ type.label }}
+                  {{ type.label }}
-                  </mat-option>
+                </mat-option>
                 }
               </mat-select>
               @if (getErrorMessage('questionType')) {
-                <mat-error>{{ getErrorMessage('questionType') }}</mat-error>
+              <mat-error>{{ getErrorMessage('questionType') }}</mat-error>
               }
             </mat-form-field>
 
@@ -79,17 +75,17 @@
               <mat-label>Category</mat-label>
               <mat-select formControlName="categoryId" required>
                 @if (isLoadingCategories()) {
-                  <mat-option disabled>Loading categories...</mat-option>
+                <mat-option disabled>Loading categories...</mat-option>
                 } @else {
-                  @for (category of categories(); track category.id) {
+                @for (category of categories(); track category.id) {
-                    <mat-option [value]="category.id">
+                <mat-option [value]="category.id">
-                      {{ category.name }}
+                  {{ category.name }}
-                    </mat-option>
+                </mat-option>
-                  }
+                }
                 }
               </mat-select>
               @if (getErrorMessage('categoryId')) {
-                <mat-error>{{ getErrorMessage('categoryId') }}</mat-error>
+              <mat-error>{{ getErrorMessage('categoryId') }}</mat-error>
               }
             </mat-form-field>
           </div>
@@ -100,29 +96,22 @@
               <mat-label>Difficulty</mat-label>
               <mat-select formControlName="difficulty" required>
                 @for (level of difficultyLevels; track level.value) {
-                  <mat-option [value]="level.value">
+                <mat-option [value]="level.value">
-                    {{ level.label }}
+                  {{ level.label }}
-                  </mat-option>
+                </mat-option>
                 }
               </mat-select>
               @if (getErrorMessage('difficulty')) {
-                <mat-error>{{ getErrorMessage('difficulty') }}</mat-error>
+              <mat-error>{{ getErrorMessage('difficulty') }}</mat-error>
               }
             </mat-form-field>
 
             <mat-form-field appearance="outline" class="half-width">
               <mat-label>Points</mat-label>
-              <input
+              <input matInput type="number" formControlName="points" min="1" max="100" placeholder="10" required>
-                matInput
-                type="number"
-                formControlName="points"
-                min="1"
-                max="100"
-                placeholder="10"
-                required>
               <mat-hint>Between 1 and 100</mat-hint>
               @if (getErrorMessage('points')) {
-                <mat-error>{{ getErrorMessage('points') }}</mat-error>
+              <mat-error>{{ getErrorMessage('points') }}</mat-error>
               }
             </mat-form-field>
           </div>
@@ -131,109 +120,93 @@
 
           <!-- Multiple Choice Options -->
           @if (showOptions()) {
-            <div class="options-section">
+          <div class="options-section">
-              <h3>
+            <h3>
-                <mat-icon>list</mat-icon>
+              <mat-icon>list</mat-icon>
-                Answer Options
+              Answer Options
-              </h3>
+            </h3>
 
-              <div formArrayName="options" class="options-list">
+            <div formArrayName="options" class="options-list">
-                @for (option of optionsArray.controls; track $index) {
+              @for (option of optionsArray.controls; track $index) {
-                  <div [formGroupName]="$index" class="option-row">
+              <div [formGroupName]="$index" class="option-row">
-                    <span class="option-label">Option {{ $index + 1 }}</span>
+                <span class="option-label">Option {{ $index + 1 }}</span>
-                    <mat-form-field appearance="outline" class="option-input">
+                <mat-form-field appearance="outline" class="option-input">
-                      <input
+                  <input matInput formControlName="text" [placeholder]="'Enter option ' + ($index + 1)" required>
-                        matInput
+                </mat-form-field>
-                        formControlName="text"
+                @if (optionsArray.length > 2) {
-                        [placeholder]="'Enter option ' + ($index + 1)"
+                <button mat-icon-button type="button" color="warn" (click)="removeOption($index)"
-                        required>
+                  matTooltip="Remove option">
-                    </mat-form-field>
+                  <mat-icon>delete</mat-icon>
-                    @if (optionsArray.length > 2) {
+                </button>
-                      <button
-                        mat-icon-button
-                        type="button"
-                        color="warn"
-                        (click)="removeOption($index)"
-                        matTooltip="Remove option">
-                        <mat-icon>delete</mat-icon>
-                      </button>
-                    }
-                  </div>
                 }
               </div>
-
-              @if (optionsArray.length < 10) {
-                <button
-                  mat-stroked-button
-                  type="button"
-                  (click)="addOption()"
-                  class="add-option-btn">
-                  <mat-icon>add</mat-icon>
-                  Add Option
-                </button>
               }
             </div>
 
-            <mat-divider></mat-divider>
+            @if (optionsArray.length < 10) { <button mat-stroked-button type="button" (click)="addOption()"
+              class="add-option-btn">
+              <mat-icon>add</mat-icon>
+              Add Option
+              </button>
+              }
+          </div>
 
-            <!-- Correct Answer Selection -->
+          <mat-divider></mat-divider>
-            <div class="correct-answer-section">
+
-              <h3>
+          <!-- Correct Answer Selection -->
-                <mat-icon>check_circle</mat-icon>
+          <div class="correct-answer-section">
-                Correct Answer
+            <h3>
-              </h3>
+              <mat-icon>check_circle</mat-icon>
-              <mat-form-field appearance="outline" class="full-width">
+              Correct Answer
-                <mat-label>Select Correct Answer</mat-label>
+            </h3>
-                <mat-select formControlName="correctAnswer" required>
+            <mat-form-field appearance="outline" class="full-width">
-                  @for (optionText of getOptionTexts(); track $index) {
+              <mat-label>Select Correct Answer</mat-label>
-                    <mat-option [value]="optionText">
+              <mat-select formControlName="correctAnswer" required>
-                      {{ optionText }}
+                @for (optionText of getOptionTexts(); track $index) {
-                    </mat-option>
+                <mat-option [value]="optionText">
-                  }
+                  {{ optionText }}
-                </mat-select>
+                </mat-option>
-                @if (getErrorMessage('correctAnswer')) {
-                  <mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
                 }
-              </mat-form-field>
+              </mat-select>
-            </div>
+              @if (getErrorMessage('correctAnswer')) {
+              <mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
+              }
+            </mat-form-field>
+          </div>
           }
 
           <!-- True/False Options -->
           @if (showTrueFalse()) {
-            <div class="correct-answer-section">
+          <div class="correct-answer-section">
-              <h3>
+            <h3>
-                <mat-icon>check_circle</mat-icon>
+              <mat-icon>check_circle</mat-icon>
-                Correct Answer
+              Correct Answer
-              </h3>
+            </h3>
-              <mat-radio-group formControlName="correctAnswer" class="radio-group">
+            <mat-radio-group formControlName="correctAnswer" class="radio-group">
-                <mat-radio-button value="true">True</mat-radio-button>
+              <mat-radio-button value="true">True</mat-radio-button>
-                <mat-radio-button value="false">False</mat-radio-button>
+              <mat-radio-button value="false">False</mat-radio-button>
-              </mat-radio-group>
+            </mat-radio-group>
-            </div>
+          </div>
           }
 
           <!-- Written Answer -->
           @if (selectedQuestionType() === 'written') {
-            <div class="correct-answer-section">
+          <div class="correct-answer-section">
-              <h3>
+            <h3>
-                <mat-icon>edit</mat-icon>
+              <mat-icon>edit</mat-icon>
-                Sample Correct Answer
+              Sample Correct Answer
-              </h3>
+            </h3>
-              <mat-form-field appearance="outline" class="full-width">
+            <mat-form-field appearance="outline" class="full-width">
-                <mat-label>Expected Answer</mat-label>
+              <mat-label>Expected Answer</mat-label>
-                <textarea
+              <textarea matInput formControlName="correctAnswer" placeholder="Enter a sample correct answer..." rows="3"
-                  matInput
+                required>
-                  formControlName="correctAnswer"
-                  placeholder="Enter a sample correct answer..."
-                  rows="3"
-                  required>
                 </textarea>
-                <mat-hint>This is a reference answer for grading</mat-hint>
+              <mat-hint>This is a reference answer for grading</mat-hint>
-                @if (getErrorMessage('correctAnswer')) {
+              @if (getErrorMessage('correctAnswer')) {
-                  <mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
+              <mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
-                }
+              }
-              </mat-form-field>
+            </mat-form-field>
-            </div>
+          </div>
           }
 
           <mat-divider></mat-divider>
@@ -241,16 +214,12 @@
           <!-- Explanation -->
           <mat-form-field appearance="outline" class="full-width">
             <mat-label>Explanation</mat-label>
-            <textarea
+            <textarea matInput formControlName="explanation" placeholder="Explain why this is the correct answer..."
-              matInput
+              rows="4" required>
-              formControlName="explanation"
-              placeholder="Explain why this is the correct answer..."
-              rows="4"
-              required>
             </textarea>
             <mat-hint>Minimum 10 characters</mat-hint>
             @if (getErrorMessage('explanation')) {
-              <mat-error>{{ getErrorMessage('explanation') }}</mat-error>
+            <mat-error>{{ getErrorMessage('explanation') }}</mat-error>
             }
           </mat-form-field>
 
@@ -264,19 +233,16 @@
               <mat-label>Add Tags</mat-label>
               <mat-chip-grid #chipGrid>
                 @for (tag of tagsArray; track tag) {
-                  <mat-chip-row (removed)="removeTag(tag)">
+                <mat-chip-row (removed)="removeTag(tag)">
-                    {{ tag }}
+                  {{ tag }}
-                    <button matChipRemove>
+                  <button matChipRemove>
-                      <mat-icon>cancel</mat-icon>
+                    <mat-icon>cancel</mat-icon>
-                    </button>
+                  </button>
-                  </mat-chip-row>
+                </mat-chip-row>
                 }
               </mat-chip-grid>
-              <input
+              <input placeholder="Type tag and press Enter..." [matChipInputFor]="chipGrid"
-                placeholder="Type tag and press Enter..."
+                [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addTag($event)">
-                [matChipInputFor]="chipGrid"
-                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                (matChipInputTokenEnd)="addTag($event)">
               <mat-hint>Press Enter or comma to add tags</mat-hint>
             </mat-form-field>
           </div>
@@ -293,29 +259,23 @@
 
           <!-- Action Buttons -->
           <div class="form-actions">
-            <button
+            <button mat-button type="button" (click)="onCancel()">
-              mat-button
-              type="button"
-              (click)="onCancel()">
               <mat-icon>close</mat-icon>
               Cancel
             </button>
 
-            <button
+            <button mat-raised-button color="primary" type="submit"
-              mat-raised-button
-              color="primary"
-              type="submit"
               [disabled]="!isFormValid() || isSubmitting() || isLoadingQuestion()">
               @if (isSubmitting()) {
-                <ng-container>
+              <ng-container>
-                  <mat-icon>hourglass_empty</mat-icon>
+                <mat-icon>hourglass_empty</mat-icon>
-                  <span>{{ isEditMode() ? 'Updating...' : 'Creating...' }}</span>
+                <span>{{ isEditMode() ? 'Updating...' : 'Creating...' }}</span>
-                </ng-container>
+              </ng-container>
               } @else {
-                <ng-container>
+              <ng-container>
-                  <mat-icon>save</mat-icon>
+                <mat-icon>save</mat-icon>
-                  <span>{{ isEditMode() ? 'Update Question' : 'Save Question' }}</span>
+                <span>{{ isEditMode() ? 'Update Question' : 'Save Question' }}</span>
-                </ng-container>
+              </ng-container>
               }
             </button>
           </div>
@@ -347,7 +307,8 @@
             <span class="preview-badge type-badge">
               {{ questionForm.get('questionType')?.value | titlecase }}
             </span>
-            <span class="preview-badge difficulty-badge" [class]="'difficulty-' + questionForm.get('difficulty')?.value">
+            <span class="preview-badge difficulty-badge"
+              [class]="'difficulty-' + questionForm.get('difficulty')?.value">
               {{ questionForm.get('difficulty')?.value | titlecase }}
             </span>
             <span class="preview-badge points-badge">
@@ -357,56 +318,59 @@
 
           <!-- Options Preview (MCQ) -->
           @if (showOptions() && getOptionTexts().length > 0) {
-            <div class="preview-section">
+          <div class="preview-section">
-              <div class="preview-label">Options:</div>
+            <div class="preview-label">Options:</div>
-              <div class="preview-options">
+            <div class="preview-options">
-                @for (optionText of getOptionTexts(); track $index) {
+              @for (optionText of getOptionTexts(); track $index) {
-                  <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === optionText">
+              <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === optionText">
-                    <mat-icon>{{ questionForm.get('correctAnswer')?.value === optionText ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>
+                <mat-icon>{{ questionForm.get('correctAnswer')?.value === optionText ? 'check_circle' :
-                    <span>{{ optionText }}</span>
+                  'radio_button_unchecked' }}</mat-icon>
-                  </div>
+                <span>{{ optionText }}</span>
-                }
               </div>
+              }
             </div>
+          </div>
           }
 
           <!-- True/False Preview -->
           @if (showTrueFalse()) {
-            <div class="preview-section">
+          <div class="preview-section">
-              <div class="preview-label">Options:</div>
+            <div class="preview-label">Options:</div>
-              <div class="preview-options">
+            <div class="preview-options">
-                <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === 'true'">
+              <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === 'true'">
-                  <mat-icon>{{ questionForm.get('correctAnswer')?.value === 'true' ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>
+                <mat-icon>{{ questionForm.get('correctAnswer')?.value === 'true' ? 'check_circle' :
-                  <span>True</span>
+                  'radio_button_unchecked' }}</mat-icon>
-                </div>
+                <span>True</span>
-                <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === 'false'">
+              </div>
-                  <mat-icon>{{ questionForm.get('correctAnswer')?.value === 'false' ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>
+              <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === 'false'">
-                  <span>False</span>
+                <mat-icon>{{ questionForm.get('correctAnswer')?.value === 'false' ? 'check_circle' :
-                </div>
+                  'radio_button_unchecked' }}</mat-icon>
+                <span>False</span>
               </div>
             </div>
+          </div>
           }
 
           <!-- Explanation Preview -->
           @if (questionForm.get('explanation')?.value) {
-            <div class="preview-section">
+          <div class="preview-section">
-              <div class="preview-label">Explanation:</div>
+            <div class="preview-label">Explanation:</div>
-              <div class="preview-explanation">
+            <div class="preview-explanation">
-                {{ questionForm.get('explanation')?.value }}
+              {{ questionForm.get('explanation')?.value }}
-              </div>
             </div>
+          </div>
           }
 
           <!-- Tags Preview -->
           @if (tagsArray.length > 0) {
-            <div class="preview-section">
+          <div class="preview-section">
-              <div class="preview-label">Tags:</div>
+            <div class="preview-label">Tags:</div>
-              <div class="preview-tags">
+            <div class="preview-tags">
-                @for (tag of tagsArray; track tag) {
+              @for (tag of tagsArray; track tag) {
-                  <span class="preview-tag">{{ tag }}</span>
+              <span class="preview-tag">{{ tag }}</span>
-                }
+              }
-              </div>
             </div>
+          </div>
           }
 
           <!-- Accessibility Preview -->
@@ -414,12 +378,12 @@
             <div class="preview-label">Access:</div>
             <div class="preview-access">
               @if (questionForm.get('isPublic')?.value) {
-                <span class="access-badge public">Public</span>
+              <span class="access-badge public">Public</span>
               } @else {
-                <span class="access-badge private">Private</span>
+              <span class="access-badge private">Private</span>
               }
               @if (questionForm.get('isGuestAccessible')?.value) {
-                <span class="access-badge guest">Guest Accessible</span>
+              <span class="access-badge guest">Guest Accessible</span>
               }
             </div>
           </div>

frontend/src/app/features/admin/admin-question-form/admin-question-form.component.ts

@@ -102,12 +102,12 @@ export class AdminQuestionFormComponent implements OnInit {
 
   readonly showOptions = computed(() => {
     const type = this.selectedQuestionType();
-    return type === 'multiple_choice';
+    return type === 'multiple';
   });
 
   readonly showTrueFalse = computed(() => {
     const type = this.selectedQuestionType();
-    return type === 'true_false';
+    return type === 'trueFalse';
   });
 
   readonly isFormValid = computed(() => {
@@ -147,17 +147,17 @@ export class AdminQuestionFormComponent implements OnInit {
     this.isLoadingQuestion.set(true);
 
     this.adminService.getQuestion(id).subscribe({
-        next: (response) => {
+      next: (response) => {
-          this.isLoadingQuestion.set(false);
+        this.isLoadingQuestion.set(false);
-          this.populateForm(response.data);
+        this.populateForm(response.data);
-        },
+      },
-        error: (error) => {
+      error: (error) => {
-          this.isLoadingQuestion.set(false);
+        this.isLoadingQuestion.set(false);
-          console.error('Error loading question:', error);
+        console.error('Error loading question:', error);
-          // Redirect back if question not found
+        // Redirect back if question not found
-          this.router.navigate(['/admin/questions']);
+        this.router.navigate(['/admin/questions']);
-        }
+      }
-      });
+    });
   }
 
   /**
@@ -182,8 +182,8 @@ export class AdminQuestionFormComponent implements OnInit {
     });
 
     // Populate options for multiple choice
-    if (question.questionType === 'multiple_choice' && question.options) {
+    if (question.questionType === 'multiple' && question.options) {
-      question.options.forEach((option: string) => {
+      question.options.forEach((option: string | { text: string, id: string }) => {
         this.optionsArray.push(this.createOption(option));
       });
     }
@@ -222,7 +222,7 @@ export class AdminQuestionFormComponent implements OnInit {
   /**
    * Create option form control
    */
-  private createOption(value: string = ''): FormGroup {
+  private createOption(value: string | { text: string, id: string } = ''): FormGroup {
     return this.fb.group({
       text: [value, Validators.required]
     });
@@ -248,13 +248,13 @@ export class AdminQuestionFormComponent implements OnInit {
   private onQuestionTypeChange(type: QuestionType): void {
     const correctAnswerControl = this.questionForm.get('correctAnswer');
 
-    if (type === 'multiple_choice') {
+    if (type === 'multiple') {
       // Ensure at least 2 options
       while (this.optionsArray.length < 2) {
         this.addOption();
       }
       correctAnswerControl?.setValidators([Validators.required]);
-    } else if (type === 'true_false') {
+    } else if (type === 'trueFalse') {
       // Clear options for True/False
       this.optionsArray.clear();
       correctAnswerControl?.setValidators([Validators.required]);
@@ -388,15 +388,15 @@ export class AdminQuestionFormComponent implements OnInit {
       : this.adminService.createQuestion(questionData);
 
     serviceCall.subscribe({
-        next: (response) => {
+      next: (response) => {
-          this.isSubmitting.set(false);
+        this.isSubmitting.set(false);
-          this.router.navigate(['/admin/questions']);
+        this.router.navigate(['/admin/questions']);
-        },
+      },
-        error: (error) => {
+      error: (error) => {
-          this.isSubmitting.set(false);
+        this.isSubmitting.set(false);
-          console.error(`Error ${this.isEditMode() ? 'updating' : 'creating'} question:`, error);
+        console.error(`Error ${this.isEditMode() ? 'updating' : 'creating'} question:`, error);
-        }
+      }
-      });
+    });
   }
 
   /**

frontend/src/app/features/auth/login/login.ts

@@ -13,6 +13,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { AuthService } from '../../../core/services/auth.service';
 import { GuestService } from '../../../core/services/guest.service';
 import { Subject, takeUntil } from 'rxjs';
+import { StorageService } from '../../../core/services';
 
 @Component({
   selector: 'app-login',
@@ -36,6 +37,7 @@ export class LoginComponent implements OnDestroy {
   private fb = inject(FormBuilder);
   private authService = inject(AuthService);
   private guestService = inject(GuestService);
+  private storageService = inject(StorageService);
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   private destroy$ = new Subject<void>();
@@ -148,7 +150,7 @@ export class LoginComponent implements OnDestroy {
     this.guestService.startSession()
       .pipe(takeUntil(this.destroy$))
       .subscribe({
-        next: () => {
+        next: (res: {}) => {
           this.isStartingGuestSession.set(false);
           this.router.navigate(['/guest-welcome']);
         },

frontend/src/app/features/history/quiz-history.component.html

@@ -89,7 +89,7 @@
       <ng-container matColumnDef="category">
         <th mat-header-cell *matHeaderCellDef>Category</th>
         <td mat-cell *matCellDef="let session">
-          {{ session.categoryName || 'Unknown' }}
+          {{ session.category.name || 'Unknown' }}
         </td>
       </ng-container>
 
@@ -98,8 +98,8 @@
         <th mat-header-cell *matHeaderCellDef>Score</th>
         <td mat-cell *matCellDef="let session">
           <span class="score-badge" [ngClass]="getScoreColor(session.score, session.totalQuestions)">
-            {{ session.score }}/{{ session.totalQuestions }}
+            {{ session.score.earned }}/{{ session.questions.total }}
-            <span class="percentage">({{ ((session.score / session.totalQuestions) * 100).toFixed(0) }}%)</span>
+            <span class="percentage">({{ ((session.score.earned / session.questions.total) * 100).toFixed(0) }}%)</span>
           </span>
         </td>
       </ng-container>
@@ -108,7 +108,7 @@
       <ng-container matColumnDef="time">
         <th mat-header-cell *matHeaderCellDef>Time Spent</th>
         <td mat-cell *matCellDef="let session">
-          {{ formatDuration(session.timeSpent) }}
+          {{ formatDuration(session.time.spent) }}
         </td>
       </ng-container>
 
@@ -118,8 +118,8 @@
         <td mat-cell *matCellDef="let session">
           <mat-chip [ngClass]="getStatusClass(session.status)">
             {{ session.status === 'in_progress' ? 'In Progress' :
-               session.status === 'completed' ? 'Completed' : 
+            session.status === 'completed' ? 'Completed' :
-               'Abandoned' }}
+            'Abandoned' }}
           </mat-chip>
         </td>
       </ng-container>
@@ -128,20 +128,12 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>Actions</th>
         <td mat-cell *matCellDef="let session">
-          <button 
+          <button mat-icon-button (click)="viewResults(session.id)" matTooltip="View Results"
-            mat-icon-button 
+            *ngIf="session.status === 'completed'">
-            (click)="viewResults(session.id)"
-            matTooltip="View Results"
-            *ngIf="session.status === 'completed'"
-          >
             <mat-icon>visibility</mat-icon>
           </button>
-          <button 
+          <button mat-icon-button (click)="reviewQuiz(session.id)" matTooltip="Review Quiz"
-            mat-icon-button 
+            *ngIf="session.status === 'completed'">
-            (click)="reviewQuiz(session.id)"
-            matTooltip="Review Quiz"
-            *ngIf="session.status === 'completed'"
-          >
             <mat-icon>rate_review</mat-icon>
           </button>
         </td>
@@ -159,12 +151,12 @@
         <div class="card-header">
           <div class="card-title">
             <mat-icon>quiz</mat-icon>
-            <span>{{ session.categoryName || 'Unknown' }}</span>
+            <span>{{ session.category?.name || 'Unknown' }}</span>
           </div>
           <mat-chip [ngClass]="getStatusClass(session.status)">
             {{ session.status === 'in_progress' ? 'In Progress' :
-               session.status === 'completed' ? 'Completed' : 
+            session.status === 'completed' ? 'Completed' :
-               'Abandoned' }}
+            'Abandoned' }}
           </mat-chip>
         </div>
 
@@ -175,13 +167,13 @@
           </div>
           <div class="detail-row">
             <mat-icon>timer</mat-icon>
-            <span>{{ formatDuration(session.timeSpent) }}</span>
+            <span>{{ formatDuration(session.time.spent) }}</span>
           </div>
           <div class="detail-row score-row">
             <span class="score-label">Score:</span>
-            <span class="score-value" [ngClass]="getScoreColor(session.score, session.totalQuestions)">
+            <span class="score-value" [ngClass]="getScoreColor(session.score.earned, session.questions.total)">
-              {{ session.score }}/{{ session.totalQuestions }} 
+              {{ session.score.earned }}/{{ session.questions.total }}
-              ({{ ((session.score / session.totalQuestions) * 100).toFixed(0) }}%)
+              ({{ ((session.score.earned / session.questions.total) * 100).toFixed(0) }}%)
             </span>
           </div>
         </div>
@@ -201,14 +193,7 @@
   </div>
 
   <!-- Pagination -->
-  <mat-paginator
+  <mat-paginator *ngIf="!isEmpty()" [length]="totalItems()" [pageSize]="pageSize()" [pageIndex]="currentPage() - 1"
-    *ngIf="!isEmpty()"
+    [pageSizeOptions]="[5, 10, 20, 50]" (page)="onPageChange($event)" showFirstLastButtons>
-    [length]="totalItems()"
-    [pageSize]="pageSize()"
-    [pageIndex]="currentPage() - 1"
-    [pageSizeOptions]="[5, 10, 20, 50]"
-    (page)="onPageChange($event)"
-    showFirstLastButtons
-  >
   </mat-paginator>
 </div>

frontend/src/app/features/history/quiz-history.component.ts

@@ -15,7 +15,7 @@ import { UserService } from '../../core/services/user.service';
 import { AuthService } from '../../core/services/auth.service';
 import { CategoryService } from '../../core/services/category.service';
 import { QuizHistoryResponse, PaginationInfo } from '../../core/models/dashboard.model';
-import { QuizSession } from '../../core/models/quiz.model';
+import { QuizSession, QuizSessionHistory } from '../../core/models/quiz.model';
 import { Category } from '../../core/models/category.model';
 
 @Component({
@@ -47,7 +47,7 @@ export class QuizHistoryComponent implements OnInit {
 
   // Signals
   isLoading = signal<boolean>(true);
-  history = signal<QuizSession[]>([]);
+  history = signal<QuizSessionHistory[]>([]);
   pagination = signal<PaginationInfo | null>(null);
   categories = signal<Category[]>([]);
   error = signal<string | null>(null);
@@ -126,8 +126,8 @@ export class QuizHistoryComponent implements OnInit {
       this.sortBy()
     ).subscribe({
       next: (response: QuizHistoryResponse) => {
-        this.history.set(response.sessions || []);
+        this.history.set(response.data.sessions || []);
-        this.pagination.set(response.pagination);
+        this.pagination.set(response.data.pagination);
         this.isLoading.set(false);
       },
       error: (err: any) => {
@@ -276,14 +276,14 @@ export class QuizHistoryComponent implements OnInit {
 
     // Add data rows
     this.history().forEach(session => {
-      const percentage = ((session.score / session.totalQuestions) * 100).toFixed(2);
+      const percentage = ((session.score.earned / session.questions.total) * 100).toFixed(2);
       const row = [
         this.formatDate(session.completedAt || session.startedAt),
-        session.categoryName || 'Unknown',
+        session.category?.name || 'Unknown',
-        session.score.toString(),
+        session.score.earned.toString(),
-        session.totalQuestions.toString(),
+        session.questions.total.toString(),
         `${percentage}%`,
-        this.formatDuration(session.timeSpent),
+        this.formatDuration(session.time.spent),
         session.status
       ];
       csvRows.push(row.join(','));

frontend/src/app/features/quiz/quiz-question/quiz-question.html

@@ -6,187 +6,164 @@
         Question {{ currentQuestionIndex() + 1 }} of {{ totalQuestions() }}
       </span>
       @if (activeSession()?.quizType === 'timed') {
-        <div class="timer" [class.warning]="timeRemaining() < 60">
+      <div class="timer" [class.warning]="timeRemaining() < 60">
-          <mat-icon>timer</mat-icon>
+        <mat-icon>timer</mat-icon>
-          <span>{{ formatTime(timeRemaining()) }}</span>
+        <span>{{ formatTime(timeRemaining()) }}</span>
-        </div>
+      </div>
       }
       <div class="score-display">
         <mat-icon>stars</mat-icon>
         <span>Score: {{ currentScore() }}</span>
       </div>
     </div>
-    <mat-progress-bar 
+    <mat-progress-bar mode="determinate" [value]="progress()" class="progress-bar">
-      mode="determinate" 
-      [value]="progress()"
-      class="progress-bar">
     </mat-progress-bar>
   </div>
 
   <!-- Question Card -->
   <mat-card class="question-card">
     @if (currentQuestion(); as question) {
-      <!-- Question Header -->
+    <!-- Question Header -->
-      <mat-card-header>
+    <mat-card-header>
-        <div class="question-header">
+      <div class="question-header">
-          <div class="question-meta">
+        <div class="question-meta">
-            <mat-chip class="type-chip">{{ questionTypeLabel() }}</mat-chip>
+          <mat-chip class="type-chip">{{ questionTypeLabel() }}</mat-chip>
-            <mat-chip 
+          <mat-chip class="difficulty-chip" [style.background-color]="getDifficultyColor(question.difficulty) + '20'"
-              class="difficulty-chip"
+            [style.color]="getDifficultyColor(question.difficulty)">
-              [style.background-color]="getDifficultyColor(question.difficulty) + '20'"
+            {{ question.difficulty | titlecase }}
-              [style.color]="getDifficultyColor(question.difficulty)">
+          </mat-chip>
-              {{ question.difficulty | titlecase }}
+          <span class="points">{{ question.points }} points</span>
-            </mat-chip>
-            <span class="points">{{ question.points }} points</span>
-          </div>
         </div>
-      </mat-card-header>
+      </div>
+    </mat-card-header>
 
-      <mat-divider></mat-divider>
+    <mat-divider></mat-divider>
 
-      <mat-card-content>
+    <mat-card-content>
-        <!-- Question Text -->
+      <!-- Question Text -->
-        <div class="question-text">
+      <div class="question-text">
-          <h2>{{ question.questionText }}</h2>
+        <h2>{{ question.questionText }}</h2>
+      </div>
+
+      <!-- Answer Form -->
+      <form [formGroup]="answerForm" (ngSubmit)="submitAnswer()" class="answer-form">
+
+        <!-- Multiple Choice -->
+        @if (question.questionType === 'multiple' && question.options) {
+        <mat-radio-group formControlName="answer" class="radio-group">
+          @for (option of question.options; track option) {
+          <mat-radio-button [value]="typeof option === 'string' ? option : option.id" [disabled]="answerSubmitted()"
+            class="radio-option">
+            {{ typeof option === 'string' ? option : option.text }}
+          </mat-radio-button>
+          }
+        </mat-radio-group>
+        }
+
+        <!-- True/False -->
+        @if (isTrueFalse()) {
+        <div class="true-false-buttons">
+          <button type="button" mat-raised-button [class.selected]="answerForm.get('answer')?.value === 'true'"
+            [disabled]="answerSubmitted()" (click)="answerForm.patchValue({ answer: 'true' })"
+            class="tf-button true-button">
+            <mat-icon>check_circle</mat-icon>
+            <span>True</span>
+          </button>
+          <button type="button" mat-raised-button [class.selected]="answerForm.get('answer')?.value === 'false'"
+            [disabled]="answerSubmitted()" (click)="answerForm.patchValue({ answer: 'false' })"
+            class="tf-button false-button">
+            <mat-icon>cancel</mat-icon>
+            <span>False</span>
+          </button>
         </div>
+        }
 
-        <!-- Answer Form -->
+        <!-- Written Answer -->
-        <form [formGroup]="answerForm" (ngSubmit)="submitAnswer()" class="answer-form">
+        @if (isWritten()) {
-          
+        <mat-form-field appearance="outline" class="full-width">
-          <!-- Multiple Choice -->
+          <mat-label>Your Answer</mat-label>
-          @if (isMultipleChoice() && question.options) {
+          <textarea matInput formControlName="answer" [disabled]="answerSubmitted()" rows="6"
-            <mat-radio-group formControlName="answer" class="radio-group">
+            placeholder="Type your answer here...">
-              @for (option of question.options; track option) {
-                <mat-radio-button 
-                  [value]="option"
-                  [disabled]="answerSubmitted()"
-                  class="radio-option">
-                  {{ option }}
-                </mat-radio-button>
-              }
-            </mat-radio-group>
-          }
-
-          <!-- True/False -->
-          @if (isTrueFalse()) {
-            <div class="true-false-buttons">
-              <button
-                type="button"
-                mat-raised-button
-                [class.selected]="answerForm.get('answer')?.value === 'true'"
-                [disabled]="answerSubmitted()"
-                (click)="answerForm.patchValue({ answer: 'true' })"
-                class="tf-button true-button">
-                <mat-icon>check_circle</mat-icon>
-                <span>True</span>
-              </button>
-              <button
-                type="button"
-                mat-raised-button
-                [class.selected]="answerForm.get('answer')?.value === 'false'"
-                [disabled]="answerSubmitted()"
-                (click)="answerForm.patchValue({ answer: 'false' })"
-                class="tf-button false-button">
-                <mat-icon>cancel</mat-icon>
-                <span>False</span>
-              </button>
-            </div>
-          }
-
-          <!-- Written Answer -->
-          @if (isWritten()) {
-            <mat-form-field appearance="outline" class="full-width">
-              <mat-label>Your Answer</mat-label>
-              <textarea
-                matInput
-                formControlName="answer"
-                [disabled]="answerSubmitted()"
-                rows="6"
-                placeholder="Type your answer here...">
               </textarea>
-              <mat-hint>Be as detailed as possible</mat-hint>
+          <mat-hint>Be as detailed as possible</mat-hint>
-            </mat-form-field>
+        </mat-form-field>
-          }
+        }
 
-          <!-- Answer Feedback -->
+        <!-- Answer Feedback -->
-          @if (answerSubmitted() && answerResult()) {
+        @if (answerSubmitted() && answerResult()) {
-            <div class="answer-feedback" [class.correct]="answerResult()?.isCorrect" [class.incorrect]="!answerResult()?.isCorrect">
+        <div class="answer-feedback" [class.correct]="answerResult()?.isCorrect"
-              <div class="feedback-header">
+          [class.incorrect]="!answerResult()?.isCorrect">
-                <mat-icon [style.color]="getFeedbackColor()">
+          <div class="feedback-header">
-                  {{ getFeedbackIcon() }}
+            <mat-icon [style.color]="getFeedbackColor()">
-                </mat-icon>
+              {{ getFeedbackIcon() }}
-                <h3 [style.color]="getFeedbackColor()">
+            </mat-icon>
-                  {{ getFeedbackMessage() }}
+            <h3 [style.color]="getFeedbackColor()">
-                </h3>
+              {{ getFeedbackMessage() }}
-              </div>
+            </h3>
-              
-              @if (!answerResult()?.isCorrect) {
-                <div class="correct-answer">
-                  <strong>Correct Answer:</strong>
-                  <p>{{ answerResult()?.correctAnswer }}</p>
-                </div>
-              }
-              
-              @if (answerResult()?.explanation) {
-                <div class="explanation">
-                  <strong>Explanation:</strong>
-                  <p>{{ answerResult()?.explanation }}</p>
-                </div>
-              }
-              
-              <div class="points-earned">
-                <mat-icon>stars</mat-icon>
-                <span>Points earned: {{ answerResult()?.points }}</span>
-              </div>
-            </div>
-          }
-
-          <!-- Action Buttons -->
-          <div class="action-buttons">
-            @if (!answerSubmitted()) {
-              <button 
-                type="submit" 
-                mat-raised-button 
-                color="primary"
-                [disabled]="!canSubmitAnswer()">
-                @if (isSubmittingAnswer()) {
-                  <mat-spinner diameter="20"></mat-spinner>
-                  <span>Submitting...</span>
-                } @else {
-                  <ng-container>
-                    <mat-icon>send</mat-icon>
-                    <span>Submit Answer</span>
-                  </ng-container>
-                }
-              </button>
-            } @else {
-              <button 
-                type="button" 
-                mat-raised-button 
-                color="primary"
-                (click)="nextQuestion()">
-                @if (isLastQuestion()) {
-                  <ng-container>
-                    <mat-icon>flag</mat-icon>
-                    <span>Complete Quiz</span>
-                  </ng-container>
-                } @else {
-                  <ng-container>
-                    <mat-icon>arrow_forward</mat-icon>
-                    <span>Next Question</span>
-                  </ng-container>
-                }
-              </button>
-            }
           </div>
-        </form>
+
-      </mat-card-content>
+          @if (!answerResult()?.isCorrect) {
+          <div class="correct-answer">
+            <strong>Correct Answer:</strong>
+            <p>{{ answerResult()?.correctAnswer }}</p>
+          </div>
+          }
+
+          @if (answerResult()?.explanation) {
+          <div class="explanation">
+            <strong>Explanation:</strong>
+            <p>{{ answerResult()?.explanation }}</p>
+          </div>
+          }
+
+          <div class="points-earned">
+            <mat-icon>stars</mat-icon>
+            <span>Points earned: {{ answerResult()?.points }}</span>
+          </div>
+        </div>
+        }
+
+        {{this.answerForm?.valid }}
+        {{ !this.answerSubmitted()}}
+        {{ !this.isSubmittingAnswer()}}
+        <!-- Action Buttons -->
+        <div class="action-buttons">
+          @if (!answerSubmitted()) {
+          <button type="submit" mat-raised-button color="primary" [disabled]="!answerForm?.valid || !canSubmitAnswer()">
+            @if (isSubmittingAnswer()) {
+            <mat-spinner diameter="20"></mat-spinner>
+            <span>Submitting...</span>
+            } @else {
+            <ng-container>
+              <mat-icon>send</mat-icon>
+              <span>Submit Answer</span>
+            </ng-container>
+            }
+          </button>
+          } @else {
+          <button type="button" mat-raised-button color="primary" (click)="nextQuestion()">
+            @if (isLastQuestion()) {
+            <ng-container>
+              <mat-icon>flag</mat-icon>
+              <span>Complete Quiz</span>
+            </ng-container>
+            } @else {
+            <ng-container>
+              <mat-icon>arrow_forward</mat-icon>
+              <span>Next Question</span>
+            </ng-container>
+            }
+          </button>
+          }
+        </div>
+      </form>
+    </mat-card-content>
     } @else {
-      <!-- Loading State -->
+    <!-- Loading State -->
-      <mat-card-content class="loading-container">
+    <mat-card-content class="loading-container">
-        <mat-spinner diameter="50"></mat-spinner>
+      <mat-spinner diameter="50"></mat-spinner>
-        <p>Loading question...</p>
+      <p>Loading question...</p>
-      </mat-card-content>
+    </mat-card-content>
     }
   </mat-card>
 

frontend/src/app/features/quiz/quiz-question/quiz-question.ts

@@ -93,8 +93,8 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
   readonly questionTypeLabel = computed(() => {
     const type = this.currentQuestion()?.questionType;
     switch (type) {
-      case 'multiple_choice': return 'Multiple Choice';
+      case 'multiple': return 'Multiple Choice';
-      case 'true_false': return 'True/False';
+      case 'trueFalse': return 'True/False';
       case 'written': return 'Written Answer';
       default: return '';
     }
@@ -110,6 +110,8 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
 
     this.initForm();
     this.loadQuizSession();
+    console.log(this.questions());
+
   }
 
   ngOnDestroy(): void {
@@ -359,14 +361,14 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
    * Check if answer is multiple choice
    */
   isMultipleChoice(): boolean {
-    return this.currentQuestion()?.questionType === 'multiple_choice';
+    return this.currentQuestion()?.questionType === 'multiple';
   }
 
   /**
    * Check if answer is true/false
    */
   isTrueFalse(): boolean {
-    return this.currentQuestion()?.questionType === 'true_false';
+    return this.currentQuestion()?.questionType === 'trueFalse';
   }
 
   /**

frontend/src/app/features/quiz/quiz-setup/quiz-setup.html

@@ -13,190 +13,175 @@
     <mat-card-content>
       <!-- Guest Warning -->
       @if (showGuestWarning()) {
-        <div class="guest-warning">
+      <div class="guest-warning">
-          <mat-icon class="warning-icon">warning</mat-icon>
+        <mat-icon class="warning-icon">warning</mat-icon>
-          <div class="warning-content">
+        <div class="warning-content">
-            <p><strong>Limited Quizzes Remaining</strong></p>
+          <p><strong>Limited Quizzes Remaining</strong></p>
-            <p>You have {{ remainingQuizzes() }} quiz(es) left as a guest.</p>
+          <p>You have {{ remainingQuizzes() }} quiz(es) left as a guest.</p>
-            <button mat-stroked-button color="primary" (click)="navigateToRegister()">
+          <button mat-stroked-button color="primary" (click)="navigateToRegister()">
-              Sign Up for Unlimited Access
+            Sign Up for Unlimited Access
-            </button>
+          </button>
-          </div>
         </div>
+      </div>
       }
 
       <!-- Loading State -->
       @if (isLoadingCategories()) {
-        <div class="loading-container">
+      <div class="loading-container">
-          <mat-spinner diameter="50"></mat-spinner>
+        <mat-spinner diameter="50"></mat-spinner>
-          <p>Loading categories...</p>
+        <p>Loading categories...</p>
-        </div>
+      </div>
       }
 
       <!-- Setup Form -->
       @if (!isLoadingCategories()) {
-        <form [formGroup]="setupForm" (ngSubmit)="startQuiz()" class="setup-form">
+      <form [formGroup]="setupForm" (ngSubmit)="startQuiz()" class="setup-form">
 
-          <!-- Category Selection -->
+        <!-- Category Selection -->
-          <div class="form-section">
+        <div class="form-section">
-            <h2>
+          <h2>
-              <mat-icon>category</mat-icon>
+            <mat-icon>category</mat-icon>
-              Select Category
+            Select Category
-            </h2>
+          </h2>
-            <mat-form-field appearance="outline" class="full-width">
+          <mat-form-field appearance="outline" class="full-width">
-              <mat-label>Choose a category</mat-label>
+            <mat-label>Choose a category</mat-label>
-              <mat-select formControlName="categoryId" required>
+            <mat-select formControlName="categoryId" required>
-                @for (category of getAvailableCategories(); track category.id) {
+              @for (category of getAvailableCategories(); track category.id) {
-                  <mat-option [value]="category.id">
+              <mat-option [value]="category.id">
-                    <div class="category-option">
+                <div class="category-option">
-                      @if (category.icon) {
+                  @if (category.icon) {
-                        <mat-icon [style.color]="category.color">{{ category.icon }}</mat-icon>
+                  <mat-icon [style.color]="category.color">{{ category.icon }}</mat-icon>
-                      }
+                  }
-                      <span class="category-name">{{ category.name }}</span>
+                  <span class="category-name">{{ category.name }}</span>
-                      <span class="question-count">({{ category.questionCount }} questions)</span>
+                  <span class="question-count">({{ category.questionCount }} questions)</span>
-                    </div>
-                  </mat-option>
-                }
-              </mat-select>
-              @if (setupForm.get('categoryId')?.hasError('required') && setupForm.get('categoryId')?.touched) {
-                <mat-error>Please select a category</mat-error>
-              }
-            </mat-form-field>
-
-            @if (selectedCategory()) {
-              <div class="category-preview">
-                <mat-icon [style.color]="selectedCategory()?.color">{{ selectedCategory()?.icon }}</mat-icon>
-                <div class="category-info">
-                  <h3>{{ selectedCategory()?.name }}</h3>
-                  <p>{{ selectedCategory()?.description }}</p>
                 </div>
-              </div>
+              </mat-option>
+              }
+            </mat-select>
+            @if (setupForm.get('categoryId')?.hasError('required') && setupForm.get('categoryId')?.touched) {
+            <mat-error>Please select a category</mat-error>
+            }
+          </mat-form-field>
+
+          @if (selectedCategory()) {
+          <div class="category-preview">
+            <mat-icon [style.color]="selectedCategory()?.color">{{ selectedCategory()?.icon }}</mat-icon>
+            <div class="category-info">
+              <h3>{{ selectedCategory()?.name }}</h3>
+              <p>{{ selectedCategory()?.description }}</p>
+            </div>
+          </div>
+          }
+        </div>
+
+        <!-- Question Count -->
+        <div class="form-section">
+          <h2>
+            <mat-icon>format_list_numbered</mat-icon>
+            Number of Questions
+          </h2>
+          <div class="question-count-selector">
+            @for (count of questionCountOptions; track count) {
+            <button type="button" mat-stroked-button [class.selected]="setupForm.get('questionCount')?.value === count"
+              (click)="setupForm.patchValue({ questionCount: count })">
+              {{ count }}
+            </button>
             }
           </div>
+          <p class="helper-text">Selected: {{ setupForm.get('questionCount')?.value }} questions</p>
+        </div>
 
-          <!-- Question Count -->
+        <!-- Difficulty Selection -->
-          <div class="form-section">
+        <div class="form-section">
-            <h2>
+          <h2>
-              <mat-icon>format_list_numbered</mat-icon>
+            <mat-icon>tune</mat-icon>
-              Number of Questions
+            Difficulty Level
-            </h2>
+          </h2>
-            <div class="question-count-selector">
+          <div class="difficulty-selector">
-              @for (count of questionCountOptions; track count) {
+            @for (difficulty of difficultyOptions; track difficulty.value) {
-                <button
+            <button type="button" mat-stroked-button class="difficulty-option"
-                  type="button"
+              [class.selected]="setupForm.get('difficulty')?.value === difficulty.value"
-                  mat-stroked-button
+              (click)="setupForm.patchValue({ difficulty: difficulty.value })">
-                  [class.selected]="setupForm.get('questionCount')?.value === count"
+              <mat-icon [style.color]="difficulty.color">{{ difficulty.icon }}</mat-icon>
-                  (click)="setupForm.patchValue({ questionCount: count })">
+              <span>{{ difficulty.label }}</span>
-                  {{ count }}
+            </button>
-                </button>
+            }
-              }
-            </div>
-            <p class="helper-text">Selected: {{ setupForm.get('questionCount')?.value }} questions</p>
           </div>
+        </div>
 
-          <!-- Difficulty Selection -->
+        <!-- Quiz Type Selection -->
-          <div class="form-section">
+        <div class="form-section">
-            <h2>
+          <h2>
-              <mat-icon>tune</mat-icon>
+            <mat-icon>mode</mat-icon>
-              Difficulty Level
+            Quiz Mode
-            </h2>
+          </h2>
-            <div class="difficulty-selector">
+          <div class="quiz-type-selector">
-              @for (difficulty of difficultyOptions; track difficulty.value) {
+            @for (type of quizTypeOptions; track type.value) {
-                <button
+            <mat-card class="quiz-type-card" [class.selected]="setupForm.get('quizType')?.value === type.value"
-                  type="button"
+              (click)="setupForm.patchValue({ quizType: type.value })">
-                  mat-stroked-button
+              <mat-icon class="type-icon">{{ type.icon }}</mat-icon>
-                  class="difficulty-option"
+              <h3>{{ type.label }}</h3>
-                  [class.selected]="setupForm.get('difficulty')?.value === difficulty.value"
+              <p>{{ type.description }}</p>
-                  (click)="setupForm.patchValue({ difficulty: difficulty.value })">
-                  <mat-icon [style.color]="difficulty.color">{{ difficulty.icon }}</mat-icon>
-                  <span>{{ difficulty.label }}</span>
-                </button>
-              }
-            </div>
-          </div>
-
-          <!-- Quiz Type Selection -->
-          <div class="form-section">
-            <h2>
-              <mat-icon>mode</mat-icon>
-              Quiz Mode
-            </h2>
-            <div class="quiz-type-selector">
-              @for (type of quizTypeOptions; track type.value) {
-                <mat-card 
-                  class="quiz-type-card"
-                  [class.selected]="setupForm.get('quizType')?.value === type.value"
-                  (click)="setupForm.patchValue({ quizType: type.value })">
-                  <mat-icon class="type-icon">{{ type.icon }}</mat-icon>
-                  <h3>{{ type.label }}</h3>
-                  <p>{{ type.description }}</p>
-                </mat-card>
-              }
-            </div>
-          </div>
-
-          <!-- Summary Card -->
-          <div class="summary-section">
-            <mat-card class="summary-card">
-              <h3>
-                <mat-icon>info</mat-icon>
-                Quiz Summary
-              </h3>
-              <div class="summary-details">
-                <div class="summary-item">
-                  <span class="label">Category:</span>
-                  <span class="value">{{ selectedCategory()?.name || 'Not selected' }}</span>
-                </div>
-                <div class="summary-item">
-                  <span class="label">Questions:</span>
-                  <span class="value">{{ setupForm.get('questionCount')?.value }}</span>
-                </div>
-                <div class="summary-item">
-                  <span class="label">Difficulty:</span>
-                  <span class="value">
-                    {{ getSelectedDifficultyLabel() }}
-                  </span>
-                </div>
-                <div class="summary-item">
-                  <span class="label">Mode:</span>
-                  <span class="value">
-                    {{ getSelectedQuizTypeLabel() }}
-                  </span>
-                </div>
-                <div class="summary-item">
-                  <span class="label">Estimated Time:</span>
-                  <span class="value">~{{ estimatedTime() }} minutes</span>
-                </div>
-              </div>
             </mat-card>
+            }
           </div>
+        </div>
 
-          <!-- Action Buttons -->
+        <!-- Summary Card -->
-          <div class="action-buttons">
+        <div class="summary-section">
-            <button 
+          <mat-card class="summary-card">
-              type="button" 
+            <h3>
-              mat-stroked-button 
+              <mat-icon>info</mat-icon>
-              routerLink="/categories">
+              Quiz Summary
-              <mat-icon>arrow_back</mat-icon>
+            </h3>
-              Back to Categories
+            <div class="summary-details">
-            </button>
+              <div class="summary-item">
-            <button 
+                <span class="label">Category:</span>
-              type="submit" 
+                <span class="value">{{ selectedCategory()?.name || 'Not selected' }}</span>
-              mat-raised-button 
+              </div>
-              color="primary"
+              <div class="summary-item">
-              [disabled]="!canStartQuiz()">
+                <span class="label">Questions:</span>
-              @if (isStartingQuiz()) {
+                <span class="value">{{ setupForm.get('questionCount')?.value }}</span>
-                <mat-spinner diameter="20"></mat-spinner>
+              </div>
-                <span>Starting...</span>
+              <div class="summary-item">
-              } @else {
+                <span class="label">Difficulty:</span>
-                <ng-container>
+                <span class="value">
-                  <mat-icon>play_arrow</mat-icon>
+                  {{ getSelectedDifficultyLabel() }}
-                  <span>Start Quiz</span>
+                </span>
-                </ng-container>
+              </div>
-              }
+              <div class="summary-item">
-            </button>
+                <span class="label">Mode:</span>
-          </div>
+                <span class="value">
-        </form>
+                  {{ getSelectedQuizTypeLabel() }}
+                </span>
+              </div>
+              <div class="summary-item">
+                <span class="label">Estimated Time:</span>
+                <span class="value">~{{ estimatedTime() }} minutes</span>
+              </div>
+            </div>
+          </mat-card>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="action-buttons">
+          <button type="button" mat-stroked-button routerLink="/categories">
+            <mat-icon>arrow_back</mat-icon>
+            Back to Categories
+          </button>
+          <button type="submit" mat-raised-button color="primary" [disabled]="(setupForm.invalid && !isStartingQuiz())">
+            @if (isStartingQuiz()) {
+            <mat-spinner diameter="20"></mat-spinner>
+            <span>Starting...</span>
+            } @else {
+            <ng-container>
+              <mat-icon>play_arrow</mat-icon>
+              <span>Start Quiz</span>
+            </ng-container>
+            }
+          </button>
+        </div>
+      </form>
       }
     </mat-card-content>
   </mat-card>

frontend/src/app/features/quiz/quiz-setup/quiz-setup.ts

@@ -17,7 +17,7 @@ import { CategoryService } from '../../../core/services/category.service';
 import { GuestService } from '../../../core/services/guest.service';
 import { StorageService } from '../../../core/services/storage.service';
 import { Category } from '../../../core/models/category.model';
-import { QuizStartRequest } from '../../../core/models/quiz.model';
+import { QuizStartFormRequest, QuizStartRequest } from '../../../core/models/quiz.model';
 
 @Component({
   selector: 'app-quiz-setup',
@@ -125,7 +125,7 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
    */
   private initForm(): void {
     this.setupForm = this.fb.group({
-      categoryId: ['', Validators.required],
+      categoryId: [null, Validators.required],
       questionCount: [10, [Validators.required, Validators.min(5), Validators.max(20)]],
       difficulty: ['mixed', Validators.required],
       quizType: ['practice', Validators.required]
@@ -160,7 +160,7 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
     }
 
     const formValue = this.setupForm.value;
-    const request: QuizStartRequest = {
+    const request: QuizStartFormRequest = {
       categoryId: formValue.categoryId,
       questionCount: formValue.questionCount,
       difficulty: formValue.difficulty,
@@ -173,7 +173,7 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
         next: (response) => {
           if (response.success) {
             // Navigate to quiz page
-            this.router.navigate(['/quiz', response.sessionId]);
+            this.router.navigate(['/quiz', response.data.sessionId]);
           }
         },
         error: (error) => {

frontend/src/app/shared/components/resume-quiz-dialog/resume-quiz-dialog.html

@@ -25,11 +25,8 @@
         </div>
 
         <div class="progress-container">
-          <mat-progress-bar 
+          <mat-progress-bar mode="determinate" [value]="progress()"
-            mode="determinate" 
+            [color]="progress() > 66 ? 'primary' : progress() > 33 ? 'accent' : 'warn'"></mat-progress-bar>
-            [value]="progress()"
-            [color]="progress() > 66 ? 'primary' : progress() > 33 ? 'accent' : 'warn'"
-          ></mat-progress-bar>
           <span class="progress-text">{{ progress() }}% Complete</span>
         </div>
 
@@ -76,30 +73,21 @@
         </div>
 
         @if (session().score > 0) {
-          <div class="current-score">
+        <div class="current-score">
-            <mat-icon>emoji_events</mat-icon>
+          <mat-icon>emoji_events</mat-icon>
-            <span>Current Score: <strong>{{ session().score }} points</strong></span>
+          <span>Current Score: <strong>{{ session().score }} points</strong></span>
-          </div>
+        </div>
         }
       </div>
     </div>
   </mat-dialog-content>
 
   <mat-dialog-actions align="end">
-    <button 
+    <button mat-button (click)="startNewQuiz()" class="action-btn secondary">
-      mat-button 
-      (click)="startNewQuiz()"
-      class="action-btn secondary"
-    >
       <mat-icon>add</mat-icon>
       Start New Quiz
     </button>
-    <button 
+    <button mat-raised-button color="primary" (click)="resumeQuiz()" class="action-btn primary">
-      mat-raised-button 
-      color="primary"
-      (click)="resumeQuiz()"
-      class="action-btn primary"
-    >
       <mat-icon>play_arrow</mat-icon>
       Continue Quiz
     </button>