ahmed/Tasks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add changes

Browse Source
This commit is contained in:
AD2025
2025-12-19 21:18:47 +02:00
parent b2c564225e
commit 665919c1e2
20 changed files with 841 additions and 879 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/routes/quiz.routes.js
View File

@@ -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) => {

24
frontend/src/app/app.ts
View File

@@ -35,26 +35,26 @@ export class App implements OnInit {
private toastService = inject(ToastService);
private router = inject(Router);
protected title = 'Interview Quiz Application';
// Signal for mobile sidebar state
isSidebarOpen = signal<boolean>(false);
// Signal for app initialization state
isInitializing = signal<boolean>(true);
// Signal for navigation loading state
isNavigating = signal<boolean>(false);
// Computed signal to check if user is guest
isGuest = computed(() => {
return this.guestService.guestState().isGuest && !this.authService.authState().isAuthenticated;
});
ngOnInit(): void {
this.initializeApp();
this.setupNavigationListener();
}
/**
* Setup navigation event listener for progress bar
*/
@@ -71,24 +71,24 @@ export class App implements OnInit {
}
});
}
/**
* Initialize application and verify token
*/
private initializeApp(): void {
const token = this.authService.authState().isAuthenticated;
// If no token, skip verification
if (!token) {
this.isInitializing.set(false);
return;
}
// Verify token on app load
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']);
}
@@ -100,14 +100,14 @@ export class App implements OnInit {
}
});
}
/**
* Toggle mobile sidebar
*/
toggleSidebar(): void {
this.isSidebarOpen.update(value => !value);
}
/**
* Close sidebar (for mobile)
*/

2
frontend/src/app/core/models/category.model.ts
View File

@@ -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

18
frontend/src/app/core/models/dashboard.model.ts
View File

@@ -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[];
pagination: PaginationInfo;
data: {
sessions: QuizSessionHistory[];
pagination: PaginationInfo;
filters: {
"category": null,
"status": null,
"startDate": null,
"endDate": null
}
"sorting": {
"sortBy": string
"sortOrder": string
}
};
}
/**

2
frontend/src/app/core/models/question.model.ts
View File

@@ -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;

57
frontend/src/app/core/models/quiz.model.ts
View File

@@ -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;
questions: Question[];
totalQuestions: number;
message?: string;
data: {
sessionId: string;
questions: Question[];
totalQuestions: number;
message?: string;
};
}
/**

92
frontend/src/app/core/services/auth.service.ts
View File

@@ -5,12 +5,12 @@ import { Observable, throwError, tap, catchError } from 'rxjs';
import { environment } from '../../../environments/environment.development';
import { StorageService } from './storage.service';
import { ToastService } from './toast.service';
import {
User,
UserRegistration,
UserLogin,
import {
User,
UserRegistration,
UserLogin,
AuthResponse,
AuthState
AuthState
} from '../models/user.model';
@Injectable({
@@ -21,9 +21,9 @@ export class AuthService {
private storageService = inject(StorageService);
private toastService = inject(ToastService);
private router = inject(Router);
private readonly API_URL = `${environment.apiUrl}/auth`;
// Auth state signal
private authStateSignal = signal<AuthState>({
user: this.storageService.getUserData(),
@@ -31,10 +31,10 @@ export class AuthService {
isLoading: false,
error: null
});
// Public readonly auth state
public readonly authState = this.authStateSignal.asReadonly();
/**
* Register a new user account
* Handles guest-to-user conversion if guestSessionId provided
@@ -46,34 +46,34 @@ export class AuthService {
guestSessionId?: string
): Observable<AuthResponse> {
this.setLoading(true);
const registrationData: UserRegistration = {
username,
email,
password,
guestSessionId
};
return this.http.post<AuthResponse>(`${this.API_URL}/register`, registrationData).pipe(
tap((response) => {
// Store token and user data
this.storageService.setToken(response.data.token, true); // Remember me by default
this.storageService.setUserData(response.data.user);
// Clear guest token if converting
if (guestSessionId) {
this.storageService.clearGuestToken();
}
// Update auth state
this.updateAuthState(response.data.user, null);
// Show success message
const message = response.migratedStats
? `Welcome ${response.data.user.username}! Your guest progress has been saved.`
: `Welcome ${response.data.user.username}! Your account has been created.`;
this.toastService.success(message);
// Auto-login: redirect to categories
this.router.navigate(['/categories']);
}),
@@ -83,32 +83,32 @@ export class AuthService {
})
);
}
/**
* Login user
*/
login(email: string, password: string, rememberMe: boolean = false, redirectUrl: string = '/categories'): Observable<AuthResponse> {
this.setLoading(true);
const loginData: UserLogin = { email, password };
return this.http.post<AuthResponse>(`${this.API_URL}/login`, loginData).pipe(
tap((response) => {
// Store token and user data
console.log(response.data.user);
this.storageService.setToken(response.data.token, rememberMe);
this.storageService.setUserData(response.data.user);
// Clear guest token
this.storageService.clearGuestToken();
// Update auth state
this.updateAuthState(response.data.user, null);
// Show success message
this.toastService.success(`Welcome back, ${response.data.user.username}!`);
// Redirect to requested URL
this.router.navigate([redirectUrl]);
}),
@@ -118,18 +118,18 @@ export class AuthService {
})
);
}
/**
* Logout user
*/
logout(): Observable<void> {
this.setLoading(true);
return this.http.post<void>(`${this.API_URL}/logout`, {}).pipe(
tap(() => {
// Clear all auth data
this.storageService.clearAll();
// Reset auth state
this.authStateSignal.set({
user: null,
@@ -137,10 +137,10 @@ export class AuthService {
isLoading: false,
error: null
});
// Show success message
this.toastService.success('You have been logged out successfully.');
// Redirect to login
this.router.navigate(['/login']);
}),
@@ -158,13 +158,13 @@ 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) {
this.authStateSignal.update(state => ({
...state,
@@ -173,15 +173,15 @@ export class AuthService {
}));
return throwError(() => new Error('No token found'));
}
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.updateAuthState(response.user, null);
this.storageService.setUserData(response.data.user);
this.updateAuthState(response.data.user, null);
} else {
// Token invalid, clear auth
this.clearAuth();
@@ -194,7 +194,7 @@ export class AuthService {
})
);
}
/**
* Clear authentication data
*/
@@ -208,7 +208,7 @@ export class AuthService {
error: null
});
}
/**
* Update auth state signal
*/
@@ -220,20 +220,20 @@ export class AuthService {
error
});
}
/**
* Set loading state
*/
private setLoading(isLoading: boolean): void {
this.authStateSignal.update(state => ({ ...state, isLoading }));
}
/**
* Handle authentication errors
*/
private handleAuthError(error: HttpErrorResponse): void {
let errorMessage = 'An error occurred. Please try again.';
if (error.status === 400) {
errorMessage = 'Invalid input. Please check your information.';
} else if (error.status === 401) {
@@ -245,25 +245,25 @@ export class AuthService {
} else if (error.status === 0) {
errorMessage = 'Unable to connect to server. Please check your internet connection.';
}
this.updateAuthState(null, errorMessage);
this.toastService.error(errorMessage);
}
/**
* Get current user
*/
getCurrentUser(): User | null {
return this.authStateSignal().user;
}
/**
* Check if user is authenticated
*/
isAuthenticated(): boolean {
return this.authStateSignal().isAuthenticated;
}
/**
* Check if user is admin
*/

80
frontend/src/app/core/services/guest.service.ts
View File

@@ -15,13 +15,13 @@ export class GuestService {
private storageService = inject(StorageService);
private toastService = inject(ToastService);
private router = inject(Router);
private readonly API_URL = `${environment.apiUrl}/guest`;
private readonly GUEST_TOKEN_KEY = 'guest_token';
private readonly GUEST_ID_KEY = 'guest_id';
private readonly DEVICE_ID_KEY = 'device_id';
private readonly SESSION_EXPIRY_HOURS = 24;
// Guest state signal
private guestStateSignal = signal<GuestState>({
session: null,
@@ -30,34 +30,34 @@ export class GuestService {
error: null,
quizLimit: null
});
// Public readonly guest state
public readonly guestState = this.guestStateSignal.asReadonly();
/**
* 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(
tap((session: GuestSession) => {
return this.http.post<{ success: boolean, message: string, data: GuestSession }>(`${this.API_URL}/start-session`, { deviceId }).pipe(
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.guestId);
this.storageService.setItem(this.GUEST_ID_KEY, session.data.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
}));
this.toastService.success('Welcome! You\'re browsing as a guest.');
}),
catchError((error: HttpErrorResponse) => {
@@ -67,13 +67,13 @@ export class GuestService {
})
);
}
/**
* Get guest session details
*/
getSession(guestId: string): Observable<GuestSession> {
this.setLoading(true);
return this.http.get<GuestSession>(`${this.API_URL}/session/${guestId}`).pipe(
tap((session: GuestSession) => {
this.guestStateSignal.update(state => ({
@@ -95,13 +95,13 @@ export class GuestService {
})
);
}
/**
* Get remaining quiz attempts for guest
*/
getQuizLimit(): Observable<GuestLimit> {
this.setLoading(true);
return this.http.get<GuestLimit>(`${this.API_URL}/quiz-limit`).pipe(
tap((limit: GuestLimit) => {
this.guestStateSignal.update(state => ({
@@ -117,14 +117,14 @@ export class GuestService {
})
);
}
/**
* Convert guest session to registered user
* Called during registration process
*/
convertToUser(guestSessionId: string, userData: any): Observable<any> {
this.setLoading(true);
return this.http.post(`${this.API_URL}/convert`, {
guestSessionId,
...userData
@@ -140,23 +140,23 @@ export class GuestService {
})
);
}
/**
* Generate or retrieve device ID
* Used for fingerprinting guest sessions
*/
private getOrCreateDeviceId(): string {
let deviceId = this.storageService.getItem(this.DEVICE_ID_KEY);
if (!deviceId) {
// Generate UUID v4
deviceId = this.generateUUID();
this.storageService.setItem(this.DEVICE_ID_KEY, deviceId);
}
return deviceId;
}
/**
* Generate UUID v4
*/
@@ -167,7 +167,7 @@ export class GuestService {
return v.toString(16);
});
}
/**
* Check if user has an active guest session
*/
@@ -176,42 +176,42 @@ export class GuestService {
const guestId = this.storageService.getItem(this.GUEST_ID_KEY);
return !!(token && guestId);
}
/**
* Get stored guest token
*/
getGuestToken(): string | null {
return this.storageService.getItem(this.GUEST_TOKEN_KEY);
}
/**
* Get stored guest ID
*/
getGuestId(): string | null {
return this.storageService.getItem(this.GUEST_ID_KEY);
}
/**
* Check if session is expired (24 hours)
*/
isSessionExpired(): boolean {
const session = this.guestState().session;
if (!session) return true;
const createdAt = new Date(session.createdAt);
const now = new Date();
const hoursDiff = (now.getTime() - createdAt.getTime()) / (1000 * 60 * 60);
return hoursDiff >= this.SESSION_EXPIRY_HOURS;
}
/**
* Clear guest session data
*/
clearGuestSession(): void {
this.storageService.removeItem(this.GUEST_TOKEN_KEY);
this.storageService.removeItem(this.GUEST_ID_KEY);
this.guestStateSignal.update(state => ({
...state,
session: null,
@@ -221,14 +221,14 @@ export class GuestService {
quizLimit: null
}));
}
/**
* Set loading state
*/
private setLoading(isLoading: boolean): void {
this.guestStateSignal.update(state => ({ ...state, isLoading }));
}
/**
* Set error state
*/
@@ -239,7 +239,7 @@ export class GuestService {
error
}));
}
/**
* Check if guest has reached quiz limit
*/
@@ -248,24 +248,24 @@ export class GuestService {
if (!limit) return false;
return limit.quizzesRemaining <= 0;
}
/**
* Get time remaining until session expires
*/
getTimeRemaining(): string {
const session = this.guestState().session;
if (!session) return '0h 0m';
const createdAt = new Date(session.createdAt);
const expiryTime = new Date(createdAt.getTime() + (this.SESSION_EXPIRY_HOURS * 60 * 60 * 1000));
const now = new Date();
const diff = expiryTime.getTime() - now.getTime();
if (diff <= 0) return '0h 0m';
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
return `${hours}h ${minutes}m`;
}
}

41
frontend/src/app/core/services/quiz.service.ts
View File

@@ -3,13 +3,14 @@ import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { Observable, tap, catchError, throwError, map } from 'rxjs';
import { environment } from '../../../environments/environment';
import {
QuizSession,
QuizStartRequest,
import {
QuizSession,
QuizStartRequest,
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,
@@ -104,15 +105,15 @@ export class QuizService {
};
this._activeSession.set(session);
// Store questions from response
if (response.questions) {
this._questions.set(response.questions);
if (response.data.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!');
}
}),
@@ -139,11 +140,11 @@ export class QuizService {
const updated: QuizSession = {
...currentSession,
score: response.score,
correctAnswers: response.isCorrect
? currentSession.correctAnswers + 1
correctAnswers: response.isCorrect
? currentSession.correctAnswers + 1
: currentSession.correctAnswers,
incorrectAnswers: !response.isCorrect
? currentSession.incorrectAnswers + 1
incorrectAnswers: !response.isCorrect
? currentSession.incorrectAnswers + 1
: currentSession.incorrectAnswers,
currentQuestionIndex: currentSession.currentQuestionIndex + 1
};
@@ -169,7 +170,7 @@ export class QuizService {
tap(results => {
if (results.success) {
this._quizResults.set(results);
// Update session status
const currentSession = this._activeSession();
if (currentSession) {
@@ -277,10 +278,10 @@ export class QuizService {
tap(session => {
// Store session ID in localStorage for future restoration
localStorage.setItem('activeQuizSessionId', sessionId);
// Check if we have questions stored
const hasQuestions = this._questions().length > 0;
if (!hasQuestions) {
// Questions need to be fetched separately if not in memory
// For now, we'll navigate to the quiz page which will handle loading

17
frontend/src/app/core/services/storage.service.ts
View File

@@ -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 {
return localStorage.getItem(key) || sessionStorage.getItem(key);
getItem(key: string): string | null {
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 {
if (persistent) {
localStorage.setItem(key, value);
} else {
sessionStorage.setItem(key, value);
}
setItem(key: string, value: string, persistent: boolean = true): void {
localStorage.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);
}
}

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

@@ -2,60 +2,56 @@
<!-- Header -->
<div class="form-header">
@if (isEditMode()) {
<h1>
<mat-icon>edit</mat-icon>
Edit Question
</h1>
<p class="subtitle">Update the details below to modify the quiz question</p>
@if (questionId()) {
<p class="question-id">Question ID: {{ questionId() }}</p>
}
<h1>
<mat-icon>edit</mat-icon>
Edit Question
</h1>
<p class="subtitle">Update the details below to modify the quiz question</p>
@if (questionId()) {
<p class="question-id">Question ID: {{ questionId() }}</p>
}
} @else {
<h1>
<mat-icon>add_circle</mat-icon>
Create New Question
</h1>
<p class="subtitle">Fill in the details below to create a new quiz question</p>
<h1>
<mat-icon>add_circle</mat-icon>
Create New Question
</h1>
<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-content>
<div class="loading-container">
<mat-icon class="loading-icon">hourglass_empty</mat-icon>
<p>Loading question data...</p>
</div>
</mat-card-content>
</mat-card>
<mat-card class="form-card loading-card">
<mat-card-content>
<div class="loading-container">
<mat-icon class="loading-icon">hourglass_empty</mat-icon>
<p>Loading question data...</p>
</div>
</mat-card-content>
</mat-card>
} @else {
<!-- Form Section -->
<mat-card class="form-card">
<mat-card-content>
<form [formGroup]="questionForm" (ngSubmit)="onSubmit()">
<!-- Form-level Error -->
<!-- Form Section -->
<mat-card class="form-card">
<mat-card-content>
<form [formGroup]="questionForm" (ngSubmit)="onSubmit()">
<!-- Form-level Error -->
@if (getFormError()) {
<div class="form-error">
<mat-icon>error</mat-icon>
<span>{{ getFormError() }}</span>
</div>
<div class="form-error">
<mat-icon>error</mat-icon>
<span>{{ getFormError() }}</span>
</div>
}
<!-- Question Text -->
<mat-form-field appearance="outline" class="full-width">
<mat-label>Question Text</mat-label>
<textarea
matInput
formControlName="questionText"
placeholder="Enter your question here..."
rows="4"
<textarea 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">
{{ type.label }}
</mat-option>
<mat-option [value]="type.value">
{{ type.label }}
</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) {
<mat-option [value]="category.id">
{{ category.name }}
</mat-option>
}
@for (category of categories(); track category.id) {
<mat-option [value]="category.id">
{{ category.name }}
</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">
{{ level.label }}
</mat-option>
<mat-option [value]="level.value">
{{ level.label }}
</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
matInput
type="number"
formControlName="points"
min="1"
max="100"
placeholder="10"
required>
<input 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">
<h3>
<mat-icon>list</mat-icon>
Answer Options
</h3>
<div class="options-section">
<h3>
<mat-icon>list</mat-icon>
Answer Options
</h3>
<div formArrayName="options" class="options-list">
@for (option of optionsArray.controls; track $index) {
<div [formGroupName]="$index" class="option-row">
<span class="option-label">Option {{ $index + 1 }}</span>
<mat-form-field appearance="outline" class="option-input">
<input
matInput
formControlName="text"
[placeholder]="'Enter option ' + ($index + 1)"
required>
</mat-form-field>
@if (optionsArray.length > 2) {
<button
mat-icon-button
type="button"
color="warn"
(click)="removeOption($index)"
matTooltip="Remove option">
<mat-icon>delete</mat-icon>
</button>
}
</div>
<div formArrayName="options" class="options-list">
@for (option of optionsArray.controls; track $index) {
<div [formGroupName]="$index" class="option-row">
<span class="option-label">Option {{ $index + 1 }}</span>
<mat-form-field appearance="outline" class="option-input">
<input matInput formControlName="text" [placeholder]="'Enter option ' + ($index + 1)" required>
</mat-form-field>
@if (optionsArray.length > 2) {
<button mat-icon-button type="button" color="warn" (click)="removeOption($index)"
matTooltip="Remove option">
<mat-icon>delete</mat-icon>
</button>
}
</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 -->
<div class="correct-answer-section">
<h3>
<mat-icon>check_circle</mat-icon>
Correct Answer
</h3>
<mat-form-field appearance="outline" class="full-width">
<mat-label>Select Correct Answer</mat-label>
<mat-select formControlName="correctAnswer" required>
@for (optionText of getOptionTexts(); track $index) {
<mat-option [value]="optionText">
{{ optionText }}
</mat-option>
}
</mat-select>
@if (getErrorMessage('correctAnswer')) {
<mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
<mat-divider></mat-divider>
<!-- Correct Answer Selection -->
<div class="correct-answer-section">
<h3>
<mat-icon>check_circle</mat-icon>
Correct Answer
</h3>
<mat-form-field appearance="outline" class="full-width">
<mat-label>Select Correct Answer</mat-label>
<mat-select formControlName="correctAnswer" required>
@for (optionText of getOptionTexts(); track $index) {
<mat-option [value]="optionText">
{{ optionText }}
</mat-option>
}
</mat-form-field>
</div>
</mat-select>
@if (getErrorMessage('correctAnswer')) {
<mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
}
</mat-form-field>
</div>
}
<!-- True/False Options -->
@if (showTrueFalse()) {
<div class="correct-answer-section">
<h3>
<mat-icon>check_circle</mat-icon>
Correct Answer
</h3>
<mat-radio-group formControlName="correctAnswer" class="radio-group">
<mat-radio-button value="true">True</mat-radio-button>
<mat-radio-button value="false">False</mat-radio-button>
</mat-radio-group>
</div>
<div class="correct-answer-section">
<h3>
<mat-icon>check_circle</mat-icon>
Correct Answer
</h3>
<mat-radio-group formControlName="correctAnswer" class="radio-group">
<mat-radio-button value="true">True</mat-radio-button>
<mat-radio-button value="false">False</mat-radio-button>
</mat-radio-group>
</div>
}
<!-- Written Answer -->
@if (selectedQuestionType() === 'written') {
<div class="correct-answer-section">
<h3>
<mat-icon>edit</mat-icon>
Sample Correct Answer
</h3>
<mat-form-field appearance="outline" class="full-width">
<mat-label>Expected Answer</mat-label>
<textarea
matInput
formControlName="correctAnswer"
placeholder="Enter a sample correct answer..."
rows="3"
required>
<div class="correct-answer-section">
<h3>
<mat-icon>edit</mat-icon>
Sample Correct Answer
</h3>
<mat-form-field appearance="outline" class="full-width">
<mat-label>Expected Answer</mat-label>
<textarea matInput formControlName="correctAnswer" placeholder="Enter a sample correct answer..." rows="3"
required>
</textarea>
<mat-hint>This is a reference answer for grading</mat-hint>
@if (getErrorMessage('correctAnswer')) {
<mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
}
</mat-form-field>
</div>
<mat-hint>This is a reference answer for grading</mat-hint>
@if (getErrorMessage('correctAnswer')) {
<mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
}
</mat-form-field>
</div>
}
<mat-divider></mat-divider>
@@ -241,16 +214,12 @@
<!-- Explanation -->
<mat-form-field appearance="outline" class="full-width">
<mat-label>Explanation</mat-label>
<textarea
matInput
formControlName="explanation"
placeholder="Explain why this is the correct answer..."
rows="4"
required>
<textarea matInput 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)">
{{ tag }}
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
<mat-chip-row (removed)="removeTag(tag)">
{{ tag }}
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
}
</mat-chip-grid>
<input
placeholder="Type tag and press Enter..."
[matChipInputFor]="chipGrid"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="addTag($event)">
<input placeholder="Type tag and press Enter..." [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
mat-button
type="button"
(click)="onCancel()">
<button mat-button type="button" (click)="onCancel()">
<mat-icon>close</mat-icon>
Cancel
</button>
<button
mat-raised-button
color="primary"
type="submit"
<button mat-raised-button color="primary" type="submit"
[disabled]="!isFormValid() || isSubmitting() || isLoadingQuestion()">
@if (isSubmitting()) {
<ng-container>
<mat-icon>hourglass_empty</mat-icon>
<span>{{ isEditMode() ? 'Updating...' : 'Creating...' }}</span>
</ng-container>
<ng-container>
<mat-icon>hourglass_empty</mat-icon>
<span>{{ isEditMode() ? 'Updating...' : 'Creating...' }}</span>
</ng-container>
} @else {
<ng-container>
<mat-icon>save</mat-icon>
<span>{{ isEditMode() ? 'Update Question' : 'Save Question' }}</span>
</ng-container>
<ng-container>
<mat-icon>save</mat-icon>
<span>{{ isEditMode() ? 'Update Question' : 'Save Question' }}</span>
</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-label">Options:</div>
<div class="preview-options">
@for (optionText of getOptionTexts(); track $index) {
<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>
<span>{{ optionText }}</span>
</div>
}
<div class="preview-section">
<div class="preview-label">Options:</div>
<div class="preview-options">
@for (optionText of getOptionTexts(); track $index) {
<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>
<span>{{ optionText }}</span>
</div>
}
</div>
</div>
}
<!-- True/False Preview -->
@if (showTrueFalse()) {
<div class="preview-section">
<div class="preview-label">Options:</div>
<div class="preview-options">
<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>
<span>True</span>
</div>
<div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === 'false'">
<mat-icon>{{ questionForm.get('correctAnswer')?.value === 'false' ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>
<span>False</span>
</div>
<div class="preview-section">
<div class="preview-label">Options:</div>
<div class="preview-options">
<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>
<span>True</span>
</div>
<div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === 'false'">
<mat-icon>{{ questionForm.get('correctAnswer')?.value === 'false' ? 'check_circle' :
'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-label">Explanation:</div>
<div class="preview-explanation">
{{ questionForm.get('explanation')?.value }}
</div>
<div class="preview-section">
<div class="preview-label">Explanation:</div>
<div class="preview-explanation">
{{ questionForm.get('explanation')?.value }}
</div>
</div>
}
<!-- Tags Preview -->
@if (tagsArray.length > 0) {
<div class="preview-section">
<div class="preview-label">Tags:</div>
<div class="preview-tags">
@for (tag of tagsArray; track tag) {
<span class="preview-tag">{{ tag }}</span>
}
</div>
<div class="preview-section">
<div class="preview-label">Tags:</div>
<div class="preview-tags">
@for (tag of tagsArray; track tag) {
<span class="preview-tag">{{ tag }}</span>
}
</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>
@@ -427,4 +391,4 @@
</mat-card-content>
</mat-card>
</div>
</div>
</div>

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

@@ -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) => {
this.isLoadingQuestion.set(false);
this.populateForm(response.data);
},
error: (error) => {
this.isLoadingQuestion.set(false);
console.error('Error loading question:', error);
// Redirect back if question not found
this.router.navigate(['/admin/questions']);
}
});
next: (response) => {
this.isLoadingQuestion.set(false);
this.populateForm(response.data);
},
error: (error) => {
this.isLoadingQuestion.set(false);
console.error('Error loading question:', error);
// Redirect back if question not found
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) {
question.options.forEach((option: string) => {
if (question.questionType === 'multiple' && question.options) {
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]
});
@@ -247,14 +247,14 @@ 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]);
@@ -287,7 +287,7 @@ export class AdminQuestionFormComponent implements OnInit {
removeOption(index: number): void {
if (this.optionsArray.length > 2) {
this.optionsArray.removeAt(index);
// Clear correct answer if it matches the removed option
const correctAnswer = this.questionForm.get('correctAnswer')?.value;
const removedOption = this.optionsArray.at(index)?.get('text')?.value;
@@ -336,7 +336,7 @@ export class AdminQuestionFormComponent implements OnInit {
if (questionType === 'multiple_choice' && correctAnswer && options) {
const optionTexts = options.controls.map(opt => opt.get('text')?.value);
const isValid = optionTexts.includes(correctAnswer);
if (!isValid) {
return { correctAnswerMismatch: true };
}
@@ -388,15 +388,15 @@ export class AdminQuestionFormComponent implements OnInit {
: this.adminService.createQuestion(questionData);
serviceCall.subscribe({
next: (response) => {
this.isSubmitting.set(false);
this.router.navigate(['/admin/questions']);
},
error: (error) => {
this.isSubmitting.set(false);
console.error(`Error ${this.isEditMode() ? 'updating' : 'creating'} question:`, error);
}
});
next: (response) => {
this.isSubmitting.set(false);
this.router.navigate(['/admin/questions']);
},
error: (error) => {
this.isSubmitting.set(false);
console.error(`Error ${this.isEditMode() ? 'updating' : 'creating'} question:`, error);
}
});
}
/**
@@ -425,7 +425,7 @@ export class AdminQuestionFormComponent implements OnInit {
*/
getErrorMessage(fieldName: string): string {
const control = this.questionForm.get(fieldName);
if (!control || !control.errors || !control.touched) {
return '';
}

40
frontend/src/app/features/auth/login/login.ts
View File

@@ -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,19 +37,20 @@ 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>();
// Signals
isSubmitting = signal<boolean>(false);
hidePassword = signal<boolean>(true);
returnUrl = signal<string>('/categories');
isStartingGuestSession = signal<boolean>(false);
// Form
loginForm: FormGroup;
constructor() {
// Initialize form
this.loginForm = this.fb.group({
@@ -56,27 +58,27 @@ export class LoginComponent implements OnDestroy {
password: ['', [Validators.required, Validators.minLength(8)]],
rememberMe: [false]
});
// Get return URL from query params
this.route.queryParams
.pipe(takeUntil(this.destroy$))
.subscribe(params => {
this.returnUrl.set(params['returnUrl'] || '/categories');
});
// Redirect if already authenticated
if (this.authService.isAuthenticated()) {
this.router.navigate(['/categories']);
}
}
/**
* Toggle password visibility
*/
togglePasswordVisibility(): void {
this.hidePassword.update(val => !val);
}
/**
* Submit login form
*/
@@ -85,11 +87,11 @@ export class LoginComponent implements OnDestroy {
this.loginForm.markAllAsTouched();
return;
}
this.isSubmitting.set(true);
const { email, password, rememberMe } = this.loginForm.value;
this.authService.login(email, password, rememberMe, this.returnUrl())
.pipe(takeUntil(this.destroy$))
.subscribe({
@@ -102,33 +104,33 @@ export class LoginComponent implements OnDestroy {
}
});
}
/**
* Get form control error message
*/
getErrorMessage(controlName: string): string {
const control = this.loginForm.get(controlName);
if (!control || !control.touched) {
return '';
}
if (control.hasError('required')) {
return `${this.getFieldLabel(controlName)} is required`;
}
if (control.hasError('email')) {
return 'Please enter a valid email address';
}
if (control.hasError('minlength')) {
const minLength = control.getError('minlength').requiredLength;
return `Must be at least ${minLength} characters`;
}
return '';
}
/**
* Get field label
*/
@@ -139,7 +141,7 @@ export class LoginComponent implements OnDestroy {
};
return labels[controlName] || controlName;
}
/**
* Start guest session
*/
@@ -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']);
},

93
frontend/src/app/features/history/quiz-history.component.html
View File

@@ -17,7 +17,7 @@
<!-- History Content -->
<div *ngIf="!isLoading() && !error()" class="history-container">
<!-- Header -->
<div class="history-header">
<div class="header-title">
@@ -32,7 +32,7 @@
Export CSV
</button>
</div>
<!-- Filters and Sort -->
<mat-card class="filters-card">
<mat-card-content>
@@ -46,7 +46,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="filter-field">
<mat-label>Sort By</mat-label>
<mat-select [value]="sortBy()" (selectionChange)="onSortChange($event.value)">
@@ -54,14 +54,14 @@
<mat-option value="score">Score (Highest First)</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button (click)="refresh()" matTooltip="Refresh">
<mat-icon>refresh</mat-icon>
</button>
</div>
</mat-card-content>
</mat-card>
<!-- Empty State -->
<div *ngIf="isEmpty()" class="empty-state">
<mat-icon class="empty-icon">quiz</mat-icon>
@@ -72,11 +72,11 @@
Start a Quiz
</button>
</div>
<!-- Desktop Table View -->
<mat-card class="table-card desktop-only" *ngIf="!isEmpty()">
<table mat-table [dataSource]="history()" class="history-table">
<!-- Date Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef>Date</th>
@@ -84,74 +84,66 @@
{{ formatDate(session.completedAt || session.startedAt) }}
</td>
</ng-container>
<!-- Category Column -->
<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>
<!-- Score Column -->
<ng-container matColumnDef="score">
<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 }}
<span class="percentage">({{ ((session.score / session.totalQuestions) * 100).toFixed(0) }}%)</span>
{{ session.score.earned }}/{{ session.questions.total }}
<span class="percentage">({{ ((session.score.earned / session.questions.total) * 100).toFixed(0) }}%)</span>
</span>
</td>
</ng-container>
<!-- Time Column -->
<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>
<!-- Status Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let session">
<mat-chip [ngClass]="getStatusClass(session.status)">
{{ session.status === 'in_progress' ? 'In Progress' :
session.status === 'completed' ? 'Completed' :
'Abandoned' }}
{{ session.status === 'in_progress' ? 'In Progress' :
session.status === 'completed' ? 'Completed' :
'Abandoned' }}
</mat-chip>
</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let session">
<button
mat-icon-button
(click)="viewResults(session.id)"
matTooltip="View Results"
*ngIf="session.status === 'completed'"
>
<button mat-icon-button (click)="viewResults(session.id)" matTooltip="View Results"
*ngIf="session.status === 'completed'">
<mat-icon>visibility</mat-icon>
</button>
<button
mat-icon-button
(click)="reviewQuiz(session.id)"
matTooltip="Review Quiz"
*ngIf="session.status === 'completed'"
>
<button mat-icon-button (click)="reviewQuiz(session.id)" matTooltip="Review Quiz"
*ngIf="session.status === 'completed'">
<mat-icon>rate_review</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-card>
<!-- Mobile Card View -->
<div class="mobile-cards mobile-only" *ngIf="!isEmpty()">
<mat-card *ngFor="let session of history()" class="history-card">
@@ -159,15 +151,15 @@
<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' :
'Abandoned' }}
{{ session.status === 'in_progress' ? 'In Progress' :
session.status === 'completed' ? 'Completed' :
'Abandoned' }}
</mat-chip>
</div>
<div class="card-details">
<div class="detail-row">
<mat-icon>calendar_today</mat-icon>
@@ -175,17 +167,17 @@
</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)">
{{ session.score }}/{{ session.totalQuestions }}
({{ ((session.score / session.totalQuestions) * 100).toFixed(0) }}%)
<span class="score-value" [ngClass]="getScoreColor(session.score.earned, session.questions.total)">
{{ session.score.earned }}/{{ session.questions.total }}
({{ ((session.score.earned / session.questions.total) * 100).toFixed(0) }}%)
</span>
</div>
</div>
<div class="card-actions" *ngIf="session.status === 'completed'">
<button mat-button color="primary" (click)="viewResults(session.id)">
<mat-icon>visibility</mat-icon>
@@ -199,16 +191,9 @@
</mat-card-content>
</mat-card>
</div>
<!-- Pagination -->
<mat-paginator
*ngIf="!isEmpty()"
[length]="totalItems()"
[pageSize]="pageSize()"
[pageIndex]="currentPage() - 1"
[pageSizeOptions]="[5, 10, 20, 50]"
(page)="onPageChange($event)"
showFirstLastButtons
>
<mat-paginator *ngIf="!isEmpty()" [length]="totalItems()" [pageSize]="pageSize()" [pageIndex]="currentPage() - 1"
[pageSizeOptions]="[5, 10, 20, 50]" (page)="onPageChange($event)" showFirstLastButtons>
</mat-paginator>
</div>
</div>

88
frontend/src/app/features/history/quiz-history.component.ts
View File

@@ -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({
@@ -44,32 +44,32 @@ export class QuizHistoryComponent implements OnInit {
private categoryService = inject(CategoryService);
private router = inject(Router);
private route = inject(ActivatedRoute);
// Signals
isLoading = signal<boolean>(true);
history = signal<QuizSession[]>([]);
history = signal<QuizSessionHistory[]>([]);
pagination = signal<PaginationInfo | null>(null);
categories = signal<Category[]>([]);
error = signal<string | null>(null);
// Filter and sort state
currentPage = signal<number>(1);
pageSize = signal<number>(10);
selectedCategory = signal<string | null>(null);
sortBy = signal<'date' | 'score'>('date');
// Table columns
displayedColumns: string[] = ['date', 'category', 'score', 'time', 'status', 'actions'];
// Computed values
isEmpty = computed(() => this.history().length === 0 && !this.isLoading());
totalItems = computed(() => this.pagination()?.totalItems || 0);
ngOnInit(): void {
this.loadCategories();
this.loadHistoryFromRoute();
}
/**
* Load categories for filter
*/
@@ -83,7 +83,7 @@ export class QuizHistoryComponent implements OnInit {
}
});
}
/**
* Load history based on route query params
*/
@@ -93,31 +93,31 @@ export class QuizHistoryComponent implements OnInit {
const limit = params['limit'] ? parseInt(params['limit'], 10) : 10;
const category = params['category'] || null;
const sortBy = params['sortBy'] || 'date';
this.currentPage.set(page);
this.pageSize.set(limit);
this.selectedCategory.set(category);
this.sortBy.set(sortBy);
this.loadHistory();
});
}
/**
* Load quiz history
*/
loadHistory(): void {
const state: any = (this.authService as any).authState();
const user = state?.user;
if (!user || !user.id) {
this.router.navigate(['/login']);
return;
}
this.isLoading.set(true);
this.error.set(null);
(this.userService as any).getHistory(
user.id,
this.currentPage(),
@@ -126,8 +126,8 @@ export class QuizHistoryComponent implements OnInit {
this.sortBy()
).subscribe({
next: (response: QuizHistoryResponse) => {
this.history.set(response.sessions || []);
this.pagination.set(response.pagination);
this.history.set(response.data.sessions || []);
this.pagination.set(response.data.pagination);
this.isLoading.set(false);
},
error: (err: any) => {
@@ -137,7 +137,7 @@ export class QuizHistoryComponent implements OnInit {
}
});
}
/**
* Handle page change
*/
@@ -146,7 +146,7 @@ export class QuizHistoryComponent implements OnInit {
this.pageSize.set(event.pageSize);
this.updateUrlAndLoad();
}
/**
* Handle category filter change
*/
@@ -155,7 +155,7 @@ export class QuizHistoryComponent implements OnInit {
this.currentPage.set(1); // Reset to first page
this.updateUrlAndLoad();
}
/**
* Handle sort change
*/
@@ -164,7 +164,7 @@ export class QuizHistoryComponent implements OnInit {
this.currentPage.set(1); // Reset to first page
this.updateUrlAndLoad();
}
/**
* Update URL with query params and reload data
*/
@@ -174,18 +174,18 @@ export class QuizHistoryComponent implements OnInit {
limit: this.pageSize(),
sortBy: this.sortBy()
};
if (this.selectedCategory()) {
queryParams.category = this.selectedCategory();
}
this.router.navigate([], {
relativeTo: this.route,
queryParams,
queryParamsHandling: 'merge'
});
}
/**
* View quiz results
*/
@@ -194,7 +194,7 @@ export class QuizHistoryComponent implements OnInit {
this.router.navigate(['/quiz', sessionId, 'results']);
}
}
/**
* Review quiz
*/
@@ -203,13 +203,13 @@ export class QuizHistoryComponent implements OnInit {
this.router.navigate(['/quiz', sessionId, 'review']);
}
}
/**
* Format date
*/
formatDate(dateString: string | undefined): string {
if (!dateString) return 'N/A';
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
@@ -219,23 +219,23 @@ export class QuizHistoryComponent implements OnInit {
minute: '2-digit'
});
}
/**
* Format duration
*/
formatDuration(seconds: number | undefined): string {
if (!seconds) return '0s';
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
if (minutes === 0) {
return `${secs}s`;
}
return `${minutes}m ${secs}s`;
}
/**
* Get score color
*/
@@ -245,7 +245,7 @@ export class QuizHistoryComponent implements OnInit {
if (percentage >= 60) return 'warning';
return 'error';
}
/**
* Get status badge class
*/
@@ -261,7 +261,7 @@ export class QuizHistoryComponent implements OnInit {
return '';
}
}
/**
* Export to CSV
*/
@@ -269,32 +269,32 @@ export class QuizHistoryComponent implements OnInit {
if (this.history().length === 0) {
return;
}
// Create CSV header
const headers = ['Date', 'Category', 'Score', 'Total Questions', 'Percentage', 'Time Spent', 'Status'];
const csvRows = [headers.join(',')];
// 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.score.toString(),
session.totalQuestions.toString(),
session.category?.name || 'Unknown',
session.score.earned.toString(),
session.questions.total.toString(),
`${percentage}%`,
this.formatDuration(session.timeSpent),
this.formatDuration(session.time.spent),
session.status
];
csvRows.push(row.join(','));
});
// Create blob and download
const csvContent = csvRows.join('\n');
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', `quiz-history-${new Date().toISOString().split('T')[0]}.csv`);
link.style.visibility = 'hidden';
@@ -302,7 +302,7 @@ export class QuizHistoryComponent implements OnInit {
link.click();
document.body.removeChild(link);
}
/**
* Refresh history
*/

299
frontend/src/app/features/quiz/quiz-question/quiz-question.html
View File

@@ -6,187 +6,164 @@
Question {{ currentQuestionIndex() + 1 }} of {{ totalQuestions() }}
</span>
@if (activeSession()?.quizType === 'timed') {
<div class="timer" [class.warning]="timeRemaining() < 60">
<mat-icon>timer</mat-icon>
<span>{{ formatTime(timeRemaining()) }}</span>
</div>
<div class="timer" [class.warning]="timeRemaining() < 60">
<mat-icon>timer</mat-icon>
<span>{{ formatTime(timeRemaining()) }}</span>
</div>
}
<div class="score-display">
<mat-icon>stars</mat-icon>
<span>Score: {{ currentScore() }}</span>
</div>
</div>
<mat-progress-bar
mode="determinate"
[value]="progress()"
class="progress-bar">
<mat-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 -->
<mat-card-header>
<div class="question-header">
<div class="question-meta">
<mat-chip class="type-chip">{{ questionTypeLabel() }}</mat-chip>
<mat-chip
class="difficulty-chip"
[style.background-color]="getDifficultyColor(question.difficulty) + '20'"
[style.color]="getDifficultyColor(question.difficulty)">
{{ question.difficulty | titlecase }}
</mat-chip>
<span class="points">{{ question.points }} points</span>
</div>
<!-- Question Header -->
<mat-card-header>
<div class="question-header">
<div class="question-meta">
<mat-chip class="type-chip">{{ questionTypeLabel() }}</mat-chip>
<mat-chip class="difficulty-chip" [style.background-color]="getDifficultyColor(question.difficulty) + '20'"
[style.color]="getDifficultyColor(question.difficulty)">
{{ question.difficulty | titlecase }}
</mat-chip>
<span class="points">{{ question.points }} points</span>
</div>
</mat-card-header>
</div>
</mat-card-header>
<mat-divider></mat-divider>
<mat-divider></mat-divider>
<mat-card-content>
<!-- Question Text -->
<div class="question-text">
<h2>{{ question.questionText }}</h2>
<mat-card-content>
<!-- Question Text -->
<div class="question-text">
<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 -->
<form [formGroup]="answerForm" (ngSubmit)="submitAnswer()" class="answer-form">
<!-- Multiple Choice -->
@if (isMultipleChoice() && question.options) {
<mat-radio-group formControlName="answer" class="radio-group">
@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...">
<!-- 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-form-field>
}
<mat-hint>Be as detailed as possible</mat-hint>
</mat-form-field>
}
<!-- Answer Feedback -->
@if (answerSubmitted() && answerResult()) {
<div class="answer-feedback" [class.correct]="answerResult()?.isCorrect" [class.incorrect]="!answerResult()?.isCorrect">
<div class="feedback-header">
<mat-icon [style.color]="getFeedbackColor()">
{{ getFeedbackIcon() }}
</mat-icon>
<h3 [style.color]="getFeedbackColor()">
{{ getFeedbackMessage() }}
</h3>
</div>
@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>
}
<!-- Answer Feedback -->
@if (answerSubmitted() && answerResult()) {
<div class="answer-feedback" [class.correct]="answerResult()?.isCorrect"
[class.incorrect]="!answerResult()?.isCorrect">
<div class="feedback-header">
<mat-icon [style.color]="getFeedbackColor()">
{{ getFeedbackIcon() }}
</mat-icon>
<h3 [style.color]="getFeedbackColor()">
{{ getFeedbackMessage() }}
</h3>
</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 -->
<mat-card-content class="loading-container">
<mat-spinner diameter="50"></mat-spinner>
<p>Loading question...</p>
</mat-card-content>
<!-- Loading State -->
<mat-card-content class="loading-container">
<mat-spinner diameter="50"></mat-spinner>
<p>Loading question...</p>
</mat-card-content>
}
</mat-card>
@@ -208,4 +185,4 @@
</div>
</div>
</mat-card>
</div>
</div>

30
frontend/src/app/features/quiz/quiz-question/quiz-question.ts
View File

@@ -56,21 +56,21 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
readonly activeSession = this.quizService.activeSession;
readonly isSubmittingAnswer = this.quizService.isSubmittingAnswer;
readonly questions = this.quizService.questions;
// Current question state
readonly currentQuestionIndex = computed(() => this.activeSession()?.currentQuestionIndex ?? 0);
readonly totalQuestions = computed(() => this.activeSession()?.totalQuestions ?? 0);
readonly currentQuestion = signal<Question | null>(null);
// Answer feedback state
readonly answerSubmitted = signal<boolean>(false);
readonly answerResult = signal<QuizAnswerResponse | null>(null);
readonly showExplanation = signal<boolean>(false);
// Timer state (for timed quizzes)
readonly timeRemaining = signal<number>(0); // in seconds
readonly timerRunning = signal<boolean>(false);
// Progress
readonly progress = computed(() => {
const total = this.totalQuestions();
@@ -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 'true_false': return 'True/False';
case 'multiple': return 'Multiple Choice';
case 'trueFalse': return 'True/False';
case 'written': return 'Written Answer';
default: return '';
}
@@ -102,7 +102,7 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
ngOnInit(): void {
this.sessionId = this.route.snapshot.params['sessionId'];
if (!this.sessionId) {
this.router.navigate(['/quiz/setup']);
return;
@@ -110,6 +110,8 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
this.initForm();
this.loadQuizSession();
console.log(this.questions());
}
ngOnDestroy(): void {
@@ -134,16 +136,16 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
// Check if we have an active session with questions already loaded
const activeSession = this.activeSession();
const questions = this.questions();
if (activeSession && activeSession.id === this.sessionId && questions.length > 0) {
// Session and questions already loaded from quiz start
if (activeSession.status === 'completed') {
this.router.navigate(['/quiz', this.sessionId, 'results']);
return;
}
this.loadCurrentQuestion();
// Start timer for timed quizzes
if (activeSession.quizType === 'timed' && activeSession.timeSpent) {
const timeLimit = this.calculateTimeLimit(activeSession.totalQuestions);
@@ -212,7 +214,7 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
private loadCurrentQuestion(): void {
const index = this.currentQuestionIndex();
const allQuestions = this.questions();
if (index < allQuestions.length) {
this.currentQuestion.set(allQuestions[index]);
this.answerSubmitted.set(false);
@@ -264,7 +266,7 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
if (!question) return;
const answer = this.answerForm.get('answer')?.value;
const submission: QuizAnswerSubmission = {
questionId: question.id,
answer: answer,
@@ -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';
}
/**

317
frontend/src/app/features/quiz/quiz-setup/quiz-setup.html
View File

@@ -13,191 +13,176 @@
<mat-card-content>
<!-- Guest Warning -->
@if (showGuestWarning()) {
<div class="guest-warning">
<mat-icon class="warning-icon">warning</mat-icon>
<div class="warning-content">
<p><strong>Limited Quizzes Remaining</strong></p>
<p>You have {{ remainingQuizzes() }} quiz(es) left as a guest.</p>
<button mat-stroked-button color="primary" (click)="navigateToRegister()">
Sign Up for Unlimited Access
</button>
</div>
<div class="guest-warning">
<mat-icon class="warning-icon">warning</mat-icon>
<div class="warning-content">
<p><strong>Limited Quizzes Remaining</strong></p>
<p>You have {{ remainingQuizzes() }} quiz(es) left as a guest.</p>
<button mat-stroked-button color="primary" (click)="navigateToRegister()">
Sign Up for Unlimited Access
</button>
</div>
</div>
}
<!-- Loading State -->
@if (isLoadingCategories()) {
<div class="loading-container">
<mat-spinner diameter="50"></mat-spinner>
<p>Loading categories...</p>
</div>
<div class="loading-container">
<mat-spinner diameter="50"></mat-spinner>
<p>Loading categories...</p>
</div>
}
<!-- Setup Form -->
@if (!isLoadingCategories()) {
<form [formGroup]="setupForm" (ngSubmit)="startQuiz()" class="setup-form">
<!-- Category Selection -->
<div class="form-section">
<h2>
<mat-icon>category</mat-icon>
Select Category
</h2>
<mat-form-field appearance="outline" class="full-width">
<mat-label>Choose a category</mat-label>
<mat-select formControlName="categoryId" required>
@for (category of getAvailableCategories(); track category.id) {
<mat-option [value]="category.id">
<div class="category-option">
@if (category.icon) {
<mat-icon [style.color]="category.color">{{ category.icon }}</mat-icon>
}
<span class="category-name">{{ category.name }}</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>
<form [formGroup]="setupForm" (ngSubmit)="startQuiz()" class="setup-form">
@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>
<!-- Category Selection -->
<div class="form-section">
<h2>
<mat-icon>category</mat-icon>
Select Category
</h2>
<mat-form-field appearance="outline" class="full-width">
<mat-label>Choose a category</mat-label>
<mat-select formControlName="categoryId" required>
@for (category of getAvailableCategories(); track category.id) {
<mat-option [value]="category.id">
<div class="category-option">
@if (category.icon) {
<mat-icon [style.color]="category.color">{{ category.icon }}</mat-icon>
}
<span class="category-name">{{ category.name }}</span>
<span class="question-count">({{ category.questionCount }} questions)</span>
</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 -->
<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>
<!-- Difficulty Selection -->
<div class="form-section">
<h2>
<mat-icon>tune</mat-icon>
Difficulty Level
</h2>
<div class="difficulty-selector">
@for (difficulty of difficultyOptions; track difficulty.value) {
<button type="button" mat-stroked-button class="difficulty-option"
[class.selected]="setupForm.get('difficulty')?.value === difficulty.value"
(click)="setupForm.patchValue({ difficulty: difficulty.value })">
<mat-icon [style.color]="difficulty.color">{{ difficulty.icon }}</mat-icon>
<span>{{ difficulty.label }}</span>
</button>
}
</div>
</div>
<!-- Difficulty Selection -->
<div class="form-section">
<h2>
<mat-icon>tune</mat-icon>
Difficulty Level
</h2>
<div class="difficulty-selector">
@for (difficulty of difficultyOptions; track difficulty.value) {
<button
type="button"
mat-stroked-button
class="difficulty-option"
[class.selected]="setupForm.get('difficulty')?.value === difficulty.value"
(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>
<!-- 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>
<!-- 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]="!canStartQuiz()">
@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>
<!-- 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>
<!-- 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>
</div>
</div>

28
frontend/src/app/features/quiz/quiz-setup/quiz-setup.ts
View File

@@ -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',
@@ -56,7 +56,7 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
readonly categories = this.categoryService.categories;
readonly isLoadingCategories = this.categoryService.isLoading;
readonly isStartingQuiz = this.quizService.isStartingQuiz;
// Guest limit
readonly isGuest = computed(() => !this.storageService.isAuthenticated());
readonly guestState = this.guestService.guestState;
@@ -68,7 +68,7 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
// Question count options
readonly questionCountOptions = [5, 10, 15, 20];
// Difficulty options
readonly difficultyOptions = [
{ value: 'easy', label: 'Easy', icon: 'sentiment_satisfied', color: '#4CAF50' },
@@ -79,15 +79,15 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
// Quiz type options
readonly quizTypeOptions = [
{
value: 'practice',
label: 'Practice Mode',
{
value: 'practice',
label: 'Practice Mode',
icon: 'school',
description: 'No time limit, learn at your own pace'
},
{
value: 'timed',
label: 'Timed Mode',
{
value: 'timed',
label: 'Timed Mode',
icon: 'timer',
description: 'Challenge yourself with time constraints'
}
@@ -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) => {
@@ -187,12 +187,12 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
*/
getAvailableCategories(): Category[] {
const allCategories = this.categories() || [];
if (this.isGuest()) {
// Filter to show only guest-accessible categories
return allCategories.filter(cat => cat.guestAccessible);
}
return allCategories;
}

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

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