diff --git a/src/app/modules/community/list-quiz/list-quiz.component.ts b/src/app/modules/community/list-quiz/list-quiz.component.ts
index 25d83371edcca7fb08e897b8f3116196ce8fb6a4..5665f28c925909f401856e68f2838e3fe6a8f0ba 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.ts
+++ b/src/app/modules/community/list-quiz/list-quiz.component.ts
@@ -9,13 +9,12 @@ import { filter } from 'rxjs';
templateUrl: './list-quiz.component.html',
styleUrls: ['./list-quiz.component.css', '../../../../styles.css'],
})
-
export class ListQuizComponent implements OnInit {
//listQuizDataSource = new MatTableDataSource();
- quizzes: any[] = [] //list from database
- quizList: any[] = []; //list to display
+ quizzes: any[] = []; //list from database
+ quizList: any[] = []; //list to display
//displayedColumns = ['Component'];
- constructor(private communityService: CommunityService) { }
+ constructor(private communityService: CommunityService) {}
codeQuiz: string = '';
skip: number = 0;
take: number = 10;
@@ -41,13 +40,15 @@ export class ListQuizComponent implements OnInit {
//this.listQuizDataSource.data = data;
this.quizzes = data;
this.totalQuiz = data.length;
- this.quizzes.map((quiz => {
+ this.quizzes.map((quiz) => {
this.quizList.push({
- title: !quiz.name ? 'Untitled' : quiz.name,
- content: `${quiz.questions.length} QUESTIONS | ${quiz.difficulty.name} | ${!quiz.author ? 'Anonymous' : quiz.author}`,
- id: quiz.id
- })
- }))
+ title: quiz.id ?? 'NO ID FOUND',
+ content: `${quiz.questions.length} QUESTIONS | ${quiz.difficulty.name} | ${
+ !quiz.author ? 'Anonymous' : quiz.author
+ }`,
+ id: quiz.id,
+ });
+ });
},
});
}
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
index f7b1dca03d661fd3384858760dd47ad3f3db2728..273a926124df7bb9baa91e6dbc4c4b2a5b5be65f 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
@@ -21,11 +21,10 @@
.quiz-info {
display: flex;
flex-direction: column;
- justify-content: space-between;
height: 30vh;
- background-color: #FEFEFE;
+ background-color: #fefefe;
border-radius: 10px;
gap: 1rem;
}
@@ -48,6 +47,6 @@ hr {
padding-left: 15%;
height: 0.5vmin;
margin: 0;
- background-color: #B9B9B9;
+ background-color: #b9b9b9;
border: none;
-}
\ No newline at end of file
+}
diff --git a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
index 46d2adb26882290ab22304fb66da79a1d2f2a8c4..9aa88fe3955aa1be0b02d79900fce41241080a7c 100644
--- a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
+++ b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
@@ -2,24 +2,43 @@
<p class="title">Join a quiz</p>
<form [formGroup]="formGroup">
<div class="form-group">
- <input type="text" formControlName="id" class="inputRecherche" placeholder="code..." />
+ <input
+ type="text"
+ formControlName="id"
+ class="inputRecherche"
+ placeholder="CODE QUIZ"
+ (input)="showQuizInfo()"
+ />
</div>
</form>
- <div class="quiz-info">
+ <div class="quiz-info" *ngIf="quiz">
<div class="quiz-title">
<p class="quiz-info-title">Quiz information</p>
<hr />
</div>
<div class="quiz-info-content">
- <p class="quiz-info-content-value">{{ quiz.category }}</p>
+ <p class="quiz-info-content-value">{{ quiz.category.name }}</p>
</div>
<div class="quiz-info-content">
- <p class="quiz-info-content-title">Difficulty</p>
- <p class="quiz-info-content-value">{{ quiz.difficulty }}</p>
+ <p class="quiz-info-content-title">Difficulty :</p>
+ <p class="quiz-info-content-value">{{ quiz.difficulty.name }}</p>
</div>
<div class="quiz-info-content">
- <p class="quiz-info-content-title">Nb. questions</p>
- <p class="quiz-info-content-value">{{ quiz.nbQuestion }}</p>
+ <p class="quiz-info-content-title">Questions :</p>
+ <p class="quiz-info-content-value">{{ quiz.questionIndex }} / {{ quiz.questionCount }}</p>
+ </div>
+ <div class="quiz-info-content">
+ <p class="quiz-info-content-title">Score :</p>
+ <p class="quiz-info-content-value">{{ quiz.score }}</p>
+ </div>
+ </div>
+ <div class="quiz-info" *ngIf="!quiz">
+ <div class="quiz-title">
+ <p class="quiz-info-title">Quiz information</p>
+ <hr />
+ </div>
+ <div class="quiz-info-content">
+ <p class="quiz-info-content-title">Type a code</p>
</div>
</div>
diff --git a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
index f5325dd6e57ca202bdd77be5b5523ef4630e718f..1ff920d09afa871962d4c10236d96395013e87f4 100644
--- a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
+++ b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
@@ -1,30 +1,37 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
+import { QuestionService } from '../../../../services/question.service';
@Component({
selector: 'app-form-start-quiz',
templateUrl: './form-start-quiz.component.html',
styleUrl: './form-start-quiz.component.css',
})
-
export class FormStartQuizComponent implements OnInit {
quiz: any;
- constructor(private fb: FormBuilder, private router: Router) {}
+ constructor(private fb: FormBuilder, private router: Router, private questionService: QuestionService) {}
formGroup: FormGroup = new FormGroup({});
ngOnInit(): void {
this.formGroup = new FormGroup({
id: this.fb.control('', [Validators.required]),
});
-
- this.quiz = {
- category: "Math",
- nbQuestion: 10,
- difficulty: "easy",
- }
}
playQuiz() {
this.router.navigate(['/play-quiz'], { queryParams: { idQuiz: this.formGroup.value.id } });
}
+
+ showQuizInfo() {
+ const idQuiz = this.formGroup.get('id')?.value;
+ if (idQuiz.length == 6) {
+ this.questionService.getQuiz(idQuiz).subscribe({
+ next: (data: any) => {
+ console.log('data', data);
+ this.quiz = data;
+ },
+ });
+ }
+ console.log(this.formGroup.get('id')?.value);
+ }
}
diff --git a/src/app/modules/home/home-page/home-page.component.html b/src/app/modules/home/home-page/home-page.component.html
index 7071818b16c47a972b976e84daacbc091d53a8e2..c0e5665533948790d3b28999f53e6ac9ec3fceee 100644
--- a/src/app/modules/home/home-page/home-page.component.html
+++ b/src/app/modules/home/home-page/home-page.component.html
@@ -2,13 +2,13 @@
<div class="left-side">
<img src="LogoApp.png" class="logo" />
<div class="navigation-button">
- <button (click)="quickGame()">Quick game :)</button>
- <button (click)="playQuiz()">Play a quiz :)</button>
- <button (click)="myQuiz()">My quizzes :(</button>
+ <button (click)="quickGame()">Quick game</button>
+ <button (click)="playQuiz()">Play a quiz</button>
+ <button (click)="myQuiz()" *ngIf="false">My quizzes</button>
</div>
</div>
<div class="right-side">
<app-form-play-quiz *ngIf="showPlayQuiz"></app-form-play-quiz>
<app-my-quiz *ngIf="showMyQuiz"></app-my-quiz>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/modules/home/play-quiz/play-quiz.component.html b/src/app/modules/home/play-quiz/play-quiz.component.html
index d2897dada9e4c04ce983cc926e74023f5d643eb0..5fdd8c7228b90579981bca6a28b5118a75a590f9 100644
--- a/src/app/modules/home/play-quiz/play-quiz.component.html
+++ b/src/app/modules/home/play-quiz/play-quiz.component.html
@@ -1,6 +1,7 @@
<div *ngIf="!isLoading" class="main">
<div class="header">
<mat-icon (click)="goHome()">home</mat-icon>
+ <p>ID Quiz {{ idQuiz }}</p>
<div class="title">
<h4>Question {{ actualQuestionIndex + 1 }}/{{ quiz.questions.length }}</h4>
<h5>Score : {{ score }}/{{ quiz.questions.length }}</h5>
@@ -13,9 +14,8 @@
</div>
<div class="next-question">
<button *ngIf="showNextQuestion" (click)="nextQuestion()" class="btnNext">
- @if (actualQuestionIndex === this.quiz.questionIndex - 1 + this.quiz.questions.length - 1) { Finish quiz
- }
+ @if (actualQuestionIndex === this.quiz.questionIndex - 1 + this.quiz.questions.length - 1) { Finish quiz }
@else { Next question }
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/modules/home/play-quiz/play-quiz.component.ts b/src/app/modules/home/play-quiz/play-quiz.component.ts
index 71067f09389030b51a29319cfcf2c988eb3c57cc..65d4c37abce20776e4460a9b75df8b92c1c6b1e8 100644
--- a/src/app/modules/home/play-quiz/play-quiz.component.ts
+++ b/src/app/modules/home/play-quiz/play-quiz.component.ts
@@ -15,9 +15,10 @@ export class PlayQuizComponent implements OnInit {
private activatedRoute: ActivatedRoute,
private router: Router,
private cdr: ChangeDetectorRef
- ) { }
+ ) {}
isLoading: boolean = false;
quiz: any = [];
+ idQuiz: any;
actualQuestion: any;
actualQuestionIndex: number = -1;
score: number = 0;
@@ -25,8 +26,8 @@ export class PlayQuizComponent implements OnInit {
ngOnInit(): void {
this.isLoading = true;
this.activatedRoute.queryParams.subscribe((params) => {
- const idQuiz = params['idQuiz'];
- this.questionSerivce.getQuiz(idQuiz).subscribe({
+ this.idQuiz = params['idQuiz'];
+ this.questionSerivce.getQuiz(this.idQuiz).subscribe({
next: (data: any) => {
this.quiz = data;
this.quiz.Question;
@@ -43,7 +44,6 @@ export class PlayQuizComponent implements OnInit {
return textArea.value;
}
-
nextQuestion() {
if (this.actualQuestionIndex === this.quiz.questionIndex - 1 + this.quiz.questions.length - 1) {
Swal.fire({
diff --git a/src/app/modules/profile/profile-info/profile-info.component.css b/src/app/modules/profile/profile-info/profile-info.component.css
index 06003f31508c11e773f26ba2a3c995bd48ea5df0..8f9f3eac819e1bfff34b184857911a3e4ec097c1 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.css
+++ b/src/app/modules/profile/profile-info/profile-info.component.css
@@ -12,6 +12,29 @@
height: 88%;
}
+.top {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ align-items: center;
+ justify-content: space-between;
+
+ width: 100%;
+ height: 10vh;
+}
+
+.top mat-icon {
+ width: auto;
+ height: auto;
+ margin: 0;
+ font-size: 8vmin;
+ padding-right: 5vw;
+ /* Your profile */
+ font-style: normal;
+ font-weight: 500;
+ color: red;
+}
+
.grid {
height: 100%;
}
@@ -38,15 +61,13 @@
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
- border: 1vmin solid #F3F3F3;
+ border: 1vmin solid #f3f3f3;
}
.grid .container {
height: 89%;
}
-
-
.form-group {
width: 100%;
height: 10%;
@@ -56,7 +77,7 @@ hr {
width: 100%;
height: 1vmin;
margin: 0;
- background-color: #F3F3F3;
+ background-color: #f3f3f3;
border: none;
}
@@ -102,15 +123,13 @@ input {
.quiz-button {
text-align: center;
- background-color: #F3F3F3;
+ background-color: #f3f3f3;
border-radius: 8px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
margin: 1%;
width: 95%;
}
-
-
.quiz-button p {
margin: 0;
padding: 1%;
@@ -123,10 +142,9 @@ input {
font-weight: semi-bold;
}
-
img {
width: 10vw;
height: 10vw;
border-radius: 50%;
margin-bottom: 1vw;
-}
\ No newline at end of file
+}
diff --git a/src/app/modules/profile/profile-info/profile-info.component.html b/src/app/modules/profile/profile-info/profile-info.component.html
index 4341fc406d7aae59be2324b0df6b34f7a3a1699c..f81beeefafc689a2842279fdf6c4de73f475c41b 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.html
+++ b/src/app/modules/profile/profile-info/profile-info.component.html
@@ -1,19 +1,25 @@
<div class="question-marks">
- <mat-icon *ngIf="isLogged" (click)="logOut()">logout</mat-icon>
- <h1>Your profile</h1>
+ <div class="top">
+ <h1>Your profile</h1>
+ <mat-icon *ngIf="isLogged" (click)="logOut()">logout</mat-icon>
+ </div>
<div class="content">
<h3>Your stats</h3>
<div class="container">
<div class="grid-profile">
<div class="profile_info">
- <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
- alt="profile picture" />
- <h3>User Name</h3>
+ <img
+ src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
+ alt="profile picture"
+ />
+ <h3>{{ username }}</h3>
</div>
<hr />
<div class="profile_stats">
- <img src="https://img.uxcel.com/tags/key-performance-indicator-kpi-1698250709411-2x.jpg"
- alt="stats" />
+ <img
+ src="https://img.uxcel.com/tags/key-performance-indicator-kpi-1698250709411-2x.jpg"
+ alt="stats"
+ />
</div>
</div>
</div>
@@ -21,24 +27,22 @@
<div *ngIf="!isLogged" class="grid">
<app-sign *ngIf="!isLogged"></app-sign>
</div>
- <div *ngIf="isLogged">
- <h3>Your quizzes</h3>
- <div class="grid">
- <!-- <form [formGroup]="form" (ngSubmit)="submitForm()"> -->
- <form>
- <div class="form-group">
- <input type="text" class="inputRecherche" placeholder="Search a quiz..." />
- </div>
- </form>
- <div class="container">
- <div class="scrollable-list">
- <app-quiz-list [quizList]="quizList"></app-quiz-list>
- </div>
- <div class="new-quiz">
- <button class="blueButton" (click)="newQuiz()">Create a new quiz</button>
- </div>
+ <h3 *ngIf="isLogged">Your quizzes</h3>
+ <div *ngIf="isLogged" class="grid">
+ <!-- <form [formGroup]="form" (ngSubmit)="submitForm()"> -->
+ <form>
+ <div class="form-group">
+ <input type="text" class="inputRecherche" placeholder="Search a quiz..." />
+ </div>
+ </form>
+ <div class="container">
+ <div class="scrollable-list">
+ <app-quiz-list [quizList]="quizList"></app-quiz-list>
+ </div>
+ <div class="new-quiz">
+ <button class="blueButton" (click)="newQuiz()">Create a new quiz</button>
</div>
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/modules/profile/profile-info/profile-info.component.ts b/src/app/modules/profile/profile-info/profile-info.component.ts
index c7212073701a734eb8d3aa18228c1b1b77a8b7a2..0081079c2ef05563c45db29717e53f31f6e2e03e 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.ts
+++ b/src/app/modules/profile/profile-info/profile-info.component.ts
@@ -11,11 +11,12 @@ import { UserService } from '../../../services/user.service';
export class ProfileInfoComponent implements OnInit {
quizList: any[] = [];
isLogged: boolean = false;
+ username: string = 'Anonymous';
constructor(private router: Router, private cookieService: CookieService, private userSerivce: UserService) {}
ngOnInit(): void {
this.quizList = [
- { title: 'Quiz 1', content: 'Quiz 1 Content' },
+ { title: 'Comming soon', content: 'You will soon be able to create your quizzes' },
{ title: 'Quiz 2', content: 'Quiz 2 Content' },
{ title: 'Quiz 3', content: 'Quiz 3 Content' },
{ title: 'Quiz 4', content: 'Quiz 4 Content' },
@@ -31,8 +32,9 @@ export class ProfileInfoComponent implements OnInit {
{ title: 'Quiz 14', content: 'Quiz 14 Content' },
{ title: 'Quiz 15', content: 'Quiz 15 Content' },
];
- this.userSerivce.getMe().subscribe((data) => {
+ this.userSerivce.getMe().subscribe((data: any) => {
this.isLogged = true;
+ this.username = data.username;
});
}
diff --git a/src/app/modules/profile/sign/sign.component.html b/src/app/modules/profile/sign/sign.component.html
index b75216c7af982ecbf3273b05fa9af50f97381e26..8784b03a5e063d21f9eacb574a319eadbcd92ac5 100644
--- a/src/app/modules/profile/sign/sign.component.html
+++ b/src/app/modules/profile/sign/sign.component.html
@@ -1,34 +1,60 @@
<div class="container">
<div class="button-header">
- <button [ngClass]="{active: login}" (click)="showLogin()">LOGIN</button>
- <button [ngClass]="{active: signup}" (click)="showSignup()">SIGNUP</button>
+ <button [ngClass]="{ active: login }" (click)="showLogin()">LOGIN</button>
+ <button [ngClass]="{ active: signup }" (click)="showSignup()">SIGNUP</button>
</div>
<div class="content">
<form [formGroup]="formGroup">
- <input formControlName="email" placeholder="EMAIL" (blur)="checkValidity('email')" [ngClass]="{
- 'wrong': !formGroup.get('email')?.valid && formGroup.get('email')?.touched
- }" class="inputText" />
- <input formControlName="password" placeholder="PASSWORD" (blur)="checkValidity('password')"
+ <input
+ formControlName="email"
+ placeholder="EMAIL"
+ (blur)="checkValidity('email')"
+ [ngClass]="{
+ wrong: !formGroup.get('email')?.valid && formGroup.get('email')?.touched
+ }"
+ class="inputText"
+ />
+ <input
+ formControlName="password"
+ placeholder="PASSWORD"
+ (blur)="checkValidity('password')"
[ngClass]="{ wrong: !formGroup.get('password')?.valid && formGroup.get('password')?.touched }"
- class="inputText" />
- <input formControlName="confirm_password" placeholder="CONFIRM PASSWORD" *ngIf="signup"
- (blur)="checkValidity('confirm_password')" [ngClass]="{
+ class="inputText"
+ type="password"
+ />
+ <input
+ formControlName="confirm_password"
+ placeholder="CONFIRM PASSWORD"
+ *ngIf="signup"
+ (blur)="checkValidity('confirm_password')"
+ [ngClass]="{
wrong:
formGroup.get('confirm_password')?.errors?.['missMatch'] && formGroup.get('confirm_password')?.touched
- }" class="inputText" />
+ }"
+ class="inputText"
+ type="password"
+ />
<div class="error">
<p *ngIf="!formGroup.get('email')?.valid && formGroup.get('email')?.touched" class="error">
- Email is required</p>
- <p *ngIf="!formGroup.get('password')?.valid && formGroup.get('password')?.touched" class="error">8
- character minimum</p>
- <p *ngIf="formGroup.get('confirm_password')?.errors?.['missMatch'] && formGroup.get('confirm_password')?.touched"
- class="error">Passwords do not match</p>
+ Email is required
+ </p>
+ <p *ngIf="!formGroup.get('password')?.valid && formGroup.get('password')?.touched" class="error">
+ 8 character minimum
+ </p>
+ <p
+ *ngIf="formGroup.get('confirm_password')?.errors?.['missMatch'] && formGroup.get('confirm_password')?.touched"
+ class="error"
+ >
+ Passwords do not match
+ </p>
</div>
</form>
- <button [disabled]="!formGroup.valid || (signup && formGroup.get('confirm_password')?.errors?.['missMatch'])"
- (click)="submit()" [ngClass]="{ wrongButton: !formGroup.valid,
- blueButton: formGroup.valid }">
+ <button
+ [disabled]="!formGroup.valid || (signup && formGroup.get('confirm_password')?.errors?.['missMatch'])"
+ (click)="submit()"
+ [ngClass]="{ wrongButton: !formGroup.valid, blueButton: formGroup.valid }"
+ >
@if (login) { LOGIN } @else { SIGNUP }
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/modules/profile/sign/sign.component.ts b/src/app/modules/profile/sign/sign.component.ts
index 4cc90eb955c94b6e7d1f72bd006b41af33a3ef0b..6673b751697eacae0cce5586793969cc9dd2cf72 100644
--- a/src/app/modules/profile/sign/sign.component.ts
+++ b/src/app/modules/profile/sign/sign.component.ts
@@ -90,6 +90,7 @@ export class SignComponent implements OnInit {
next: (data: any) => {
if (data['success']) {
this.router.navigate(['/profile']);
+ window.location.reload();
}
},
});
diff --git a/src/app/shared/header/header.component.html b/src/app/shared/header/header.component.html
index 44a0c3c51cc68c315637d71816cff8d7492d030d..64c84f04c0f502d2753510a5776fa18c5954ab65 100644
--- a/src/app/shared/header/header.component.html
+++ b/src/app/shared/header/header.component.html
@@ -1,11 +1,5 @@
<div class="header">
- <button (click)="navigate('/home')" [ngClass]="{'selected': homePage}">
- Home
- </button>
- <button (click)="navigate('/community')" [ngClass]="{'selected': communityPage}">
- Communauté
- </button>
- <button (click)="navigate('/profile')" [ngClass]="{'selected': profilePage}">
- Profile
- </button>
-</div>
\ No newline at end of file
+ <button (click)="navigate('/home')" [ngClass]="{ selected: homePage }">Home</button>
+ <button (click)="navigate('/community')" [ngClass]="{ selected: communityPage }">Community</button>
+ <button (click)="navigate('/profile')" [ngClass]="{ selected: profilePage }">Profile</button>
+</div>