diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 3daa242..d1ca34f 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -8,6 +8,8 @@ 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'; +import { RealworldComponent } from './components/realworld/realworld.component'; export const routes: Routes = [ { @@ -42,6 +44,14 @@ export const routes: Routes = [ path: 'faq', component: FaqComponent, }, + { + path: 'quiz', + component: QuizComponent, + }, + { + path: 'real-world', + component: RealworldComponent, + }, { 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 diff --git a/src/app/components/realworld/realworld.component.css b/src/app/components/realworld/realworld.component.css new file mode 100644 index 0000000..f824ba2 --- /dev/null +++ b/src/app/components/realworld/realworld.component.css @@ -0,0 +1,152 @@ +:host { + display: block; + background-color: #f0f4f8; + min-height: 100vh; + padding: 2rem 0; +} + +.applications-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +header { + text-align: center; + margin-bottom: 3rem; +} + +h1 { + color: #2c3e50; + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.intro { + color: #34495e; + font-size: 1.2rem; + max-width: 800px; + margin: 0 auto; +} + +.search-filter-container { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 2rem; +} + +.search-input { + width: 100%; + max-width: 500px; + padding: 0.8rem; + font-size: 1rem; + border: 2px solid #bdc3c7; + border-radius: 25px; + margin-bottom: 1rem; + transition: border-color 0.3s ease; +} + +.search-input:focus { + outline: none; + border-color: #3498db; +} + +.category-filter { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.5rem; +} + +.category-filter button { + background-color: #ecf0f1; + border: none; + padding: 0.5rem 1rem; + border-radius: 20px; + cursor: pointer; + transition: background-color 0.3s ease, color 0.3s ease; +} + +.category-filter button.active, +.category-filter button:hover { + background-color: #3498db; + color: white; +} + +.application-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; +} + +.application-card { + background-color: white; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + padding: 1rem; +} + +.application-card:hover { + transform: translateY(-5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); +} + +.card-header { + display: flex; + align-items: center; + margin-bottom: 1rem; +} + +.icon { + font-size: 1.5rem; + margin-right: 0.5rem; +} + +h2 { + margin: 0; + font-size: 1.2rem; +} + +.card-description { + margin-bottom: 1rem; + color: #34495e; +} + +.card-details { + background-color: #f9f9f9; + padding: 1rem; + border-radius: 8px; +} + +.card-details h3 { + margin-top: 0; + color: #2c3e50; +} + +.card-details ul { + padding-left: 1.5rem; + color: #34495e; +} + +footer { + text-align: center; + margin-top: 3rem; + color: #7f8c8d; +} + +@media (max-width: 768px) { + .applications-container { + padding: 0 1rem; + } + + h1 { + font-size: 2rem; + } + + .application-grid { + grid-template-columns: 1fr; + } +} diff --git a/src/app/components/realworld/realworld.component.html b/src/app/components/realworld/realworld.component.html new file mode 100644 index 0000000..1ed249a --- /dev/null +++ b/src/app/components/realworld/realworld.component.html @@ -0,0 +1,38 @@ +
+
+

Real-World Applications of Graphs

+

+ Discover how graph theory shapes various aspects of our world, from technology to biology and beyond. +

+
+ +
+ +
+ +
+
+ +
+
+
+ {{ app.icon }} +

{{ app.title }}

+
+

{{ app.description }}

+
+

Key Applications:

+
    +
  • {{ detail }}
    • +
+
+
+
+ +
+

Explore the power of graphs in solving real-world problems!

+
+
\ No newline at end of file diff --git a/src/app/components/realworld/realworld.component.spec.ts b/src/app/components/realworld/realworld.component.spec.ts new file mode 100644 index 0000000..78631a0 --- /dev/null +++ b/src/app/components/realworld/realworld.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RealworldComponent } from './realworld.component'; + +describe('RealworldComponent', () => { + let component: RealworldComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RealworldComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RealworldComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/realworld/realworld.component.ts b/src/app/components/realworld/realworld.component.ts new file mode 100644 index 0000000..0b04cbc --- /dev/null +++ b/src/app/components/realworld/realworld.component.ts @@ -0,0 +1,87 @@ +import { Component, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +interface Application { + id: number; + title: string; + description: string; + icon: string; + category: string; + details: string[]; +} + +@Component({ + selector: 'app-graph-applications', + standalone: true, + imports: [CommonModule, FormsModule], + templateUrl: './realworld.component.html', + styleUrls: ['./realworld.component.css'] +}) +export class RealworldComponent implements OnInit { + applications: Application[] = [ + { + id: 1, + title: 'Social Networks', + description: 'Graph theory is used to analyze social networks, where nodes represent individuals and edges represent relationships or interactions.', + icon: 'πŸ‘₯', + category: 'Technology', + details: [ + 'Identify influential users or communities', + 'Analyze information spread and viral content', + 'Detect patterns in user behavior and connections' + ] + }, + { + id: 2, + title: 'Transportation Systems', + description: 'Graphs model road networks, flight paths, and public transit systems, optimizing routes and traffic flow.', + icon: 'πŸš—', + category: 'Infrastructure', + details: [ + 'Optimize traffic light timing', + 'Plan efficient public transportation routes', + 'Analyze and improve road network connectivity' + ] + }, + { + id: 3, + title: 'Computer Networks', + description: 'Network topologies and data routing algorithms rely heavily on graph theory concepts.', + icon: 'πŸ’»', + category: 'Technology', + details: [ + 'Design efficient network architectures', + 'Implement routing protocols', + 'Analyze network vulnerability and security' + ] + } + ]; + + categories: string[] = ['All', 'Technology', 'Infrastructure']; + selectedCategory: string = 'All'; + searchTerm: string = ''; + + ngOnInit() { + this.shuffleApplications(); + } + + shuffleApplications() { + for (let i = this.applications.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [this.applications[i], this.applications[j]] = [this.applications[j], this.applications[i]]; + } + } + + filterByCategory(category: string) { + this.selectedCategory = category; + } + + get filteredApplications() { + return this.applications.filter(app => + (this.selectedCategory === 'All' || app.category === this.selectedCategory) && + (app.title.toLowerCase().includes(this.searchTerm.toLowerCase()) || + app.description.toLowerCase().includes(this.searchTerm.toLowerCase())) + ); + } +}