diff --git a/public/CONGRATS.png b/public/CONGRATS.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a6c27296184feeb9840c413d17c7b62ac845017
Binary files /dev/null and b/public/CONGRATS.png differ
diff --git a/public/WEB-QUESTION.png b/public/WEB-QUESTION.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8f4c4f465f7236dccb68e2b8a7b23d22be8f04f
Binary files /dev/null and b/public/WEB-QUESTION.png differ
diff --git a/src/app/modules/home/play-quiz/multiple-choice/multiple-choice.component.css b/src/app/modules/home/play-quiz/multiple-choice/multiple-choice.component.css
index d6f840fc2988966965a124aee2cbb59beb8229a9..59713dc079c0f6069cc3c6d25ba5db42e3a4c2ef 100644
--- a/src/app/modules/home/play-quiz/multiple-choice/multiple-choice.component.css
+++ b/src/app/modules/home/play-quiz/multiple-choice/multiple-choice.component.css
@@ -2,59 +2,37 @@
flex-grow: 1;
display: grid;
grid-template-columns: 40% 40%;
- grid-template-rows: auto auto;
+ grid-template-rows: 100% 100%;
+ height: 40%;
grid-gap: 2vh 5%;
justify-content: center;
align-items: center;
-
- .button-selection {
- background-color: #fff;
- height: 28vh;
- padding: auto;
- margin: 2vh;
- border-radius: 10px;
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 8vh;
- font-family: sans-serif;
-
- border: 0;
- color: black;
- }
}
-.good-answer {
+.button-selection {
background-color: #fff;
- height: 28vh;
- padding: 5vh;
- margin: 2vh;
+ height: 100%;
+ width: 100%;
+ padding: auto;
border-radius: 10px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
display: flex;
align-items: center;
justify-content: center;
- font-size: 8vh;
+ font-size: 5vmin;
font-family: sans-serif;
+ border: 0;
+ color: black;
+ cursor: pointer;
+}
+
+.good-answer {
border: 2px solid green;
color: green;
}
.wrong-answer {
- background-color: #fff;
- height: 28vh;
- padding: 5vh;
- margin: 2vh;
- border-radius: 10px;
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 8vh;
- font-family: sans-serif;
-
border: 2px solid red;
color: red;
-}
+}
\ No newline at end of file
diff --git a/src/app/modules/home/play-quiz/multiple-choice/multiple-choice.component.html b/src/app/modules/home/play-quiz/multiple-choice/multiple-choice.component.html
index 6591bd061c7956cdad99bc2d664e25cd1c3c81ed..af63d1c5ae176e91de63a5a9cc212b3fc37abf92 100644
--- a/src/app/modules/home/play-quiz/multiple-choice/multiple-choice.component.html
+++ b/src/app/modules/home/play-quiz/multiple-choice/multiple-choice.component.html
@@ -1,13 +1,9 @@
<div class="button-container">
- <button
- *ngFor="let answer of answers; let i = index"
- (click)="handleClick(answer.id, i)"
- [ngClass]="{
+ <button *ngFor="let answer of answers; let i = index" (click)="handleClick(answer.id, i)" [ngClass]="{
'wrong-answer': answer_click == i && !good_answers[i],
'good-answer': good_answers[i],
- 'button-selection': answer_click != i && !good_answers[i]
- }"
- >
+ 'button-selection': true
+ }">
{{ answer.text }}
</button>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/home/play-quiz/play-quiz.component.css b/src/app/modules/home/play-quiz/play-quiz.component.css
index 8c1b215c2be9c0207581f3f4a92d1f7915b91be2..b7d3e9025a8a77109f6f43dde0fe51cf2f323b05 100644
--- a/src/app/modules/home/play-quiz/play-quiz.component.css
+++ b/src/app/modules/home/play-quiz/play-quiz.component.css
@@ -1,27 +1,39 @@
.main {
display: flex;
flex-direction: column;
+ position: absolute;
+ top: 0;
+ left: 0;
/* space between*/
-
- width: 100vw;
- height: 100vh;
+ width: 100%;
+ height: 100%;
margin: 0;
background-color: #f3f3f3;
-}
-.header {
- top: 0;
- margin: 0;
- height: min 25vh;
- color: #7e3f97;
-
- background-image: url(../../../../../public/BACKGROUND_Acceuil.png);
+ background-image: url(../../../../../public/WEB-QUESTION.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
+mat-icon {
+ width: auto;
+ height: auto;
+ margin: 0;
+ font-size: 8vmin;
+ font-style: normal;
+ font-weight: 500;
+ color: #FFFFFF;
+}
+
+.header {
+ top: 0;
+ margin: 0;
+ height: min 25%;
+ color: #FFFFFF;
+}
+
.title {
/* margin-top: 10vh; */
@@ -30,40 +42,21 @@
font-size: 5vh;
}
+.answer-container {
+ height: 75%;
+}
+
+.disabled {
+ pointer-events: none;
+ /* Désactive toutes les interactions */
+}
+
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
-.button-container {
- flex-grow: 1;
- /* Prend tout l'espace restant */
- display: grid;
- grid-template-columns: 40% 40%;
- grid-template-rows: auto auto;
- grid-gap: 2vh 5%;
- justify-content: center;
- align-items: center;
-
- .button-selection {
- background-color: #fff;
- height: 28vh;
- padding: auto;
- margin: 2vh;
- border-radius: 10px;
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 8vh;
- font-family: sans-serif;
-
- border: 0;
- color: black;
- }
-}
-
p {
margin-top: 0;
font-size: 3vh;
@@ -74,64 +67,28 @@ h2 {
margin: 0;
padding: 0;
bottom: auto 0;
+ font-size: 3vmax;
}
-.next-question {
- display: flex;
- justify-content: center;
- /* height: 10vh; */
- bottom: 0;
-
- button {
- text-align: center;
- height: 2.5rem;
- display: block;
- width: 20rem;
- /* padding: 1rem; */
- margin: 1rem 0;
- position: absolute;
- bottom: 0;
- font-size: 3vh;
- cursor: pointer;
- border-radius: 1em;
- background-color: #7e3f97;
- color: white;
- font-weight: bold;
- border: none;
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
- }
-}
-
-.good-answer {
- background-color: #fff;
- height: 28vh;
- padding: 5vh;
- margin: 2vh;
- border-radius: 10px;
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 8vh;
- font-family: sans-serif;
-
- border: 2px solid green;
- color: green;
+h5 {
+ margin: 0;
+ padding: 0;
+ font-size: 2vmax;
}
-.wrong-answer {
- background-color: #fff;
- height: 28vh;
- padding: 5vh;
- margin: 2vh;
- border-radius: 10px;
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 8vh;
- font-family: sans-serif;
-
- border: 2px solid red;
- color: red;
-}
+.btnNext {
+ position: absolute;
+ bottom: 2vh;
+ /* Distance par rapport au bas du conteneur */
+ left: 50%;
+ /* Position horizontale centrée */
+ transform: translateX(-50%);
+ /* Ramène le bouton au centre exact */
+ padding: 1vh 2vh;
+ font-size: 2vmax;
+ background-color: #2B73FE;
+ color: white;
+ border: none;
+ border-radius: 50px;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/app/modules/home/play-quiz/play-quiz.component.html b/src/app/modules/home/play-quiz/play-quiz.component.html
index 1c4d412b677145a1fef93132af6e3e14b0983939..92ca9818105b9e658db8a50b35063a2408314d58 100644
--- a/src/app/modules/home/play-quiz/play-quiz.component.html
+++ b/src/app/modules/home/play-quiz/play-quiz.component.html
@@ -1,18 +1,21 @@
<div *ngIf="!isLoading" class="main">
<div class="header">
<mat-icon (click)="goHome()">home</mat-icon>
- <p>Category : {{ actualQuestion.category.name }}</p>
<div class="title">
<h4>Question {{ actualQuestionIndex + 1 }}/{{ quiz.questions.length }}</h4>
- <h4>Score : {{ score }}</h4>
+ <h5>Score : {{ score }}/{{ quiz.questions.length }}</h5>
+ <h5>Category : {{ actualQuestion.category.name }}</h5>
<h2>{{ actualQuestion.text }}</h2>
</div>
</div>
- <app-multiple-choice [answers]="actualQuestion.answers" [getAnswer]="getAnswerBound"></app-multiple-choice>
+ <div class="answer-container" [class.disabled]="showNextQuestion">
+ <app-multiple-choice [answers]="actualQuestion.answers" [getAnswer]="getAnswerBound"></app-multiple-choice>
+ </div>
<div class="next-question">
- <button *ngIf="showNextQuestion" (click)="nextQuestion()">
- @if (actualQuestionIndex === this.quiz.questionIndex - 1 + this.quiz.questions.length - 1) { Finish quiz }
+ <button *ngIf="showNextQuestion" (click)="nextQuestion()" class="btnNext">
+ @if (actualQuestionIndex === this.quiz.questionIndex - 1 + this.quiz.questions.length - 1) { Finish quiz
+ }
@else { Next question }
</button>
</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/home/play-quiz/play-quiz.component.ts b/src/app/modules/home/play-quiz/play-quiz.component.ts
index bb1821c4736163b9caa9b4587c965f3f76711c90..b90f3658f5ff761f4e1800bc3ffbc93dd07f2d41 100644
--- a/src/app/modules/home/play-quiz/play-quiz.component.ts
+++ b/src/app/modules/home/play-quiz/play-quiz.component.ts
@@ -15,7 +15,7 @@ export class PlayQuizComponent implements OnInit {
private activatedRoute: ActivatedRoute,
private router: Router,
private cdr: ChangeDetectorRef
- ) {}
+ ) { }
isLoading: boolean = false;
quiz: any = [];
actualQuestion: any;
@@ -40,13 +40,18 @@ export class PlayQuizComponent implements OnInit {
nextQuestion() {
if (this.actualQuestionIndex === this.quiz.questionIndex - 1 + this.quiz.questions.length - 1) {
Swal.fire({
- title: 'Quiz finished !',
- text: 'Want a rematch ?',
+ title: 'CONGRATS !',
+ text: 'You finished the test with a score of ' + this.score + ' / ' + this.quiz.questions.length,
+ // imageUrl: "url(../../../../../public/CONGRATS.png)",
+ // imageWidth: 400,
+ // imageHeight: 200,
+ // imageAlt: "Custom image",
+
showDenyButton: true,
showCancelButton: false,
confirmButtonText: 'Play again',
- confirmButtonColor: '#7e3f97',
- denyButtonColor: '#D6BAEC',
+ confirmButtonColor: '#2B73FE',
+ denyButtonColor: '#00B3F4',
denyButtonText: `Back home`,
}).then((result) => {
if (result.isConfirmed) {