From 84540470272e0c4619c9a2270ffb10f045a8a54f Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Thu, 5 Dec 2024 18:33:49 +0100
Subject: [PATCH 1/7] style: header css fix
---
.../form-play-quiz.component.css | 26 ++++++++++---------
.../form-play-quiz.component.html | 4 +--
2 files changed, 16 insertions(+), 14 deletions(-)
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 33566cf..ca1eb68 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,32 @@
.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;
}
.button-header {
background-color: #FFFFFF;
border-radius: 10px;
- width: 80%;
- height: 10%;
+ width: 70%;
+ height: 5%;
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,13 +34,13 @@
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
}
.play-button {
height: 100%;
width: 80%;
-}
-
+}
\ 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 f420c5b..50ed795 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>
--
GitLab
From 67fffa056aff4f124606a4ad081a644e48b26340 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Thu, 5 Dec 2024 18:48:53 +0100
Subject: [PATCH 2/7] style: css creat quiz
---
.../form-play-quiz/form-play-quiz.component.css | 4 ++++
.../form-create-quiz.component.css | 17 ++++++-----------
.../form-create-quiz.component.html | 4 ++--
src/styles.css | 2 +-
4 files changed, 13 insertions(+), 14 deletions(-)
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 ca1eb68..91fe503 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
@@ -43,4 +43,8 @@
.play-button {
height: 100%;
width: 80%;
+}
+
+.blueButton {
+ height: 10%;
}
\ No newline at end of file
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 3af8412..bc28325 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 */
+ height: 100%;
}
/* 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: 100%;
gap: 1rem;
/* Espacement entre les éléments */
}
@@ -220,4 +215,4 @@ label span {
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 6e9e73a..23ded8c 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
@@ -25,7 +25,7 @@
</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/styles.css b/src/styles.css
index 34bf365..1f51c17 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;
}
--
GitLab
From 2282c79ce9989db7bdd8827798d5a8d6bc4f97df Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Thu, 5 Dec 2024 18:56:53 +0100
Subject: [PATCH 3/7] fix: create quiz component
---
.../form-create-quiz/form-create-quiz.component.html | 2 +-
.../form-create-quiz/form-create-quiz.component.ts | 4 ++--
src/app/modules/home/my-quiz/my-quiz.component.css | 6 ------
src/styles.css | 6 ++++++
4 files changed, 9 insertions(+), 9 deletions(-)
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 23ded8c..8c9df5f 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>
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 6a4bbf9..cbc1d92 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/my-quiz/my-quiz.component.css b/src/app/modules/home/my-quiz/my-quiz.component.css
index 58c2d6d..f289381 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 1f51c17..6736a0c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -136,6 +136,12 @@ h1 {
-webkit-box-sizing: border-box;
}
+.title {
+ font-size: 5vmax;
+ font-weight: bold;
+ margin: 0px;
+}
+
/* scrollable lists */
.scrollable-list::-webkit-scrollbar {
width: 10px;
--
GitLab
From 9a00c1c7de54c000be86f5fb87348fcf67d7d97a Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Thu, 5 Dec 2024 20:01:47 +0100
Subject: [PATCH 4/7] feat: join quiz with ID html
---
.../form-quiz/form-create-quiz/form-create-quiz.component.html | 1 -
1 file changed, 1 deletion(-)
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 8c9df5f..55d5910 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
@@ -23,7 +23,6 @@
<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="blueButton" type="submit">Create</button>
</div>
--
GitLab
From 1ddfd5f221b605af4ce4be733f1d38e91650e5e4 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Thu, 5 Dec 2024 20:02:05 +0100
Subject: [PATCH 5/7] feat: include form create quiz
---
.../form-start-quiz.component.html | 30 ++++++++++++++++++-
1 file changed, 29 insertions(+), 1 deletion(-)
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 a8ac5f2..81f9f26 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
--
GitLab
From 1c36eb549bc6bde5749946df53fe78613fadb7f3 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Thu, 5 Dec 2024 20:02:17 +0100
Subject: [PATCH 6/7] style: css for the new forms
---
.../form-play-quiz.component.css | 6 +-
.../form-create-quiz.component.css | 140 +-----------------
.../form-start-quiz.component.css | 49 ++++++
.../form-start-quiz.component.ts | 44 ++++++
src/styles.css | 2 +-
5 files changed, 102 insertions(+), 139 deletions(-)
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 91fe503..3b7e87f 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
@@ -11,11 +11,15 @@
padding-left: 75px;
}
+.content {
+ height: calc(100% - 5vmin - 2vmin);
+}
+
.button-header {
background-color: #FFFFFF;
border-radius: 10px;
width: 70%;
- height: 5%;
+ height: 5vmin;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
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 bc28325..8bc5849 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,7 +1,7 @@
/* Conteneur principal */
.container {
- padding: 1rem;
- height: 100%;
+ padding-top: 5%;
+ height: 95%;
}
/* Titre */
@@ -18,7 +18,7 @@ form {
display: flex;
flex-direction: column;
justify-content: space-evenly;
- height: 100%;
+ height: calc(100% - 7vmin - 1rem);
gap: 1rem;
/* Espacement entre les éléments */
}
@@ -81,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-start-quiz/form-start-quiz.component.css b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.css
index e69de29..1ac7d17 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,49 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ height: 100%;
+ 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.ts b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
index 9769865..0e091bd 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/styles.css b/src/styles.css
index 6736a0c..2338196 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -137,7 +137,7 @@ h1 {
}
.title {
- font-size: 5vmax;
+ font-size: 7vmin;
font-weight: bold;
margin: 0px;
}
--
GitLab
From a8bed318309571508f23d0e35571d165e3b72ed0 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Thu, 5 Dec 2024 20:05:33 +0100
Subject: [PATCH 7/7] style: make form wider
---
.../home/form-quiz/form-start-quiz/form-start-quiz.component.css | 1 +
1 file changed, 1 insertion(+)
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 1ac7d17..dbd59a3 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
@@ -3,6 +3,7 @@
flex-direction: column;
justify-content: space-evenly;
height: 100%;
+ width: 30vw;
gap: 1rem;
}
--
GitLab