Liens
Objectifs
L’objectif pédagogique de ce dispositif est d’apprendre à des enfants à reconnaître différents déchets du quotidien et à les placer dans la bonne poubelle (papier/carton, compost, plastique, ordures ménagères). L’activité prend la forme d’un petit jeu de type drag and drop. L’apprenant·e saisit un objet et le dépose dans la poubelle correspondante, comme dans une situation réelle.
Avant de commencer, l’enfant est invité à consulter une ressource externe (“Tom trie”) afin de revoir les principes de base du tri. L’exercice sert ensuite à valider les acquis de façon ludique, avec un feedback immédiat.
D’un point de vue plus technique, ce projet m’a permis de créer une interaction drag and drop avec les bibliothèques jQuery et jQuery UI, dont la syntaxe est différente. J’ai appris à configurer .draggable() et .droppable(), à gérer les événements (start/stop/over/out/drop) et à manipuler le DOM pour produire des feedbacks clairs et utiles.
Design
J’ai conservé une identité visuelle minimaliste et cohérente avec le reste de mon portfolio : fond clair, cartes blanches, ombres légères et bords arrondis. Je préfère une interface simple, avec uniquement les informations essentielles, afin que l’attention soit focalisée sur l’activité principale.
L’agencement a été pensé pour éviter un long défilement : les objets à trier sont regroupés en grille et les poubelles sont placées juste en dessous, ce qui réduit la distance entre drag et drop et rend l’action rapide et intuitive. Le texte d’aide reste court et visible, afin d’accompagner les enfants sans surcharger l’écran.
Les visuels (objets et poubelles) renforcent l’aspect ludique et facilitent la reconnaissance. Une partie des images a été trouvée des recherches en ligne (Google Images), et d’autres ont été générées par une intelligence artificielle afin d’obtenir un style plus cohérent entre les éléments.
Production
Avant de commencer le développement, j’ai réfléchi à ce que je voulais transmettre via un drag and drop. J’ai d’abord eu l’idée de créer un mini-jeu de cuisine (composer une pizza en ajoutant des ingrédients), mais je me suis rendu compte que c’était trop complexe pour mon niveau actuel. Il fallait gérer des superpositions d’éléments et un rendu visuel précis pour que l’activité soit esthétique et compréhensible.
Après environ deux semaines sur cette première idée, j’ai choisi un sujet plus réaliste et mieux adapté à l’interaction drag and drop “classique” : le tri des déchets. Ce thème est pédagogique, concret, et se prête bien à une catégorisation multiple (plusieurs poubelles).
Techniquement, j’ai utilisé .draggable() pour rendre chaque objet déplaçable, et .droppable() pour transformer chaque poubelle en zone de dépôt. Le traitement du “drop” compare le type de l’objet avec la poubelle ciblée, déclenche un feedback visuel et, en cas de succès, retire l’objet de la liste. J’ai également ajouté une ressource à lire avant de commencer et un bouton de retour au portfolio pour faciliter la navigation.
Pour résoudre les problèmes et améliorer le résultat, je me suis appuyée sur des ressources du cours, des tutoriels en ligne, et ponctuellement une intelligence artificielle pour clarifier certains points de code et accélérer la recherche de solutions.
Auto-évaluation
Cet exercice m’a vraiment aidée à comprendre comment fonctionne une bibliothèque JavaScript, en particulier jQuery et jQuery UI, et à prendre en main une syntaxe différente de celle que j’utilise habituellement. J’ai appris à configurer correctement les options de .draggable() et .droppable() et à relier l’interaction à un objectif pédagogique.
La principale difficulté a été la gestion du temps : mon idée initiale (pizza) m’a bloquée pendant deux semaines, avant que je décide de repartir sur un sujet plus simple et plus réalisable. Même si cela m’a fait perdre du temps, ce changement m’a permis de terminer un dispositif intéressant par rapport aux attentes de l’exercice.
Je suis satisfaite du rendu final. L’activité est claire, visuelle et ludique, et l’interface reste volontairement minimaliste pour ne pas distraire. Si je devais améliorer encore le dispositif, je pourrais ajouter davantage d’objets, ou introduire une progression (niveaux de difficulté) et apporter un meilleur feedback.
Bibliographie
- EduTechWiki – Ressources
- Documentation jQuery
- Documentation jQuery UI
- Site Tom – Page “Tom trie” utilisée comme ressource de préparation.
- Google Images – Recherche de visuels
- Intelligence artificielle – Utilisée pour clarifier du code et générer certains visuels.
Ressources
J’ai utilisé les supports du cours et les documentations officielles de jQuery et jQuery UI pour implémenter l’interaction. La ressource “Tom trie” sert d’introduction au tri avant l’activité. Des tutoriels en ligne ont également été consultés.