add changes
This commit is contained in:
AD2025
201
frontend/src/app/features/quiz/quiz-setup/quiz-setup.html
Normal file
201
frontend/src/app/features/quiz/quiz-setup/quiz-setup.html
Normal file
@@ -0,0 +1,201 @@
|
||||
<div class="quiz-setup-container">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<div class="header-content">
|
||||
<div class="header-title">
|
||||
<mat-icon class="header-icon">play_circle</mat-icon>
|
||||
<h1>Start New Quiz</h1>
|
||||
</div>
|
||||
<p class="subtitle">Configure your quiz settings and challenge yourself!</p>
|
||||
</div>
|
||||
</mat-card-header>
|
||||
|
||||
<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>
|
||||
}
|
||||
|
||||
<!-- Loading State -->
|
||||
@if (isLoadingCategories()) {
|
||||
<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>
|
||||
|
||||
@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>
|
||||
|
||||
<!-- 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>
|
||||
</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]="!canStartQuiz()">
|
||||
@if (isStartingQuiz()) {
|
||||
<mat-spinner diameter="20"></mat-spinner>
|
||||
<span>Starting...</span>
|
||||
} @else {
|
||||
<mat-icon>play_arrow</mat-icon>
|
||||
<span>Start Quiz</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
Reference in New Issue
Block a user