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

Redesign the Whole Quiz Page | Enhance the Quiz Page | Issue #345 #477

Merged
merged 2 commits into from
Oct 30, 2024
Merged

Redesign the Whole Quiz Page | Enhance the Quiz Page | Issue #345 #477

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd5b800
Enhance the Quiz Page
Shariq2003 Oct 30, 2024
d590365
Fix Conflicts
Shariq2003 Oct 30, 2024
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
209 changes: 145 additions & 64 deletions src/app/components/quiz/quiz.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,141 +1,222 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

body,
button {
font-family: Arial, sans-serif;
}

.montserrat-unique {
font-family: "Montserrat", sans-serif;
font-weight: 500; /* Medium weight for specific elements */
font-style: normal; /* Normal font style */
font-weight: 500;
}

.quiz-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;

max-width: 800px; /* Maximum width for the quiz */
padding: 20px;
background-color: #f9f9f9; /* Light background color for the quiz */
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
position: relative; /* Ensure the container is positioned correctly */
margin-top: 100px; /* Move the quiz container down */

margin-top: 8rem;
margin: 8rem auto;
max-width: 800px;
padding: 2rem;
font-family: "Roboto", sans-serif;
background-color: #13eea9;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* For WebKit browsers (Chrome, Safari) */

/* Scrollbar styling */
::-webkit-scrollbar {
width: 10px; /* Width of the scrollbar */
width: 10px;
}

::-webkit-scrollbar-track {
background: #f0f0f0; /* Background of the track */
background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ff66b2, #8a2be2); /* Pink to Violet gradient */
border-radius: 10px; /* Rounded corners for the scrollbar thumb */
background: linear-gradient(180deg, #ff66b2, #8a2be2);
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #ff99cc, #9b59b6); /* Lighter gradient on hover */
background: linear-gradient(180deg, #ff99cc, #9b59b6);
}

/* For Firefox */
html {
scrollbar-width: thin; /* Makes the scrollbar thin */
scrollbar-color: #ff66b2 #f0f0f0; /* Color of the thumb and track */
scrollbar-width: thin;
scrollbar-color: #ff66b2 #f0f0f0;
}

/* Header styling */
header {
text-align: center;
margin-bottom: 2rem;
}

header h1 {
font-size: 1.8rem;
color: #333;
margin-bottom: 1rem;
}

.header {
margin-bottom: 20px; /* Space below the header */
.progress-bar {
height: 6px;
background-color: #007bff;
border-radius: 4px;
margin-top: 8px;
}

.difficulty-container {
text-align: center; /* Center text in difficulty section */
margin-bottom: 20px; /* Space below difficulty section */
/* Sidebar styling */
.sidebar {
margin-top: 100px;
width: 250px;
background-color: #333;
color: #fff;
padding: 20px;
}

.difficulty-cards {
display: flex;
justify-content: space-around; /* Space between cards */
.sidebar h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #ff66b2;
}

.difficulty-card {
width: 200px; /* Fixed width for each card */
background-color: #ffffff; /* White background for difficulty cards */
border: 1px solid #ccc; /* Border around the card */
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for cards */
cursor: pointer; /* Pointer cursor on hover */
transition: transform 0.2s; /* Transition effect for hover */
.sidebar ul {
list-style: none;
padding: 0;
}

.difficulty-card:hover {
transform: scale(1.05); /* Slightly scale card on hover */
.sidebar li {
padding: 12px;
cursor: pointer;
transition: background-color 0.3s;
border-radius: 4px;
}

.question-card {
width: 100%; /* Full width for the question card */
background-color: #ffffff; /* White background for the question card */
border: 1px solid #ccc; /* Border around the card */
border-radius: 8px;
.sidebar li:hover {
background-color: #555;
}

/* Main content styling */
.quiz-layout {
display: flex;
min-height: 100vh;
}

.quiz-content {
flex: 1;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px; /* Space below the question card */
background-color: #f9f9f9;
}

.question-section,
.results-section {
margin-top: 100px;
}

.question-text {
font-size: 18px;
margin-bottom: 20px;
}

/* Options styling */
.options {
display: flex;
flex-direction: column; /* Stack options vertically */
gap: 10px; /* Space between options */
flex-direction: column;
gap: 10px;
margin: 20px;
}

button {
width: 100%; /* Make buttons full width of option card */
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff; /* Blue button color */
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0056b3; /* Darker blue on hover */
background-color: #0056b3;
}

button.selected {
background-color: #28a745; /* Green color for selected option */
background-color: #28a745;
}

button:disabled {
background-color: #ccc; /* Gray for disabled buttons */
cursor: not-allowed; /* Change cursor style for disabled buttons */
background-color: #ccc;
cursor: not-allowed;
}

.action-buttons {
margin-top: 20px; /* Space above action buttons */
/* Results section styling */
.results-section {
margin-top: 100px;
padding: 20px;
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.results-section h2 {
font-size: 1.8rem;
color: #333;
margin-bottom: 1rem;
text-align: center;
}

.results-summary {
margin-top: 20px;
font-size: 1.2rem;
color: #555;
text-align: center;
}

.score-bar {
height: 10px; /* Height of the score bar */
background-color: #007bff; /* Color of the score bar */
border-radius: 5px; /* Rounded corners for the score bar */
.score {
font-size: 2rem;
color: #28a745;
margin: 10px 0;
}

.feedback {
font-size: 1.2rem;
color: #007bff;
text-align: center;
margin: 10px 0;
}

/* Action buttons */
.results-action {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}

.results-action button {
padding: 10px 20px;
font-size: 1rem;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}

.results-action button:hover {
background-color: #0056b3;
}

.results-action button:disabled {
background-color: #ccc;
cursor: not-allowed;
}

/* No content found styling */
.no-found {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
85 changes: 36 additions & 49 deletions src/app/components/quiz/quiz.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,48 @@
<app-navbar></app-navbar>

<div class="quiz-container">
<header>
<h1>Ultimate Graph Theory Challenge</h1>
<div class="progress-bar" [style.width.%]="progressPercentage"></div>
</header>
<div class="quiz-layout">
<!-- Sidebar for Difficulty Levels -->
<aside class="sidebar">
<h2>Quiz Levels</h2>
<ul>
<li (click)="startQuiz('easy')">Easy</li>
<li (click)="startQuiz('medium')">Medium</li>
<li (click)="startQuiz('difficult')">Difficult</li>
</ul>
</aside>

<!-- Difficulty Selection Section -->
<div *ngIf="!quizStarted" class="difficulty-container">
<h2>Select Difficulty Level</h2>
<div class="difficulty-cards">
<div class="difficulty-card" (click)="startQuiz('easy')">
<h3>Easy</h3>
<button>Start Quiz</button>
</div>
<div class="difficulty-card" (click)="startQuiz('medium')">
<h3>Medium</h3>
<button>Start Quiz</button>
</div>
<div class="difficulty-card" (click)="startQuiz('difficult')">
<h3>Difficult</h3>
<button>Start Quiz</button>
</div>
</div>
</div>
<!-- Main Quiz Content -->
<main class="quiz-content">
<header *ngIf="quizStarted">
<h1>Ultimate Graph Theory Challenge</h1>
<div class="progress-bar" [style.width.%]="progressPercentage"></div>
</header>

<!-- Quiz Questions Section -->
<main *ngIf="quizStarted && !quizCompleted" class="question-container">
<div class="question-card" [@cardAnimation]="animationState">
<h2>Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}</h2>
<p class="question-text">{{ currentQuestion.text }}</p>
<!-- Quiz Questions -->
<section *ngIf="quizStarted && questions.length > 0 && !quizCompleted" class="question-section">
<h2 class="heading">Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}</h2>
<p>{{ currentQuestion.text }}</p>

<div class="options">
<button *ngFor="let option of currentQuestion.options; let i = index"
(click)="selectAnswer(i)"
[class.selected]="selectedAnswerIndex === i"
[disabled]="answerSubmitted">
<button *ngFor="let option of currentQuestion.options; let i = index" (click)="selectAnswer(i)"
[class.selected]="selectedAnswerIndex === i" [disabled]="answerSubmitted">
{{ option }}
</button>
</div>

<div class="action-buttons">
<button (click)="submitAnswer()" [disabled]="selectedAnswerIndex === null || answerSubmitted">Submit Answer</button>
</div>
</div>
</main>
<button (click)="submitAnswer()" [disabled]="selectedAnswerIndex === null || answerSubmitted">Submit
Answer</button>
</section>

<div *ngIf="quizCompleted" class="results-container" [@fadeInAnimation]>
<h2>Quiz Completed!</h2>
<p>Your score: {{ score }} out of {{ questions.length }}</p>
<div class="score-breakdown">
<div class="score-bar" [style.width.%]="(score / questions.length) * 100"></div>
</div>
<button (click)="restartQuiz()">Retake Quiz</button>
</div>
<section *ngIf="questions.length <= 0 " class="no-found">
<h2>No Questions Available For This Level</h2>
</section>

<footer>
<p>Created by Graph Theory Enthusiasts</p>
</footer>
</div>
<!-- Quiz Results -->
<section *ngIf="quizCompleted" class="results-section">
<h2>Quiz Completed!</h2>
<p>Your score: {{ score }} out of {{ questions.length }}</p>
<button (click)="restartQuiz()">Retake Quiz</button>
</section>
</main>
</div>
Loading
Loading