23 décembre 2024
Le dispositif a pour objectif principal de faciliter l’apprentissage des organes internes du corps humain de manière interactive. Conçu comme un outil pédagogique, il permet aux utilisateurs d’apprendre à identifier et à localiser les différents organes internes en les plaçant correctement dans une représentation anatomique du corps humain.
Ce dispositif s’adresse principalement aux élèves du cycle d’orientation dans le cadre des cours de biologie, ainsi qu’aux enseignants, qui peuvent l’utiliser comme support didactique pour leurs cours. Il est idéal pour des exercices d’évaluation ou de révision, permettant aux utilisateurs de tester leurs connaissances. En libre accès sur Internet, il est également accessible à tous.
L’utilisation de cet outil ne nécessite pas de connaissances préalables approfondies. Il sert d’introduction basique à l’anatomie, notamment la connaissance des noms des organes, et constitue un outil de révision de ces connaissances. À travers son utilisation, les utilisateurs sont censés apprendre à identifier les organes internes, à comprendre leur position et leurs relations spatiales dans le corps humain, et à renforcer leurs compétences générales en anatomie.
Je suis parti sur un visuel très sobre, basé sur des teintes de bleu clair, afin de ne pas apporter de distractions ou engendrer une surcharge cognitive qui pourrait nuire à l’apprentissage.
L’agencement des éléments est organisé de manière verticale pour que le dispositif soit clair et facile à comprendre pour les utilisateurs. Le titre vient en premier, indiquant le thème abordé et le but de ce dispositif (l’apprentissage des organes internes). Ensuite, la consigne permet de comprendre le fonctionnement du dispositif. Enfin, on trouve le dispositif lui-même : l’image d’un corps humain montrant les organes, avec les zones de drop à côté, et en dessous une boîte contenant les noms des différents organes sous forme d’étiquettes.
Juste en dessous de la boîte se trouve le bouton de vérification des réponses, qui affiche un feedback de couleur verte si tout est correct et rouge s’il y a des éléments mal placés. Ce même feedback est présent sur chacune des étiquettes pour indiquer quels éléments sont corrects et lesquels ne le sont pas.
J’ai commencé par me pencher sur le thème que je voulais aborder afin de pouvoir adapter mon code à celui-ci. Très vite, j’ai décidé de reprendre la première idée que j’avais eue pour l’exercice de Flashcard, que j’avais abandonné en raison de difficultés à prendre en main le logiciel Inkscape. Ainsi, je suis parti sur un dispositif centré sur l’apprentissage des organes internes.
L’image que j’ai trouvée, représentant une silhouette d’être humain avec les organes internes visibles, comprenait déjà des étiquettes avec les noms des organes. J’ai donc, grâce au logiciel Gimp, effacé ces étiquettes pour pouvoir les remplacer par des zones de drop dans mon code.
Je me suis ensuite penché sur le code de ma page. J’ai d’abord agencé le visuel avec CSS et organisé le placement des éléments avec HTML. Ensuite, je me suis chargé de rendre les étiquettes draggables et de permettre leur dépôt dans les zones de drop. J’ai également fait en sorte que la boîte contenant les étiquettes de départ soit une zone de drop, permettant ainsi de reposer les étiquettes dedans et d’empêcher la superposition de deux étiquettes sur une même zone de drop.
Un petit problème subsistait : de temps à autre, les éléments draggables passaient au second plan, derrière les zones de drop. Ne connaissant pas les raisons de ce comportement, j’ai demandé à ChatGPT d’expliquer ce problème. Grâce à cette aide, j’ai pu corriger mon code CSS.
Dans l’ensemble, le dispositif répond très bien aux critères de l’exercice. L'objectif de la page est bien défini : elle permet d'apprendre les organes internes de manière interactive grâce au "drag and drop". Les instructions sont simples et compréhensibles pour les utilisateurs. Cependant, il reste assez limité d’un point de vue pédagogique. On y apprend les organes internes et leur disposition dans le corps, mais rien sur leur fonction. Il serait pertinent d’ajouter, soit à côté des zones de drop, soit en cliquant sur un bouton, des informations sur l’utilité des organes dans le fonctionnement du corps humain.