From 77894aa83d87ff0097c56299f8a0e0a2eb1c1c43 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Wed, 4 Dec 2024 09:57:25 +0100
Subject: [PATCH 1/5] feat: general css for header

---
 src/app/app.component.html                                    | 4 +++-
 .../modules/profile/profile-info/profile-info.component.ts    | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 978a253..fa706e9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,4 @@
 <app-header *ngIf="!playQuiz"></app-header>
-<router-outlet></router-outlet>
\ No newline at end of file
+<main>
+    <router-outlet></router-outlet>
+</main>
\ No newline at end of file
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 f443113..c7d2854 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.ts
+++ b/src/app/modules/profile/profile-info/profile-info.component.ts
@@ -35,7 +35,8 @@ export class ProfileInfoComponent {
   }
 
   newQuiz() {
-    this.router.navigate(['/']);
+    console.log('Create new quiz');
+    this.router.navigate(['profile/create-custom-quiz']);
   }
 
 }
-- 
GitLab


From 0a28833f1e3c647a8ee7ec3f01520619a95cce53 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Wed, 4 Dec 2024 11:55:54 +0100
Subject: [PATCH 2/5] style: css html remake

---
 .../create-custom-quiz.component.css          | 136 ++++++++++++++----
 .../create-custom-quiz.component.html         | 126 ++++++++--------
 2 files changed, 171 insertions(+), 91 deletions(-)

diff --git a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
index 5e95b5d..6fe7d07 100644
--- a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
+++ b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
@@ -1,48 +1,132 @@
-.question-table {
+.container {
+    display: flex;
+    flex-direction: column;
+
+    width: 90vw;
+    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;
+}
+
+input {
+    height: 3vmin;
+    width: calc(90vw/2);
+    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;
+}
+
+select {
+    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;
+}
+
+.quiz-info-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+
     width: 100%;
+    margin-top: 1vmin;
 }
 
-.w-fit {
-    width: fit-content !important;
+.label-wrapper {
+    width: 30%;
+    text-align: right;
+    font-size: 3vmin;
+    margin: 0;
+    margin-right: 5%;
+    flex-shrink: 0;
 }
 
-.question-table tbody td:nth-child(2) {
-    flex: 0 0 auto;
-    justify-content: center;
+.quiz-info {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
 }
 
-.question-table tbody td:nth-child(3),
-.question-table tbody td:nth-child(4) {
-    flex: 1;
+.quiz-info-wrapper select {
+    width: 30%;
 }
 
-.m-10 {
-    margin: 10px;
+hr {
+    width: 100%;
+    height: 0.5vmin;
+    background-color: #DBDBDB;
+    border: none;
 }
 
-.cell {
-    border: 1px solid #ccc;
+/*****************************************/
+/* questions Info */
+/*****************************************/
+.question-cell {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    width: 100%;
+    margin-top: 1vmin;
 }
 
-.row {
-    max-width: 100%;
+.answers-cell {
+    display: flex;
+    flex-direction: row;
+    padding-top: 2vmin;
 }
 
-.add-cell {
-    max-width: 100%;
+.answers-list {
     display: flex;
-    justify-content: center;
-    border: 2px solid black;
-    flex-wrap: nowrap;
+    flex-direction: column;
+    width: 100%;
 }
 
-.add-cell-question {
+.answer-wrapper {
+    width: 70%;
+}
+
+.answer-cell {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
     width: 100%;
-    display: table-row;
-    text-align: center;
-    border: 2px solid rgba(0, 0, 0, 0.808);
 }
 
-.bigger-icon {
-    transform: scale(1.2);
+mat-icon {
+    height: 100%;
 }
+
+
+.answer-cell input {
+    width: calc(45vw - 3vmin);
+}
+
+span {
+    flex-shrink: 0;
+}
\ No newline at end of file
diff --git a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html
index edcc0de..e37a110 100644
--- a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html
+++ b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html
@@ -1,74 +1,70 @@
-<div class="col-md-12">
-    <div class="card">
-        <div class="row">
-            <div class="col-md-12">
-                <form class="m-10" (ngSubmit)="createQuiz()" [formGroup]="quizForm">
-                    <label class="m-10">Quiz title : </label>
-                    <input class="m-10" type="text" formControlName="title" />
-                    <label class="m-10">Difficulty : </label>
+<div class="question-marks">
+    <div class="container">
+        <form (ngSubmit)="createQuiz()" [formGroup]="quizForm">
+            <div class="quiz-info">
+                <div class="quiz-info-wrapper">
+                    <div class="label-wrapper">
+                        <label for="title">QUIZ TITLE </label>
+                    </div>
+                    <input type="text" formControlName="title" />
+                </div>
+                <div class="quiz-info-wrapper">
+                    <div class="label-wrapper">
+                        <label for="difficulty">QUIZ DIFFICULTY </label>
+                    </div>
                     <select formControlName="difficulty">
                         <option value="easy">Easy</option>
                         <option value="medium">Medium</option>
                         <option value="hard">Hard</option>
                     </select>
-                    <table class="question-table">
-                        <thead>
-                            <tr>
-                                <th class="photo-cell">Question</th>
-                                <th class="task-type-cell">Answers</th>
-                            </tr>
-                        </thead>
-                        <tbody formArrayName="questions">
-                            <tr *ngFor="let question of questions.controls; let i = index" [formGroupName]="i">
-                                <td class="cell question-cell">
-                                    <label>Question : </label>
-                                    <input type="text" formControlName="question" />
-                                </td>
-                                <td class="cell answers-cell" formArrayName="answers">
-                                    <table class="answers-table">
-                                        <tr
-                                            *ngFor="let answer of getAnswers(i).controls; let j = index"
-                                            [formGroupName]="j"
-                                        >
-                                            <td>
-                                                <input type="text" formControlName="answer" />
-                                            </td>
-                                            <td>
-                                                <input type="checkbox" [formControlName]="'right_answer'" />
-                                            </td>
-
-                                            <td (click)="removeAnswer(i, j)">
-                                                <mat-icon style="color: red">delete</mat-icon>
-                                            </td>
-                                        </tr>
-                                        <span *ngIf="getAnswers(i).errors?.['duplicateAnswer']" style="color: red"
-                                            >All answers need to be unique.</span
-                                        >
-                                        <tr class="add-cell" (click)="addAnswer(i)">
-                                            <td>
-                                                <mat-icon style="color: brown">add</mat-icon>
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </td>
-                                <td (click)="removeQuestion(i)">
-                                    <mat-icon style="color: red">delete</mat-icon>
-                                </td>
-                            </tr>
-                            <tr class="add-cell-question" (click)="addQuestion()">
-                                <td colspan="5">
-                                    <mat-icon [style.color]="'brown'">add</mat-icon>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </form>
-                <div class="center-button">
-                    <button (click)="createQuiz()" class="btn btn-secondary btn-success" [disabled]="quizForm.invalid">
-                        Add
-                    </button>
                 </div>
             </div>
+            <hr>
+            <div class="question-table">
+                <div formArrayName="questions">
+                    <div class="question-row" *ngFor="let question of questions.controls; let i = index"
+                        [formGroupName]="i">
+                        <div class="cell question-cell">
+                            <div class="label-wrapper">
+                                <label>QUESTION {{i + 1}} </label>
+                            </div>
+                            <input type="text" formControlName="question" />
+                            <!-- the button bellow is temporary -->
+                            <mat-icon style="color: red" (click)="removeQuestion(i)">delete</mat-icon>
+                        </div>
+                        <div class="cell answers-cell" formArrayName="answers">
+                            <div class="label-wrapper">
+                                <label>ANSWERS </label>
+                            </div>
+                            <div class="answer-wrapper">
+                                <div class="answers-list" *ngFor="let answer of getAnswers(i).controls; let j = index"
+                                    [formGroupName]="j">
+                                    <div class="answer-cell">
+                                        <mat-icon style="color: green">check</mat-icon>
+                                        <input type="text" formControlName="answer" />
+                                        <mat-icon (click)="removeAnswer(i, j)" style="color: red">delete</mat-icon>
+                                    </div>
+                                    <span *ngIf="getAnswers(i).errors?.['duplicateAnswer']" style="color: red">All
+                                        answers need to be unique.
+                                    </span>
+                                </div>
+                                <div class="add-cell" (click)="addAnswer(i)">
+                                    <mat-icon style="color: brown">add</mat-icon>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                    </div>
+                    <div class="add-cell-question" (click)="addQuestion()">
+                        <mat-icon [style.color]="'brown'">add</mat-icon>
+                    </div>
+                </div>
+            </div>
+        </form>
+        <div class="center-button">
+            <button (click)="createQuiz()" class="btn btn-secondary btn-success" [disabled]="quizForm.invalid">
+                Add
+            </button>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
-- 
GitLab


From adb10b7bc67160ce3a9c352e0fa46218c0c02b53 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Wed, 4 Dec 2024 14:13:07 +0100
Subject: [PATCH 3/5] feat: change validator

---
 .../create-custom-quiz.component.css          | 44 ++++++++++-
 .../create-custom-quiz.component.html         | 77 +++++++++++--------
 .../create-custom-quiz.component.ts           | 11 +--
 src/styles.css                                |  6 +-
 4 files changed, 99 insertions(+), 39 deletions(-)

diff --git a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
index 6fe7d07..80f7202 100644
--- a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
+++ b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
@@ -4,7 +4,7 @@
 
     width: 90vw;
     margin-left: 5%;
-    height: 70%;
+    height: 70vh;
 
     background-color: #F3F3F3;
 
@@ -15,6 +15,10 @@
     -webkit-box-sizing: border-box;
 }
 
+/* form {
+    height: 100%;
+} */
+
 input {
     height: 3vmin;
     width: calc(90vw/2);
@@ -69,6 +73,7 @@ select {
     flex-direction: column;
 
     width: 100%;
+    height: 8vh;
 }
 
 .quiz-info-wrapper select {
@@ -85,6 +90,16 @@ hr {
 /*****************************************/
 /* questions Info */
 /*****************************************/
+.question-info {
+    height: 58vh;
+    overflow: auto;
+}
+
+/* .question-table {
+    height: 100%;
+    overflow: scroll;
+} */
+
 .question-cell {
     display: flex;
     flex-direction: row;
@@ -124,9 +139,34 @@ mat-icon {
 
 
 .answer-cell input {
-    width: calc(45vw - 3vmin);
+    width: calc(45vw - 2.5vmin);
 }
 
 span {
     flex-shrink: 0;
+}
+
+.add-cell {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    width: 100%;
+    /* margin-top: 1vmin; */
+}
+
+.add-cell p {
+    margin: 0;
+    margin-left: 1%;
+    font-size: 1.5vmin;
+    color: #C9C9C9;
+}
+
+.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/profile/create-custom-quiz/create-custom-quiz.component.html b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html
index e37a110..3f984a2 100644
--- a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html
+++ b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html
@@ -1,4 +1,5 @@
 <div class="question-marks">
+    <h1>Create your own quiz</h1>
     <div class="container">
         <form (ngSubmit)="createQuiz()" [formGroup]="quizForm">
             <div class="quiz-info">
@@ -6,7 +7,7 @@
                     <div class="label-wrapper">
                         <label for="title">QUIZ TITLE </label>
                     </div>
-                    <input type="text" formControlName="title" />
+                    <input type="text" formControlName="title" placeholder="Write the quiz title..." />
                 </div>
                 <div class="quiz-info-wrapper">
                     <div class="label-wrapper">
@@ -20,43 +21,59 @@
                 </div>
             </div>
             <hr>
-            <div class="question-table">
-                <div formArrayName="questions">
-                    <div class="question-row" *ngFor="let question of questions.controls; let i = index"
-                        [formGroupName]="i">
-                        <div class="cell question-cell">
-                            <div class="label-wrapper">
-                                <label>QUESTION {{i + 1}} </label>
-                            </div>
-                            <input type="text" formControlName="question" />
-                            <!-- the button bellow is temporary -->
-                            <mat-icon style="color: red" (click)="removeQuestion(i)">delete</mat-icon>
-                        </div>
-                        <div class="cell answers-cell" formArrayName="answers">
-                            <div class="label-wrapper">
-                                <label>ANSWERS </label>
+            <div class="question-info">
+                <div class="question-table">
+                    <div formArrayName="questions">
+                        <div class="question-row" *ngFor="let question of questions.controls; let i = index"
+                            [formGroupName]="i">
+                            <div class="cell question-cell">
+                                <div class="label-wrapper">
+                                    <label>QUESTION {{i + 1}} </label>
+                                </div>
+                                <input type="text" formControlName="question" placeholder="Write a question..." />
+                                <!-- the button bellow is temporary -->
+                                <mat-icon style="color: red" (click)="removeQuestion(i)">delete</mat-icon>
                             </div>
-                            <div class="answer-wrapper">
-                                <div class="answers-list" *ngFor="let answer of getAnswers(i).controls; let j = index"
-                                    [formGroupName]="j">
-                                    <div class="answer-cell">
-                                        <mat-icon style="color: green">check</mat-icon>
-                                        <input type="text" formControlName="answer" />
-                                        <mat-icon (click)="removeAnswer(i, j)" style="color: red">delete</mat-icon>
+                            <div class="cell answers-cell" formArrayName="answers">
+                                <div class="label-wrapper">
+                                    <label>ANSWERS </label>
+                                </div>
+                                <div class="answer-wrapper">
+                                    <div class="answers-list"
+                                        *ngFor="let answer of getAnswers(i).controls; let j = index"
+                                        [formGroupName]="j">
+                                        <div class="answer-cell">
+                                            <!-- answer index 0 is always the correct anwser -->
+                                            <div *ngIf="j == 0" class="answer-cell">
+                                                <mat-icon style="color: green">check</mat-icon>
+                                                <input type="text" formControlName="answer"
+                                                    placeholder="Write true answer..." />
+                                            </div>
+                                            <div *ngIf="j>0" class="answer-cell">
+                                                <mat-icon style="color: red">clear</mat-icon>
+                                                <input type="text" formControlName="answer"
+                                                    placeholder="Write wrong answer..." />
+                                                <mat-icon *ngIf="j > 1" (click)="removeAnswer(i, j)"
+                                                    style="color: red">delete</mat-icon>
+                                            </div>
+                                        </div>
                                     </div>
                                     <span *ngIf="getAnswers(i).errors?.['duplicateAnswer']" style="color: red">All
                                         answers need to be unique.
                                     </span>
-                                </div>
-                                <div class="add-cell" (click)="addAnswer(i)">
-                                    <mat-icon style="color: brown">add</mat-icon>
+                                    <div class="add-cell" (click)="addAnswer(i)" *ngIf="getAnswers(i).length<4">
+                                        <!-- <mat-icon style="color: brown">add</mat-icon> -->
+                                        <button class="questionsButton">+ ADD AN ANSWER</button>
+                                        <p>up to 4</p>
+                                    </div>
                                 </div>
                             </div>
+                            <hr>
+                        </div>
+                        <div class="btn-group">
+                            <button (click)="addQuestion()" class="questionsButton">+ ADD A QUESTION</button>
+                            <button class="questionsButton">ADD FROM DATABASE</button>
                         </div>
-                        <hr>
-                    </div>
-                    <div class="add-cell-question" (click)="addQuestion()">
-                        <mat-icon [style.color]="'brown'">add</mat-icon>
                     </div>
                 </div>
             </div>
diff --git a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts
index 94785c4..7dc4d45 100644
--- a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts
+++ b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts
@@ -10,11 +10,11 @@ export class CreateCustomQuizComponent implements OnInit {
     constructor(private fb: FormBuilder) {
         this.quizForm = this.fb.group({
             title: this.fb.control('', [Validators.required, Validators.maxLength(255)]),
-            difficulty: this.fb.control('', [Validators.required]),
+            difficulty: this.fb.control('medium', [Validators.required]),
             questions: this.fb.array([this.createQuestion()], [Validators.required]),
         });
     }
-    ngOnInit(): void {}
+    ngOnInit(): void { }
 
     get questions(): FormArray {
         return this.quizForm.get('questions') as FormArray;
@@ -57,10 +57,11 @@ export class CreateCustomQuizComponent implements OnInit {
     }
 
     answersValidators(formArray: AbstractControl): ValidationErrors | null {
-        const names = formArray.value.map((answer: any) => answer.answer.toLowerCase());
-        const hasDuplicates = names.some((name: string, index: number) => names.indexOf(name.toLowerCase()) !== index);
+        const answersValues = formArray.value.map((answer: any) => answer.answer.toLowerCase()).filter((answer: string) => answer.trim() !== '');
+        // check if the text already exist in another answer
+        const hasDuplicates = answersValues.some((name: string, index: number) => answersValues.indexOf(name.toLowerCase()) !== index);
         return hasDuplicates ? { duplicateAnswer: true } : null;
     }
 
-    createQuiz() {}
+    createQuiz() { }
 }
diff --git a/src/styles.css b/src/styles.css
index 28d774e..63ab577 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -18,6 +18,7 @@ h1,
 h2,
 h3,
 h4,
+label,
 p {
     font-family: 'Roboto';
 }
@@ -89,11 +90,12 @@ h1 {
 }
 
 .questionsButton {
-    width: 11vw;
+    width: 20vw;
+    height: 2.5vh;
     font-size: 1.25vmin;
 
     background-color: #FEFEFE;
-    border-radius: 5px;
+    border-radius: 20px;
     border: 0.25vmin solid #DBDBDB;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-- 
GitLab


From bc344497e80413b29a1d0f736692708c5b7768d4 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Wed, 4 Dec 2024 14:20:59 +0100
Subject: [PATCH 4/5] feat; add validator and verifiactions

---
 .../create-custom-quiz.component.ts           | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts
index 7dc4d45..4afd961 100644
--- a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts
+++ b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormArray, FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
+import Swal from 'sweetalert2';
 
 @Component({
     templateUrl: './create-custom-quiz.component.html',
@@ -53,14 +54,28 @@ export class CreateCustomQuizComponent implements OnInit {
     }
 
     removeQuestion(i: number) {
-        this.questions.removeAt(i);
+        Swal.fire({
+            title: "Are you sure you want to delete this question?",
+            text: "You won't be able to revert this!",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#3085d6",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Yes, delete it!"
+        }).then((result) => {
+            if (result.isConfirmed) {
+                this.questions.removeAt(i);
+            }
+        });
     }
 
     answersValidators(formArray: AbstractControl): ValidationErrors | null {
         const answersValues = formArray.value.map((answer: any) => answer.answer.toLowerCase()).filter((answer: string) => answer.trim() !== '');
         // check if the text already exist in another answer
         const hasDuplicates = answersValues.some((name: string, index: number) => answersValues.indexOf(name.toLowerCase()) !== index);
-        return hasDuplicates ? { duplicateAnswer: true } : null;
+        // check if the text is empty
+        const hasEmpty = answersValues.some((name: string) => name.trim() === '');
+        return { duplicateAnswer: hasDuplicates, emptyAnswer: hasEmpty };
     }
 
     createQuiz() { }
-- 
GitLab


From 30a674c5aa80ba7c28a6acbf48241f0015785040 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Wed, 4 Dec 2024 15:27:03 +0100
Subject: [PATCH 5/5] feat: all css for create quiz

---
 .../create-custom-quiz.component.css          | 42 ++++++++++++++++++-
 .../create-custom-quiz.component.html         | 12 +++---
 .../create-custom-quiz.component.ts           | 23 ++++++++--
 src/styles.css                                |  2 +-
 4 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
index 80f7202..ba34fb0 100644
--- a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
+++ b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
@@ -1,3 +1,43 @@
+.header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    height: 10vh;
+}
+
+.header mat-icon {
+    width: auto;
+    height: auto;
+    margin: 0;
+    font-size: 8vmin;
+    padding-right: 5vw;
+    /* Your profile */
+    font-style: normal;
+    font-weight: 500;
+    color: #00B3F4;
+}
+
+.header h1 {
+    width: auto;
+    height: auto;
+    margin: 0;
+    font-size: 8vmin;
+    padding-left: 5vw;
+    /* Your profile */
+    font-style: normal;
+    font-weight: 500;
+    color: #00B3F4;
+}
+
+.header mat-icon:hover {
+    cursor: pointer;
+    color: #2B73FE;
+}
+
 .container {
     display: flex;
     flex-direction: column;
@@ -56,7 +96,7 @@ select {
     align-items: center;
 
     width: 100%;
-    margin-top: 1vmin;
+    /*margin-top: 1vmin;*/
 }
 
 .label-wrapper {
diff --git a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html
index 3f984a2..0c6238e 100644
--- a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html
+++ b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.html
@@ -1,7 +1,10 @@
 <div class="question-marks">
-    <h1>Create your own quiz</h1>
+    <div class="header">
+        <h1>Create your own quiz</h1>
+        <mat-icon (click)="createQuiz()">save</mat-icon>
+    </div>
     <div class="container">
-        <form (ngSubmit)="createQuiz()" [formGroup]="quizForm">
+        <form [formGroup]="quizForm">
             <div class="quiz-info">
                 <div class="quiz-info-wrapper">
                     <div class="label-wrapper">
@@ -78,10 +81,5 @@
                 </div>
             </div>
         </form>
-        <div class="center-button">
-            <button (click)="createQuiz()" class="btn btn-secondary btn-success" [disabled]="quizForm.invalid">
-                Add
-            </button>
-        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts
index 4afd961..6c6a3dc 100644
--- a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts
+++ b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormArray, FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 import Swal from 'sweetalert2';
 
 @Component({
@@ -8,7 +9,11 @@ import Swal from 'sweetalert2';
 })
 export class CreateCustomQuizComponent implements OnInit {
     quizForm: FormGroup;
-    constructor(private fb: FormBuilder) {
+    router: any;
+    constructor(
+        private fb: FormBuilder,
+        router: Router
+    ) {
         this.quizForm = this.fb.group({
             title: this.fb.control('', [Validators.required, Validators.maxLength(255)]),
             difficulty: this.fb.control('medium', [Validators.required]),
@@ -38,7 +43,7 @@ export class CreateCustomQuizComponent implements OnInit {
     createAnswer() {
         return this.fb.group({
             answer: this.fb.control('', [Validators.required, Validators.maxLength(255)]),
-            right_answer: this.fb.control(false, [Validators.required]),
+            right_answer: this.fb.control(true, [Validators.required]),
         });
     }
     addAnswer(i: number) {
@@ -78,5 +83,17 @@ export class CreateCustomQuizComponent implements OnInit {
         return { duplicateAnswer: hasDuplicates, emptyAnswer: hasEmpty };
     }
 
-    createQuiz() { }
+    createQuiz() {
+        if (this.quizForm.valid) {
+            console.log(this.quizForm.value);
+            this.router.navigate(['profile/']);
+        } else {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                text: 'Please fill all the required fields!',
+            });
+            console.log(this.quizForm.value);
+        }
+    }
 }
diff --git a/src/styles.css b/src/styles.css
index 63ab577..1512f9a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -30,7 +30,7 @@ p {
 h1 {
     height: 10vh;
     margin: 0;
-    margin-left: 7vw;
+    margin-left: 5vw;
     font-size: 8vmin;
     /* Your profile */
     font-style: normal;
-- 
GitLab