Projet personnel
Directives
- Le projet compte pour 10% de la note finale.
- La correction se fera en présence de votre enseignant durant le cours du 6 décembre.
- Vous pouvez prendre rendez-vous avant cette date si vous êtes prêt a être évalué.
- Vous devez aussi remettre une version de votre code sur Github. Retourner le devoir Teams avec l'adresse url de votre projet et assurez-vous que le dépôt soit public.
Description du projet
Vous devez choisir l'un des jeux suivants dont vous allez devoir modifier l'interface comme décrit plus bas et ajouter une fonctionnalité de votre choix.
Liste des jeux
- Mémoire
- Tutoriel : https://medium.com/free-code-camp/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae
- Dépôt Github : https://github.com/code-sketch/memory-game (Voir répertoire video-11)
- Demo : https://marina-ferreira.github.io/memory-game/
- Pendu
- Code Sandbox : https://codesandbox.io/s/z9fhk
- TicTacToe
- Quizz
- Codepen : https://codepen.io/emilieph/pen/rNyoKVG
Initialisation du projet
- Faites une copie du projet que vous avez choisi et hébergez-le dans un dépôt Github Pages.
- Ensuite créez un premier commit et faites un push. Le travail sera évalué à partir de ce point.
Modification de l'interface
- Tout le contenu de la page doit être traduit en français.
Aujout d'une fenêtre dialog au chargement
Consultez les articles suivants sur l'élément dialog:
- https://developer.mozilla.org/fr/docs/Web/HTML/Element/dialog
- https://web.dev/learn/html/dialog?hl=fr
- https://mayashavin.com/articles/build-a-dialog-with-dialog-element
Au chargement de la page la fenêtre de dialogue suivante doit être affiché automatiquement.
- Elle doit être affiché selon la méthode modal, empêchant tout intéraction avec le contenu autre de la page.
- Vous devez respecter la disposition du modèle fourni.
- L'image à utiliser est disponible ici : megaman.png
- La couleur d'arrière plan (qui va masquer en partie la page) à utiliser est:
rgba(93, 188, 251, 0.5).
Fonctionnalités de la fenêtre
- Par défaut, elle s'affiche directement au chargement de la page.
- Si on clique sur le bouton "Fermer la fenêtre", la fenêtre se ferme et on a accès à la page.
- Si on clique sur "Ne plus afficher cette fenêtre" elle se ferme aussi, mais à partir de maintenant au chargement de la page elle ne sera plus réaffichée.
Astuce
Pour déterminer si on doit ou non afficher la fenêtre au chargement, utilisez une valeur enregistré dans le stockage local du navigateur qui vous indiquera si oui ou non elle doit être affiché.
Modification selon le jeu
Faites les modifications suivantes selon le jeu que vous avez choisi :
- Mémoire : Personnalisez les images sous les cartes
- Pendu : Entrez au moins 5 mots à trouver avec un indices pour chacun
- TicTacToe : Modifiez la police des "X" et des "O" pour une police que vous aurez intégré au projet.
- Quizz : Entrez au moins 5 questions avec choix de réponses.
Ajout d'une fonctionnalité JavaScript
Vous devez aussi ajouter une fonctionnalité codée en JavaScript à votre projet. Le choix vous revient mais vous devez la faire valider par votre enseignant. Voici quelques idées de fonctionnalités:
- Dans le jeu de TicTacToe, sauvegardez le nombre de parties que chacun à gagnées dans le stockage local.
- Permettre d'ajouter notre propre mot au jeu du pendu.
- Calculer le temps pris par l'usager pour trouver toutes les cartes dans le jeu de mémoire et conserver le meilleur temps.
- Pour le quizz, ajoutez un bouton pour recommencer et permettre un pointage différent selon la question.
Qualité du code
- Toutes les fonctions javascript que vous ajoutez doivent être correctement documentées
- Le code doit être bien indenté
- Les noms de variables doivent être explicites et respecter la norme camelCase
Grille de correction
| Éléments | Pondération |
|---|---|
| GitHub | /5 |
| Le projet est hébergé sur Github Pages | 5 |
| Modification de l'interface | /40 |
| Une fenêtre de dialogue s'affiche correctement au chargement de la page | 10 |
| Tous les éléments du modèle sont présent et alignés selon les spécifications | 15 |
| Un clique sur "Ne plus afficher..." permet de ne pas réafficher la fenêtre au démarrage. | 5 |
| Les modifications selon le type de jeu choisi ont été apportées | 10 |
| Ajout d'une fonctionnalité JavaScript | /45 |
| La fonctionnalité ne comporte pas d'erreurs et effectue les opérations souhaitées | 15 |
| L'étudiant est capable d'expliquer son code et sa fonctionnalité | 30 |
| Qualité du code | /10 |
| Toutes les fonctions javascript ajouté sont correctement documentées | 5 |
| Le code est bien indenté | 2 |
| Les noms de variables sont explicites et respectent la norme camelCase | 3 |
| Total | /100 |