diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 3daa242..393377b 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -8,6 +8,7 @@ import { MainIndexComponent } from './components/main-index/main-index.component import { BfsPageComponent } from './components/bfs-page/bfs-page.component'; import { DfsPageComponent } from './components/dfs-page/dfs-page.component'; import { FaqComponent } from './components/faq/faq.component'; +import { QuizComponent } from './components/quiz/quiz.component'; export const routes: Routes = [ { @@ -42,6 +43,10 @@ export const routes: Routes = [ path: 'faq', component: FaqComponent, }, + { + path: 'quiz', + component: QuizComponent, + }, { path: '**', redirectTo: '', diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index 3bac292..1bfee0b 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -30,6 +30,7 @@ Algorithms Visualizer FAQ + quiz
- + @@ -53,9 +55,11 @@

Unlock the Power of Graph Algorithms

-

Dive into the fascinating world of graph theory and master advanced traversal techniques with GraphExplorer +

Dive into the fascinating world of graph theory and master advanced traversal + techniques with GraphExplorer Pro.

- Start Exploring + Start + Exploring
@@ -76,22 +80,26 @@

Why Choose GraphExplorer Pro?

📊

Interactive Visualizations

-

Experience graph algorithms in action with our cutting-edge visualization tools.

+

Experience graph algorithms in action with our cutting-edge + visualization tools.

🧠

In-Depth Learning

-

Gain a deep understanding of graph theory and its practical applications.

+

Gain a deep understanding of graph theory and its practical + applications.

🚀

Performance Optimization

-

Learn how to implement and optimize graph algorithms for real-world scenarios.

+

Learn how to implement and optimize graph algorithms for + real-world scenarios.

🌐

Real-World Applications

-

Discover how graph algorithms power social networks, GPS systems, and more.

+

Discover how graph algorithms power social networks, GPS systems, + and more.

@@ -136,7 +144,8 @@

Master Key Graph Algorithms

Depth-First Search (DFS)

-

DFS is a graph traversal algorithm that explores as far as possible along each branch before backtracking. It's excellent for:

+

DFS is a graph traversal algorithm that explores as far as possible along each + branch before backtracking. It's excellent for:

diff --git a/src/app/components/quiz/quiz.component.css b/src/app/components/quiz/quiz.component.css new file mode 100644 index 0000000..ca84b29 --- /dev/null +++ b/src/app/components/quiz/quiz.component.css @@ -0,0 +1,149 @@ +.quiz-container { + max-width: 800px; + margin: 0 auto; + margin-top: 8rem; + padding: 2rem; + font-family: "Roboto", sans-serif; + background-color: #f0f4f8; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +header { + text-align: center; + margin-bottom: 2rem; +} + +h1 { + color: #2c3e50; + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.progress-bar { + height: 6px; + background-color: #3498db; + border-radius: 3px; + transition: width 0.3s ease-in-out; +} + +.question-container { + display: flex; + justify-content: center; + align-items: center; + min-height: 400px; +} + +.question-card { + background-color: white; + border-radius: 8px; + padding: 2rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 600px; +} + +h2 { + color: #34495e; + font-size: 1.5rem; + margin-bottom: 1rem; + text-align: center; +} + +.question-text { + font-size: 1.2rem; + color: #2c3e50; + margin-bottom: 1.5rem; + text-align: center; +} + +.question-image { + text-align: center; + margin-bottom: 1.5rem; +} + +.question-image img { + max-width: 100%; + border-radius: 4px; +} + +.options { + display: grid; + gap: 1rem; + margin-bottom: 1.5rem; +} + +button { + background-color: #ecf0f1; + border: 2px solid #bdc3c7; + border-radius: 4px; + padding: 0.8rem 1rem; + font-size: 1rem; + color: #34495e; + transition: all 0.3s ease; + cursor: pointer; +} + +button:hover:not(:disabled) { + background-color: #3498db; + border-color: #3498db; + color: white; +} + +button.selected { + background-color: #2980b9; + border-color: #2980b9; + color: white; +} + +button:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.action-buttons { + display: flex; + justify-content: center; +} + +.results-container { + text-align: center; +} + +.score-breakdown { + background-color: #ecf0f1; + height: 20px; + border-radius: 10px; + margin: 1rem 0; + overflow: hidden; +} + +.score-bar { + height: 100%; + background-color: #2ecc71; + transition: width 0.5s ease-in-out; +} + +footer { + margin-top: 2rem; + text-align: center; + color: #7f8c8d; +} + +@media (max-width: 600px) { + .quiz-container { + padding: 1rem; + } + + h1 { + font-size: 2rem; + } + + .question-card { + padding: 1.5rem; + } + + .options { + grid-template-columns: 1fr; + } +} diff --git a/src/app/components/quiz/quiz.component.html b/src/app/components/quiz/quiz.component.html new file mode 100644 index 0000000..8a58f33 --- /dev/null +++ b/src/app/components/quiz/quiz.component.html @@ -0,0 +1,39 @@ + +
+
+

Ultimate Graph Theory Challenge

+
+
+ +
+
+

Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}

+

{{ currentQuestion.text }}

+ +
+ +
+ +
+ +
+
+
+ +
+

Quiz Completed!

+

Your score: {{ score }} out of {{ questions.length }}

+
+
+
+ +
+ +
+

Created by Graph Theory Enthusiasts

+
+
\ No newline at end of file diff --git a/src/app/components/quiz/quiz.component.spec.ts b/src/app/components/quiz/quiz.component.spec.ts new file mode 100644 index 0000000..be65572 --- /dev/null +++ b/src/app/components/quiz/quiz.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { QuizComponent } from './quiz.component'; + +describe('QuizComponent', () => { + let component: QuizComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [QuizComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(QuizComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/quiz/quiz.component.ts b/src/app/components/quiz/quiz.component.ts new file mode 100644 index 0000000..ba719e9 --- /dev/null +++ b/src/app/components/quiz/quiz.component.ts @@ -0,0 +1,154 @@ +import { Component, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { trigger, state, style, animate, transition } from '@angular/animations'; +import { NavbarComponent } from '../navbar/navbar.component'; + +interface Question { + text: string; + options: string[]; + correctAnswer: number; + image?: string; +} + +@Component({ + selector: 'app-graph-quiz', + standalone: true, + imports: [CommonModule, NavbarComponent], + templateUrl: './quiz.component.html', + styleUrls: ['./quiz.component.css'], + animations: [ + trigger('cardAnimation', [ + state('normal', style({ transform: 'scale(1)' })), + state('flipped', style({ transform: 'scale(1.05)' })), + transition('normal <=> flipped', animate('300ms ease-in-out')), + ]), + trigger('fadeInAnimation', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('500ms', style({ opacity: 1 })), + ]), + ]), + ], +}) +export class QuizComponent implements OnInit { + questions: Question[] = [ + { + text: "In a complete graph with n vertices, how many edges are there?", + options: ["n", "n-1", "n(n-1)/2", "2^n"], + correctAnswer: 2, + image: "assets/complete-graph.svg" + }, + { + text: "What is the chromatic number of a planar graph?", + options: ["2", "3", "4", "5"], + correctAnswer: 2 + }, + { + text: "In which type of graph is every vertex connected to every other vertex?", + options: ["Tree", "Bipartite", "Complete", "Cyclic"], + correctAnswer: 2 + }, + { + text: "What is the maximum number of edges in a simple graph with n vertices?", + options: ["n", "n-1", "n(n-1)/2", "n^2"], + correctAnswer: 2 + }, + { + text: "Which algorithm finds the shortest path between all pairs of vertices in a weighted graph?", + options: ["Dijkstra's", "Floyd-Warshall", "Bellman-Ford", "Prim's"], + correctAnswer: 1 + }, + { + text: "What is the time complexity of depth-first search (DFS) for a graph represented as an adjacency list?", + options: ["O(V)", "O(E)", "O(V + E)", "O(V * E)"], + correctAnswer: 2, + image: "assets/dfs-graph.svg" + }, + { + text: "In a graph with V vertices and E edges, what is the sum of all vertex degrees?", + options: ["V", "E", "2E", "V + E"], + correctAnswer: 2 + }, + { + text: "What is the minimum number of colors needed to color the vertices of any planar graph so that no two adjacent vertices have the same color?", + options: ["2", "3", "4", "5"], + correctAnswer: 2 + }, + { + text: "Which of the following is NOT a property of a tree?", + options: ["Connected", "Acyclic", "Has exactly V-1 edges", "Has a unique path between any two vertices"], + correctAnswer: 3 + }, + { + text: "What is the maximum number of edges in a bipartite graph with m and n vertices in each partition?", + options: ["m + n", "mn", "m * n", "2mn"], + correctAnswer: 1, + image: "assets/bipartite-graph.svg" + } + ]; + + currentQuestionIndex: number = 0; + selectedAnswerIndex: number | null = null; + answerSubmitted: boolean = false; + score: number = 0; + quizCompleted: boolean = false; + animationState: string = 'normal'; + + ngOnInit() { + this.shuffleQuestions(); + } + + get currentQuestion(): Question { + return this.questions[this.currentQuestionIndex]; + } + + get progressPercentage(): number { + return ((this.currentQuestionIndex + 1) / this.questions.length) * 100; + } + + shuffleQuestions() { + for (let i = this.questions.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [this.questions[i], this.questions[j]] = [this.questions[j], this.questions[i]]; + } + } + + selectAnswer(index: number) { + this.selectedAnswerIndex = index; + } + + submitAnswer() { + if (this.selectedAnswerIndex === null) return; + + this.answerSubmitted = true; + this.animationState = 'flipped'; + + if (this.selectedAnswerIndex === this.currentQuestion.correctAnswer) { + this.score++; + } + + setTimeout(() => { + this.animationState = 'normal'; + if (this.currentQuestionIndex < this.questions.length - 1) { + this.nextQuestion(); + } else { + this.quizCompleted = true; + } + }, 1000); + } + + nextQuestion() { + this.currentQuestionIndex++; + this.selectedAnswerIndex = null; + this.answerSubmitted = false; + } + + restartQuiz() { + this.currentQuestionIndex = 0; + this.selectedAnswerIndex = null; + this.answerSubmitted = false; + this.score = 0; + this.quizCompleted = false; + this.shuffleQuestions(); + } +} \ No newline at end of file