Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Interatic Quiz page #187

Merged
merged 1 commit into from
Oct 14, 2024
Merged

Add Interatic Quiz page #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/app/app.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand Down Expand Up @@ -42,6 +43,10 @@ export const routes: Routes = [
path: 'faq',
component: FaqComponent,
},
{
path: 'quiz',
component: QuizComponent,
},
{
path: '**',
redirectTo: '',
Expand Down
71 changes: 45 additions & 26 deletions src/app/components/header/header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
<a class="nav-item" href="#algorithms" data-i18n="algorithms">Algorithms</a>
<a class="nav-item" href="#visualizer" data-i18n="visualizer">Visualizer</a>
<a class="nav-item" href="/faq" data-i18n="faq">FAQ</a>
<a class="nav-item" href="/quiz" data-i18n="faq">quiz</a>
<div class="nav-item" class="language-selector">
<select id="languageSelect">
<option value="en">English</option>
Expand All @@ -39,7 +40,8 @@
<option value="es">Español (Spanish)</option>
</select>
</div>
<a class="nav-item" href="https://github.com/sakeel-103/DFS-BFS-Graph-Travers" target="_blank" class="github-link">
<a class="nav-item" href="https://github.com/sakeel-103/DFS-BFS-Graph-Travers" target="_blank"
class="github-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
Expand All @@ -53,9 +55,11 @@
<div class="container">
<div class="hero-content">
<h1 data-i18n="hero-title">Unlock the Power of Graph Algorithms</h1>
<p data-i18n="hero-description">Dive into the fascinating world of graph theory and master advanced traversal techniques with GraphExplorer
<p data-i18n="hero-description">Dive into the fascinating world of graph theory and master advanced traversal
techniques with GraphExplorer
Pro.</p>
<a href="#features" [routerLink]="['/signup']" class="cta-button" data-i18n="start-exploring">Start Exploring</a>
<a href="#features" [routerLink]="['/signup']" class="cta-button" data-i18n="start-exploring">Start
Exploring</a>
</div>
</div>
<div class="graph-visual">
Expand All @@ -76,22 +80,26 @@ <h2 data-i18n="why-choose">Why Choose GraphExplorer Pro?</h2>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3 data-i18n="interactive-visualizations">Interactive Visualizations</h3>
<p data-i18n="interactive-visualizations-desc">Experience graph algorithms in action with our cutting-edge visualization tools.</p>
<p data-i18n="interactive-visualizations-desc">Experience graph algorithms in action with our cutting-edge
visualization tools.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🧠</div>
<h3 data-i18n="in-depth-learning">In-Depth Learning</h3>
<p data-i18n="in-depth-learning-desc">Gain a deep understanding of graph theory and its practical applications.</p>
<p data-i18n="in-depth-learning-desc">Gain a deep understanding of graph theory and its practical
applications.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3 data-i18n="performance-optimization">Performance Optimization</h3>
<p data-i18n="performance-optimization-desc">Learn how to implement and optimize graph algorithms for real-world scenarios.</p>
<p data-i18n="performance-optimization-desc">Learn how to implement and optimize graph algorithms for
real-world scenarios.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌐</div>
<h3 data-i18n="real-world-applications">Real-World Applications</h3>
<p data-i18n="real-world-applications-desc">Discover how graph algorithms power social networks, GPS systems, and more.</p>
<p data-i18n="real-world-applications-desc">Discover how graph algorithms power social networks, GPS systems,
and more.</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -136,7 +144,8 @@ <h2 data-i18n="master-key-algorithms">Master Key Graph Algorithms</h2>
<div class="tab-content">
<div id="dfs-content">
<h3 data-i18n="dfs-full">Depth-First Search (DFS)</h3>
<p data-i18n="dfs-description">DFS is a graph traversal algorithm that explores as far as possible along each branch before backtracking. It's excellent for:</p>
<p data-i18n="dfs-description">DFS is a graph traversal algorithm that explores as far as possible along each
branch before backtracking. It's excellent for:</p>
<ul>
<li data-i18n="dfs-use-1">Detecting cycles in graphs</li>
<li data-i18n="dfs-use-2">Pathfinding in mazes</li>
Expand All @@ -150,7 +159,8 @@ <h3 data-i18n="dfs-full">Depth-First Search (DFS)</h3>
<section id="visualizer" class="visualizer">
<div class="container">
<h2 data-i18n="interactive-graph-visualizer">Interactive Graph Visualizer</h2>
<p data-i18n="visualizer-description">See graph algorithms in action! Experiment with different graph structures and watch as the algorithms traverse them step by step.</p>
<p data-i18n="visualizer-description">See graph algorithms in action! Experiment with different graph structures
and watch as the algorithms traverse them step by step.</p>
<div class="graph-container">
<div class="graph-node" style="top: 20%; left: 20%;">1</div>
<div class="graph-node" style="top: 60%; left: 30%;">2</div>
Expand Down Expand Up @@ -187,13 +197,13 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
<form id="contactForm">
<label for="name" data-i18n="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email" data-i18n="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message" data-i18n="message">Message:</label>
<textarea id="message" name="message" required></textarea>

<button type="submit" data-i18n="send">Send</button>
</form>
</div>
Expand Down Expand Up @@ -262,15 +272,15 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
const btn = document.getElementById("contactUsBtn");
const span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
btn.onclick = function () {
modal.style.display = "block";
}

span.onclick = function() {
span.onclick = function () {
modal.style.display = "none";
}

window.onclick = function(event) {
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
Expand Down Expand Up @@ -539,19 +549,21 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
background-color: rgba(0, 0, 0, 0.8);
overflow: auto;
}

.modal-content {
background-color: #1e2124; /* Dark background color */
background-color: #1e2124;
/* Dark background color */
margin: 10% auto;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 500px;
color: #ffffff; /* White text color */
color: #ffffff;
/* White text color */
}

.close {
Expand Down Expand Up @@ -585,10 +597,12 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
#contactForm textarea {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #36393f; /* Slightly lighter border */
border: 1px solid #36393f;
/* Slightly lighter border */
border-radius: 4px;
font-size: 16px;
background-color: #2f3136; /* Dark input background */
background-color: #2f3136;
/* Dark input background */
color: #ffffff;
}

Expand All @@ -601,7 +615,8 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
#closeConfirmation {
margin-top: 10px;
padding: 12px;
background-color: #36393f; /* Slightly lighter button background */
background-color: #36393f;
/* Slightly lighter button background */
color: white;
border: none;
border-radius: 4px;
Expand All @@ -612,7 +627,8 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>

#contactForm button:hover,
#closeConfirmation:hover {
background-color: #40444b; /* Lighter background on hover */
background-color: #40444b;
/* Lighter background on hover */
}

/* Improved modal title */
Expand All @@ -638,7 +654,8 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
}

.footer {
background-color: #1e2124; /* Dark background color */
background-color: #1e2124;
/* Dark background color */
color: #fff;
padding: 20px 0;
}
Expand All @@ -650,16 +667,18 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
}

.footer-links a {
color: #ffffff; /* White color for all links */
color: #ffffff;
/* White color for all links */
text-decoration: none;
margin: 0 10px;
transition: opacity 0.3s ease;
}

.footer-links a:hover {
opacity: 0.8; /* Slight opacity change on hover for visual feedback */
opacity: 0.8;
/* Slight opacity change on hover for visual feedback */
}
</style>
</body>

</html>
</html>
1 change: 1 addition & 0 deletions src/app/components/navbar/navbar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<a href="/mainIndex" class="dropdown-item">Home</a>
<a href="/aboutUs" class="dropdown-item btn btn-dark me-3">About Us</a>
<a href="/faq" class="dropdown-item btn btn-dark me-3">FAQ</a>
<a href="/quiz" class="dropdown-item btn btn-dark me-3">Quiz</a>
<a href="/" (click)="onLogout()" class="dropdown-item">Logout</a>
</div>
</div>
Expand Down
149 changes: 149 additions & 0 deletions src/app/components/quiz/quiz.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading
Loading