Rapport – STIC I Exercice 5

Le dispositif développé pour cet exercice est accessible au lien suivant :

• Application Drag & Drop – “Le Grand Tri de Genève 2026”

Ce dispositif est un "Serious Game" destiné aux habitants du canton de Genève, visant à accompagner l'entrée en vigueur des nouvelles normes de tri des déchets prévues pour 2026.

Contexte : Genève est une ville internationale accueillant constamment de nouveaux résidents qui ne connaissent pas forcément les règles locales. De plus, même les habitués commettent des erreurs par automatisme ou méconnaissance des changements récents.

Objectifs pédagogiques : L'application a pour but d'entraîner les utilisateurs à identifier correctement les conteneurs correspondants aux déchets ménagers et, surtout, à déjouer les "faux amis" (pièges fréquents). Par exemple, comprendre qu'une brique de lait ne va pas dans le papier ou qu'une bouteille d'huile ne va pas dans le PET. L'objectif est de consolider le geste de tri correct à travers la pratique.

Design Pédagogique : L'activité repose sur le principe du "Learning by Doing" via le mécanisme de glisser-déposer (Drag & Drop), qui mime l'action physique réelle. Un point clé est la gestion de l'erreur : le système distingue une erreur simple d'un "piège cognitif". Si l'utilisateur tombe dans un piège prévu (ex: jeter un mouchoir sale dans le papier), un feedback constructif explique précisément pourquoi c'est une erreur, transformant l'échec en apprentissage immédiat.

Design d'Interface : L'interface est immersive, utilisant une photographie réelle de Genève (Jet d'eau) pour ancrer l'activité dans le contexte local. Les éléments visuels (déchets et conteneurs) sont réalistes pour faciliter le transfert des connaissances vers la vie quotidienne. L'ambiance visuelle a été travaillée pour garantir la lisibilité des textes sur un fond sombre (utilisation de transparences et d'ombres portées).

Le dispositif a été réalisé avec HTML5, CSS3, et la bibliothèque jQuery UI pour gérer les interactions de glisser-déposer.

Une étape importante a été la structuration des données JSON pour gérer les "pièges". J'ai ajouté une propriété trapTarget aux objets, permettant au script de détecter si l'utilisateur a commis une erreur spécifique (ex: huile dans PET) et d'afficher le message d'erreur adapté plutôt qu'un message générique.

L'équilibre visuel entre l'image de fond et la lisibilité du texte a nécessité de nombreux ajustements CSS (opacité, text-shadow), afin que l'interface reste accessible tout en mettant en valeur la photographie de fond.

Le résultat final est satisfaisant. L'approche sous forme de "DÉFI" invite l'utilisateur à participer sans ressentir de contrainte. L'interaction est fluide et les feedbacks sont bienveillants ("Soft Error"), ce qui encourage à réessayer sans frustration.

Pistes d'amélioration :

• Ajouter des sons (feedback auditif) lors du succès ou de l'erreur pour renforcer l'immersion.
• Gamification avancée : Ajouter un système de score et des niveaux de difficulté pourrait rendre l’application plus engageante et motiver l'utilisateur à rejouer pour s'améliorer.
• Optimiser davantage l'affichage pour les très petits écrans (smartphones).

• Ville de Genève. (2025). Infos déchets 2026 : Ensemble, pour une ville plus propre [Brochure].

• Tutoriels JavaScript : Ressources de référence utilisées pour la logique de manipulation du DOM et des tableaux : Habr et Metanit.
• Bibliothèques : jQuery 3.6.0, jQuery UI 1.13.2 (Interactions) et jQuery UI Touch Punch (Support tactile).
• Images et Graphismes :
  • Photo de fond : "Genève la nuit" par Serhii Titov (Utilisée avec permission).
  • Éléments graphiques (conteneurs, déchets) : Générés et traités avec l'aide d'outils d'IA générative pour assurer une cohérence visuelle.
• Assistants IA :
  • Gemini (Google, modèle Gemini 2.0 Flash) : Aide à la création des visuels (conteneurs et déchets), correction linguistique des textes en français, et consultations ponctuelles sur la logique du code JavaScript.