Lien vers le module JavaScript : http://tecfaetu.unige.ch/etu-maltt/xerneas/hurzele7/stic-1/ex3/module_js/
Lien vers la page Edutechwiki sur Codingame : https://edutechwiki.unige.ch/fr/Codingame
Lien vers la page travail : http://tecfaetu.unige.ch/etu-maltt/xerneas/hurzele7/
Le but de l'exercice est de tester l'utilisateur sur ses compétences à reconnaitre la divisibilité des nombres selon les diviseurs de bases. Ainsi, il doit reconnaiitre des nombres divisibles ou non divisibles selon un diviseur précis. L'utilisateur clique sur les cases du tableau pour créer un chemin des nombres divisbles par le diviseur choisi préalablement pour traverser ce dernier. L'objectif pédagogique est de confronter l'utilisateur à des choix concernant ses connaisances dans le domaine. Le jeu permet d'apprendre par l'essai/erreur concept du behaviorisme. Quand l'utilsateur propose un chemin qui n'est pas le bon, un texte d'aide s'affiche pour aiguiller la personne selon le divisieur choisi. Ce module Javascript s'adresse à des enfants qui apprennent les divisions et les critères de divisions selon le diviseur.
Le design de ce module se veut léger avec un niveau ergonomique basique. Les artifices ajoutés sont la grenouille et les vaguelettes sur le fond du tableau pour donner une image un peu plus cool au module. Ceci a été choisi pour correspondre au public cible. Plusieurs interactions JavaScript ont été ajoutée comme les boutons des diviseurs qui influencent le contenu du tableau, le changement de couleur des cases lorsque que l'on clique dessus et la réponse via la popup. Le nombre de cases du tableau peut être paramétré dans le code JS.
L'utilisateur clique sur les cases du tableau et peut rechanger le statut de la case en cliquant dessus. Quand il a terminé, il clique sur le bouton "Envoyer" pour valider sa réponse. S'il répond juste, la réponse "Bravo !" est affichée sinon un texte d'aide s'affiche afin d'aider l'utilisateur selon le diviseur choisi. Ce dernier peut a tout moment changer de diviseur en haut du tableau.
J'ai réalisé ce module sur Codepen.io car je ne connaissais pas cet environnement de développement. J'ai été agréablement supris par la facilité de prise en main, l'intégration des icons svg ou autres éléments de style. Je me suis aidé de tutoriels JavaScript pour mettre en place certaines fonction propres à JS que je ne maîtrisais pas. J'ai souhaité aller plus loin en terme de design pour faire bouger la grenouille sur les cases du tableau, mais je me suis finalement contenté de la production actuelle.
Je suis satisfait d'avoir approfondi mes connaissances en JavaScript grâce à cet exercice. Je suis globalement satisfait du résultat même si j'aurais souhaité aller plus loin notamment dans la création du chemin du labyrinthe qui va seulement à droite et vers le bas. Un chemin plus complexe et une case d'arrivée variable peuvent être des éléments d'amélioration pour la prochaine fois.
Aucune ressource utilisée pour cet exercice