diff --git a/public/check_icon.png b/public/check_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8d23df61f57caae78d0da9634626d1932bc0769
Binary files /dev/null and b/public/check_icon.png differ
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d873d917d79709b5f3de1d6841bb311bc457c738..c919fdb499de20ae235cc20421242334ace8e21b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -33,4 +33,4 @@ const routes: Routes = [
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
-export class AppRoutingModule {}
+export class AppRoutingModule { }
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 329d059d6fe3a55272039dcde35a739239740a33..36abf9a30ae42e2e870b68065b8e64984f91f67c 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -38,4 +38,4 @@ button {
margin: 3vh 0;
font-size: 1.2em;
cursor: pointer;
-}
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2471e3c3062c1d55fab6bbde9c307a8351f30211..978a25397357c5e833c60e894e6fee5fdfb38879 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,2 @@
<app-header *ngIf="!playQuiz"></app-header>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/src/app/modules/custom-quiz/question-form/question-form.component.css b/src/app/modules/custom-quiz/question-form/question-form.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..5220aa443fd256aedff7d26ae7bf3047a2751fbc
--- /dev/null
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.css
@@ -0,0 +1,60 @@
+.form-group {
+ display: flex;
+ flex-direction: row;
+
+ width: 90%;
+ margin-left: 5%;
+}
+
+.answer-group {
+ display: flex;
+ flex-direction: column;
+
+ width: 50%;
+ margin-left: 5%;
+}
+
+input {
+ height: 3vmin;
+ width: auto;
+ margin-top: 0.5vmin;
+ margin-bottom: 0.5vmin;
+ /*padding-left: 1vmin;
+ padding-right: 1vmin; */
+
+ border-radius: 5px;
+ border: 0.25vmin solid #DBDBDB;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
+.check-icon {
+ height: 3vmin;
+ justify-content: center;
+ margin-top: 0.5vmin;
+ margin-bottom: 0.5vmin;
+}
+
+.answer-wrapper {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ margin-left: 0;
+}
+
+.answer-wrapper input {
+ width: calc(100% - 3vmin);
+}
+
+
+label {
+ width: 10%;
+ font-size: 2vmin;
+ margin-top: 0.5vmin;
+ margin-bottom: 0.5vmin;
+}
+
+.btn {
+ margin-top: 1vmin;
+}
\ No newline at end of file
diff --git a/src/app/modules/custom-quiz/question-form/question-form.component.html b/src/app/modules/custom-quiz/question-form/question-form.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..049859d9f5e1d85dc0997ea8303ec3c9b682013c
--- /dev/null
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.html
@@ -0,0 +1,27 @@
+<form [formGroup]="questionForm">
+ <div class="form-group">
+ <label for="quizTitle">Question 1</label> <!-- Change number to have it dynamic -->
+ <div class="answer-group">
+ <input type="text" formControlName="title" id="titleCtrl" placeholder="Write a question..."
+ (blur)="onBlurField('titleCtrl')">
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="quizTitle">Answers</label>
+ <div class="answer-group">
+ <div class="answer-wrapper">
+ <img src="check_icon.png" class="check-icon">
+ <input type="text" formControlName="right" id="rightCtrl" placeholder="Valid answer..."
+ (blur)="onBlurField('rightCtrl')">
+ </div>
+ <div class="answer-wrapper">
+ <img src="check_icon.png" class="check-icon">
+ <input type="text" formControlName="wrong" id="wrongCtrl" placeholder="Write an answer..."
+ (blur)="onBlurField('wrongCtrl')">
+ </div>
+ <!-- Add awnser dynamiquely -->
+ <!-- If nb questions < 4, show this button -->
+ <button class="btn questionsButton" (click)="addAnswer()">ADD AN ANSWER</button>
+ </div>
+ </div>
+</form>
\ No newline at end of file
diff --git a/src/app/modules/custom-quiz/question-form/question-form.component.ts b/src/app/modules/custom-quiz/question-form/question-form.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb0960d8ac71d92c935add82e33e09a5c8dc57af
--- /dev/null
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.ts
@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+
+@Component({
+ selector: 'app-question-form',
+ standalone: true,
+ imports: [ReactiveFormsModule],
+ templateUrl: './question-form.component.html',
+ styleUrl: './question-form.component.css'
+})
+export class QuestionFormComponent {
+ // Controls
+ titleCtrl: any;
+ rightCtrl: any;
+ wrongCtrl: any;
+ questionForm: any;
+ // Data
+ title: any;
+ wrong: any;
+ right: any;
+
+
+ constructor(
+ private fb: FormBuilder
+ ) { }
+
+ ngOnInit(): void {
+ this.titleCtrl = this.fb.control(null, [Validators.required]);
+ this.rightCtrl = this.fb.control(null, [Validators.required]);
+ this.wrongCtrl = this.fb.control(null, [Validators.required]);
+
+ this.questionForm = this.fb.group({
+ title: this.titleCtrl,
+ right: this.rightCtrl,
+ wrong: this.wrongCtrl,
+ });
+ }
+
+ addAnswer() {
+ // ask API to add an answer
+ }
+
+ /* update Quiz Title here */
+ /* Quiz Title will be updated on the unfocus event */
+
+ onBlurField(fieldName: string): void {
+
+ //add database request here
+ }
+
+ isValid(): boolean {
+ console.log(this.questionForm.valid);
+ return this.questionForm.valid;
+ //return true;
+ }
+}
diff --git a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..46ff775a1343ffb210757396784a9821b7d6f910
--- /dev/null
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
@@ -0,0 +1,54 @@
+.content {
+ display: flex;
+ flex-direction: column;
+
+ width: 90%;
+ margin-left: 5%;
+ height: 70%;
+
+ background-color: #F3F3F3;
+
+ border-radius: 10px;
+ border: 0.5vmin solid #DBDBDB;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
+hr {
+ width: 100%;
+ height: 0.5vmin;
+ background-color: #DBDBDB;
+ border: none;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+.form-group {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto auto;
+ width: 96%;
+ margin-left: 2%;
+ margin-top: 0.5%;
+}
+
+.btn-group {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ width: 96%;
+ margin-left: 2%;
+ margin-top: 0.5%;
+}
+
+.error {
+ color: red;
+ font-size: 1.5vmin;
+ margin: 0;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..9bce7f5d6915a28fa926123dfb83198d2f4aee21
--- /dev/null
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
@@ -0,0 +1,38 @@
+<div class="question-marks">
+ <h1>Create your own quiz</h1>
+ <div class="content">
+ <form [formGroup]="quizInfoForm">
+ <div class="form-etape">
+ <div class="form-group">
+ <label for="quizTitle">Quiz Title</label>
+ <input type="text" formControlName="title" id="title" placeholder="Enter quiz title"
+ (blur)="onBlurField('title')">
+ </div>
+
+ <!-- Champ Difficulté -->
+ <div class="form-group">
+ <label for="quizDifficulty">Quiz Difficulty</label>
+ <select class="form-control" formControlName="difficulty" id="quizDifficulty"
+ (change)="onFieldChange('difficulty')">
+ <option value="easy">Easy</option>
+ <option value="medium">Medium</option>
+ <option value="hard">Hard</option>
+ </select>
+ </div>
+ </div>
+ </form>
+ <div class="question-list"><!-- add *ngFor questions as question-->
+ <hr>
+ <app-question-form></app-question-form>
+ <hr>
+ <app-question-form></app-question-form>
+ <!-- add a question here. hide if last question have not it's minimum field completed -->
+ </div>
+ <hr>
+ <p class="error" *ngIf="!questionValid">Missing data. Complete every form before creating a new one</p>
+ <div class="btn-group">
+ <button class="questionsButton" (click)="addQuestion()">+ ADD A QUESTION</button>
+ <button class="questionsButton" (click)="addQuestion()">ADD FROM DATABASE</button>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..40f9938cb5a409e4df38eef99d055766e5e2f6e8
--- /dev/null
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
@@ -0,0 +1,73 @@
+import { Component, QueryList, ViewChildren } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { QuestionFormComponent } from '../question-form/question-form.component';
+
+@Component({
+ selector: 'app-quiz-info',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule, QuestionFormComponent],
+ templateUrl: './quiz-info.component.html',
+ styleUrl: './quiz-info.component.css'
+})
+export class QuizInfoComponent {
+ @ViewChildren(QuestionFormComponent) questionForms!: QueryList<QuestionFormComponent>;
+
+ // Controls
+ titleCtrl: any;
+ difficultyCtrl: any;
+ quizInfoForm: any;
+ // Data
+ title: any;
+ difficulty: any = 'medium'; // medium or database value for difficulty
+ questionValid: boolean = true;
+
+
+ constructor(
+ private fb: FormBuilder
+ ) { }
+
+ ngOnInit(): void {
+ this.titleCtrl = this.fb.control(null, []);
+ this.difficultyCtrl = this.fb.control(this.difficulty, []);
+
+ this.quizInfoForm = this.fb.group({
+ title: this.titleCtrl,
+ difficulty: this.difficultyCtrl,
+ });
+
+ }
+
+ /* update Quiz Title here */
+ /* Quiz Title will be updated on the unfocus event */
+
+ onBlurField(fieldName: string): void {
+ this.title = this.quizInfoForm.get(fieldName).value;
+ if (this.title) {
+ console.log(`${fieldName} lost focus. Current value:`, this.title);
+ }
+ //add database request here
+ }
+
+ /* update Quiz Difficulty here */
+ /* Quiz Difficulty will be updated on the change event */
+ onFieldChange(fieldName: string): void {
+ this.difficulty = this.quizInfoForm.get(fieldName).value;
+ if (this.difficulty) {
+ console.log(`${fieldName} changed. New value:`, this.difficulty);
+ }
+ //add database request here
+ }
+
+ addQuestion() {
+ // check if we can add a question
+ this.questionValid = this.questionForms.toArray().every((form) => form.isValid());
+ if (!this.questionValid) {
+ console.log('Some forms are invalid. Cannot add a new question.');
+ } else {
+ console.log('All forms are valid. Adding a new question...');
+ // Ajoutez votre logique pour ajouter une nouvelle question
+ }
+
+ }
+}
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 7baf58cbc600cd8244bf5bcaef689bfe7eedd408..661c6bd625f1b5d1e5d1c3bf388d759b72a00490 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.css
+++ b/src/app/modules/profile/profile-info/profile-info.component.css
@@ -1,36 +1,3 @@
-.corps {
- height: 100%;
- background-image: url(../../../../../public/BACKGROUND_Home.png);
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
-}
-
-h1,
-h2,
-h3,
-h4,
-p {
- font-family: 'Roboto';
-}
-
-p {
- font-size: 2vmin;
-}
-
-h1 {
- height: 10vh;
- margin: 0;
- margin-left: 7vw;
- font-size: 8vmin;
- /* Your profile */
- font-style: normal;
- font-weight: 500;
- color: #00B3F4;
-
-}
-
.content {
/* Prend tout l'espace restant */
display: grid;
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 20821657754c4f48c12e27d401e7991e917271ec..9ff6a4e5848a8fe515ed9e4c79b03f11c852ee54 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.html
+++ b/src/app/modules/profile/profile-info/profile-info.component.html
@@ -1,4 +1,4 @@
-<div class="corps">
+<div class="question-marks">
<h1>Your profile</h1>
<div class="content">
<h3>Your stats</h3>
diff --git a/src/app/shared/header/header.component.css b/src/app/shared/header/header.component.css
index 9a43c166c933e30ef3397fd3356848655eb886fa..e05c31037381d55e669f4030733c1ee0c3ff5046 100644
--- a/src/app/shared/header/header.component.css
+++ b/src/app/shared/header/header.component.css
@@ -2,6 +2,7 @@
.header {
height: 10vh;
+ /* change the height in src/style.css in main */
width: 100vw;
background-color: #F3F3F3;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
@@ -23,4 +24,4 @@ button {
button:hover {
color: #00B3F4;
-}
+}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 917ccd3114c7d0533efbdaf9c272390b53b77840..28d774ee6212e6f990ce31546f05427e462a32e7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -7,6 +7,46 @@ body {
background-color: #f0f0f0;
}
+main {
+ padding-top: 10vh;
+ /* header size */
+ height: 90vh;
+}
+
+/* font and size */
+h1,
+h2,
+h3,
+h4,
+p {
+ font-family: 'Roboto';
+}
+
+p {
+ font-size: 2vmin;
+}
+
+h1 {
+ height: 10vh;
+ margin: 0;
+ margin-left: 7vw;
+ font-size: 8vmin;
+ /* Your profile */
+ font-style: normal;
+ font-weight: 500;
+ color: #00B3F4;
+
+}
+
+.question-marks {
+ height: 100%;
+ background-image: url(../public/BACKGROUND_Home.png);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+}
+
.cdk-overlay-container:empty {
pointer-events: none;
/* Ignorer les clics et interactions */
@@ -48,6 +88,22 @@ body {
background-color: #B9B9B9;
}
+.questionsButton {
+ width: 11vw;
+ font-size: 1.25vmin;
+
+ background-color: #FEFEFE;
+ border-radius: 5px;
+ border: 0.25vmin solid #DBDBDB;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
+.questionsButton:hover {
+ background-color: #B9B9B9;
+}
+
.inputRecherche {
width: 100%;
height: 5%;