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