diff --git a/src/app/modules/home/form-play-quiz/form-play-quiz.component.css b/src/app/modules/home/form-play-quiz/form-play-quiz.component.css
index 33566cf1971ea01791b629d70a3d14c370cecc47..3b7e87ffed03c9faba70fa37179776d843399f4d 100644
--- a/src/app/modules/home/form-play-quiz/form-play-quiz.component.css
+++ b/src/app/modules/home/form-play-quiz/form-play-quiz.component.css
@@ -1,30 +1,36 @@
.container {
- height:90vh;
- width: 100%;
+ height: calc(100% - 2vmin);
+ width: calc(100% - 75px);
background-image: url(../../../../../public/BackgroundSubScreen.png);
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
- align-items: flex-end;
+ align-items: center;
+ padding-top: 2vmin;
+ padding-left: 75px;
+}
+
+.content {
+ height: calc(100% - 5vmin - 2vmin);
}
.button-header {
background-color: #FFFFFF;
border-radius: 10px;
- width: 80%;
- height: 10%;
+ width: 70%;
+ height: 5vmin;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 1rem;
}
-.button-header > button {
+.button-header>button {
background: none;
- border : none;
+ border: none;
height: 80%;
- width: 100%;
+ width: 100%;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
@@ -32,8 +38,9 @@
color: #B9B9B9;
}
-.button-header > button:hover {
- border-bottom-color: #2B73FE;
+.button-header>button.selected,
+.button-header>button:hover {
+ border-bottom: 3px solid #2B73FE;
color: #2B73FE
}
@@ -42,3 +49,6 @@
width: 80%;
}
+.blueButton {
+ height: 10%;
+}
\ No newline at end of file
diff --git a/src/app/modules/home/form-play-quiz/form-play-quiz.component.html b/src/app/modules/home/form-play-quiz/form-play-quiz.component.html
index f420c5b411a0aa96edd77e4291f9d83e9976c55e..50ed79537a90e6ae14536dbee5df3e70e2ca04df 100644
--- a/src/app/modules/home/form-play-quiz/form-play-quiz.component.html
+++ b/src/app/modules/home/form-play-quiz/form-play-quiz.component.html
@@ -1,7 +1,7 @@
<div class="container">
<div class="button-header">
- <button (click)="createQuiz()">Play a quiz</button>
- <button (click)="startQuiz()">Join a quiz</button>
+ <button [ngClass]="{'selected': showCreateQuiz}" (click)="createQuiz()">Play a quiz</button>
+ <button [ngClass]="{'selected': showStartQuiz}" (click)="startQuiz()">Join a quiz</button>
</div>
<div class="content">
<app-form-start-quiz *ngIf="showStartQuiz"></app-form-start-quiz>
diff --git a/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.css b/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.css
index 3af841206e64a1b92f231c75ef31128ba533fe57..8bc58499735572a5cf9704188e9a049017c2f0b9 100644
--- a/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.css
+++ b/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.css
@@ -1,15 +1,7 @@
/* Conteneur principal */
.container {
- /* max-width: 500px; */
- /* margin: 50px auto; */
- padding: 1rem;
- background-color: #f9f9f9;
- /* Fond léger */
- border: 0.1rem solid #e0e0e0;
- /* Bordure fine et discrète */
- /* border-radius: 45px; */
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
- /* Ombre subtile */
+ padding-top: 5%;
+ height: 95%;
}
/* Titre */
@@ -17,13 +9,16 @@
font-size: 1.8em;
color: #333;
text-align: center;
- margin-bottom: 1.5rem;
+ /* margin-bottom: 1.5rem; */
+ margin: 0;
font-weight: 500;
}
form {
display: flex;
flex-direction: column;
+ justify-content: space-evenly;
+ height: calc(100% - 7vmin - 1rem);
gap: 1rem;
/* Espacement entre les éléments */
}
@@ -86,138 +81,4 @@ form {
.btn:hover {
box-shadow: rgba(100, 100, 111, 0.8) 0px 7px 29px 0px;
-}
-
-/*select*/
-details {
- position: relative;
- /* width: 300px; */
- margin-right: 1rem;
- width: 100%;
-}
-
-details[open] {
- z-index: 1;
-}
-
-summary {
- padding: 1rem;
- cursor: pointer;
- border-radius: 5px;
- background-color: #ddd;
- list-style: none;
-}
-
-summary::-webkit-details-marker {
- display: none;
-}
-
-details[open] summary:before {
- content: "";
- display: block;
- width: 100vw;
- height: 100vh;
- background: transparent;
- position: fixed;
- top: 0;
- left: 0;
-}
-
-summary:after {
- content: "";
- /* display: inline-block; */
- float: right;
- width: 0.5rem;
- height: 0.5rem;
- border-bottom: 1px solid currentColor;
- border-left: 1px solid currentColor;
- border-bottom-left-radius: 2px;
- transform: rotate(45deg) translate(50%, 0%);
- transform-origin: center center;
- transition: transform ease-in-out 100ms;
-}
-
-summary:focus {
- outline: none;
-}
-
-details[open] summary:after {
- transform: rotate(-45deg) translate(0%, 0%);
-}
-
-ul {
- width: 100%;
- background: #ddd;
- position: absolute;
- top: calc(100% + 0.5rem);
- left: 0;
- padding: 1rem;
- margin: 0;
- box-sizing: border-box;
- border-radius: 5px;
- max-height: 10rem;
- overflow-y: auto;
-}
-
-li {
- list-style: none;
- margin: 0;
- padding: 1rem 0;
- border-bottom: 1px solid #ccc;
-}
-
-li:first-child {
- padding-top: 0;
-}
-
-li:last-child {
- padding-bottom: 0;
- border-bottom: none;
-}
-
-/* FAKE SELECT */
-
-summary.radios {
- counter-reset: radios;
-}
-
-summary.radios:before {
- content: var(--selection);
-}
-
-input[type="radio"] {
- counter-increment: radios;
- appearance: none;
- display: none;
-}
-
-input[type="radio"]:checked {
- display: inline;
- --display: block;
-}
-
-input[type="radio"]:after {
- content: attr(title);
- display: inline;
- font-size: 1rem;
-}
-
-ul.list {
- counter-reset: labels;
-}
-
-label {
- width: 100%;
- display: flex;
- cursor: pointer;
- justify-content: space-between;
-}
-
-label span {
- --display: none;
- display: var(--display);
- width: 1rem;
- height: 1rem;
- border: 1px solid #727272;
- border-radius: 3px;
-}
+}
\ No newline at end of file
diff --git a/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.html b/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.html
index 6e9e73afae6322f7f0c3403a881f5362c46a0ffc..55d591024a9a8ae9da399d8cf36861d01f66b084 100644
--- a/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.html
+++ b/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.html
@@ -1,5 +1,5 @@
<div class="container">
- <h1>Create a quiz</h1>
+ <p class="title">Create a quiz</p>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<div class="form-group">
<label for="difficulty">difficulty</label>
@@ -23,9 +23,8 @@
<label for="nbQuestion">Nb. questions</label>
<input type="number" class="form-control" placeholder="nombre de questions" formControlName="nbQuestion" />
</div>
- <br />
<div class="button-group">
- <button class="btn btn-primary" type="submit">Create</button>
+ <button class="blueButton" type="submit">Create</button>
</div>
</form>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.ts b/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.ts
index 6a4bbf9954f1087b4699193265776739c044a7ec..cbc1d924240150c9afec852a19cf43459dc01730 100644
--- a/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.ts
+++ b/src/app/modules/home/form-quiz/form-create-quiz/form-create-quiz.component.ts
@@ -17,11 +17,11 @@ export class FormCreateQuizComponent implements OnInit {
difficultyCtrl: any;
form: any;
- constructor(private formQuizService: FormQuizService, private fb: FormBuilder, private router: Router) {}
+ constructor(private formQuizService: FormQuizService, private fb: FormBuilder, private router: Router) { }
categories: { id: number; name: string }[] = [];
ngOnInit(): void {
this.categoryCtrl = this.fb.control(null, []);
- this.nbQuestionCtrl = this.fb.control(0, [Validators.required, Validators.min(1), Validators.max(50)]);
+ this.nbQuestionCtrl = this.fb.control(10, [Validators.required, Validators.min(1), Validators.max(50)]);
this.difficultyCtrl = this.fb.control(null, []);
this.form = this.fb.group({
diff --git a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.css b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..dbd59a35091d82fa78a23dee9c873aea74077495 100644
--- a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.css
+++ b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.css
@@ -0,0 +1,50 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ height: 100%;
+ width: 30vw;
+ gap: 1rem;
+}
+
+/* Titre */
+.container h1 {
+ font-size: 1.8em;
+ color: #333;
+ text-align: center;
+ /* margin-bottom: 1.5rem; */
+ margin: 0;
+ font-weight: 500;
+}
+
+.quiz-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ background-color: #FEFEFE;
+ border-radius: 10px;
+ gap: 1rem;
+}
+
+.quiz-info-content {
+ display: flex;
+ flex-direction: row;
+ gap: 0.6rem;
+ padding-left: 10%;
+}
+
+.quiz-title {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+hr {
+ width: 70%;
+ padding-left: 15%;
+ height: 0.5vmin;
+ margin: 0;
+ background-color: #B9B9B9;
+ border: none;
+}
\ No newline at end of file
diff --git a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
index a8ac5f2bcaca3028da380878ccd6156fd21d6111..81f9f26607efd4e97a0c3698e21dd40dd461c258 100644
--- a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
+++ b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
@@ -1 +1,29 @@
-<p>form-start-quiz works!</p>
+<div class="container">
+ <p class="title">Join a quiz</p>
+ <form [formGroup]="form" (ngSubmit)="submitForm()">
+ <div class="form-group">
+ <input type="text" class="inputRecherche" placeholder="code..." formControlName="code" />
+ </div>
+ </form>
+ <div class="quiz-info">
+ <div class="quiz-title">
+ <p class="quiz-info-title">Quiz information</p>
+ <hr>
+ </div>
+ <div class="quiz-info-content">
+ <p class="quiz-info-content-value">{{ quiz.category }}</p>
+ </div>
+ <div class="quiz-info-content">
+ <p class="quiz-info-content-title">Difficulty</p>
+ <p class="quiz-info-content-value">{{ quiz.difficulty }}</p>
+ </div>
+ <div class="quiz-info-content">
+ <p class="quiz-info-content-title">Nb. questions</p>
+ <p class="quiz-info-content-value">{{ quiz.nbQuestion }}</p>
+ </div>
+ </div>
+
+ <div class="new-quiz">
+ <button class="blueButton" (click)="joinQuiz()">Go !</button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
index 97698651fb34bce0dce811c84b3e86fed229324d..0e091bd7636c3ea057fbd76d9151599cbcb3530f 100644
--- a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
+++ b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
@@ -1,4 +1,7 @@
import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { FormQuizService } from '../../../../services/form-quiz.service';
+import { Router } from '@angular/router';
@Component({
selector: 'app-form-start-quiz',
@@ -6,5 +9,46 @@ import { Component } from '@angular/core';
styleUrl: './form-start-quiz.component.css'
})
export class FormStartQuizComponent {
+ themes: { id: number; name: string }[] = [];
+ quiz: any;
+
+ codeCtrl: any;
+ form: any;
+
+ constructor(private formQuizService: FormQuizService, private fb: FormBuilder, private router: Router) { }
+ categories: { id: number; name: string }[] = [];
+
+ ngOnInit(): void {
+ this.codeCtrl = this.fb.control(null, [Validators.required]);
+
+ this.form = this.fb.group({
+ code: this.codeCtrl,
+ });
+
+ this.quiz = {
+ category: "Math",
+ nbQuestion: 10,
+ difficulty: "easy",
+ }
+
+ }
+
+ submitForm(): void {
+ if (this.form?.valid) {
+ this.router.navigate([''/*submit to API*/], {
+ queryParams: {
+ code: this.form.value.code,
+ },
+ });
+ }
+ }
+
+ joinQuiz(): void {
+ this.router.navigate(['/play-quiz'], {
+ queryParams: {
+ code: this.form.value.code,
+ },
+ });
+ }
}
diff --git a/src/app/modules/home/my-quiz/my-quiz.component.css b/src/app/modules/home/my-quiz/my-quiz.component.css
index 58c2d6da3eff049a1cb2fdab88c52fe7e4425573..f289381de09d5ec88be7818f701d08375b154eb0 100644
--- a/src/app/modules/home/my-quiz/my-quiz.component.css
+++ b/src/app/modules/home/my-quiz/my-quiz.component.css
@@ -8,12 +8,6 @@
padding-inline: 10%;
}
-.title {
- font-size: 5vmax;
- font-weight: bold;
- margin: 0px;
-}
-
/* Liste */
.scrollable-list {
height: 45%;
diff --git a/src/styles.css b/src/styles.css
index 34bf3655cee6d230909c7d21f3b9369ed1d26046..233819662b74d01f2a646d03a2f0a99346d45709 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -69,7 +69,7 @@ h1 {
border-color: #2B73FE;
border-width: 4px;
border-style: solid;
- height: 100px;
+ height: 10vmin;
width: 100%;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@@ -136,6 +136,12 @@ h1 {
-webkit-box-sizing: border-box;
}
+.title {
+ font-size: 7vmin;
+ font-weight: bold;
+ margin: 0px;
+}
+
/* scrollable lists */
.scrollable-list::-webkit-scrollbar {
width: 10px;