# Concevoir et implémenter une application de quiz en ligne de commande

<img src="https://hackmd.io/_uploads/Bkih1wFYa.png" style="display: block; margin: 0 auto; border-radius: 10px">

## Modalités

### Compétences travaillées
Niveaux d'acquisition du brief : imiter / adapter.

#### Compétences transversales
- Anglais
- Rechercher de façon méthodique une ou des solutions au problème rencontré afin de retenir une solution adaptée au contexte

#### Compétences professionnelles
- Installer et configurer son environnement de travail en fonction du projet
- Développer des interfaces utilisateur
- Développer des composants métier
- Analyser les besoins ~~et maquetter une application~~
- Préparer et exécuter les plans de tests d'une application

### Modalités pédagogiques
Travail en autonomie. Brief découpé par niveaux, de simple à complexe.

### Livrables
- Le projet dans un dépôt GitHub privé (ajout du formateur en collaborateur)
- Le code dans l'environnement local doit être exactement le même que celui partagé sur GitHub au moment de l'évaluation avec le formateur

### Outils, langage et bibliothèques
- Outils : Terminal/Shell, Visual Studio Code, Git, GitHub, Node.js
- Langage et bibliothèques : JavaScript natif **sans restriction sur l'utilisation des bibliothèques de fonctions intégrées** au langage, il est autorisé si nécessaire d'utiliser les **modules intégrés** à Node.js, `inquirer` est la **seule dépendance externe autorisée**

### Modalités d'évaluation

#### Auto-évaluation
Après une lecture complète du brief, vous devez choisir le niveau que vous pensez pouvoir atteindre (terminer) dans le temps imparti, avant de commencer le brief.

Une fois le temps écoulé, en cas d'objectif non atteint ou dépassé, savoir expliquer les raisons de cet écart (surévaluation ou sous-évaluation). En cas d'objectif atteint, savoir expliquer les raisons d'une part et d'autre part estimer, le cas échéant, si le niveau supérieur aurait pu être atteint.

#### Évaluation
Entretien avec le formateur en face à face, pour :
- Test de l'application par le formateur
- Réussir son propre quiz avec 100% de bonnes réponses !
- Revue du projet avec questions pour vérifier que tout ce qui est configuré et implémenté est compris
- Échanger sur l'auto-évaluation
- **Rappel** : le code dans l'environnement local doit être exactement le même que celui partagé sur GitHub au moment de l'évaluation, pas de "bricolage" de dernière minute

#### Délais :100:
- 2,5 jours à compter du démarrage de la lecture du brief, autrement formulé : à partir de maintenant
- Possibilité de poursuivre le soir au bureau et/ou à domicile mais inutile de s'épuiser, c'est pas l'objectif !
- Une fois le temps écoulé, évaluation avec le formateur dans un ordre tiré au sort

## Spécifications

### Fonctionnelles
- C'est à vous de préparer les questions et les réponses (concevoir le contenu du quiz) sur des thématiques et un nombre de questions qui varient selon le niveau niveau. **La qualité de ce travail est évaluée !**
- L'application propose à l'utilisateur des questions à choix unique, les unes après les autres jusqu'à la dernière
- Chaque question a 4 réponses possibles, 1 seule est la bonne réponse
- La 1ère réponse possible de chaque question est toujours celle préselectionnée par défaut dans le prompt
- L'utilisateur sélectionne sa réponse, soit en saisissant le numéro de la réponse (1, 2, 3 ou 4) ou avec les flèches "haut" et "bas", il valide par la touche "entrée"
- Les questions, les réponses et les messages sont en anglais

### Techniques
- Git : il doit y avoir 1 branche par niveau, vous pouvez commencer par la branche `main` pour le niveau 1 mais il devra y avoir des branches séparées pour les autres niveaux (`level-two`, `level-three` et `level-four`)
- Nouveau projet Node.js, bien nommé, avec un point d'entrée `quizee.js`
- Ne déclarer que ce qui est nécessaire dans le fichier `package.json`, **il ne doit y avoir que `inquirer` dans les dépendances**
- L'application se lance avec la ligne de commande `node quizee.js` depuis le répertoire racine du projet
- Sauf indication contraire, le comportement par défaut de `inquirer` n'est pas à modifier, notamment certains affichages (`?`, rappel de la réponse après avoir valider...) En cas de doute sur ce sujet, vous pouvez demander au formateur
- Pas d'attente particulière sur la qualité du code mais y voir clair dans son propre code ça aide !

> Ne pas anticiper (dans le code) les traitements du niveau suivant, se concentrer à chaque fois sur le niveau en cours. Si des traitements des niveaux suivants sont anticipés (dans le code), le niveau en cours ne sera pas validé.
> La validation intermédiaire, entre niveaux, est une validation partielle : vérification qu'il n'y a que du code nécessaire et que les fonctionnalités attendues sont bien là, que ça marche quoi !
> Cependant, en cas d'attente de validation par le formateur, vous pouvez bien entendu commencer à vous documenter et concevoir le niveau suivant pour gagner du temps et ne pas vous ennuyer.

## Les niveaux

### Niveau 1 - Les fondations
- Thématique du quiz et nombre de questions : 5 questions sur HTML
- Toutes les questions, réponses et messages sont inscrits dans le code source JavaScript "en dur"
- Pas de traitement des "bonnes réponses" à ce niveau, cependant dans les réponses possibles proposées, il doit bien y en avoir une et une seule qui est la bonne mais ne pas la traiter à ce niveau du brief
- Au lancement de l'application :
- Un message de bienvenue est affiché sur la première ligne
- Puis sur une deuxième ligne, l'application invite l'utilisateur à saisir son prénom. Si l'utilisateur valide sans saisir de prénom alors un pseudo "Guest" par défaut est utilisé
- Une fois la saisie du prénom, une troisième ligne demande à l'utilisateur de confirmer le lancement du quiz par "oui" ou "non", il doit y avoir le prénom saisi (ou Guest) dans le message de confirmation proposé. S'il confirme, alors le quiz démarre, sinon l'application s'arrête
- Si quiz confirmé, l'application déroule les questions les unes après les autres dans l'ordre de déclaration dans le code source
- Après la dernière question, il n'y a plus d'interaction, l'application s'arrête

### Niveau 2 - Petits calculs entre amis
- Prérequis : niveau 1 terminé et validé
- Thématique du quiz et nombre de questions : pas de changement, conserver les 5 questions sur HTML
- Ajouter la notion de bonne réponse pour pouvoir suivre et sortir des statistiques. Il ne peut y avoir qu'une seule bonne réponse par question
- Après saisie de la réponse à la dernière question, avant d'arrêter l'application, celle-ci affiche désormais un message (format libre mais toujours en anglais) avec des statistiques sur le quiz :
- Rappel du prénom (ou Guest)
- Nombre de questions
- Nombre et pourcentage (arrondi à 2 décimales) de bonnes réponses
- Nombre et pourcentage (arrondi à 2 décimales) de mauvaises réponses

### Niveau 3 - Un peu de fun
- Prérequis : niveau 2 terminé et validé
- Thématique du quiz et nombre de questions : conserver les 5 questions sur HTML puis ajouter 5 questions sur CSS, soit un total de 10 questions
- Ajouter une bannière au lancement de l'application, en premier avant le message de bienvenue. Récupérer le contenu de la bannière depuis [patorjk.com](https://patorjk.com/software/taag/#p=display&f=Graffiti&t=Quizee), le copier dans un fichier `banner.txt` à la racine du projet puis lire ce fichier pour en récupérer et afficher le contenu (cf. en haut l'image d'illustration)
- L'affichage des questions est désormais aléatoire, bien entendu chaque question continue d'être proposée qu'une seule fois
- Le reste du comportement de l'application est le même

### Niveau 4 - La puissance incarnée
- Prérequis : niveau 3 terminé et validé
- Thématique du quiz et nombre de questions : conserver les 5 questions sur HTML, les 5 questions sur CSS puis ajouter 5 questions sur JavaScript, soit un total de 15 questions
- Externaliser les questions et réponses du quiz :
- Dans un fichier `quiz.txt` à la racine du projet
- Format à respecter, exemple pour une ligne du fichier donc une question : `How much iron in spinach (per 100 g)?@|@27.0 mg@|@2.7 mg@|@277.0 mg@|@0.27 mg@|@2`
- Séparateur : `@|@`
- De gauche à droite : question, choix 1, choix 2, choix 3, choix 4, numéro du choix correspondant à la bonne réponse
- Lire le fichier et analyser son contenu pour l'adapter aux besoins de l'application
- En plus des questions, les réponses possibles doivent également être affichées dans un ordre aléatoire pour chaque question

## Trois conseils en images…

### Dé-com-po-ser
<img src="https://hackmd.io/_uploads/ByliIuKKp.png" style="display: block; margin: 0 auto">

### Typographie
<img src="https://hackmd.io/_uploads/Hy-A4dtYp.png" style="display: block; margin: 0 auto">

### Zenitude
<img src="https://hackmd.io/_uploads/r1qyzuKFa.jpg" style="display: block; margin: 0 auto; border-radius: 40px">

## En cas de problème(s), demander à la bonne personne
<img src="https://hackmd.io/_uploads/HkYxaOFta.gif" style="display: block; margin: 0 auto">