diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 5c6f56c93c8621287c1f723e0fb26df7798defd5..75cbb3cefbf10eb5711d1664e22afa7890b87185 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -21,7 +21,7 @@ jobs:
- name: Setup Node.js
uses: actions/setup-node@v3
with:
- node-version: 18 # Adapter selon la version de ton projet
+ node-version: 18
- name: Install dependencies
run: npm install
@@ -30,7 +30,7 @@ jobs:
run: npm install -g @angular/cli
- name: Build Angular app
- run: ng build --configuration production --base-href "/Quiz/" # Remplace par le nom de ton dépôt
+ run: ng build --configuration production --base-href "/Quiz/"
- name: Add 404.html for GitHub Pages
run: |
@@ -46,5 +46,5 @@ jobs:
- name: Deploy to GitHub Pages
uses: JamesIves/github-pages-deploy-action@v4
with:
- branch: gh-pages # Branche de déploiement
- folder: dist/quiz/browser # Remplace par le nom du dossier de build
+ branch: gh-pages
+ folder: dist/quiz/browser
diff --git a/src/app/shared/assets/data/question_final.md b/documentation.md
similarity index 66%
rename from src/app/shared/assets/data/question_final.md
rename to documentation.md
index 8fb6d35f9b53305f817bd4e7fa26cd12015e4ec1..ab8df90bd925db8bfa2420299b964ee7424950fd 100644
--- a/src/app/shared/assets/data/question_final.md
+++ b/documentation.md
@@ -1,8 +1,11 @@
-# Documentation questions_final.json
+# Documentation du quiz
-Le Json est composé d'un dictionnaire global avec trois clés.
+Le quiz repose sur un fichier json qui contient les questions et les réponses possibles.
-## question_topics
+## Json
+Ce Json est composé d'un dictionnaire global avec trois clés.
+
+### question_topics
Cette clé contient les différentes catégories de questions du quiz (str).
Actuellement, il y a 4 catégories.
@@ -11,7 +14,7 @@ Pour ajouter une catégorie, il suffit de rajouter le nom de la nouvelle catégo
La liste doit avoir le même nombre d'élements que la liste de question_cycle.
-## question_cycle
+### question_cycle
Cette clé contient les cycles de choix de catégorie différent (int).
Les cartes quiz apparaissent de manière aléatoire mais il doit y avoir une cohérence au niveau des catégories qui apparaissent.
@@ -19,36 +22,39 @@ Ainsi, le premier élément de la liste concerne le premier élément de la list
La liste doit avoir le même nombre d'élements que la liste de question_topics.
-## questions
+### questions
Cette clé contient des dictionnaires qui correspondent aux différentes catégories de question_topics.
Dans chacun des dictionnaires, il y a une liste de dictionnaires qui correspondent à chacune des cartes du jeu.
-### question_type
+#### question_type
Cette clé (str) sert à définir le type de questions de la carte quiz parmi les deux types suivants :
- QCM
- QCU
-### question
+#### question
Cette clé (str) contient la question de la carte quiz.
-### possible_answers
+#### possible_answers
Cette clé (list) sert à définir les différentes réponses affichées à l'utilisateur. Cela a été pensé pour avoir entre 2 et 4 propositions.
C'est une liste d'élément string.
Pour les QCM, il faut entrer pour la première proposition "A : " suivi de la proposition, pour la seconde, c'est "B : " suivant de la proposition, etc...
-### true_answers
+#### true_answers
Cette clé (list) sert à définir l'indice (en commançant à 0) de la bonne réponse parmis les réponses possibles définies dans possible_answers.
La liste doit-être composée d'un élément (int) unique si le question_type est QCU et est composée d'un ou plusieurs éléments (int) si le question_type est QCM.
-### explanation
+#### sentences
+Seulement pour les QCM, cela permet d'afficher les bonnes réponses à l'utilisateur.
+
+#### explanation
Cette clé (str) contient l'explication de la bonne réponse de la carte quiz.
@@ -56,4 +62,23 @@ Pour les QCM, il faut rajouter s'il n'y a pas qu'elles sont les bonnes réponses
Par exemple, si la deuxième et troisième proposition est juste, il faudra marquer avant l'explication :
"Les bonnes réponses sont B et C. \n"
-De plus, s'il y a des sources dans l'explication, il faut rajouter un "\n" avant le mot "Source".
\ No newline at end of file
+De plus, s'il y a des sources dans l'explication, il faut rajouter un "\n" avant le mot "Source".
+
+## Les services
+
+Le site utilise deux services :
+ - progress-service : pour sauvegarder la progression de l'utilisateur
+ - quiz-service : pour récupérer les questions du quiz
+Ce deuxième service se base sur un tirage aléatoire des questions par thèmes. Ensuite on tire une à une les questions pour chaque thème jusqu'à ne plus en avoir.
+
+## Les composants
+
+Le site affiche un composant quiz et les cartes viennent varier à l'intérieur. On a alors des quiz-card qui utilise des answer-box et des choice-box.
+
+## Les types
+
+Il y a deux interfaces qui sont utilisées pour les questions :
+ - QuizData -> qui contient : question_topics, question_cycle et questions
+ - QuizSegment -> qui contient : QCM_answers, question_type, question, possible_answers, true_answers, explanation
+
+
diff --git a/public/images/Score_A.png b/public/images/Score_A.png
new file mode 100644
index 0000000000000000000000000000000000000000..b90ce60ad99572d3123598198bf3163fbd42ee78
Binary files /dev/null and b/public/images/Score_A.png differ
diff --git a/public/images/Score_B.png b/public/images/Score_B.png
new file mode 100644
index 0000000000000000000000000000000000000000..90d9929aa1fd63dcbaaa62ae8ca42727d652ecc8
Binary files /dev/null and b/public/images/Score_B.png differ
diff --git a/public/images/Score_C.png b/public/images/Score_C.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ca8b07f94718d2938dbe70f440a25f0b6018a75
Binary files /dev/null and b/public/images/Score_C.png differ
diff --git a/public/images/Score_D.png b/public/images/Score_D.png
new file mode 100644
index 0000000000000000000000000000000000000000..08c88f6f63f0d1aafc3407c8c02809bee55bf574
Binary files /dev/null and b/public/images/Score_D.png differ
diff --git a/public/images/Score_E.png b/public/images/Score_E.png
new file mode 100644
index 0000000000000000000000000000000000000000..52fc5aa5c72c2c6a4e11b87d89cd6562740a36ea
Binary files /dev/null and b/public/images/Score_E.png differ
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 02c938db3e93b93d7cd12a094ca614ef70ed4330..bb07e8e87605131bd62aa2580832c9e7fb03d071 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -6,25 +6,19 @@
height: 100%;
}
-/* Navbar */
+/* Header */
.header-div {
height: 66px;
}
/* Contenu principal */
main {
- flex: 1; /* Prend tout l'espace disponible */
+ flex:1;
display: flex;
flex-direction: column;
- height: 100%;
-}
-
-.quiz-div {
- flex: 1; /* Prend tout l'espace disponible */
- min-height: 50vh; /* Hauteur minimale pour le contenu */
overflow: auto; /* Ajoute un défilement si le contenu est trop long */
height: 100%;
- width: 100%;
+ padding: 16px;
}
/* Footer */
@@ -38,30 +32,32 @@ footer {
padding: 0 28px;
font-size: 12px;
width: 100%;
- margin-top: auto; /* Force le footer à rester en bas */
+ margin-top: auto;
}
footer ul {
list-style-type: none;
+ padding: 0;
+ margin: 0;
display: flex;
- gap: 12px; /* Espace entre les éléments */
+ gap: 12px;
}
footer li {
display: inline-block;
}
-footer li:hover{
- text-decoration: underline;
-}
-
footer a {
display: flex;
color: white !important;
+ text-decoration: none;
align-items: center;
vertical-align: middle;
}
+footer a:hover{
+ text-decoration: underline;
+}
footer .right-section {
display: flex;
@@ -71,4 +67,4 @@ footer .right-section {
footer .right-section img {
height: 20px;
margin-right: 5px;
-}
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7c76533afd61a6a4da112d25ddd9d9fc31f43a8d..6482a6e2d84e1a0fe59a1a457f2ceb57e08931aa 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,23 +1,24 @@
<div class="app-container">
+ <!-- Mise en place du header -->
<header>
<div class="header-div">
<app-header></app-header>
</div>
</header>
+ <!-- Mise en place de la zone centrale du projet -->
<main>
- <div class="quiz-div">
- <router-outlet></router-outlet>
- </div>
+ <router-outlet></router-outlet>
</main>
+ <!-- Mise en place du footer -->
<footer>
<ul>
<li><a href="https://resin.grandlyon.com/mentions-legales" target="_blank" rel="noopener noreferrer">Mentions légales</a></li>
<p>●</p>
<li><a href="https://resin.grandlyon.com/page/qui-sommes-nous" target="_blank" rel="noopener noreferrer">Qui sommes nous ?</a></li>
<p>●</p>
- <li><a href="/accessibilite" target="_blank" rel="noopener noreferrer">Accessibilité : Non conforme</a></li>
+ <li>Accessibilité : Non conforme</li>
</ul>
<div class="right-section">
<ul>
@@ -25,7 +26,8 @@
<a href="https://www.grandlyon.com/" target="_blank" rel="noopener noreferrer">
<img src="https://inclusivite-resin.grandlyon.com/app/themes/ausy-modular-theme/public/images/picto-plus.0a1d2b.png" alt="Logo">
<p>Un site de la Métropole de Lyon</p>
- </a></li>
+ </a>
+ </li>
</ul>
</div>
</footer>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4fa39b02b24ce9ecbcd5c74dfc283077b021f769..0495d90bb14bed8c5f4550cc2520631715ab038c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -12,8 +12,7 @@ import { HeaderComponent } from './views/header/header.component';
styleUrls: ['./app.component.css']
})
export class AppComponent {
- title = 'INCLUSIF: Le jeu';
- quizData = quizData;
+ quizData = quizData; // Prise des données des cartes du Quiz
}
export const quizData: QuizData = data;
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 4ad703dd084446ab668d7c28649308deeba307e3..a0740e36e66451466d7e04f30433e2058902301c 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,10 +1,19 @@
import { Routes } from '@angular/router';
+import { QuizHomepageComponent } from './views/quiz/quiz-homepage/quiz-homepage.component';
+import { QuizTimePageComponent } from './views/quiz/quiz-time/quiz-time.component';
+import { QuizEndpageComponent } from './views/quiz/quiz-endpage/quiz-endpage.component';
import { QuizComponent } from './views/quiz/quiz.component';
export const routes: Routes = [
{
- path: 'quiz', title: "Quiz Inclusif, le jeu", children: [
- { path: '**', component: QuizComponent },
+ path: 'quiz',
+ title: "Quiz Inclusif, le jeu",
+ children: [
+ { path: '', redirectTo: 'accueil', pathMatch: 'full' },
+ { path: 'accueil', component: QuizHomepageComponent },
+ { path: 'temps', component: QuizTimePageComponent },
+ { path: 'fin', component: QuizEndpageComponent },
+ { path: '**', component: QuizComponent },
],
},
{ path: '', redirectTo: 'quiz/accueil', pathMatch: 'full' },
diff --git a/src/app/shared/assets/data/questions_final.json b/src/app/shared/assets/data/questions_final.json
index 394e9b81eb6217af8c6e0ef96b3ec2b52caa7c8e..ef0111c2b7f37b62a12febcb17cfd69d50fb794e 100644
--- a/src/app/shared/assets/data/questions_final.json
+++ b/src/app/shared/assets/data/questions_final.json
@@ -28,7 +28,8 @@
2,
3
],
- "explanation": "Les bonnes réponses sont A, B, C et D. \nLe handicap moteur recouvre l’ensemble des troubles pouvant entraîner une atteinte partielle ou totale de la motricité, notamment des membres supérieurs et/ou inférieurs. "
+ "QCM_answers": "Les bonnes réponses sont A, B, C et D.",
+ "explanation": "Le handicap moteur recouvre l’ensemble des troubles pouvant entraîner une atteinte partielle ou totale de la motricité, notamment des membres supérieurs et/ou inférieurs. "
},
{
"question_type": "QCU",
@@ -40,6 +41,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "L'accessibilité numérique a été pensée dès la création d'Internet.\n \"Le pouvoir du Web est dans son universalité. L’accès pour tous, quel que soit le handicap, est un aspect essentiel.\" \n Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web"
},
{
@@ -53,6 +55,7 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "Pour un service en ligne et par semestre, la loi prévoit 25 000 € si le statut de conformité RGAA n’est pas affiché sur la page d’accueil et, pour le secteur public, 50 000 € pour défaut d'accessibilité."
},
{
@@ -66,6 +69,7 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "Il s'agit de l'ARCOM (Autorité de régulation de la communication audiovisuelle et numérique) qui est une autorité publique indépendante."
},
{
@@ -78,6 +82,7 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "Il s'agit du Référentiel Général d'Amélioration de l'Accessibilité, qui définit les critères pour qu'un service numérique soit accessible au personnes handicapées.\n Au niveau international, les WCAG (Web content Accessibility Guidelines) sont les recommandations techniques pour l'accessibilité des contenus web."
},
{
@@ -90,6 +95,7 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "Les documents sont analysés par les critères 13.3 et 13.4 du RGAA, pour les structures étant soumises aux obligations d'accessibilité."
},
{
@@ -107,7 +113,8 @@
2,
3
],
- "explanation": "Les bonnes réponses sont A, B, C et D. \nLa traduction en LSF peut être difficile à mettre en place, car l'image de l'interprète doit être incrustée dans la vidéo."
+ "QCM_answers": "Les bonnes réponses sont A, B, C et D.",
+ "explanation": "La traduction en LSF peut être difficile à mettre en place, car l'image de l'interprète doit être incrustée dans la vidéo."
},
{
"question_type": "QCU",
@@ -119,6 +126,7 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "Un lecteur d'écran retranscrit par synthèse vocale et/ou sur un afficheur braille ce qui est affiché sur l'écran d'un ordinateur ou d'un téléphone, et permet d'interagir avec le système d’exploitation et les applications."
},
{
@@ -131,6 +139,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "Les formations à l'accessibilité numérique sont proposées aux étudiants en informatique, mais restent optionnelles à ce jour."
}
],
@@ -145,6 +154,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "Le manque d'accessibilité d'une couleur vient d'un problème de contraste entre le texte et l'arrière-plan. Ainsi, un texte de couleur jaune sur un fond orange sera peu ou pas accessible. En revanche, un texte de couleur jaune sur fond noir sera suffisamment contrasté."
},
{
@@ -157,6 +167,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "Un dark pattern est une technique de design trompeuse qui manipule les utilisateurs pour les pousser à faire des actions non désirées, comme accepter des frais cachés ou s'abonner à des services"
},
{
@@ -171,6 +182,7 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "\n Les icônes ne sont pas un élément décoratif mais permettent de renforcer visuellement certaines actions et/ou informations."
},
{
@@ -185,6 +197,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "La hiérarchisation visuelle est un concept qui permet d'identifier les éléments présents par ordre de priorité et/ou d'importance relative."
},
{
@@ -198,6 +211,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "La phase de prototypage permet de tester certaines idées par un exemple incomplet et non définitif de ce que pourra être le produit ou l'objet final."
},
{
@@ -212,7 +226,8 @@
0,
2
],
- "explanation": "Les bonnes réponses sont A et C. \nUn \"feedback\" est un retour visuel et/ou textuel suite à une action réalisée par l'utilisateur permettant d'informer l'utilisateur sur la conséquence de ses actions."
+ "QCM_answers": "Les bonnes réponses sont A et C.",
+ "explanation": "Un \"feedback\" est un retour visuel et/ou textuel suite à une action réalisée par l'utilisateur permettant d'informer l'utilisateur sur la conséquence de ses actions."
},
{
"question_type": "QCU",
@@ -225,6 +240,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "Un design responsive est un design pensé pour s'adapter aux différentes tailles d'écrans et résolutions tels que les mobiles ou ordinateurs."
},
{
@@ -238,6 +254,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "L'approche \"centrée utilisateur\" se focalise sur une conception basée sur une étude des besoins et habitudes de l'utilisateur."
},
{
@@ -251,6 +268,7 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "Si des animations (éléments en mouvement, transitions) sont présentes au sein des interfaces, il est recommandé que celles-ci soient discrètes et utiles."
},
{
@@ -263,6 +281,7 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "Si un design accessible cherche à répondre aux besoins de certains handicaps, un design inclusif cherche à proposer une experience optimale pour tous."
}
],
@@ -277,6 +296,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "C'est généralement gratuit. Vous trouverez la liste des structures d'accompagnement sur https://cartographie.societenumerique.gouv.fr/orientation."
},
{
@@ -289,6 +309,7 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "Les troubles psychologiques sont la 2e cause d'arrêt de travail en France : 20% des arrêts maladie en 2022, contre 11% en 2016. Les troubles psychologiques constituent par ailleurs le principal motif des arrêts longs : 28% en 2022 vs 14% en 2016. \nSource : Baromètre annuel Absentéisme (Malakoff Humanis)"
},
{
@@ -302,6 +323,7 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "Source : Solinum, 2019"
},
{
@@ -315,6 +337,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "54% des Français déclarent souffrir de fatigue informationnelle, et 38% déclarent en souffrir \"beaucoup\". \nSource : Fondation Jean Jaurès, 2022."
},
{
@@ -328,6 +351,7 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "L'illectronisme est l'équivalent de l'illettrisme dans le domaine du numérique : la « situation d'une personne ne possédant pas les compétences numériques de base ou ne se servant pas d'Internet ». Les plus de 75 ans sont les plus touchés, avec 61,9 % en situation d'illectronisme. \nSources : Insee, 2021, Observatoire des inégalités, 2024"
},
{
@@ -340,11 +364,12 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "De nombreuses bonnes pratiques d'inclusivité numérique peuvent contribuer à produire un service numérique éco-responsable. Par exemple, le fait d'alléger les contenus pour qu'ils soient lisibles par tous permet de réduire l'impact carbone d'une page web."
},
{
"question_type": "QCU",
- "question": "Le droit à une alternative au numérique (ou droit au non numériquexiste pour tous les citoyens français aujourd'hui.",
+ "question": "Le droit à une alternative au numérique (ou droit au non numérique) existe pour tous les citoyens français aujourd'hui.",
"possible_answers": [
"Vrai",
"Faux"
@@ -352,6 +377,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "Le droit au non numérique n'existe pas en tant que tel. Néanmoins, le principe d'égalité d'accès aux services publics induit la possibilité d'y accéder quelque soit le canal d'interaction choisi. \nSource : vie-publique.fr, 2024"
},
{
@@ -365,6 +391,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "En 2022, 48% des Français ont déclaré rencontrer des difficultés avec le numérique, soit 13% de plus qu'en 2020. \nSource : Baromètre du numérique 2023"
},
{
@@ -377,6 +404,7 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "Dans le cadre de la production d'un service, l'intégration consiste à prévoir une déclinaison de ce service adaptée au public à intégrer, alors que l'inclusion consiste à imaginer un service utilisable par tous les publics."
},
{
@@ -390,6 +418,7 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "25 sites web sur 4147 contrôlés par l'Observatoire de l'Accessibilité Numérique sont totalement conformes au RGAA en septembre 2024. 351 (8%) sont partiellement conformes."
},
{
@@ -403,6 +432,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "Aidants Connect est un outil d'authentification d'un aidant numérique dans le cadre d'un accompagnement. Il sécurise l'action éventuelle de l'aidant sur les données de la personne aidée."
},
{
@@ -415,6 +445,7 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "Un \"dumb phone\" est, par opposition à un smartphone, un téléphone doté uniquement de fonctions de base (appels, SMS...), généralement simple à utiliser. Le marché des \"dumb phones\" ou \"feature phones\" est en relative croissance."
},
{
@@ -428,6 +459,7 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "Source : Taylor & Francis Online, 2006"
},
{
@@ -441,6 +473,7 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "Source : \"Why Web Performance Matters\" Gomez, 2011"
}
],
@@ -455,11 +488,12 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "Si les services numériques respectent les normes d'accessibilité numérique, les personnes handicapées n'ont pas de difficultés à les consulter. De plus, certains types de handicap n'impliquent pas systématiquement une situation d'exclusion numérique."
},
{
"question_type": "QCU",
- "question": "Combien de personnes ont-elles un handicap visuel en France ?",
+ "question": "Combien de personnes ont un handicap visuel en France ?",
"possible_answers": [
"700 000",
"1,7 millions",
@@ -468,11 +502,12 @@
"true_answers": [
1
],
+ "QCM_answers": "",
"explanation": "Une personne aveugle ou malvoyante naît toutes les 15 heures. En France, il y a 207 000 aveugles et malvoyants profonds et 932 000 malvoyants moyens (ils ne peuvent distinguer un visage à 4 mètres et la lecture de près est impossible). \nSource : Fédération des Aveugles de France"
},
{
"question_type": "QCU",
- "question": "Combien de personnes ont-elles un handicap auditif en France ?",
+ "question": "Combien de personnes ont un handicap auditif en France ?",
"possible_answers": [
"Environ 2 millions",
"Environ 4 millions",
@@ -481,6 +516,7 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "En France, 5 182 000 personnes ont un handicap auditif, dont 303 000 souffrent d'une déficience auditive profonde ou totale. \nSource : Etude Le handicap auditif en France (DREES)"
},
{
@@ -493,6 +529,7 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "Un trouble cognitif correspond à une altération d’une ou plusieurs fonctions cognitives pour une raison neurologique, psychiatrique, médicamenteuse ou génétique. On peut citer par exemple :les TDA (troubles de déficit de l’attention), l'hyperactivité, les troubles DYS, l'autisme, les troubles de la mémoire ou la trisomie 21. \nSource : Haute Autorité de Santé."
},
{
@@ -505,6 +542,7 @@
"true_answers": [
0
],
+ "QCM_answers": "",
"explanation": "Le handicap psychique est la conséquence d'une maladie psychique issue de changements qui affectent la pensée, l'humeur ou le comportement d'une personne, et qui lui causent de la détresse ou de la souffrance. Il n'affecte pas directement les capacités intellectuelles. On peut citer par exemple : les phobies, les addictions, la dépressions, les TOC (troubles obsessionnels compulsifs), les troubles bipolaires ou la schizophrénie. \nSource : Agefiph."
},
{
@@ -518,11 +556,12 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "8% chez les hommes et 0,45% chez les femmes"
},
{
"question_type": "QCU",
- "question": "Combien de personnes sont-elles en situation de handicap en France ?",
+ "question": "Combien de personnes sont en situation de handicap en France ?",
"possible_answers": [
"2 millions",
"5 millions",
@@ -532,6 +571,7 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "On peut même aller jusqu'à 20 millions en comptant les seniors."
},
{
@@ -545,6 +585,7 @@
"true_answers": [
2
],
+ "QCM_answers": "",
"explanation": "Soit près de 10 millions de personnes. On peut notamment citer parmi les handicaps invisibles : les handicaps mentaux, les handicaps psychiques, les maladies invalidantes (asthme, allergies, diabète..), les troubles musculosquelettiques (lombalgies, tendinites..), ou les troubles DYS."
},
{
@@ -559,7 +600,8 @@
1,
2
],
- "explanation": "Les bonnes réponses sont B et C. \nLa dyspraxie est le trouble de la capacité à exécuter des mouvements déterminés. La dyslexie est le trouble de la lecture. On peut également citer : la dyscalculie : trouble dans les apprentissages numériques; la dysgraphie : difficulté à accomplir les gestes de l'écriture et du dessin; la dysorthographie : également appelé trouble de l'acquisition de l'expression écrite; la dysphasie : trouble lié au développement du langage oral."
+ "QCM_answers": "Les bonnes réponses sont B et C.",
+ "explanation": "La dyspraxie est le trouble de la capacité à exécuter des mouvements déterminés. La dyslexie est le trouble de la lecture. On peut également citer : la dyscalculie : trouble dans les apprentissages numériques; la dysgraphie : difficulté à accomplir les gestes de l'écriture et du dessin; la dysorthographie : également appelé trouble de l'acquisition de l'expression écrite; la dysphasie : trouble lié au développement du langage oral."
}
]
}
diff --git a/src/app/shared/global-styles.css b/src/app/shared/global-styles.css
deleted file mode 100644
index 5856881905172dab3f0229a6d1d7e7059f57f790..0000000000000000000000000000000000000000
--- a/src/app/shared/global-styles.css
+++ /dev/null
@@ -1,21 +0,0 @@
-:root {
- width: 100%;
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: Lato, Helvetica, sans-serif;
-}
-
-html,
-body,
-my-app {
- height: 100%;
- height: 100vh;
-}
-
-.subtext {
- color: var(--text-secondary-color);
-}
diff --git a/src/app/shared/services/progress-service.ts b/src/app/shared/services/progress-service.ts
index 77b8c087caf696f737981774fe8b87343f353ced..6e4a5d308add2aac1a87a2c7ddddc7722a497fa0 100644
--- a/src/app/shared/services/progress-service.ts
+++ b/src/app/shared/services/progress-service.ts
@@ -18,13 +18,13 @@ export class ProgressService {
currentAnswerValidity = computed(() => this.verifyAnswer())
hasEnded = signal(false);
answered = signal(false);
+ checked = signal(false);
goToBegining() {
/* Revient à la page du début, sans oublienpmr les questions déjà posées */
this.score.set(0);
this.questionNumber.set(0);
this.hasEnded.set(false);
- this.router.navigate(["quiz", "accueil"], { onSameUrlNavigation: 'ignore' });
}
start(nQuestions: number) {
@@ -49,7 +49,7 @@ export class ProgressService {
this.questionNumber.update(n => n + 1);
this.answered.set(false);
this.router.navigate(["quiz", this.questionNumber().toString()], {
- queryParams: { thème: this.dataService.currentTopic(), thème_id: this.dataService.currentQuestionId(), répondu: "faux" },
+ queryParams: { theme: this.dataService.currentTopic(), theme_id: this.dataService.currentQuestionId(), repondu: "faux" },
replaceUrl: this.questionNumber() > 0,
});
} else {
@@ -102,4 +102,10 @@ export class ProgressService {
}
}
+ GetChecked() {
+ this.checked.set(true);
+ }
+ GetUnchecked() {
+ this.checked.set(false);
+ }
}
diff --git a/src/app/shared/services/quiz-service.ts b/src/app/shared/services/quiz-service.ts
index 9b7318fe9c1bb60698c03baf622cc1ffe48156c3..c1cc7d2bdcb23d994d3595bd87b21fc2a4200a11 100644
--- a/src/app/shared/services/quiz-service.ts
+++ b/src/app/shared/services/quiz-service.ts
@@ -7,8 +7,8 @@ class RandomizedQuestionIndexQueue {
* https://gist.github.com/4skinSkywalker/f10939e0b070fe1815933730670177df
*/
private remainingIndices;
- private intialSize;
- private currentSize;
+ private intialSize; // Permet de garder en mémoire la taille de la liste
+ private currentSize; // Permet d'avoir la taille restante de la liste
constructor(size: number) {
this.intialSize = size;
this.currentSize = size;
@@ -16,11 +16,21 @@ class RandomizedQuestionIndexQueue {
}
private randomId() {
- // conversion en entier avec la comparaison BitWise OR
+ /*
+ Output (int) : Renvoit un nombre aléatoire entre la taille actuelle de la liste moins 1 et 0
+
+ Conversion en entier avec la comparaison BitWise OR
+ */
+
return Math.random() * (this.currentSize - 1) | 0
}
isEmpty() {
+ /*
+ Output (bool) :
+ - True : Il n'y a plus de questions dans la liste
+ - False : Il y a encore des questions dans la liste
+ */
return (this.currentSize < 1)
}
@@ -31,7 +41,12 @@ class RandomizedQuestionIndexQueue {
}
dequeueIndex() {
- // Tire un index aléatoire et le retire de la liste des indices restants
+ /*
+ Output (int) : Renvoit un index aléatoire parmi les index restants
+
+ Tire un index aléatoire et le retire de la liste des indices restants
+ */
+
if (this.isEmpty()) {
this.replenish()
}
@@ -66,6 +81,7 @@ class TopicsQueue {
}
isEmpty() {
+ // Vérification qu'il reste bien des topic
return this.topics.length < 1;
}
@@ -86,9 +102,10 @@ class TopicsQueue {
providedIn: 'root'
})
export class DataService {
- /* Service qui fournit les données relatives à la question en cours de la session de quiz
- * Les questions sont tirées aléatoirement sans remise
- * Lorsqu'il n'y a plus de questions non faites, la liste de questions est régénèrée
+ /*
+ Service qui fournit les données relatives à la question en cours de la session de quiz
+ Les questions sont tirées aléatoirement sans remise
+ Lorsqu'il n'y a plus de questions non faites, la liste de questions est régénèrée
*/
quizSegmentTopicsQueue;
quizSegments = quizData["questions"]; // tous les segments de quiz possibles, groupés par thème
@@ -123,6 +140,8 @@ export class DataService {
this.currentTopic.set(questionTopic!);
this.currentQuestionId.set(questionId);
this.currentSegment.set(this.quizSegments[questionTopic!][questionId]);
+ console.log(this.quizSegments[questionTopic!][questionId]);
+ console.log(this.currentSegment()!);
}
isFinished() {
diff --git a/src/app/shared/types/interfaces.ts b/src/app/shared/types/interfaces.ts
index a0c199ae828d9ad7a4915c2ddaffdf86f004eeb3..0693d3bd5c380d449fa65c2fd4670ffabd8bf6ff 100644
--- a/src/app/shared/types/interfaces.ts
+++ b/src/app/shared/types/interfaces.ts
@@ -5,6 +5,7 @@ export interface QuizData {
}
export interface QuizSegment {
+ QCM_answers: any;
question_type: string,
question: string,
possible_answers: string[] | never[],
diff --git a/src/app/views/header/header.component.css b/src/app/views/header/header.component.css
index 9ed86a185d544656c40ec75044c2c35039a8e7cd..214c7bef749e9c3ac55d3f6c4af7c3503c8cd884 100644
--- a/src/app/views/header/header.component.css
+++ b/src/app/views/header/header.component.css
@@ -17,12 +17,16 @@
color: var(--p-gray-700);
}
-a {
+.intlogo {
+ text-decoration: none;
+ margin: 1px 1px 0px 53px;
+}
+
+.title {
text-decoration: none;
}
.logo{
width: 105px;
- padding: 1px 1px 0px 53px;
color: #696969;
}
diff --git a/src/app/views/header/header.component.html b/src/app/views/header/header.component.html
index 34173af214ba411d38c7e742919a605eed5e79b8..7f9ac02a20e139a4ca9c336b23049851cc916a02 100644
--- a/src/app/views/header/header.component.html
+++ b/src/app/views/header/header.component.html
@@ -10,6 +10,6 @@
<div class="header-divider">
<p-divider layout="vertical" />
</div>
-<a href="quiz/accueil">
- <h1 class="title">Quiz<br>Inclusif, le jeu</h1>
+<a href="quiz/accueil" class="title">
+ <h1 class="title">Inclusif, le jeu :<br> Quiz</h1>
</a>
diff --git a/src/app/views/quiz/quiz-card/answer-box/answer-box.component.css b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.css
index ea150ccf57df384254bfe1521b118543af715193..f49c789ebe785e888a6a8d0f682a121315c63d90 100644
--- a/src/app/views/quiz/quiz-card/answer-box/answer-box.component.css
+++ b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.css
@@ -17,6 +17,16 @@
gap: 16px;
}
+.space{
+ margin-top: 43px;
+}
+
+.bold-text{
+ font-weight: bold;
+ font-size: 22px;
+ margin-top: 10px;
+}
+
.answer-choice {
display: flex;
align-content: center;
@@ -36,6 +46,12 @@
color: #333333;
}
+.answers {
+ font-size: 18px;
+ white-space : pre-line;
+ color: #333333;
+}
+
.choice-text {
font-size: 16px;
}
@@ -66,3 +82,8 @@ i {
.neutral i {
color: var(--p-gray-500);
}
+
+
+p, span {
+ line-height: 25px;
+}
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz-card/answer-box/answer-box.component.html b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.html
index 45a74be4f6823aa614da900ada1e9116700254ae..22de9667f29395e7ace81cacb4e8d5858d7477cc 100644
--- a/src/app/views/quiz/quiz-card/answer-box/answer-box.component.html
+++ b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.html
@@ -1,33 +1,35 @@
-@if (progressService.currentAnswerValidity()){
- <p class="nb-choice">Mauvaise réponse</p>
-}
-@else {
- <p class="nb-choice">Bonne réponse</p>
-}
+<div class="space"></div>
<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>
+ <p class="choice-text">{{ choice }}</p>
</label>
- } @else if (progressService.currentAnswer().includes($index)) {
+ }
+ @else if (progressService.currentAnswer().includes($index)) {
<label class="answer-choice wrong">
<i class="pi pi-times-circle"></i>
- <p class="choice-text">
- {{ choice }}
- </p>
+ <p class="choice-text">{{ choice }}</p>
</label>
- } @else {
+ }
+ @else {
<label class="answer-choice neutral">
<i class="pi pi-circle"></i>
- <p class="choice-text">
- {{ choice }}
- </p>
+ <p class="choice-text">{{ choice }}</p>
</label>
}
}
+ @if (progressService.currentAnswerValidity()){
+ <p class="bold-text">Raté !</p>
+ }
+ @else {
+ <p class="bold-text">Bravo !</p>
+ }
+
+ @if (quiz_segment.question_type === "QCM") {
+ <span class="answers">{{ quiz_segment.QCM_answers }}</span>
+ }
+ <p class = "bold-text">L'explication :</p>
<span class="explanation">{{ quiz_segment.explanation }}</span>
</div>
diff --git a/src/app/views/quiz/quiz-card/answer-box/answer-box.component.ts b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.ts
index d7bd5d98eb47a8981fa6d9e3f3c549edade05bdb..bd5194884441c6063ff7a152425a0f15da5807e0 100644
--- a/src/app/views/quiz/quiz-card/answer-box/answer-box.component.ts
+++ b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.ts
@@ -12,8 +12,8 @@ import { ReactiveFormsModule } from "@angular/forms";
styleUrl: './answer-box.component.css'
})
export class AnswerBoxComponent {
- dataService = inject(DataService);
- progressService = inject(ProgressService);
- quiz_segment = this.dataService.currentSegment()!;
+ dataService = inject(DataService); //Permet d'avoir accès aux fonctions gérant les cartes
+ progressService = inject(ProgressService); // Permet d'avoir accès aux fonctions gérant la navigation au sein des cartes Quiz
+ quiz_segment = this.dataService.currentSegment()!; //Permet d'avoir accès à la carte affichée
}
diff --git a/src/app/views/quiz/quiz-card/choice-box/choice-box.component.css b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.css
index 3a0f64e64fdf864e7a25c3e93a496b6e5facdb8a..f0cc94282feb5617833c987587e7b01bd759ddb6 100644
--- a/src/app/views/quiz/quiz-card/choice-box/choice-box.component.css
+++ b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.css
@@ -68,6 +68,7 @@
.answer-choice:hover{
border: 1px solid #333333;
+ cursor: pointer;
box-shadow:
rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;
}
@@ -92,24 +93,6 @@
font-size: 16px;
}
-.div-error{
- display: flex;
- flex-direction: column;
- align-items: center;
- align-content: center;
- vertical-align: middle;
- color:#333333;
- margin-top: 5px;
-}
-
-.bouton-error{
- --p-button-padding-x: 64px;
- --p-button-primary-active-background: #ff5d5c;
- --p-button-primary-hover-background: #cd2524;
- --p-button-primary-active-border-color: #ff5d5c;
- --p-button-primary-hover-border-color: #cd2524;
-}
-
-.p-error{
- --p-dialog-colo:#333333;
+p, span {
+ line-height: 25px;
}
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz-card/choice-box/choice-box.component.html b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.html
index 694afd7210af517f4763fe720fae7c106fbc3084..05e49d8fad502e63d9607aab3e3b7d493335ae40 100644
--- a/src/app/views/quiz/quiz-card/choice-box/choice-box.component.html
+++ b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.html
@@ -3,31 +3,31 @@
} @else if (quiz_segment()?.question_type === "QCU") {
<p class="nb-choice">Une seule réponse possible</p>
}
+
<form [formGroup]="answerForm">
<div class="answer-box">
@for (choice of quiz_segment()?.possible_answers; track $index) {
<label class="answer-choice">
+
+ <!-- Mise en place des checkbox dans le cas d'un QCM -->
@if (quiz_segment()?.question_type === "QCM") {
- <p-checkbox [value]="$index" [formControlName]="'QCM'" size="large" class = "check" />
- } @else if (quiz_segment()?.question_type === "QCU") {
- <p-radiobutton [value]="$index" [formControlName]="'QCU'" class="radio"/>
+ <p-checkbox class = "check"
+ [value]="$index"
+ [formControlName]="'QCM'"
+ size="large"
+ (change) = "checkAnswer()"/>
+ }
+
+ <!-- Mise en place des radiobutton dans le cas d'un QCU -->
+ @else if (quiz_segment()?.question_type === "QCU") {
+ <p-radiobutton class="radio"
+ [value]="$index"
+ [formControlName]="'QCU'"
+ (onClick) = "checkAnswer()">
+ </p-radiobutton>
}
- <p class="choice-text">
- {{ choice }}
- </p>
+ <p class="choice-text">{{ choice }}</p>
</label>
}
</div>
</form>
-
-<p-dialog
- header="Veuillez choisir au moins une option."
- [modal]="false"
- [closable]="false"
- [(visible)]="dialogVisible"
- class="p-error"
->
- <div class="div-error">
- <p-button label="Ok" (click)="dialogVisible = false" class ="bouton-error"/>
- </div>
-</p-dialog>
diff --git a/src/app/views/quiz/quiz-card/choice-box/choice-box.component.ts b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.ts
index eae0a992d3c5fd5dc490715344842385c22e93c9..93a4119feab06d4847d2ed92626d9a9d460822e6 100644
--- a/src/app/views/quiz/quiz-card/choice-box/choice-box.component.ts
+++ b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.ts
@@ -7,6 +7,7 @@ import { DataService } from '../../../../shared/services/quiz-service';
import { DialogModule } from 'primeng/dialog';
import { ButtonModule } from 'primeng/button';
import { Answer } from '../../../../shared/types/enums';
+import { never } from 'rxjs';
@Component({
selector: 'app-choice-box',
@@ -15,23 +16,63 @@ import { Answer } from '../../../../shared/types/enums';
styleUrl: './choice-box.component.css'
})
export class ChoiceBoxComponent {
+ /*
+ Input : answered (bool | undefined) - Permet de savoir si la question de la carte du Quiz a été répondu ou pas
+ */
@Input() answered: boolean | undefined;
answerForm = new FormGroup({});
- progressService = inject(ProgressService);
- dataService = inject(DataService);
- quiz_segment = this.dataService.currentSegment;
- answerIsEmpty = computed(() => this.progressService.currentAnswerValidity() === Answer.Empty);
- dialogVisible = false;
+ dataService = inject(DataService); //Permet d'avoir accès aux fonctions gérant les cartes
+ progressService = inject(ProgressService); // Permet d'avoir accès aux fonctions gérant la navigation au sein des cartes Quiz
+ quiz_segment = this.dataService.currentSegment; //Permet d'avoir accès à la carte affichée
+ answerIsEmpty = computed(() => this.progressService.currentAnswerValidity() === Answer.Empty); //Vérifie s'il y a bien eu une réponse lors de la validation de la carte
+
ngOnInit() {
- this.answerForm!.addControl(this.quiz_segment()!.question_type, new FormControl(''))
+ // Initialisation du ControlForm
+ this.answerForm!.addControl(this.quiz_segment()!.question_type, new FormControl<string | string[] | null>(''))
this.answerForm!.reset();
+
+ if (this.quiz_segment()?.question_type === "QCM") {
+ const key = this.answerForm.get('QCM')!.value as string[] | null;
+ console.log(key)
+ }
+ }
+
+ checkAnswer() {
+ // Vérifie si un checkbox a été coché
+ if (this.quiz_segment()?.question_type === "QCM") {
+ const key = this.answerForm.get('QCM')!.value as string[] | null;
+ console.log(key)
+ if (key != null) {
+ if (Array.isArray(key) && key.length > 0) {
+ this.progressService.GetChecked();
+ }
+ else {
+ this.progressService.GetUnchecked();
+ }
+ }
+ }
+ // Vérifie si un bouton radio a été coché
+ else if (this.quiz_segment()?.question_type === "QCU") {
+ const key = this.answerForm.get('QCU')!.value;
+ if (typeof key === "number") {
+ this.progressService.GetChecked();
+ }
+ }
}
tryToAnswer() {
+ /*
+ Cette fonction fait la gestion des réponses envoyées
+
+ Dans le cas d'un QCM, elle vérifie qu'il y a bien eu une réponse non nulle
+ Dans le cas d'un QCU, elle vérifie qu'il y a bien eu une réponse de type number
+ Dans le cas contraire, il y a l'affichage d'une boîte de dialogue demandant à bien répondre à la carte du Quiz
+ */
if (this.quiz_segment()?.question_type === "QCM") {
const key = this.answerForm.get('QCM')!.value;
if (key != null) {
this.progressService.currentAnswer.set([key]);
+ this.progressService.GetUnchecked();
} else {
this.progressService.currentAnswer.set([]);
}
@@ -40,11 +81,12 @@ export class ChoiceBoxComponent {
const key = this.answerForm.get('QCU')!.value;
if (typeof key === "number") {
this.progressService.currentAnswer.set([key]);
+ this.progressService.GetUnchecked();
} else {
this.progressService.currentAnswer.set([]);
}
}
this.progressService.answer();
- this.dialogVisible = this.answerIsEmpty();
+ console.log(this.progressService.currentAnswer());
}
}
diff --git a/src/app/views/quiz/quiz-card/quiz-card.component.css b/src/app/views/quiz/quiz-card/quiz-card.component.css
index 564f45f305735081f02d7bd09b16b9df90d58d44..ea71b74b74f13747f578dfdb7900de4ee7fc64e3 100644
--- a/src/app/views/quiz/quiz-card/quiz-card.component.css
+++ b/src/app/views/quiz/quiz-card/quiz-card.component.css
@@ -9,6 +9,7 @@
h1 {
color: #333333;
}
+
.theme {
justify-self: start;
background-color: var(--p-primary-100);
diff --git a/src/app/views/quiz/quiz-card/quiz-card.component.html b/src/app/views/quiz/quiz-card/quiz-card.component.html
index 13b6382ee6386737d6cd26f070aa9804ee21c4ba..0ea553ebeeba9b5d51b10695733b39768cc2f698 100644
--- a/src/app/views/quiz/quiz-card/quiz-card.component.html
+++ b/src/app/views/quiz/quiz-card/quiz-card.component.html
@@ -2,6 +2,8 @@
<span> {{ dataService.currentTopic() }}</span>
</div>
<h1 class="question">{{ quiz_segment()?.question }}</h1>
+
+<!-- Mise en place de la carte question ou réponse suivant s'il y a eu une réponse validée -->
@if (!progressService.answered()) {
<app-choice-box></app-choice-box>
} @else {
diff --git a/src/app/views/quiz/quiz-card/quiz-card.component.ts b/src/app/views/quiz/quiz-card/quiz-card.component.ts
index bad2800b344b5f8f6f9846cf9d325cd5a52e3949..ef7a10dd949b8bdd14edcedf624824dbde5dc57e 100644
--- a/src/app/views/quiz/quiz-card/quiz-card.component.ts
+++ b/src/app/views/quiz/quiz-card/quiz-card.component.ts
@@ -12,10 +12,9 @@ import { AnswerBoxComponent } from "./answer-box/answer-box.component";
styleUrl: './quiz-card.component.css'
})
export class QuizCardComponent {
- dataService = inject(DataService);
- progressService = inject(ProgressService);
- answerType = Answer;
- quiz_segment = this.dataService.currentSegment;
- choiceBox = viewChild(ChoiceBoxComponent);
+ dataService = inject(DataService); //Permet d'avoir accès aux fonctions gérant les cartes
+ progressService = inject(ProgressService); // Permet d'avoir accès aux fonctions gérant la navigation au sein des cartes Quiz
+ quiz_segment = this.dataService.currentSegment; //Permet d'avoir accès à la carte affichée
+ choiceBox = viewChild(ChoiceBoxComponent); //Permet de mettre à jour les cartes
}
diff --git a/src/app/views/quiz/quiz-endpage/quiz-endpage.component.css b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.css
index 635f3273e880755427d0327f2bbec6b4df49a24f..f66b254fdce735ffec6d76797806e2f2ba606999 100644
--- a/src/app/views/quiz/quiz-endpage/quiz-endpage.component.css
+++ b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.css
@@ -1,8 +1,8 @@
:host {
display: flex;
flex-direction: column;
- text-align: center;
- justify-content: space-between;
+ align-items: center;
+ justify-content: center;
height: 100%;
width: 100%;
margin: auto;
@@ -13,11 +13,27 @@
flex-direction: column;
align-items: center;
justify-content: center;
- padding-top: 70px;
+ width: fit-content;
+ padding-top: 15px;
+}
+
+.grade{
+ text-align: center;
+ margin-top: 30px;
+ border-radius: 8px;
+ border: 1px solid #333333;
+ width: 300px;
+ height: 80px;
}
-p-image {
- padding-top: 50px;
+.result{
+ text-align: center;
+ margin-top: 10px;
+}
+
+.image-outro {
+ padding-top: 20px;
+ padding-bottom: 20px;
}
span{
@@ -25,7 +41,6 @@ span{
flex-direction: column;
align-items: center;
justify-content: center;
- padding-top: 50px;
}
.lower-section{
@@ -36,6 +51,7 @@ span{
margin-top: auto;
position: relative;
bottom:0em;
+ width: 100%;
}
.start-div {
@@ -46,7 +62,8 @@ span{
}
p-divider{
- padding-bottom: 20px;
+ margin: 0;
+ padding-bottom: 40px;
width:80%;
}
@@ -66,12 +83,29 @@ p-divider{
--p-button-primary-hover-background: #e9e9e9;
}
+::ng-deep .start-again button {
+ width: 200px; /* Force the width */
+}
+
+::ng-deep .game button {
+ width: 200px; /* Force the width */
+}
h1, h2, span, p {
color: #333333;
}
+h1, h2 {
+ text-align: left;
+}
+h1{
+ margin-bottom: 10px;
+}
+
p {
font-size: 24px;
- margin-top: 50px;
+}
+
+p, span {
+ line-height: 25px;
}
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz-endpage/quiz-endpage.component.html b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.html
index f65f1e2e243f8cedeb71bc0ad16b4d36e49d07a5..65fefb41416dbdb4a017cb97692f5af13be35d3b 100644
--- a/src/app/views/quiz/quiz-endpage/quiz-endpage.component.html
+++ b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.html
@@ -1,45 +1,85 @@
<div class="header">
- <h1>Le quiz est fini !</h1>
- @if (2*progressService.score()>=progressService.questionNumber()){
+ <h1>Merci d'avoir réalisé ce quiz !</h1>
+ @if (progressService.score() <= 1){
<h2>
- Bravo à vous ! Votre score est de {{ progressService.score() }} /
- {{ progressService.questionNumber() }}
+ Vous avez répondu correctement à {{ progressService.score() }} question sur
+ {{ progressService.questionNumber() }}.
</h2>
}
@else {
<h2>
- Votre score est de {{ progressService.score() }} /
- {{ progressService.questionNumber() }}
+ Vous avez répondu correctement à {{ progressService.score() }} questions sur
+ {{ progressService.questionNumber() }}.
</h2>
}
- @if (progressService.score()/rapport < 1){
- <p>
- Votre grade est E
- </p>
+ @if (get_score() === -1) {
+ <p class="result">Aucune question n'a été répondu !</p>
}
- @else if (progressService.score()/rapport < 2) {
- <p>
- Votre grade est D
- </p>
- }
- @else if (progressService.score()/rapport < 3) {
- <p>
- Votre grade est C
- </p>
+
+ @else if (get_score() < 0.3){
+ <p class="result">Encore un petit effort !</p>
}
- @else if (progressService.score()/rapport < 4) {
- <p>
- Votre grade est B
- </p>
+ @else if (get_score() < 0.7) {
+ <p class="result">Continuez comme ça !</p>
}
@else {
- <p>
- Votre grade est A
- </p>
+ <p class="result">Vous êtes un as !</p>
}
+
+ <!-- Mise en place du grade an fonction du score obtenu :
+ - score < 1 - Grade E
+ - 1 <= score <2 - Grade D
+ - 2 <= score <3 - Grade C
+ - 3 <= score <4 - Grade B
+ - score == 4 - Grade A
+ <div class = "grade">
+ <p>Votre grade est </p>
+ @if (progressService.score()/rapport < 1){
+ <p-image
+ src="images/Score_E.png"
+ alt="Le grade du Quiz est E."
+ [imageStyle]="{ objectFit: 'contain' }"
+ width="90%"
+ />
+ }
+ @else if (progressService.score()/rapport < 2) {
+ <p-image
+ src="images/Score_D.png"
+ alt="Le grade du Quiz est D."
+ [imageStyle]="{ objectFit: 'contain' }"
+ width="90%"
+ />
+ }
+ @else if (progressService.score()/rapport < 3) {
+ <p-image
+ src="images/Score_C.png"
+ alt="Le grade du Quiz est C."
+ [imageStyle]="{ objectFit: 'contain' }"
+ width="90%"
+ />
+ }
+ @else if (progressService.score()/rapport < 4) {
+ <p-image
+ src="images/Score_B.png"
+ alt="Le grade du Quiz est B."
+ [imageStyle]="{ objectFit: 'contain' }"
+ width="90%"
+ />
+ }
+ @else {
+ <p-image
+ src="images/Score_A.png"
+ alt="Le grade du Quiz est A."
+ [imageStyle]="{ objectFit: 'contain' }"
+ width="90%"
+ />
+ }
+ </div>
+ -->
+
+
<p-image
src="images/quiz_endpage_image.png"
- alt="Image de décoration de la page finale du quiz"
[imageStyle]="{ objectFit: 'contain' }"
width="100%"
class = "image-outro"
@@ -51,20 +91,23 @@
Vous pouvez désormais passer à « Inclusif, le jeu », ou lancer une autre série de questions.
</span>
+<!-- Mise en place des boutons de fin de jeu -->
<div class="lower-section">
<p-divider/>
+
<div class="start-div">
- <p-button
- class = "game"
- (click)="progressService.goToBegining()"
- severity="secondary"
- variant="outlined">
- Voir Inclusif, le jeu
- </p-button>
<p-button
class = "start-again"
- (click)="progressService.goToBegining()">
+ (click)="GotoQuiz()">
Relancer une série
</p-button>
+ <a href="https://inclusivite-resin.grandlyon.com/jeu-en-ligne/accueil" target="_blank" rel="noopener noreferrer">
+ <p-button
+ class = "game"
+ severity="secondary"
+ variant="outlined">
+ Voir Inclusif, le jeu
+ </p-button>
+ </a>
</div>
</div>
diff --git a/src/app/views/quiz/quiz-endpage/quiz-endpage.component.ts b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.ts
index 85dbd8f1ec89e431cb1f530a69a05a4af5e7b99b..d87ae03576e2b81e9b3d0941f3699f40e0aa7656 100644
--- a/src/app/views/quiz/quiz-endpage/quiz-endpage.component.ts
+++ b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.ts
@@ -3,6 +3,7 @@ import { ProgressService } from '../../../shared/services/progress-service';
import { ButtonModule } from 'primeng/button';
import { Divider } from 'primeng/divider';
import { ImageModule } from 'primeng/image';
+import { Router } from '@angular/router';
@Component({
selector: 'app-quiz-endpage',
@@ -11,7 +12,18 @@ import { ImageModule } from 'primeng/image';
styleUrl: './quiz-endpage.component.css'
})
export class QuizEndpageComponent {
- progressService = inject(ProgressService);
- number_questions = this.progressService.questionNumber();
- rapport = this.number_questions/4;
+ progressService = inject(ProgressService); // Permet d'avoir accès aux fonctions gérant la navigation au sein des cartes Quiz
+ rapport: number = -1; // Variable qui stocke le score du Quiz
+ constructor(private router:Router) {}
+
+ get_score() {
+ if (this.progressService.questionNumber() !== 0) {
+ this.rapport = this.progressService.score()/this.progressService.questionNumber() ; // Permet d'avoir le nombre total de questions de la session de Quiz
+ }
+ return this.rapport
+ }
+
+ GotoQuiz(){
+ this.router.navigate(['/quiz/accueil'])
+ }
}
diff --git a/src/app/views/quiz/quiz-homepage/quiz-homepage.component.css b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.css
index e16a6dba70f079a55baf42e3c9ae2ab58fd822d1..3af66cfe17f5b8d2c9e8dbe8cbb7edac5b95250b 100644
--- a/src/app/views/quiz/quiz-homepage/quiz-homepage.component.css
+++ b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.css
@@ -18,17 +18,14 @@
.presentation-section h1 {
font-size: 28px;
font-weight: normal;
-}
-.presentation-section h2 {
- font-size: 24px;
- font-weight: normal;
- margin-bottom: 50px;
+ margin-bottom: 35px;
+ margin-top: 15px;
}
.presentation-section p {
font-size: 16px;
font-weight: normal;
- margin-top: 50px;
+ margin-top: 25px;
}
.lower-section{
@@ -38,68 +35,19 @@
align-items: center;
justify-content: center;
}
-
-.n-questions-selector {
- display: flex;
- flex-direction: row;
- border-radius: 8px;
- border: 1px solid #333333;
- align-items: center;
- width: 200px;
- margin-right: 16px;
- height: 40px;
-}
-
-.start-div {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- height: 100%;
- width: 100%;
-}
-
p-divider{
- padding-top: 10px;
- padding-bottom: 10px;
+ margin: 0;
+ padding-bottom: 40px;
width:80%;
}
-
-.selector-buttons {
- flex-grow: 1;
- display: grid;
- gap: 4px;
- grid-auto-flow: column;
- grid-template-columns: 1fr 1.2fr 1fr;
- padding: 8px;
- align-items: center;
-}
-
-.n-questions-text {
- height: 100%;
- width: 100%;
- border-radius: 4px;
- justify-content: center;
- align-content: center;
- height: 24px;
- width: 24px;
- border: 1px solid gray;
- background-color: var(--p-gray-200);
-}
-
::ng-deep .start-game-button button {
width: 200px; /* Force the width */
height: 40px; /* Force the height */
margin-left: 16px;
}
-::ng-deep .selector-buttons button {
- width: 24px; /* Force the width */
- height: 24px; /* Force the height */
- background-color: #333333;
- border-color: #333333;
-}
+
.game{
--p-button-primary-active-background: #ff5d5c;
--p-button-primary-hover-background: #cd2524;
@@ -109,4 +57,8 @@ p-divider{
p, h1, h2{
color: #333333;
+}
+
+p, span {
+ line-height: 25px;
}
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz-homepage/quiz-homepage.component.html b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.html
index f3d580d7a0cde9044dc84d71152390f873b58339..209b294a5f6823f7742ca6dc197bbfe302ddaaa0 100644
--- a/src/app/views/quiz/quiz-homepage/quiz-homepage.component.html
+++ b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.html
@@ -1,53 +1,25 @@
<div class="presentation-section">
- <h1>Quiz</h1>
- <h2>Concevons nos services numériques pour tout le monde !</h2>
+ <h1>Inclusivité numérique : Testez vos connaissances !</h1>
<p-image
src="images/banner.png"
- alt="Image de présentation du quiz"
[imageStyle]="{ objectFit: 'contain' }"
width="80%"
- class = "image-intro"
/>
- <p>Bienvenue sur le quiz de « Inclusif, le jeu ».<br>
- Ce quiz vous permet d'aborder de manière ludique les problèmes liés à
- l'inclusivité.
+ <p>
+ Grâce au quiz d’Inclusif, le jeu, abordez de manière ludique les enjeux de l’inclusivité et de l’accessibilité numériques.
</p>
</div>
+<!-- Mise en place des boutons pour le choix du nombre de question et le démarrage du jeu -->
<div class="lower-section">
<p-divider/>
- <div class="start-div">
- <div class="n-questions-selector">
- <p>Durée du quiz (min)</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>
- <div class = "start-game-button">
- <p-button
- class = "game"
- (click)="progressService.start(possibleNumberOfQuestionsPerTopic[iNumberOfQuestions])"
- aria-label="Commencer le quiz"
- label = "Passer à l'action">
- </p-button>
- </div>
+ <!-- Bouton pour démarrer le Quiz -->
+ <div class = "start-game-button">
+ <p-button
+ class = "game"
+ (click)="commencer()"
+ aria-label="Commencer le quiz"
+ label = "Passer à l'action">
+ </p-button>
</div>
</div>
diff --git a/src/app/views/quiz/quiz-homepage/quiz-homepage.component.ts b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.ts
index ecc12a05fa9b9ddf5639b1a097c0a2c42df7972a..8657bc4537ceebb5b4842ddc6729bf6cbd075bf9 100644
--- a/src/app/views/quiz/quiz-homepage/quiz-homepage.component.ts
+++ b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.ts
@@ -1,12 +1,11 @@
-import { Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
import { BlockUIModule } from 'primeng/blockui';
import { ButtonModule } from 'primeng/button';
import { DividerModule } from 'primeng/divider';
import { ImageModule } from 'primeng/image';
import { InputNumberModule } from 'primeng/inputnumber';
import { PanelModule } from 'primeng/panel';
-import { ProgressService } from '../../../shared/services/progress-service';
-import { DataService } from '../../../shared/services/quiz-service';
@Component({
@@ -16,26 +15,15 @@ import { DataService } from '../../../shared/services/quiz-service';
styleUrl: './quiz-homepage.component.css'
})
export class QuizHomepageComponent {
- /* Page de présentation du quiz
- * Permet la séléction du nombre de questions par multiples de la longueur du cycle de thèmes
+ /*
+ Page de présentation du quiz
+ Permet la sélection du nombre de questions par multiples de la longueur du cycle de thèmes
*/
- progressService = inject(ProgressService);
- dataService = inject(DataService);
- numberOfTopics = this.dataService.getNumberOfTopics();
- possibleNumberOfQuestionsPerTopic = [1, 2, 3];
- iNumberOfQuestions = 1;
- constructor(
- ) {
- // Au chargement du site, cette page est affichée,
- // si l'URL n'est pas celle de la page de départ, elle est redirigée
- this.progressService.goToBegining();
- }
+ constructor(private router:Router) {}
- adjustNumberOfQuestions(c: number) {
- this.iNumberOfQuestions += c;
- }
- getNumberOfQuestions(){
- return this.iNumberOfQuestions
+ commencer(){
+ this.router.navigate(['/quiz/temps'])
}
+
}
diff --git a/src/app/views/quiz/quiz-time/quiz-time.component.css b/src/app/views/quiz/quiz-time/quiz-time.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..1f2e4f96fa427afa9e7622a9a739debd407b65ce
--- /dev/null
+++ b/src/app/views/quiz/quiz-time/quiz-time.component.css
@@ -0,0 +1,107 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
+.presentation-section {
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+ height: 100%;
+}
+
+.presentation-section h1 {
+ font-size: 28px;
+ font-weight: normal;
+ margin-bottom: 35px;
+ margin-top: 15px;
+}
+
+.presentation-section p {
+ font-size: 16px;
+ font-weight: normal;
+ margin-top: 25px;
+}
+
+.button-div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ bottom:0em;
+}
+
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
+ width:80%;
+}
+
+.n-questions-selector {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 8px;
+ border: 1px solid #333333;
+ width: 300px;
+ height: 40px;
+}
+
+.n-questions-selector p {
+ margin: 0;
+ padding: 0 8px;
+}
+
+.selector-buttons {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 8px;
+ margin-left: 50px;
+}
+
+.n-questions-text {
+ height: 100%;
+ width: 100%;
+ border-radius: 4px;
+ align-content: center;
+ height: 24px;
+ width: 24px;
+ border: 1px solid gray;
+ background-color: var(--p-gray-200);
+}
+
+::ng-deep .game button {
+ width: 200px; /* Force the width */
+ height: 40px; /* Force the height */
+}
+
+::ng-deep .selector-buttons button {
+ width: 24px; /* Force the width */
+ height: 24px; /* Force the height */
+ background-color: #333333;
+ border-color: #333333;
+}
+
+.game{
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+p, h1, h2{
+ color: #333333;
+}
+
+p, span {
+ line-height: 25px;
+}
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz-time/quiz-time.component.html b/src/app/views/quiz/quiz-time/quiz-time.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..cbef23f679628431c8ce8d64faf8d3a515ca7e0d
--- /dev/null
+++ b/src/app/views/quiz/quiz-time/quiz-time.component.html
@@ -0,0 +1,48 @@
+<div class="main-enter">
+ <div class="presentation-section">
+ <h1>Inclusivité numérique : Testez vos connaissances !</h1>
+ <p-image
+ src="images/banner.png"
+ alt="Image de présentation du quiz"
+ [imageStyle]="{ objectFit: 'contain' }"
+ width="80%"
+ />
+ <p>
+ Combien de temps ce quiz doit-il durer ?
+ </p>
+ </div>
+</div>
+
+ <!-- Mise en place des boutons pour le choix du nombre de question et le démarrage du jeu -->
+ <div class="button-div">
+ <div class="n-questions-selector">
+ <p>Durée du quiz (min)</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] * dataService.getNumberOfTopics() }}
+ </span>
+ <p-button
+ severity="contrast"
+ (click)="adjustNumberOfQuestions(1)"
+ [disabled]="iNumberOfQuestions == possibleNumberOfQuestionsPerTopic.length - 1"
+ aria-label="Ajouter des questions"
+ icon="pi pi-plus"/>
+ </div>
+ </div>
+
+ <!-- Bouton pour démarrer le Quiz -->
+ <p-divider/>
+ <p-button
+ class = "game"
+ (click)="progressService.start(possibleNumberOfQuestionsPerTopic[iNumberOfQuestions])"
+ aria-label="Commencer le quiz"
+ label = "Passer à l'action">
+ </p-button>
+</div>
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz-time/quiz-time.component.ts b/src/app/views/quiz/quiz-time/quiz-time.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c3a83de7d9b3e61b8d21967acfdbf6506fc12361
--- /dev/null
+++ b/src/app/views/quiz/quiz-time/quiz-time.component.ts
@@ -0,0 +1,39 @@
+import { Component, inject } from '@angular/core';
+import { ProgressService } from '../../../shared/services/progress-service';
+import { DataService } from '../../../shared/services/quiz-service';
+import { ButtonModule } from 'primeng/button';
+import { Divider } from 'primeng/divider';
+import { ImageModule } from 'primeng/image';
+
+@Component({
+ selector: 'app-quiz-time',
+ imports: [ButtonModule, Divider, ImageModule],
+ templateUrl: './quiz-time.component.html',
+ styleUrl: './quiz-time.component.css'
+})
+export class QuizTimePageComponent {
+ dataService = inject(DataService); // Permet d'avoir accès aux fonctions gérant les cartes
+ progressService = inject(ProgressService); // Permet d'avoir accès aux fonctions gérant la navigation au sein des cartes Quiz
+
+
+ possibleNumberOfQuestionsPerTopic = [1, 2, 3]; // Définit le nombre de questions possible divisé par 4 lors de la session du Quiz
+ iNumberOfQuestions = 1; // Indice de la liste ci-dessus correspondant au nombre de questions - Il y a donc 8 questions mis par défaut
+
+ constructor(
+ ) {
+ // Au chargement du site, cette page est affichée,
+ // si l'URL n'est pas celle de la page de départ, elle est redirigée
+ this.progressService.goToBegining();
+ }
+
+ adjustNumberOfQuestions(c: number) {
+ // Permet de changer le nombre de questions lors du Quiz
+ this.iNumberOfQuestions += c;
+ }
+ getNumberOfQuestions(){
+ /*
+ Output : iNumberofQuestions (int)
+ */
+ return this.iNumberOfQuestions
+ }
+}
diff --git a/src/app/views/quiz/quiz.component.css b/src/app/views/quiz/quiz.component.css
index 8a28d6e225e026b1543939087744810efd174215..15654149d475bc794203755fb5d1ce6f16630397 100644
--- a/src/app/views/quiz/quiz.component.css
+++ b/src/app/views/quiz/quiz.component.css
@@ -48,14 +48,35 @@
bottom:0px;
}
-.divider{
- padding-bottom: 20px;
+p-divider{
+ margin: 0;
+ padding-bottom: 40px;
}
.button-page{
- --p-button-padding-x: 39px;
--p-button-primary-active-background: #ff5d5c;
--p-button-primary-hover-background: #cd2524;
--p-button-primary-active-border-color: #ff5d5c;
--p-button-primary-hover-border-color: #cd2524;
+}
+
+::ng-deep .button-page button {
+ width: 150px; /* Force the width */
+}
+
+/* Désactivation du style du bouton lorsque désactivé */
+::ng-deep p-button button:disabled {
+ background-color: #cd2524 !important;
+ border-color: #cd2524 !important;
+}
+
+::ng-deep p-button button:disabled:hover {
+ background-color: #cd2524 !important;
+ border-color: #cd2524 !important;
+
+}
+
+::ng-deep p-button button:disabled:active {
+ background-color: #cd2524 !important;
+ border-color: #cd2524 !important;
}
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz.component.html b/src/app/views/quiz/quiz.component.html
index 9ae7a712e774e15e690241911a5ae383c2289381..f971130c07e0195b5af984e4ad5f8aa88b931271 100644
--- a/src/app/views/quiz/quiz.component.html
+++ b/src/app/views/quiz/quiz.component.html
@@ -1,27 +1,31 @@
-@if (progressService.questionNumber() === 0) {
- <app-quiz-homepage></app-quiz-homepage>
-} @else if (progressService.hasEnded()) {
+<!-- Mise en place soit de la page de garde, soit de la page de fin ou alors des cartes questions -->
+@if (progressService.hasEnded()) {
<app-quiz-endpage></app-quiz-endpage>
-} @else {
+}
+@else if (progressService.questionNumber() !== 0) {
<div class="quiz">
+ <!-- Mise en place de la barre de progression-->
<div class="progress">
<p class="question-text">
{{ "Question " + progressService.questionNumber() }} / {{ dataService.numberOfQuestions() }}
</p>
- <p></p>
+ <p></p> <!-- Doit être gardé sinon la progressbar ne s'affichera pas -->
<p-progressbar class="progress-bar" [value]="progressPercentage()" />
</div>
+
+ <!-- Mise en place des cartes du Quiz-->
<app-quiz-card></app-quiz-card>
+
+ <!-- Mise en place des boutons pour avancer dans le Quiz -->
<div class="next">
- <p-divider class="divider" />
+ <p-divider/>
+
@if (!progressService.answered()) {
- <p-button
- class="button-page"
- (click)="quizCard()!.choiceBox()!.tryToAnswer()"
- >
+ <p-button class="button-page" (click)="quizCard()!.choiceBox()!.tryToAnswer()" [disabled]="!disabled()" >
Répondre
</p-button>
- } @else {
+ }
+ @else {
<p-button class="button-page" (click)="progressService.goToNext()">
Suivant
<i class="pi pi-arrow-right"></i>
diff --git a/src/app/views/quiz/quiz.component.ts b/src/app/views/quiz/quiz.component.ts
index be92dab8711e9d33187765b64fe1214ac8a1ae07..5e18a572ee86ff2318a840e230676b469a4b0861 100644
--- a/src/app/views/quiz/quiz.component.ts
+++ b/src/app/views/quiz/quiz.component.ts
@@ -8,19 +8,22 @@ import { ProgressService } from '../../shared/services/progress-service';
import { DataService } from '../../shared/services/quiz-service';
import { QuizCardComponent } from './quiz-card/quiz-card.component';
import { QuizEndpageComponent } from "./quiz-endpage/quiz-endpage.component";
-import { QuizHomepageComponent } from './quiz-homepage/quiz-homepage.component';
-
+import { Answer } from '../../shared/types/enums';
@Component({
selector: 'app-quiz',
templateUrl: './quiz.component.html',
styleUrl: './quiz.component.css',
- imports: [CommonModule, ButtonModule, ToastModule, ProgressBarModule, QuizHomepageComponent, QuizCardComponent, DividerModule, QuizEndpageComponent]
+ imports: [CommonModule, ButtonModule, ToastModule, ProgressBarModule, QuizCardComponent, DividerModule, QuizEndpageComponent]
})
export class QuizComponent {
- /* Gère les cartes quiz par rapport à l'avancement dans le quiz et affiche une barre de progression le cas échéant*/
- progressService = inject(ProgressService);
- dataService = inject(DataService);
- quizCard = viewChild(QuizCardComponent);
- progressPercentage = computed(() => this.progressService.questionNumber() / this.dataService.numberOfQuestions() * 100)
+ // Gère les cartes quiz par rapport à l'avancement dans le quiz et affiche une barre de progression
+
+ dataService = inject(DataService); //Permet d'avoir accès aux fonctions gérant les cartes
+ progressService = inject(ProgressService); // Permet d'avoir accès aux fonctions gérant la navigation au sein des cartes Quiz
+ quizCard = viewChild(QuizCardComponent); //Permet de mettre à jour l'avancée des pages du Quiz
+
+ progressPercentage = computed(() => this.progressService.questionNumber() / this.dataService.numberOfQuestions() * 100);
+ answerIsEmpty = computed(() => this.progressService.currentAnswerValidity() === Answer.Empty);
+ disabled = computed(() => this.progressService.checked());
}
diff --git a/src/app/views/views-style.css b/src/app/views/views-style.css
index c84fb13fad8618eedc3d6f6fe78ab32cdf6087d0..8f4e518884e3a977a7fecb952f9abda4cb435c13 100644
--- a/src/app/views/views-style.css
+++ b/src/app/views/views-style.css
@@ -1,2 +1,3 @@
-@import "header/header.component.css";
-@import "quiz/quiz.component.css";
+/* Fait office de hub de tous les fichiers CSS globaux des sous-dossiers*/
+@import "header/header.component.css"; /* Permet d'avoir accès au CSS du header */
+@import "quiz/quiz.component.css"; /* Permet d'avoir accès au CSS du body */
diff --git a/src/index.html b/src/index.html
index 3b3e079a62a709ddec9d3415a8f8f0259ac52932..2ae79b4fc94e747fe73f59a4b67563c86d43886c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,12 +1,14 @@
<!doctype html>
-<html lang="en">
+<html lang="fr">
<head>
- <meta charset="utf-8" />
+ <meta charset="utf-8"/>
<title>Quiz</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="./images/favicon.ico" />
</head>
+
+ <!-- Mise en place de la zone de travail globale -->
<body>
<app-root></app-root>
</body>
diff --git a/src/styles.css b/src/styles.css
index 4630ba9ef5c670dcb58e6e11ee64d3fb1f8ea274..0b1c09c8bb8de63115587f1e73a48fd6977a3176 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,7 +1,6 @@
/* You can add global styles to this file, and also import other style files */
-@import "app/views/views-style.css";
-@import "app/shared/global-styles.css";
-@import "primeicons/primeicons.css";
+@import "app/views/views-style.css"; /* Permet d'obternir tous le CSS provenant des components dans views */
+@import "primeicons/primeicons.css"; /* Permet d'avoir accès primeicons */
html{
font-family: 'Lato', sans-serif;
@@ -15,3 +14,21 @@ body {
display: flex;
flex-direction: column;
}
+
+ :root {
+ width: 100%;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: Lato, sans-serif;
+ }
+
+ html,
+ body,
+ my-app {
+ height: 100%;
+ height: 100vh;
+ }
\ No newline at end of file