add changes
This commit is contained in:
AD2025
@@ -4,17 +4,92 @@ import { QuizSession, QuizSessionHistory } from './quiz.model';
|
||||
/**
|
||||
* User Dashboard Response
|
||||
*/
|
||||
export interface UserDashboard {
|
||||
|
||||
export interface UserDataDashboard {
|
||||
id: string;
|
||||
username: string;
|
||||
email: string;
|
||||
role: string;
|
||||
profileImage: string | null;
|
||||
memberSince: string;
|
||||
}
|
||||
export interface StatsDashboard {
|
||||
totalQuizzes: number
|
||||
quizzesPassed: number
|
||||
passRate: number
|
||||
totalQuestionsAnswered: number
|
||||
correctAnswers: number
|
||||
overallAccuracy: number
|
||||
currentStreak: number
|
||||
longestStreak: number
|
||||
streakStatus: string;
|
||||
lastActiveDate: string | null
|
||||
|
||||
}
|
||||
export interface RecentSessionsScoreDashboard {
|
||||
earned: number
|
||||
total: number
|
||||
percentage: number
|
||||
}
|
||||
export interface RecentSessionsCategoryDashboard {
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
icon: any
|
||||
color: string
|
||||
}
|
||||
export interface RecentSessionsDashboard {
|
||||
id: string
|
||||
category: RecentSessionsCategoryDashboard
|
||||
quizType: string
|
||||
difficulty: string
|
||||
status: string
|
||||
score: RecentSessionsScoreDashboard
|
||||
isPassed: boolean
|
||||
questionsAnswered: number
|
||||
correctAnswers: number
|
||||
accuracy: number
|
||||
timeSpent: number
|
||||
completedAt: string
|
||||
}
|
||||
export interface CategoryPerformanceStats {
|
||||
quizzesTaken: number
|
||||
quizzesPassed: number
|
||||
passRate: number
|
||||
averageScore: number
|
||||
totalQuestions: number
|
||||
correctAnswers: number
|
||||
accuracy: number
|
||||
}
|
||||
export interface CategoryPerformanceDashboard {
|
||||
category: RecentSessionsCategoryDashboard
|
||||
stats: CategoryPerformanceStats
|
||||
lastAttempt: string
|
||||
}
|
||||
|
||||
export interface RecentActivityDashboard {
|
||||
date: string
|
||||
quizzesCompleted: number
|
||||
}
|
||||
export interface UserDashboardResponse {
|
||||
success: boolean;
|
||||
totalQuizzes: number;
|
||||
totalQuestionsAnswered: number;
|
||||
overallAccuracy: number;
|
||||
currentStreak: number;
|
||||
longestStreak: number;
|
||||
averageScore: number;
|
||||
recentQuizzes: QuizSession[];
|
||||
categoryPerformance: CategoryPerformance[];
|
||||
achievements?: Achievement[];
|
||||
data: UserDashboard
|
||||
}
|
||||
export interface UserDashboard {
|
||||
user: UserDataDashboard;
|
||||
stats: StatsDashboard;
|
||||
recentSessions: RecentSessionsDashboard[]
|
||||
categoryPerformance: CategoryPerformanceDashboard[]
|
||||
recentActivity: RecentActivityDashboard[]
|
||||
// totalQuizzes: number;
|
||||
// totalQuestionsAnswered: number;
|
||||
// overallAccuracy: number;
|
||||
// currentStreak: number;
|
||||
// longestStreak: number;
|
||||
// averageScore: number;
|
||||
// recentQuizzes: QuizSession[];
|
||||
// categoryPerformance: CategoryPerformance[];
|
||||
// achievements?: Achievement[];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -37,14 +112,14 @@ export interface QuizHistoryResponse {
|
||||
sessions: QuizSessionHistory[];
|
||||
pagination: PaginationInfo;
|
||||
filters: {
|
||||
"category": null,
|
||||
"status": null,
|
||||
"startDate": null,
|
||||
"endDate": null
|
||||
category: null,
|
||||
status: null,
|
||||
startDate: null,
|
||||
endDate: null
|
||||
}
|
||||
"sorting": {
|
||||
"sortBy": string
|
||||
"sortOrder": string
|
||||
sorting: {
|
||||
sortBy: string
|
||||
sortOrder: string
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -263,6 +263,7 @@ export interface QuizQuestionResult {
|
||||
// Legacy support
|
||||
questionId?: string;
|
||||
timeSpent?: number;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -14,7 +14,8 @@ import {
|
||||
CompletedQuizResult,
|
||||
CompletedQuizResponse,
|
||||
QuizReviewResult,
|
||||
QuizReviewResponse
|
||||
QuizReviewResponse,
|
||||
QuizSessionHistory
|
||||
} from '../models/quiz.model';
|
||||
import { ToastService } from './toast.service';
|
||||
import { StorageService } from './storage.service';
|
||||
@@ -41,8 +42,13 @@ export class QuizService {
|
||||
readonly questions = this._questions.asReadonly();
|
||||
|
||||
// Quiz results state
|
||||
private readonly _quizResults = signal<CompletedQuizResult | QuizReviewResult | QuizResults | null>(null);
|
||||
private readonly _quizResults = signal<QuizReviewResult | null>(null);
|
||||
private readonly _completedQuiz = signal<CompletedQuizResult | null>(null);
|
||||
private readonly _sessionHistoryQuiz = signal<QuizSessionHistory | null>(null);
|
||||
//private readonly _quizResults = signal<CompletedQuizResult | QuizReviewResult | QuizResults | null>(null);
|
||||
readonly quizResults = this._quizResults.asReadonly();
|
||||
readonly sessionQuizHistory = this._sessionHistoryQuiz.asReadonly();
|
||||
readonly completedQuiz = this._completedQuiz.asReadonly();
|
||||
|
||||
// Loading states
|
||||
private readonly _isStartingQuiz = signal<boolean>(false);
|
||||
@@ -188,7 +194,7 @@ export class QuizService {
|
||||
return this.http.post<CompletedQuizResponse>(`${this.apiUrl}/complete`, { sessionId }).pipe(
|
||||
tap(results => {
|
||||
if (results.success) {
|
||||
this._quizResults.set(results.data);
|
||||
this._completedQuiz.set(results.data);
|
||||
|
||||
// Update session status
|
||||
const currentSession = this._activeSession();
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
|
||||
import { catchError, tap, map } from 'rxjs/operators';
|
||||
import { of, Observable } from 'rxjs';
|
||||
import { environment } from '../../../environments/environment';
|
||||
import { UserDashboard, QuizHistoryResponse, UserProfileUpdate, UserProfileUpdateResponse } from '../models/dashboard.model';
|
||||
import { UserDashboard, QuizHistoryResponse, UserProfileUpdate, UserProfileUpdateResponse, UserDashboardResponse } from '../models/dashboard.model';
|
||||
import { ToastService } from './toast.service';
|
||||
import { AuthService } from './auth.service';
|
||||
import { StorageService } from './storage.service';
|
||||
@@ -23,28 +23,28 @@ export class UserService {
|
||||
private toastService = inject(ToastService);
|
||||
private authService = inject(AuthService);
|
||||
private storageService = inject(StorageService);
|
||||
|
||||
|
||||
private readonly API_URL = `${environment.apiUrl}/users`;
|
||||
private readonly CACHE_TTL = 5 * 60 * 1000; // 5 minutes in milliseconds
|
||||
|
||||
|
||||
// Signals
|
||||
dashboardState = signal<UserDashboard | null>(null);
|
||||
dashboardState = signal<UserDashboardResponse | null>(null);
|
||||
historyState = signal<QuizHistoryResponse | null>(null);
|
||||
isLoading = signal<boolean>(false);
|
||||
error = signal<string | null>(null);
|
||||
|
||||
|
||||
// Cache
|
||||
private dashboardCache = new Map<string, CacheEntry<UserDashboard>>();
|
||||
|
||||
private dashboardCache = new Map<string, CacheEntry<UserDashboardResponse>>();
|
||||
|
||||
// Computed values
|
||||
totalQuizzes = computed(() => this.dashboardState()?.totalQuizzes || 0);
|
||||
overallAccuracy = computed(() => this.dashboardState()?.overallAccuracy || 0);
|
||||
currentStreak = computed(() => this.dashboardState()?.currentStreak || 0);
|
||||
|
||||
totalQuizzes = computed(() => this.dashboardState()?.data.stats.totalQuizzes || 0);
|
||||
overallAccuracy = computed(() => this.dashboardState()?.data.stats.overallAccuracy || 0);
|
||||
currentStreak = computed(() => this.dashboardState()?.data.stats.currentStreak || 0);
|
||||
|
||||
/**
|
||||
* Get user dashboard with statistics
|
||||
*/
|
||||
getDashboard(userId: string, forceRefresh = false): Observable<UserDashboard> {
|
||||
getDashboard(userId: string, forceRefresh = false): Observable<UserDashboardResponse> {
|
||||
// Check cache if not forcing refresh
|
||||
if (!forceRefresh) {
|
||||
const cached = this.dashboardCache.get(userId);
|
||||
@@ -53,11 +53,11 @@ export class UserService {
|
||||
return of(cached.data);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.isLoading.set(true);
|
||||
this.error.set(null);
|
||||
|
||||
return this.http.get<UserDashboard>(`${this.API_URL}/${userId}/dashboard`).pipe(
|
||||
|
||||
return this.http.get<UserDashboardResponse>(`${this.API_URL}/${userId}/dashboard`).pipe(
|
||||
tap(response => {
|
||||
this.dashboardState.set(response);
|
||||
// Cache the response
|
||||
@@ -71,19 +71,19 @@ export class UserService {
|
||||
console.error('Error fetching dashboard:', error);
|
||||
this.error.set(error.error?.message || 'Failed to load dashboard');
|
||||
this.isLoading.set(false);
|
||||
|
||||
|
||||
if (error.status === 401) {
|
||||
this.toastService.error('Please log in to view your dashboard');
|
||||
this.router.navigate(['/login']);
|
||||
} else {
|
||||
this.toastService.error('Failed to load dashboard data');
|
||||
}
|
||||
|
||||
|
||||
throw error;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get user quiz history with pagination and filters
|
||||
*/
|
||||
@@ -96,12 +96,12 @@ export class UserService {
|
||||
): Observable<QuizHistoryResponse> {
|
||||
this.isLoading.set(true);
|
||||
this.error.set(null);
|
||||
|
||||
|
||||
let params: any = { page, limit, sortBy };
|
||||
if (category) {
|
||||
params.category = category;
|
||||
}
|
||||
|
||||
|
||||
return this.http.get<QuizHistoryResponse>(`${this.API_URL}/${userId}/history`, { params }).pipe(
|
||||
tap(response => {
|
||||
this.historyState.set(response);
|
||||
@@ -111,26 +111,26 @@ export class UserService {
|
||||
console.error('Error fetching history:', error);
|
||||
this.error.set(error.error?.message || 'Failed to load quiz history');
|
||||
this.isLoading.set(false);
|
||||
|
||||
|
||||
if (error.status === 401) {
|
||||
this.toastService.error('Please log in to view your history');
|
||||
this.router.navigate(['/login']);
|
||||
} else {
|
||||
this.toastService.error('Failed to load quiz history');
|
||||
}
|
||||
|
||||
|
||||
throw error;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Update user profile
|
||||
*/
|
||||
updateProfile(userId: string, data: UserProfileUpdate): Observable<UserProfileUpdateResponse> {
|
||||
this.isLoading.set(true);
|
||||
this.error.set(null);
|
||||
|
||||
|
||||
return this.http.put<UserProfileUpdateResponse>(`${this.API_URL}/${userId}`, data).pipe(
|
||||
tap(response => {
|
||||
// Update auth state with new user data
|
||||
@@ -138,12 +138,12 @@ export class UserService {
|
||||
if (currentUser && response.data?.user) {
|
||||
const updatedUser = { ...currentUser, ...response.data.user };
|
||||
this.storageService.setUserData(updatedUser);
|
||||
|
||||
|
||||
// Update auth state by calling a private method reflection
|
||||
// Since updateAuthState is private, we update storage directly
|
||||
// The auth state will sync on next navigation/refresh
|
||||
}
|
||||
|
||||
|
||||
this.isLoading.set(false);
|
||||
this.toastService.success('Profile updated successfully');
|
||||
// Invalidate dashboard cache
|
||||
@@ -153,7 +153,7 @@ export class UserService {
|
||||
console.error('Error updating profile:', error);
|
||||
this.error.set(error.error?.message || 'Failed to update profile');
|
||||
this.isLoading.set(false);
|
||||
|
||||
|
||||
if (error.status === 401) {
|
||||
this.toastService.error('Please log in to update your profile');
|
||||
} else if (error.status === 409) {
|
||||
@@ -161,12 +161,12 @@ export class UserService {
|
||||
} else {
|
||||
this.toastService.error('Failed to update profile');
|
||||
}
|
||||
|
||||
|
||||
throw error;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Clear cache (useful after logout or data updates)
|
||||
*/
|
||||
@@ -176,12 +176,12 @@ export class UserService {
|
||||
this.historyState.set(null);
|
||||
this.error.set(null);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Check if dashboard data is empty (no quizzes taken)
|
||||
*/
|
||||
isDashboardEmpty(): boolean {
|
||||
const dashboard = this.dashboardState();
|
||||
return dashboard ? dashboard.totalQuizzes === 0 : true;
|
||||
return dashboard ? dashboard.data.stats.totalQuizzes === 0 : true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
<!-- Dashboard Content -->
|
||||
<div *ngIf="!isLoading() && !error()" class="dashboard-container">
|
||||
|
||||
|
||||
<!-- Welcome Header -->
|
||||
<div class="welcome-section">
|
||||
<div class="welcome-content">
|
||||
@@ -35,7 +35,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Empty State -->
|
||||
<div *ngIf="isEmpty()" class="empty-state">
|
||||
<mat-icon class="empty-icon">quiz</mat-icon>
|
||||
@@ -46,10 +46,10 @@
|
||||
Take Your First Quiz
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Statistics Section -->
|
||||
<div *ngIf="!isEmpty()" class="content-section">
|
||||
|
||||
|
||||
<!-- Statistics Cards -->
|
||||
<div class="stats-grid">
|
||||
<mat-card *ngFor="let stat of statCards()" class="stat-card" [ngClass]="'card-' + stat.color">
|
||||
@@ -64,7 +64,7 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Category Performance Chart -->
|
||||
<mat-card class="performance-card" *ngIf="topCategories().length > 0">
|
||||
<mat-card-header>
|
||||
@@ -75,35 +75,32 @@
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="category-performance">
|
||||
<div
|
||||
*ngFor="let category of topCategories()"
|
||||
class="category-bar"
|
||||
(click)="viewCategory(category.categoryId)"
|
||||
>
|
||||
<div *ngFor="let category of topCategories()" class="category-bar"
|
||||
(click)="viewCategory(category.category.id)">
|
||||
<div class="category-info">
|
||||
<span class="category-name">{{ category.categoryName }}</span>
|
||||
<span class="category-stats">
|
||||
{{ category.quizzesTaken }} {{ category.quizzesTaken === 1 ? 'quiz' : 'quizzes' }}
|
||||
</span>
|
||||
<span class="category-name">{{ category.category.name }}</span>
|
||||
<!-- <span class="category-stats">
|
||||
{{ category.category. }} {{ category.quizzesTaken === 1 ? 'quiz' : 'quizzes' }}
|
||||
</span> -->
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div
|
||||
<!-- <div
|
||||
class="progress-bar"
|
||||
[style.width.%]="category.accuracy"
|
||||
[ngClass]="getAccuracyColor(category.accuracy)"
|
||||
></div>
|
||||
[style.width.%]="category.category.accuracy"
|
||||
[ngClass]="getAccuracyColor(category.category.accuracy)"
|
||||
></div> -->
|
||||
</div>
|
||||
<span class="accuracy-value">{{ category.accuracy.toFixed(1) }}%</span>
|
||||
<!-- <span class="accuracy-value">{{ category.accuracy.toFixed(1) }}%</span> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Empty state for categories -->
|
||||
<div *ngIf="topCategories().length === 0" class="empty-section">
|
||||
<p>No category data available yet</p>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
|
||||
<!-- Recent Quiz Sessions -->
|
||||
<mat-card class="recent-quizzes-card" *ngIf="recentSessions().length > 0">
|
||||
<mat-card-header>
|
||||
@@ -111,28 +108,19 @@
|
||||
<mat-icon>history</mat-icon>
|
||||
Recent Quiz Sessions
|
||||
</mat-card-title>
|
||||
<button
|
||||
mat-button
|
||||
color="primary"
|
||||
class="view-all-btn"
|
||||
(click)="viewAllHistory()"
|
||||
>
|
||||
<button mat-button color="primary" class="view-all-btn" (click)="viewAllHistory()">
|
||||
View All
|
||||
<mat-icon>arrow_forward</mat-icon>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="sessions-list">
|
||||
<div
|
||||
*ngFor="let session of recentSessions()"
|
||||
class="session-item"
|
||||
(click)="viewQuizResults(session.id)"
|
||||
>
|
||||
<div *ngFor="let session of recentSessions()" class="session-item" (click)="viewQuizResults(session.id)">
|
||||
<div class="session-icon">
|
||||
<mat-icon>quiz</mat-icon>
|
||||
</div>
|
||||
<div class="session-info">
|
||||
<div class="session-title">{{ session.categoryName || 'Quiz' }}</div>
|
||||
<div class="session-title">{{ session.category.name }}</div>
|
||||
<div class="session-meta">
|
||||
<span class="session-date">{{ formatDate(session.completedAt) }}</span>
|
||||
<span class="session-separator">•</span>
|
||||
@@ -144,25 +132,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-score">
|
||||
<span
|
||||
class="score-value"
|
||||
[ngClass]="getScoreColor(session.score, session.totalQuestions)"
|
||||
>
|
||||
{{ session.score }}/{{ session.totalQuestions }}
|
||||
<span class="score-value" [ngClass]="getScoreColor(session.score.earned, session.score.total)">
|
||||
{{ session.score.total }}/{{ session.questionsAnswered }}
|
||||
</span>
|
||||
<span class="score-percentage">{{ ((session.score / session.totalQuestions) * 100).toFixed(0) }}%</span>
|
||||
<span class="score-percentage">{{ session.score.percentage }}%</span>
|
||||
</div>
|
||||
<mat-icon class="session-arrow">chevron_right</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Empty state for sessions -->
|
||||
<div *ngIf="recentSessions().length === 0" class="empty-section">
|
||||
<p>No recent quiz sessions</p>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
|
||||
<!-- Achievements Section -->
|
||||
<mat-card class="achievements-card" *ngIf="achievements().length > 0">
|
||||
<mat-card-header>
|
||||
@@ -173,28 +158,25 @@
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="achievements-grid">
|
||||
<div
|
||||
*ngFor="let achievement of achievements()"
|
||||
class="achievement-item"
|
||||
[matTooltip]="achievement.description"
|
||||
>
|
||||
<div *ngFor="let achievement of achievements()" class="achievement-item"
|
||||
[matTooltip]="achievement.category.name">
|
||||
<div class="achievement-icon">
|
||||
<mat-icon>{{ achievement.icon }}</mat-icon>
|
||||
<mat-icon>{{ achievement.category.icon }}</mat-icon>
|
||||
</div>
|
||||
<div class="achievement-name">{{ achievement.name }}</div>
|
||||
<div class="achievement-date" *ngIf="achievement.earnedAt">
|
||||
{{ formatDate(achievement.earnedAt) }}
|
||||
<div class="achievement-name">{{ achievement.category.name }}</div>
|
||||
<div class="achievement-date" *ngIf="achievement.completedAt">
|
||||
{{ formatDate(achievement.completedAt) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Empty state for achievements -->
|
||||
<div *ngIf="achievements().length === 0" class="empty-section">
|
||||
<p>No achievements earned yet. Keep taking quizzes to unlock badges!</p>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="quick-actions">
|
||||
<button mat-stroked-button (click)="viewAllHistory()">
|
||||
@@ -215,4 +197,4 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -7,11 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
|
||||
import { UserDashboard, } from '../../core/models/dashboard.model';
|
||||
import { UserService } from '../../core/services/user.service';
|
||||
|
||||
import { UserDashboard, UserDashboardResponse, } from '../../core/models/dashboard.model';
|
||||
import { UserService } from '../../core/services/user.service';
|
||||
import { AuthService } from '../../core/services';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
standalone: true,
|
||||
@@ -32,12 +32,12 @@ export class DashboardComponent implements OnInit {
|
||||
private userService = inject(UserService);
|
||||
private authService = inject(AuthService);
|
||||
private router = inject(Router);
|
||||
|
||||
|
||||
// Signals
|
||||
isLoading = signal<boolean>(true);
|
||||
dashboard = signal<UserDashboard | null>(null);
|
||||
error = signal<string | null>(null);
|
||||
|
||||
|
||||
// Computed values
|
||||
username = computed(() => {
|
||||
try {
|
||||
@@ -49,93 +49,93 @@ export class DashboardComponent implements OnInit {
|
||||
});
|
||||
isEmpty = computed(() => {
|
||||
const dash = this.dashboard();
|
||||
return dash ? dash.totalQuizzes === 0 : true;
|
||||
return dash ? dash.stats.totalQuizzes === 0 : true;
|
||||
});
|
||||
|
||||
|
||||
// Stat cards computed
|
||||
statCards = computed(() => {
|
||||
const dash = this.dashboard();
|
||||
if (!dash) return [];
|
||||
|
||||
|
||||
return [
|
||||
{
|
||||
title: 'Total Quizzes',
|
||||
value: dash.totalQuizzes,
|
||||
value: dash.stats.totalQuizzes,
|
||||
icon: 'quiz',
|
||||
color: 'primary',
|
||||
description: 'Quizzes completed'
|
||||
},
|
||||
{
|
||||
title: 'Overall Accuracy',
|
||||
value: `${dash.overallAccuracy.toFixed(1)}%`,
|
||||
value: `${dash.stats.overallAccuracy.toFixed(1)}%`,
|
||||
icon: 'percent',
|
||||
color: 'success',
|
||||
description: 'Correct answers'
|
||||
},
|
||||
{
|
||||
title: 'Current Streak',
|
||||
value: dash.currentStreak,
|
||||
value: dash.stats.currentStreak,
|
||||
icon: 'local_fire_department',
|
||||
color: 'warning',
|
||||
description: 'Days in a row',
|
||||
badge: dash.longestStreak > 0 ? `Best: ${dash.longestStreak}` : undefined
|
||||
badge: dash.stats.longestStreak > 0 ? `Best: ${dash.stats.longestStreak}` : undefined
|
||||
},
|
||||
{
|
||||
title: 'Questions Answered',
|
||||
value: dash.totalQuestionsAnswered,
|
||||
value: dash.stats.totalQuestionsAnswered,
|
||||
icon: 'question_answer',
|
||||
color: 'accent',
|
||||
description: 'Total questions'
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
|
||||
// Top categories computed
|
||||
topCategories = computed(() => {
|
||||
const dash = this.dashboard();
|
||||
if (!dash || !dash.categoryPerformance) return [];
|
||||
|
||||
|
||||
return [...dash.categoryPerformance]
|
||||
.sort((a, b) => b.accuracy - a.accuracy)
|
||||
.sort((a, b) => b.stats.accuracy - a.stats.accuracy)
|
||||
.slice(0, 5);
|
||||
});
|
||||
|
||||
|
||||
// Recent sessions computed
|
||||
recentSessions = computed(() => {
|
||||
const dash = this.dashboard();
|
||||
if (!dash || !dash.recentQuizzes) return [];
|
||||
|
||||
return dash.recentQuizzes.slice(0, 5);
|
||||
if (!dash || !dash.recentSessions) return [];
|
||||
|
||||
return dash.recentSessions.slice(0, 5);
|
||||
});
|
||||
|
||||
|
||||
// Achievements computed
|
||||
achievements = computed(() => {
|
||||
const dash = this.dashboard();
|
||||
return dash?.achievements || [];
|
||||
return dash?.recentSessions || [];
|
||||
});
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadDashboard();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Load dashboard data
|
||||
*/
|
||||
loadDashboard(): 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).getDashboard(user.id).subscribe({
|
||||
next: (data: UserDashboard) => {
|
||||
this.dashboard.set(data);
|
||||
next: (res: UserDashboardResponse) => {
|
||||
this.dashboard.set(res.data);
|
||||
this.isLoading.set(false);
|
||||
},
|
||||
error: (err: any) => {
|
||||
@@ -145,14 +145,14 @@ export class DashboardComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Navigate to quiz setup
|
||||
*/
|
||||
startNewQuiz(): void {
|
||||
this.router.navigate(['/quiz/setup']);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Navigate to category detail
|
||||
*/
|
||||
@@ -161,7 +161,7 @@ export class DashboardComponent implements OnInit {
|
||||
this.router.navigate(['/categories', categoryId]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Navigate to quiz results
|
||||
*/
|
||||
@@ -170,14 +170,14 @@ export class DashboardComponent implements OnInit {
|
||||
this.router.navigate(['/quiz', sessionId, 'results']);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Navigate to full history
|
||||
*/
|
||||
viewAllHistory(): void {
|
||||
this.router.navigate(['/history']);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get color class for accuracy
|
||||
*/
|
||||
@@ -186,7 +186,7 @@ export class DashboardComponent implements OnInit {
|
||||
if (accuracy >= 60) return 'warning';
|
||||
return 'error';
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get score display color
|
||||
*/
|
||||
@@ -196,45 +196,45 @@ export class DashboardComponent implements OnInit {
|
||||
if (percentage >= 60) return 'warning';
|
||||
return 'error';
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Format time 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`;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Format date for display
|
||||
*/
|
||||
formatDate(dateString: string | undefined): string {
|
||||
if (!dateString) return 'Unknown';
|
||||
|
||||
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
|
||||
if (diffDays === 0) return 'Today';
|
||||
if (diffDays === 1) return 'Yesterday';
|
||||
if (diffDays < 7) return `${diffDays} days ago`;
|
||||
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Refresh dashboard data
|
||||
*/
|
||||
|
||||
@@ -1,337 +1,281 @@
|
||||
<div class="quiz-results-container">
|
||||
<!-- Loading State -->
|
||||
@if (isLoading()) {
|
||||
<div class="loading-container">
|
||||
<mat-spinner diameter="50"></mat-spinner>
|
||||
<p>Loading results...</p>
|
||||
</div>
|
||||
<div class="loading-container">
|
||||
<mat-spinner diameter="50"></mat-spinner>
|
||||
<p>Loading results...</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Results Content -->
|
||||
@if (!isLoading() && results()) {
|
||||
<!-- Confetti Animation -->
|
||||
@if (showConfetti()) {
|
||||
<div class="confetti-container">
|
||||
@for (i of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]; track i) {
|
||||
<div class="confetti" [style.left.%]="i * 5" [style.animation-delay.s]="i * 0.1"></div>
|
||||
<!-- Confetti Animation -->
|
||||
@if (showConfetti()) {
|
||||
<div class="confetti-container">
|
||||
@for (i of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]; track i) {
|
||||
<div class="confetti" [style.left.%]="i * 5" [style.animation-delay.s]="i * 0.1"></div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="results-content">
|
||||
<!-- Header Section -->
|
||||
<div class="results-header">
|
||||
<div class="header-icon" [class]="performanceLevel()">
|
||||
@if (performanceLevel() === 'excellent') {
|
||||
<mat-icon>emoji_events</mat-icon>
|
||||
} @else if (performanceLevel() === 'good') {
|
||||
<mat-icon>thumb_up</mat-icon>
|
||||
} @else if (performanceLevel() === 'average') {
|
||||
<mat-icon>trending_up</mat-icon>
|
||||
} @else {
|
||||
<mat-icon>school</mat-icon>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<h1 class="results-title">Quiz Completed!</h1>
|
||||
<p class="performance-message" [class]="performanceLevel()">
|
||||
{{ performanceMessage() }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="results-content">
|
||||
<!-- Header Section -->
|
||||
<div class="results-header">
|
||||
<div class="header-icon" [class]="performanceLevel()">
|
||||
@if (performanceLevel() === 'excellent') {
|
||||
<mat-icon>emoji_events</mat-icon>
|
||||
} @else if (performanceLevel() === 'good') {
|
||||
<mat-icon>thumb_up</mat-icon>
|
||||
} @else if (performanceLevel() === 'average') {
|
||||
<mat-icon>trending_up</mat-icon>
|
||||
} @else {
|
||||
<mat-icon>school</mat-icon>
|
||||
}
|
||||
</div>
|
||||
<h1 class="results-title">Quiz Completed!</h1>
|
||||
<p class="performance-message" [class]="performanceLevel()">
|
||||
{{ performanceMessage() }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Score Card -->
|
||||
<mat-card class="score-card" [class]="performanceLevel()">
|
||||
<mat-card-content>
|
||||
<div class="score-display">
|
||||
<div class="score-circle">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="45" class="score-bg"></circle>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
class="score-progress"
|
||||
[style.stroke-dashoffset]="283 - (283 * scorePercentage() / 100)"
|
||||
></circle>
|
||||
</svg>
|
||||
<div class="score-text">
|
||||
<span class="score-number">{{ scorePercentage() }}%</span>
|
||||
<span class="score-label">Score</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-details">
|
||||
<div class="score-stat">
|
||||
<mat-icon class="stat-icon success">check_circle</mat-icon>
|
||||
<div>
|
||||
<div class="stat-value">{{ results()!.correctAnswers }}</div>
|
||||
<div class="stat-label">Correct</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-stat">
|
||||
<mat-icon class="stat-icon error">cancel</mat-icon>
|
||||
<div>
|
||||
<div class="stat-value">{{ results()!.incorrectAnswers }}</div>
|
||||
<div class="stat-label">Incorrect</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (results()!.skippedAnswers > 0) {
|
||||
<div class="score-stat">
|
||||
<mat-icon class="stat-icon warning">remove_circle</mat-icon>
|
||||
<div>
|
||||
<div class="stat-value">{{ results()!.skippedAnswers }}</div>
|
||||
<div class="stat-label">Skipped</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<!-- Score Card -->
|
||||
<mat-card class="score-card" [class]="performanceLevel()">
|
||||
<mat-card-content>
|
||||
<div class="score-display">
|
||||
<div class="score-circle">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="45" class="score-bg"></circle>
|
||||
<circle cx="50" cy="50" r="45" class="score-progress"
|
||||
[style.stroke-dashoffset]="283 - (283 * scorePercentage() / 100)"></circle>
|
||||
</svg>
|
||||
<div class="score-text">
|
||||
@let score = results()!.summary.score.total> 0 ? (results()!.summary.score.earned /
|
||||
results()!.summary.score.total) * 100 : 0;
|
||||
<span class="score-number">{{score }}%</span>
|
||||
<span class="score-label ">Score</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<div class="quiz-metadata">
|
||||
<div class="metadata-item">
|
||||
<mat-icon>timer</mat-icon>
|
||||
<span>Time: {{ formatTime(results()!.timeSpent) }}</span>
|
||||
</div>
|
||||
<div class="metadata-item">
|
||||
<mat-icon>quiz</mat-icon>
|
||||
<span>{{ results()!.totalQuestions }} Questions</span>
|
||||
</div>
|
||||
<div class="metadata-item">
|
||||
@if (results()!.isPassed) {
|
||||
<mat-icon class="success">verified</mat-icon>
|
||||
<span class="success">Passed</span>
|
||||
} @else {
|
||||
<mat-icon class="error">close</mat-icon>
|
||||
<span class="error">Not Passed</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- Pie Chart -->
|
||||
<mat-card class="chart-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Performance Breakdown</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="pie-chart-container">
|
||||
<div class="pie-chart">
|
||||
<svg viewBox="0 0 200 200">
|
||||
<!-- Correct answers slice -->
|
||||
<circle
|
||||
cx="100"
|
||||
cy="100"
|
||||
r="80"
|
||||
fill="transparent"
|
||||
stroke="#4caf50"
|
||||
stroke-width="40"
|
||||
[style.stroke-dasharray]="chartPercentages().correct * 5.03 + ' 503'"
|
||||
transform="rotate(-90 100 100)"
|
||||
></circle>
|
||||
|
||||
<!-- Incorrect answers slice -->
|
||||
<circle
|
||||
cx="100"
|
||||
cy="100"
|
||||
r="80"
|
||||
fill="transparent"
|
||||
stroke="#f44336"
|
||||
stroke-width="40"
|
||||
[style.stroke-dasharray]="chartPercentages().incorrect * 5.03 + ' 503'"
|
||||
[style.stroke-dashoffset]="-chartPercentages().correct * 5.03"
|
||||
transform="rotate(-90 100 100)"
|
||||
></circle>
|
||||
|
||||
<!-- Skipped answers slice (if any) -->
|
||||
@if (chartPercentages().skipped > 0) {
|
||||
<circle
|
||||
cx="100"
|
||||
cy="100"
|
||||
r="80"
|
||||
fill="transparent"
|
||||
stroke="#ff9800"
|
||||
stroke-width="40"
|
||||
[style.stroke-dasharray]="chartPercentages().skipped * 5.03 + ' 503'"
|
||||
[style.stroke-dashoffset]="-(chartPercentages().correct + chartPercentages().incorrect) * 5.03"
|
||||
transform="rotate(-90 100 100)"
|
||||
></circle>
|
||||
}
|
||||
</svg>
|
||||
<div class="chart-center">
|
||||
<span class="chart-total">{{ results()!.totalQuestions }}</span>
|
||||
<span class="chart-label">Questions</span>
|
||||
<div class="score-details">
|
||||
<div class="score-stat">
|
||||
<mat-icon class="stat-icon success">check_circle</mat-icon>
|
||||
<div>
|
||||
<div class="stat-value">{{ results()!.summary.questions.correct }}</div>
|
||||
<div class="stat-label">Correct</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-legend">
|
||||
<div class="legend-item">
|
||||
<span class="legend-color correct"></span>
|
||||
<span class="legend-label">Correct ({{ chartData().correct }})</span>
|
||||
<div class="score-stat">
|
||||
<mat-icon class="stat-icon error">cancel</mat-icon>
|
||||
<div>
|
||||
<div class="stat-value">{{ results()!.summary.questions.incorrect }}</div>
|
||||
<div class="stat-label">Incorrect</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-color incorrect"></span>
|
||||
<span class="legend-label">Incorrect ({{ chartData().incorrect }})</span>
|
||||
</div>
|
||||
@if (chartData().skipped > 0) {
|
||||
<div class="legend-item">
|
||||
<span class="legend-color skipped"></span>
|
||||
<span class="legend-label">Skipped ({{ chartData().skipped }})</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- Questions Review List -->
|
||||
<mat-card class="questions-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Question Review</mat-card-title>
|
||||
<mat-card-subtitle>Review all questions and answers</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="questions-list">
|
||||
@for (question of results()!.questions; track question.questionId; let i = $index) {
|
||||
<div class="question-item" [class.incorrect]="!question.isCorrect">
|
||||
<div class="question-header">
|
||||
<div class="question-number">
|
||||
<span>{{ i + 1 }}</span>
|
||||
@if (question.isCorrect) {
|
||||
<mat-icon class="status-icon success">check_circle</mat-icon>
|
||||
} @else {
|
||||
<mat-icon class="status-icon error">cancel</mat-icon>
|
||||
}
|
||||
</div>
|
||||
<div class="question-meta">
|
||||
<mat-chip class="type-chip">{{ getQuestionTypeText(question.questionType) }}</mat-chip>
|
||||
<span class="points">{{ question.points }} pts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-text">{{ question.questionText }}</div>
|
||||
|
||||
<div class="answer-section">
|
||||
<div class="answer-row">
|
||||
<span class="answer-label">Your Answer:</span>
|
||||
<span class="answer-value" [class.incorrect]="!question.isCorrect">
|
||||
{{ question.userAnswer || 'Not answered' }}
|
||||
</span>
|
||||
</div>
|
||||
@if (!question.isCorrect) {
|
||||
<div class="answer-row correct">
|
||||
<span class="answer-label">Correct Answer:</span>
|
||||
<span class="answer-value correct">{{ question.correctAnswer }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (question.explanation) {
|
||||
<div class="explanation">
|
||||
<mat-icon>info</mat-icon>
|
||||
<p>{{ question.explanation }}</p>
|
||||
</div>
|
||||
}
|
||||
@if (results()!.summary.questions.unanswered > 0) {
|
||||
<div class="score-stat">
|
||||
<mat-icon class="stat-icon warning">remove_circle</mat-icon>
|
||||
<div>
|
||||
<div class="stat-value">{{ results()!.summary.questions.unanswered }}</div>
|
||||
<div class="stat-label">Skipped</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="retakeQuiz()"
|
||||
class="action-btn"
|
||||
>
|
||||
<mat-icon>refresh</mat-icon>
|
||||
Retake Quiz
|
||||
</button>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
@if (hasIncorrectAnswers()) {
|
||||
<button
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
(click)="reviewIncorrect()"
|
||||
class="action-btn"
|
||||
>
|
||||
<mat-icon>rate_review</mat-icon>
|
||||
Review Incorrect Answers
|
||||
</button>
|
||||
}
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
(click)="goToDashboard()"
|
||||
class="action-btn"
|
||||
>
|
||||
<mat-icon>dashboard</mat-icon>
|
||||
Return to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Social Share Section -->
|
||||
<mat-card class="share-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Share Your Results</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="share-buttons">
|
||||
<button
|
||||
mat-mini-fab
|
||||
color="primary"
|
||||
(click)="shareResults('twitter')"
|
||||
matTooltip="Share on Twitter"
|
||||
class="share-btn twitter"
|
||||
>
|
||||
<mat-icon>
|
||||
<svg viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="currentColor" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.70,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</button>
|
||||
|
||||
<button
|
||||
mat-mini-fab
|
||||
color="primary"
|
||||
(click)="shareResults('linkedin')"
|
||||
matTooltip="Share on LinkedIn"
|
||||
class="share-btn linkedin"
|
||||
>
|
||||
<mat-icon>
|
||||
<svg viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="currentColor" d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</button>
|
||||
|
||||
<button
|
||||
mat-mini-fab
|
||||
color="primary"
|
||||
(click)="shareResults('facebook')"
|
||||
matTooltip="Share on Facebook"
|
||||
class="share-btn facebook"
|
||||
>
|
||||
<mat-icon>
|
||||
<svg viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="currentColor" d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" />
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</button>
|
||||
|
||||
<button
|
||||
mat-mini-fab
|
||||
(click)="copyLink()"
|
||||
matTooltip="Copy Link"
|
||||
class="share-btn copy"
|
||||
>
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
<div class="quiz-metadata">
|
||||
<div class="metadata-item">
|
||||
<mat-icon>timer</mat-icon>
|
||||
<span>Time: {{ formatTime(results()!.session.timeSpent) }}</span>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<div class="metadata-item">
|
||||
<mat-icon>quiz</mat-icon>
|
||||
<span>{{ results()!!.summary.questions.total }} Questions</span>
|
||||
</div>
|
||||
<div class="metadata-item">
|
||||
@if (results()!.summary.isPassed) {
|
||||
<mat-icon class="success">verified</mat-icon>
|
||||
<span class="success">Passed</span>
|
||||
} @else {
|
||||
<mat-icon class="error">close</mat-icon>
|
||||
<span class="error">Not Passed</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- Pie Chart -->
|
||||
<mat-card class="chart-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Performance Breakdown</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="pie-chart-container">
|
||||
<div class="pie-chart">
|
||||
<svg viewBox="0 0 200 200">
|
||||
<!-- Correct answers slice -->
|
||||
<circle cx="100" cy="100" r="80" fill="transparent" stroke="#4caf50" stroke-width="40"
|
||||
[style.stroke-dasharray]="chartPercentages().correct * 5.03 + ' 503'" transform="rotate(-90 100 100)">
|
||||
</circle>
|
||||
|
||||
<!-- Incorrect answers slice -->
|
||||
<circle cx="100" cy="100" r="80" fill="transparent" stroke="#f44336" stroke-width="40"
|
||||
[style.stroke-dasharray]="chartPercentages().incorrect * 5.03 + ' 503'"
|
||||
[style.stroke-dashoffset]="-chartPercentages().correct * 5.03" transform="rotate(-90 100 100)"></circle>
|
||||
|
||||
<!-- Skipped answers slice (if any) -->
|
||||
@if (chartPercentages().skipped > 0) {
|
||||
<circle cx="100" cy="100" r="80" fill="transparent" stroke="#ff9800" stroke-width="40"
|
||||
[style.stroke-dasharray]="chartPercentages().skipped * 5.03 + ' 503'"
|
||||
[style.stroke-dashoffset]="-(chartPercentages().correct + chartPercentages().incorrect) * 5.03"
|
||||
transform="rotate(-90 100 100)"></circle>
|
||||
}
|
||||
</svg>
|
||||
<div class="chart-center">
|
||||
<span class="chart-total">{{ results()!.summary.questions.total }}</span>
|
||||
<span class="chart-label">Questions</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-legend">
|
||||
<div class="legend-item">
|
||||
<span class="legend-color correct"></span>
|
||||
<span class="legend-label">Correct ({{ chartData().correct }})</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-color incorrect"></span>
|
||||
<span class="legend-label">Incorrect ({{ chartData().incorrect }})</span>
|
||||
</div>
|
||||
@if (chartData().skipped > 0) {
|
||||
<div class="legend-item">
|
||||
<span class="legend-color skipped"></span>
|
||||
<span class="legend-label">Skipped ({{ chartData().skipped }})</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- Questions Review List -->
|
||||
<mat-card class="questions-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Question Review</mat-card-title>
|
||||
<mat-card-subtitle>Review all questions and answers</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="questions-list">
|
||||
@for (question of results()!.questions; track question.questionId; let i = $index) {
|
||||
<div class="question-item" [class.incorrect]="!question.isCorrect">
|
||||
<div class="question-header">
|
||||
<div class="question-number">
|
||||
<span>{{ i + 1 }}</span>
|
||||
@if (question.isCorrect) {
|
||||
<mat-icon class="status-icon success">check_circle</mat-icon>
|
||||
} @else {
|
||||
<mat-icon class="status-icon error">cancel</mat-icon>
|
||||
}
|
||||
</div>
|
||||
<div class="question-meta">
|
||||
<mat-chip class="type-chip">{{ getQuestionTypeText(question.questionType) }}</mat-chip>
|
||||
<span class="points">{{ question.points }} pts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-text">{{ question.questionText }}</div>
|
||||
|
||||
<div class="answer-section">
|
||||
<div class="answer-row">
|
||||
<span class="answer-label">Your Answer:</span>
|
||||
<span class="answer-value" [class.incorrect]="!question.isCorrect">
|
||||
{{ question.userAnswer || 'Not answered' }}
|
||||
</span>
|
||||
</div>
|
||||
@if (!question.isCorrect) {
|
||||
<div class="answer-row correct">
|
||||
<span class="answer-label">Correct Answer:</span>
|
||||
<span class="answer-value correct">{{ question.correctAnswer }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (question.explanation) {
|
||||
<div class="explanation">
|
||||
<mat-icon>info</mat-icon>
|
||||
<p>{{ question.explanation }}</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<button mat-raised-button color="primary" (click)="retakeQuiz()" class="action-btn">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
Retake Quiz
|
||||
</button>
|
||||
|
||||
@if (hasIncorrectAnswers()) {
|
||||
<button mat-raised-button color="accent" (click)="reviewIncorrect()" class="action-btn">
|
||||
<mat-icon>rate_review</mat-icon>
|
||||
Review Incorrect Answers
|
||||
</button>
|
||||
}
|
||||
|
||||
<button mat-raised-button (click)="goToDashboard()" class="action-btn">
|
||||
<mat-icon>dashboard</mat-icon>
|
||||
Return to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Social Share Section -->
|
||||
<mat-card class="share-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Share Your Results</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="share-buttons">
|
||||
<button mat-mini-fab color="primary" (click)="shareResults('twitter')" matTooltip="Share on Twitter"
|
||||
class="share-btn twitter">
|
||||
<mat-icon>
|
||||
<svg viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="currentColor"
|
||||
d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.70,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-mini-fab color="primary" (click)="shareResults('linkedin')" matTooltip="Share on LinkedIn"
|
||||
class="share-btn linkedin">
|
||||
<mat-icon>
|
||||
<svg viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="currentColor"
|
||||
d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-mini-fab color="primary" (click)="shareResults('facebook')" matTooltip="Share on Facebook"
|
||||
class="share-btn facebook">
|
||||
<mat-icon>
|
||||
<svg viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="currentColor"
|
||||
d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" />
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-mini-fab (click)="copyLink()" matTooltip="Copy Link" class="share-btn copy">
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,6 +88,7 @@
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@@ -172,6 +173,7 @@
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
@@ -252,6 +254,7 @@
|
||||
}
|
||||
|
||||
.score-label {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
@@ -349,6 +352,7 @@
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@@ -671,4 +675,4 @@
|
||||
.explanation {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -42,7 +42,9 @@ export class QuizResultsComponent implements OnInit, OnDestroy {
|
||||
// Computed values
|
||||
readonly scorePercentage = computed(() => {
|
||||
const res = this.results();
|
||||
return res?.percentage ?? 0;
|
||||
console.log(res);
|
||||
|
||||
return res?.summary.score.percentage ?? 0;
|
||||
});
|
||||
|
||||
readonly performanceLevel = computed(() => {
|
||||
@@ -77,20 +79,20 @@ export class QuizResultsComponent implements OnInit, OnDestroy {
|
||||
readonly chartData = computed(() => {
|
||||
const res = this.results();
|
||||
if (!res) return { correct: 0, incorrect: 0, skipped: 0 };
|
||||
|
||||
|
||||
return {
|
||||
correct: res.correctAnswers,
|
||||
incorrect: res.incorrectAnswers,
|
||||
skipped: res.skippedAnswers
|
||||
correct: res.summary.questions.correct,
|
||||
incorrect: res.summary.questions.incorrect,
|
||||
skipped: res.summary.questions.unanswered
|
||||
};
|
||||
});
|
||||
|
||||
readonly chartPercentages = computed(() => {
|
||||
const data = this.chartData();
|
||||
const total = data.correct + data.incorrect + data.skipped;
|
||||
|
||||
|
||||
if (total === 0) return { correct: 0, incorrect: 0, skipped: 0 };
|
||||
|
||||
|
||||
return {
|
||||
correct: Math.round((data.correct / total) * 100),
|
||||
incorrect: Math.round((data.incorrect / total) * 100),
|
||||
@@ -161,10 +163,10 @@ export class QuizResultsComponent implements OnInit, OnDestroy {
|
||||
*/
|
||||
formatTime(seconds: number): string {
|
||||
if (!seconds) return '0s';
|
||||
|
||||
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
|
||||
|
||||
if (minutes > 0) {
|
||||
return `${minutes}m ${secs}s`;
|
||||
}
|
||||
@@ -245,7 +247,7 @@ export class QuizResultsComponent implements OnInit, OnDestroy {
|
||||
const results = this.results();
|
||||
if (!results) return;
|
||||
|
||||
const text = `I scored ${results.percentage}% on my quiz! 🎯`;
|
||||
const text = `I scored ${results.summary.score.percentage}% on my quiz! 🎯`;
|
||||
const url = window.location.href;
|
||||
|
||||
let shareUrl = '';
|
||||
|
||||
@@ -65,7 +65,9 @@
|
||||
<mat-icon>emoji_events</mat-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-value">{{ scorePercentage() }}%</div>
|
||||
@let score = results()!.summary.score.total> 0 ? (results()!.summary.score.earned /
|
||||
results()!.summary.score.total) * 100 : 0;
|
||||
<div class="card-value">{{ score }}%</div>
|
||||
<div class="card-label">Score</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
@@ -87,14 +87,6 @@ export class QuizReviewComponent implements OnInit, OnDestroy {
|
||||
this.allQuestions().filter(q => !q.isCorrect).length
|
||||
);
|
||||
|
||||
readonly scorePercentage = computed(() => {
|
||||
const res = this.results();
|
||||
if (res && 'summary' in res) {
|
||||
return res.summary.score.percentage;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
readonly sessionInfo = computed(() => {
|
||||
const res = this.results();
|
||||
if (res && 'session' in res) {
|
||||
|
||||
Reference in New Issue
Block a user