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