Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Commits on Source (15)
Hide whitespace changes
Inline Side-by-side
Showing
with 175 additions and 104 deletions
src/app/modules/community/list-quiz/list-quiz.component.ts
View file @ d3386cfb
......@@ -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,
});
});
},
});
}
......
src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
View file @ d3386cfb
......@@ -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
}
src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
View file @ d3386cfb
......@@ -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>
......
src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
View file @ d3386cfb
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);
}
}
src/app/modules/home/home-page/home-page.component.html
View file @ d3386cfb
......@@ -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>
src/app/modules/home/play-quiz/play-quiz.component.html
View file @ d3386cfb
<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>
src/app/modules/home/play-quiz/play-quiz.component.ts
View file @ d3386cfb
......@@ -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({
......
src/app/modules/profile/profile-info/profile-info.component.css
View file @ d3386cfb
......@@ -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
}
src/app/modules/profile/profile-info/profile-info.component.html
View file @ d3386cfb
<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>
src/app/modules/profile/profile-info/profile-info.component.ts
View file @ d3386cfb
......@@ -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;
});
}
......
src/app/modules/profile/sign/sign.component.html
View file @ d3386cfb
<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>
src/app/modules/profile/sign/sign.component.ts
View file @ d3386cfb
......@@ -90,6 +90,7 @@ export class SignComponent implements OnInit {
next: (data: any) => {
if (data['success']) {
this.router.navigate(['/profile']);
window.location.reload();
}
},
});
......
src/app/shared/header/header.component.html
View file @ d3386cfb
<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>