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..c20d9fcfd9c62a01b1e903d13cb4b05f6c4b0da9 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,36 @@
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;
+}
+
+.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..90ab79c5b5e241924d02de0248e4a753456aa24c 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,29 @@
.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;
}
+.header {
+ top: 0;
+ margin: 0;
+ height: min 25%;
+ color: #FFFFFF;
+}
+
.title {
/* margin-top: 10vh; */
@@ -30,40 +32,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 +57,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..1a7c71fa02ec6565fd854ab0e230abb84e9aa92a 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 }}</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