From 634a42fccfdd0b2b53fef236b103b4329a99060b Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Mon, 2 Dec 2024 22:53:30 +0100
Subject: [PATCH 01/11] feat: init creation quiz files

---
 .../custom-quiz/quiz-info/quiz-info.component.css    |  0
 .../custom-quiz/quiz-info/quiz-info.component.html   |  1 +
 .../custom-quiz/quiz-info/quiz-info.component.ts     | 12 ++++++++++++
 3 files changed, 13 insertions(+)
 create mode 100644 src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
 create mode 100644 src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
 create mode 100644 src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts

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 0000000..e69de29
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 0000000..3d73933
--- /dev/null
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
@@ -0,0 +1 @@
+<p>quiz-info works!</p>
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 0000000..1600610
--- /dev/null
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-quiz-info',
+  standalone: true,
+  imports: [],
+  templateUrl: './quiz-info.component.html',
+  styleUrl: './quiz-info.component.css'
+})
+export class QuizInfoComponent {
+
+}
-- 
GitLab


From 99692a456b43ab72a4413f80612ba112e3ea786c Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Mon, 2 Dec 2024 23:11:13 +0100
Subject: [PATCH 02/11] feat: ajout de la route

---
 src/app/app-routing.module.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 397c8fc..14ae1fd 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,6 +4,7 @@ import { HomePageComponent } from './modules/home/home-page/home-page.component'
 import { PlayQuizComponent } from './modules/home/play-quiz/play-quiz.component';
 import { ProfileInfoComponent } from './modules/profile/profile-info/profile-info.component';
 import { ListQuizComponent } from './modules/community/list-quiz/list-quiz.component';
+import { QuizInfoComponent } from './modules/custom-quiz/quiz-info/quiz-info.component';
 
 const routes: Routes = [
     {
@@ -22,10 +23,14 @@ const routes: Routes = [
         path: 'community',
         component: ListQuizComponent,
     },
+    {
+        path: 'create-quiz',
+        component: QuizInfoComponent,
+    }
 ];
 
 @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule],
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }
-- 
GitLab


From 4e540dbaef88b0992fb21d0988eba1400d851d59 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Mon, 2 Dec 2024 23:11:42 +0100
Subject: [PATCH 03/11] feat: space header and content

---
 src/app/app.component.css                  | 2 +-
 src/app/app.component.html                 | 4 +++-
 src/app/shared/header/header.component.css | 3 ++-
 src/styles.css                             | 6 ++++++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 329d059..36abf9a 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 1e15754..7ed5e69 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,4 @@
 <app-header></app-header>
-<router-outlet></router-outlet>
+<main>
+    <router-outlet></router-outlet>
+</main>
\ No newline at end of file
diff --git a/src/app/shared/header/header.component.css b/src/app/shared/header/header.component.css
index 9a43c16..e05c310 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 917ccd3..27e3c86 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -7,6 +7,12 @@ body {
     background-color: #f0f0f0;
 }
 
+main {
+    padding-top: 10vh;
+    /* header size */
+    height: 90vh;
+}
+
 .cdk-overlay-container:empty {
     pointer-events: none;
     /* Ignorer les clics et interactions */
-- 
GitLab


From 46d48f45a9b9e34be0224cedeeb3c77a6fb76a02 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Mon, 2 Dec 2024 23:13:59 +0100
Subject: [PATCH 04/11] style: mooved css to a general one

---
 .../profile-info/profile-info.component.css   | 22 ----------------
 src/styles.css                                | 25 +++++++++++++++++++
 2 files changed, 25 insertions(+), 22 deletions(-)

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 7baf58c..019403e 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.css
+++ b/src/app/modules/profile/profile-info/profile-info.component.css
@@ -7,29 +7,7 @@
     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 */
diff --git a/src/styles.css b/src/styles.css
index 27e3c86..ac795d9 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -13,6 +13,31 @@ main {
     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;
+
+}
+
 .cdk-overlay-container:empty {
     pointer-events: none;
     /* Ignorer les clics et interactions */
-- 
GitLab


From f6416128bfc344be893779ddc30bee15be2b6a6f Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Mon, 2 Dec 2024 23:41:04 +0100
Subject: [PATCH 05/11] feat: base page + base css

---
 .../quiz-info/quiz-info.component.css          | 15 +++++++++++++++
 .../quiz-info/quiz-info.component.html         | 18 +++++++++++++++++-
 .../quiz-info/quiz-info.component.ts           | 18 +++++++++++++++++-
 .../profile-info/profile-info.component.css    | 11 -----------
 .../profile-info/profile-info.component.html   |  2 +-
 src/styles.css                                 |  9 +++++++++
 6 files changed, 59 insertions(+), 14 deletions(-)

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
index e69de29..66f4e39 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
@@ -0,0 +1,15 @@
+.content {
+    display: flex;
+
+    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;
+}
\ 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
index 3d73933..96d885b 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
@@ -1 +1,17 @@
-<p>quiz-info works!</p>
+<div class="question-marks">
+    <h1>Create your own quiz</h1>
+    <div class="content">
+        <form [formGroup]="quizInfoForm">
+            <div class="form-group">
+                <label for="quizTitle">Quiz Title</label>
+                <input type="text" formControlName="quizTitle" id="quizTitle" placeholder="Enter quiz title">
+                <label for="quizDescription">Quiz Difficulty</label>
+                <select class="form-control" formControlName="difficulty">
+                    <option value="easy">Easy</option>
+                    <option value="medium">Medium</option>
+                    <option value="hard">Hard</option>
+                </select>
+            </div>
+        </form>
+    </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
index 1600610..1bda612 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
@@ -1,12 +1,28 @@
 import { Component } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-quiz-info',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule],
   templateUrl: './quiz-info.component.html',
   styleUrl: './quiz-info.component.css'
 })
 export class QuizInfoComponent {
 
+  titleCtrl: any;
+  difficultyCtrl: any;
+  quizInfoForm: any;
+
+  constructor(private fb: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.titleCtrl = this.fb.control(null, []);
+    this.difficultyCtrl = this.fb.control(null, []);
+
+    this.quizInfoForm = this.fb.group({
+      title: this.titleCtrl,
+      difficulty: this.difficultyCtrl,
+    });
+  }
 }
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 019403e..661c6bd 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.css
+++ b/src/app/modules/profile/profile-info/profile-info.component.css
@@ -1,14 +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;
-}
-
-
-
 .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 2082165..9ff6a4e 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/styles.css b/src/styles.css
index ac795d9..e8d3b82 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -38,6 +38,15 @@ h1 {
 
 }
 
+.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 */
-- 
GitLab


From fc1ee9fa83ae3fb2d7233eac95aad9975b0ec8f1 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Tue, 3 Dec 2024 00:13:12 +0100
Subject: [PATCH 06/11] feat: basic quiz information

---
 .../quiz-info/quiz-info.component.css         | 23 ++++++++++++++++
 .../quiz-info/quiz-info.component.html        | 27 ++++++++++++-------
 .../quiz-info/quiz-info.component.ts          | 22 ++++++++++++++-
 3 files changed, 62 insertions(+), 10 deletions(-)

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
index 66f4e39..045760c 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
@@ -1,5 +1,6 @@
 .content {
     display: flex;
+    flex-direction: column;
 
     width: 90%;
     margin-left: 5%;
@@ -12,4 +13,26 @@
     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%;
 }
\ 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
index 96d885b..b96dc16 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
@@ -2,16 +2,25 @@
     <h1>Create your own quiz</h1>
     <div class="content">
         <form [formGroup]="quizInfoForm">
-            <div class="form-group">
-                <label for="quizTitle">Quiz Title</label>
-                <input type="text" formControlName="quizTitle" id="quizTitle" placeholder="Enter quiz title">
-                <label for="quizDescription">Quiz Difficulty</label>
-                <select class="form-control" formControlName="difficulty">
-                    <option value="easy">Easy</option>
-                    <option value="medium">Medium</option>
-                    <option value="hard">Hard</option>
-                </select>
+            <div class="form-etape">
+                <div class="form-group">
+                    <label for="quizTitle">Quiz Title</label>
+                    <input type="text" formControlName="title" id="quizTitle" 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>
+        <hr>
     </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
index 1bda612..7c8130e 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
@@ -18,11 +18,31 @@ export class QuizInfoComponent {
 
   ngOnInit(): void {
     this.titleCtrl = this.fb.control(null, []);
-    this.difficultyCtrl = this.fb.control(null, []);
+    this.difficultyCtrl = this.fb.control('medium', []);
 
     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 {
+    const control = this.quizInfoForm.get(fieldName);
+    if (control) {
+      console.log(`${fieldName} lost focus. Current value:`, control.value);
+    }
+  }
+
+  /* update Quiz Difficulty here */
+  /* Quiz Difficulty will be updated on the change event */
+  onFieldChange(fieldName: string): void {
+    const control = this.quizInfoForm.get(fieldName);
+    if (control) {
+      console.log(`${fieldName} changed. New value:`, control.value);
+    }
   }
 }
-- 
GitLab


From 9e1884fcbb6aebef3089d46f437312b2a3fb6d85 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Tue, 3 Dec 2024 15:13:28 +0100
Subject: [PATCH 07/11] feat: catch change in form event

---
 .../quiz-info/quiz-info.component.html        |  2 +-
 .../quiz-info/quiz-info.component.ts          | 25 +++++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

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
index b96dc16..753ab6b 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
@@ -5,7 +5,7 @@
             <div class="form-etape">
                 <div class="form-group">
                     <label for="quizTitle">Quiz Title</label>
-                    <input type="text" formControlName="title" id="quizTitle" placeholder="Enter quiz title"
+                    <input type="text" formControlName="title" id="title" placeholder="Enter quiz title"
                         (blur)="onBlurField('title')">
                 </div>
 
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
index 7c8130e..4115c01 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
@@ -10,15 +10,22 @@ import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 })
 export class QuizInfoComponent {
 
+  // Controls
   titleCtrl: any;
   difficultyCtrl: any;
   quizInfoForm: any;
+  // Data
+  title: any;
+  difficulty: any = 'medium'; // medium or database value for difficulty
 
-  constructor(private fb: FormBuilder) { }
+
+  constructor(
+    private fb: FormBuilder
+  ) { }
 
   ngOnInit(): void {
     this.titleCtrl = this.fb.control(null, []);
-    this.difficultyCtrl = this.fb.control('medium', []);
+    this.difficultyCtrl = this.fb.control(this.difficulty, []);
 
     this.quizInfoForm = this.fb.group({
       title: this.titleCtrl,
@@ -31,18 +38,20 @@ export class QuizInfoComponent {
   /* Quiz Title will be updated on the unfocus event */
 
   onBlurField(fieldName: string): void {
-    const control = this.quizInfoForm.get(fieldName);
-    if (control) {
-      console.log(`${fieldName} lost focus. Current value:`, control.value);
+    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 {
-    const control = this.quizInfoForm.get(fieldName);
-    if (control) {
-      console.log(`${fieldName} changed. New value:`, control.value);
+    this.difficulty = this.quizInfoForm.get(fieldName).value;
+    if (this.difficulty) {
+      console.log(`${fieldName} changed. New value:`, this.difficulty);
     }
+    //add database request here
   }
 }
-- 
GitLab


From 6ce5ba9686832ff2586e1ef6d260b5310476b2c6 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Tue, 3 Dec 2024 15:21:12 +0100
Subject: [PATCH 08/11] feat: init question form

---
 .../question-form/question-form.component.css        |  0
 .../question-form/question-form.component.html       |  1 +
 .../question-form/question-form.component.ts         | 12 ++++++++++++
 3 files changed, 13 insertions(+)
 create mode 100644 src/app/modules/custom-quiz/question-form/question-form.component.css
 create mode 100644 src/app/modules/custom-quiz/question-form/question-form.component.html
 create mode 100644 src/app/modules/custom-quiz/question-form/question-form.component.ts

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 0000000..e69de29
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 0000000..db4b32f
--- /dev/null
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.html
@@ -0,0 +1 @@
+<p>question-form works!</p>
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 0000000..d4d8fb9
--- /dev/null
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-question-form',
+  standalone: true,
+  imports: [],
+  templateUrl: './question-form.component.html',
+  styleUrl: './question-form.component.css'
+})
+export class QuestionFormComponent {
+
+}
-- 
GitLab


From 42243e44d7f2e7fee33c05b6746362c0ed8240d9 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Tue, 3 Dec 2024 16:53:04 +0100
Subject: [PATCH 09/11] feat: button and css

---
 .../question-form/question-form.component.css | 36 +++++++++++++
 .../question-form.component.html              | 22 +++++++-
 .../question-form/question-form.component.ts  | 50 ++++++++++++++++++-
 .../quiz-info/quiz-info.component.html        | 10 +++-
 .../quiz-info/quiz-info.component.ts          |  7 ++-
 src/styles.css                                | 16 ++++++
 6 files changed, 137 insertions(+), 4 deletions(-)

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
index e69de29..a6b208a 100644
--- a/src/app/modules/custom-quiz/question-form/question-form.component.css
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.css
@@ -0,0 +1,36 @@
+.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;
+    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;
+}
+
+label {
+    width: 10%;
+    font-size: 2vmin;
+    margin-top: 0.5vmin;
+    margin-bottom: 0.5vmin;
+}
\ 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
index db4b32f..251f53a 100644
--- a/src/app/modules/custom-quiz/question-form/question-form.component.html
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.html
@@ -1 +1,21 @@
-<p>question-form works!</p>
+<form [formGroup]="quizInfoForm">
+    <div class="form-group">
+        <label for="quizTitle">Question 1</label> <!-- Change number to have it dynamic -->
+        <div class="answer-group">
+            <input type="text" formControlName="question" id="question" placeholder="Write a question..."
+                (blur)="onBlurField('question')">
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="quizTitle">Answers</label>
+        <div class="answer-group">
+            <input type="text" formControlName="validAnswer" id="validAnswer" placeholder="Valid answer..."
+                (blur)="onBlurField('validAnswer')">
+            <input type="text" formControlName="Answer1" id="Answer1" placeholder="Write an answer..."
+                (blur)="onBlurField('Answer1')">
+            <!-- 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
index d4d8fb9..a9996f6 100644
--- a/src/app/modules/custom-quiz/question-form/question-form.component.ts
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.ts
@@ -1,12 +1,60 @@
 import { Component } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-question-form',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule],
   templateUrl: './question-form.component.html',
   styleUrl: './question-form.component.css'
 })
 export class QuestionFormComponent {
+  // Controls
+  titleCtrl: any;
+  difficultyCtrl: any;
+  quizInfoForm: any;
+  // Data
+  title: any;
+  difficulty: any = 'medium'; // medium or database value for difficulty
 
+
+  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,
+    });
+
+  }
+
+  addAnswer() {
+    // ask API to add an answer
+  }
+
+  /* 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
+  }
 }
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
index 753ab6b..37adaa5 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
@@ -21,6 +21,14 @@
                 </div>
             </div>
         </form>
-        <hr>
+        <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 -->
+            <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
index 4115c01..ae36fbd 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { QuestionFormComponent } from '../question-form/question-form.component';
 
 @Component({
   selector: 'app-quiz-info',
   standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, QuestionFormComponent],
   templateUrl: './quiz-info.component.html',
   styleUrl: './quiz-info.component.css'
 })
@@ -54,4 +55,8 @@ export class QuizInfoComponent {
     }
     //add database request here
   }
+
+  addQuestion() {
+    // ask API to add a question
+  }
 }
diff --git a/src/styles.css b/src/styles.css
index e8d3b82..28d774e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -88,6 +88,22 @@ h1 {
     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%;
-- 
GitLab


From e0eb82b28cd10f4ef8b219ea4a6fdc81fece8998 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Tue, 3 Dec 2024 21:15:05 +0100
Subject: [PATCH 10/11] style: add icon and css

---
 public/check_icon.png                         | Bin 0 -> 455 bytes
 .../question-form/question-form.component.css |  24 ++++++++++++++++++
 .../question-form.component.html              |  14 +++++++---
 .../question-form/question-form.component.ts  |   1 +
 .../quiz-info/quiz-info.component.css         |   9 +++++++
 .../quiz-info/quiz-info.component.html        |   3 +++
 6 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 public/check_icon.png

diff --git a/public/check_icon.png b/public/check_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8d23df61f57caae78d0da9634626d1932bc0769
GIT binary patch
literal 455
zcmV;&0XY7NP)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0bEH$K~#7F?buIF
z!ax+q@rUsMa|Ev7UKiYe8^{feClGF+CorBwLl-XfCd|TRO?^Mngh1yH)0sE3c%KAP
zprw3MN?#ySN-3q3Ql-qOWgo`S7v1uwv~+D>e5+nktKQ9=BVKuFP6OX}{P@OhT&rJD
zixAQOMf@9R<=dpakg<rpH{WJ$g}5U=>6`9-o3?YZ`yzT;(85~Z=52&bjDY$f86u!=
zNTvv=7m_go>V#yD0Qryt5g;2<C<5X_FucK4`i@FQK={hunKch@yWbm@QxuMX@Db_E
zj_=LEGaH^l*Az=20#atJhv*|C6anFoVRTpv#|TD1+{wN*D_-+?<dyNSnQ#Qe|NO?r
zREU7{t|OtCN)d4W1<@5VqeniUmQ*2Pzxx#KBXdk70@6p6aEw?4Oq;dbF`^MLeP}$5
x5s!d8)9=<S`JL_vf7$f(BpsoYQc5Y+s2|@3%;Lr&K+pgH002ovPDHLkV1m4Mzcc^<

literal 0
HcmV?d00001

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
index a6b208a..5220aa4 100644
--- a/src/app/modules/custom-quiz/question-form/question-form.component.css
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.css
@@ -16,6 +16,7 @@
 
 input {
     height: 3vmin;
+    width: auto;
     margin-top: 0.5vmin;
     margin-bottom: 0.5vmin;
     /*padding-left: 1vmin;
@@ -28,9 +29,32 @@ input {
     -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
index 251f53a..1a5d3b2 100644
--- a/src/app/modules/custom-quiz/question-form/question-form.component.html
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.html
@@ -9,10 +9,16 @@
     <div class="form-group">
         <label for="quizTitle">Answers</label>
         <div class="answer-group">
-            <input type="text" formControlName="validAnswer" id="validAnswer" placeholder="Valid answer..."
-                (blur)="onBlurField('validAnswer')">
-            <input type="text" formControlName="Answer1" id="Answer1" placeholder="Write an answer..."
-                (blur)="onBlurField('Answer1')">
+            <div class="answer-wrapper">
+                <img src="check_icon.png" class="check-icon">
+                <input type="text" formControlName="validAnswer" id="validAnswer" placeholder="Valid answer..."
+                    (blur)="onBlurField('validAnswer')">
+            </div>
+            <div class="answer-wrapper">
+                <img src="check_icon.png" class="check-icon">
+                <input type="text" formControlName="Answer1" id="Answer1" placeholder="Write an answer..."
+                    (blur)="onBlurField('Answer1')">
+            </div>
             <!-- Add awnser dynamiquely -->
             <!-- If nb questions < 4, show this button -->
             <button class="btn questionsButton" (click)="addAnswer()">ADD AN ANSWER</button>
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
index a9996f6..a3e3a5e 100644
--- a/src/app/modules/custom-quiz/question-form/question-form.component.ts
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.ts
@@ -57,4 +57,5 @@ export class QuestionFormComponent {
     }
     //add database request here
   }
+
 }
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
index 045760c..1c50d0a 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
@@ -35,4 +35,13 @@ form {
     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%;
 }
\ 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
index 37adaa5..e58dfd2 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
@@ -27,6 +27,9 @@
             <hr>
             <app-question-form></app-question-form>
             <!-- add a question here. hide if last question have not it's minimum field completed -->
+        </div>
+        <hr>
+        <div class="btn-group">
             <button class="questionsButton" (click)="addQuestion()">+ ADD A QUESTION</button>
             <button class="questionsButton" (click)="addQuestion()">ADD FROM DATABASE</button>
         </div>
-- 
GitLab


From 84e52f80f5203998fe15a13e378d8f9cb4ac8bf7 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Tue, 3 Dec 2024 22:07:13 +0100
Subject: [PATCH 11/11] feat: check if form is valid

---
 .../question-form.component.html              | 14 +++----
 .../question-form/question-form.component.ts  | 39 ++++++++-----------
 .../quiz-info/quiz-info.component.css         |  7 ++++
 .../quiz-info/quiz-info.component.html        |  1 +
 .../quiz-info/quiz-info.component.ts          | 17 ++++++--
 5 files changed, 46 insertions(+), 32 deletions(-)

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
index 1a5d3b2..049859d 100644
--- a/src/app/modules/custom-quiz/question-form/question-form.component.html
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.html
@@ -1,9 +1,9 @@
-<form [formGroup]="quizInfoForm">
+<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="question" id="question" placeholder="Write a question..."
-                (blur)="onBlurField('question')">
+            <input type="text" formControlName="title" id="titleCtrl" placeholder="Write a question..."
+                (blur)="onBlurField('titleCtrl')">
         </div>
     </div>
     <div class="form-group">
@@ -11,13 +11,13 @@
         <div class="answer-group">
             <div class="answer-wrapper">
                 <img src="check_icon.png" class="check-icon">
-                <input type="text" formControlName="validAnswer" id="validAnswer" placeholder="Valid answer..."
-                    (blur)="onBlurField('validAnswer')">
+                <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="Answer1" id="Answer1" placeholder="Write an answer..."
-                    (blur)="onBlurField('Answer1')">
+                <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 -->
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
index a3e3a5e..eb0960d 100644
--- a/src/app/modules/custom-quiz/question-form/question-form.component.ts
+++ b/src/app/modules/custom-quiz/question-form/question-form.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-question-form',
@@ -11,11 +11,13 @@ import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 export class QuestionFormComponent {
   // Controls
   titleCtrl: any;
-  difficultyCtrl: any;
-  quizInfoForm: any;
+  rightCtrl: any;
+  wrongCtrl: any;
+  questionForm: any;
   // Data
   title: any;
-  difficulty: any = 'medium'; // medium or database value for difficulty
+  wrong: any;
+  right: any;
 
 
   constructor(
@@ -23,14 +25,15 @@ export class QuestionFormComponent {
   ) { }
 
   ngOnInit(): void {
-    this.titleCtrl = this.fb.control(null, []);
-    this.difficultyCtrl = this.fb.control(this.difficulty, []);
+    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.quizInfoForm = this.fb.group({
+    this.questionForm = this.fb.group({
       title: this.titleCtrl,
-      difficulty: this.difficultyCtrl,
+      right: this.rightCtrl,
+      wrong: this.wrongCtrl,
     });
-
   }
 
   addAnswer() {
@@ -41,21 +44,13 @@ export class QuestionFormComponent {
   /* 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
   }
 
+  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
index 1c50d0a..46ff775 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.css
@@ -44,4 +44,11 @@ form {
     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
index e58dfd2..9bce7f5 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.html
@@ -29,6 +29,7 @@
             <!-- 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>
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
index ae36fbd..40f9938 100644
--- a/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
+++ b/src/app/modules/custom-quiz/quiz-info/quiz-info.component.ts
@@ -1,15 +1,17 @@
-import { Component } from '@angular/core';
+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: [ReactiveFormsModule, QuestionFormComponent],
+  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;
@@ -18,6 +20,7 @@ export class QuizInfoComponent {
   // Data
   title: any;
   difficulty: any = 'medium'; // medium or database value for difficulty
+  questionValid: boolean = true;
 
 
   constructor(
@@ -57,6 +60,14 @@ export class QuizInfoComponent {
   }
 
   addQuestion() {
-    // ask API to add a question
+    // 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
+    }
+
   }
 }
-- 
GitLab