Skip to content
Snippets Groups Projects
Commit 75fd6f1e authored by Matthieu BENOIST's avatar Matthieu BENOIST
Browse files

Merge branch 'livraison' into 'main'

Livraison

See merge request !2
parents b3adde20 c3d7efb7
Branches
Tags
1 merge request!2Livraison
<div class="answer-box">
@for (choice of quiz_segment.possible_answers; track $index) {
@if (quiz_segment.true_answers.includes($index)) {
<label class="answer-choice correct">
<i class="pi pi-check-circle"></i>
<p class="choice-text">
{{ choice }}
</p>
</label>
} @else if (progressService.currentAnswer().includes($index)) {
<label class="answer-choice wrong">
<i class="pi pi-times-circle"></i>
<p class="choice-text">
{{ choice }}
</p>
</label>
} @else {
<label class="answer-choice neutral">
<i class="pi pi-circle"></i>
<p class="choice-text">
{{ choice }}
</p>
</label>
}
}
<span class="explanation">{{ quiz_segment.explanation }}</span>
</div>
import { Component, inject } from "@angular/core";
import { DataService } from "../../../../shared/services/quiz-service";
import { ProgressService } from "../../../../shared/services/progress-service";
import { RadioButtonModule } from 'primeng/radiobutton';
import { CheckboxModule } from 'primeng/checkbox';
import { ReactiveFormsModule } from "@angular/forms";
@Component({
selector: 'app-answer-box',
imports: [ReactiveFormsModule, RadioButtonModule, CheckboxModule],
templateUrl: './answer-box.component.html',
styleUrl: './answer-box.component.css'
})
export class AnswerBoxComponent {
dataService = inject(DataService);
progressService = inject(ProgressService);
quiz_segment = this.dataService.currentSegment()!;
}
<div class="theme">
<span>Thème : {{ dataService.currentTopic() }}</span>
</div>
<h1 class="question">{{ quiz_segment()?.question }}</h1>
@if (!progressService.answered()) {
<app-choice-box></app-choice-box>
} @else {
<app-answer-box></app-answer-box>
}
<div>
<h1>Le quiz est fini !</h1>
<h2>
Votre score est de {{ progressService.score() }} /
{{ progressService.questionNumber() }}
</h2>
</div>
<div class="lower-section">
<span
>Vous pouvez passer à Inclusif, le jeu, ou lancer une autre série de
questions.
</span>
<p-divider />
<div class="start-div">
<p-button
(click)="progressService.goToBegining()"
severity="secondary"
variant="outlined"
>Voir Inclusif, le jeu</p-button
>
<p-button (click)="progressService.goToBegining()">
Relancer une série
</p-button>
</div>
</div>
<div class="presentation-section">
<h1>Quiz</h1>
<h2>Concevons nos services numériques pour tout le monde !</h2>
<p-image
src="images/banner.png"
alt="Image de présentation du quiz"
[imageStyle]="{ objectFit: 'contain' }"
width="90%"
/>
<p>Bienvenue sur le quiz du jeu Inclusif, le jeu.</p>
<p>
Ce quiz vous permet d'aborder de manière ludique les problèmes liés à
l'inclusivité.
</p>
</div>
<div class="lower-section">
<p-divider />
<div class="start-div">
<div class="n-questions-selector">
<p class="">Nombre de questions</p>
<div class="selector-buttons">
<p-button
severity="contrast"
(click)="adjustNumberOfQuestions(-1)"
[disabled]="iNumberOfQuestions == 0"
aria-label="Enlever des questions"
icon="pi pi-minus"
/>
<span class="n-questions-text">
{{
possibleNumberOfQuestionsPerTopic[iNumberOfQuestions] *
numberOfTopics
}}
</span>
<p-button
severity="contrast"
(click)="adjustNumberOfQuestions(1)"
[disabled]="
iNumberOfQuestions == possibleNumberOfQuestionsPerTopic.length - 1
"
aria-label="Ajouter des questions"
icon="pi pi-plus"
/>
</div>
</div>
<p-button
class="start-game-button"
(click)="
progressService.start(
possibleNumberOfQuestionsPerTopic[iNumberOfQuestions]
)
"
aria-label="Commencer le quiz"
>
Passer à l'action
</p-button>
</div>
</div>
:host {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
padding: 16px;
}
.quiz {
display: flex;
flex-direction: column;
height: 100%;
width: 80%;
margin: auto;
align-items: center;
justify-content: start;
}
.progress {
width: 100%;
margin: 2% auto;
display: grid;
grid-template-columns: fit-content(100%) auto;
column-gap: 2%;
row-gap: 0%;
align-items: center;
color: var(--p-primary-500);
}
.progress-bar {
--p-progressbar-label-font-size: 0;
--p-progressbar-height: 1vh;
}
.question-text {
grid-column-start: 2;
padding: 0 0 0 2%;
margin: 0;
}
.next {
display: flex;
flex-direction: column;
align-items: center;
margin-top: auto;
width: 100%;
position: relative;
bottom:0em;
}
.button-page{
--p-button-padding-x: 39px;
}
\ No newline at end of file
@if (progressService.questionNumber() === 0) {
<app-quiz-homepage></app-quiz-homepage>
} @else if (progressService.hasEnded()) {
<app-quiz-endpage></app-quiz-endpage>
} @else {
<div class="quiz">
<div class="progress">
<p class="question-text">
{{ "Question " + progressService.questionNumber() }}
</p>
<p>{{ (progressPercentage() | number: "1.0-0") + " %" }}</p>
<p-progressbar class="progress-bar" [value]="progressPercentage()" />
</div>
<app-quiz-card></app-quiz-card>
<div class="next">
<p-divider class="divider" />
@if (!progressService.answered()) {
<p-button
class="button-page"
(click)="quizCard()!.choiceBox()!.tryToAnswer()"
>
Répondre
</p-button>
} @else {
<p-button class="button-page" (click)="progressService.goToNext()">
Suivant
<i class="pi pi-arrow-right"></i>
</p-button>
}
</div>
</div>
}
@import "navbar/navbar.component.css";
@import "quiz/quiz.component.css";
@import "autoeval/autoeval.component.css";
......@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Quiz</title>
<title>Auto-évaluation</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="./images/favicon.ico" />
......
......@@ -15,3 +15,7 @@ body {
display: flex;
flex-direction: column;
}
h1, h2, h3, p {
color: #333333;
}
\ No newline at end of file
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"compileOnSave": false,
"compilerOptions": {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment