EXERCICE 5, RAPPORT
Drag and drop avec jQuery et jQuery UI

Auteur : Renda Elena
Date de publication : 05-01-2026

Liens

Objectifs

Le dispositif propose une activité interactive de classement de 15 pays européens selon leur appartenance ou pas à l’UE (Union européenne). L’objectif principal est de comprendre que tous les pays de l'Europe ne sont pas aussi membres de l’UE à travers une interaction simple. Le public cible sont les élèves du secondaire ou des étudiants étrangers qui ont des difficultés à comprendre la différence entre les deux termes.
Le dispositif peut être utilisé comme accompagnement d’un cours en présentiel mais aussi comme exercice à faire à la maison pour entrainer ses connaissances. Aucune connaissance technique préalable n'est nécessaire pour utiliser le dispositif, l’utilisateur doit seulement posséder une connaissance générale de géographie européenne, mais sans une expertise particulière. Suite à l’utilisation, l’utilisateur est censé savoir distinguer les pays membres de l’UE de ceux qui n’en font pas partie.

Design

Le dispositif repose sur une interaction de type drag & drop, qui permet de manipuler les contenus. Chaque pays est représenté par un rectangle déplaçable que l’utilisateur doit placer dans l’une des deux boites : Union européenne ou Non-UE. Cette interaction favorise un apprentissage actif, permet une autoévaluation immédiate grâce au bouton de vérification en bas de l’écran (qui oblige l’utilisateur à terminer la tâche avant d’avoir un feedback) et encourage le principe d’essai-erreur, puisqu'il n’y a pas de tentatives limitées.
L’interface est volontairement simple, elle présente la consigne, claire est affichée en haut de la page, les pays regroupés dans une zone visiblement distincte des zones de dépôts qui sont clairement identifiables par les titres explicites. Pour finir, le retour visuel et textuel (message de succès ou d’erreur selon le placement des pays) facilite la compréhension du résultat.

Production

Le développement du dispositif s’est déroulé selon les étapes suivantes : tout d’abord j’ai structuré le contenu avec HTML et j’ai mis en forme l’interface à l’aide du CSS. Ensuite j’ai implémenté mon dispositif avec des interactions drag & drop à l’aide de jQuery. J’ai aussi rajouté le système de vérification des réponses avec le bouton sur JavaScript et j’ai testé le fonctionnement du dispositif et ajusté le code selon les erreurs que je remarquais.
La majeure difficulté rencontrée concerne la vérification des réponses. Au début, si aucun pays n'était placé dans les boîtes, en cliquant sur le bouton on recevait quand même un message de réussite de l’exercice. Le dispositif pourrait facilement être adapté à d’autres sujets en modifiant les titres des boites et le contenu des rectangles qui maintenant accueillent les noms des pays.
Tout au long de la création du dispositif, j'ai utilisé ChatGPT pour comprendre les erreurs de mon code et pourquoi certaines choses ne marchaient pas.

Auto-évaluation

Les principaux points forts du dispositif sont : l’interaction simple et efficace, la non-nécessité d’avoir des explications techniques pour effectuer l’exercice et un bon équilibre entre guidage et autonomie de l’apprenant. Les principales limites concernent : l’absence d’un feedback détaillé qui indique quels pays sont mal classés et le manque de la liste complète des pays du continent européen.
Globalement, l’exercice m’a permis de mettre en pratique des notions techniques apprises pendant les cours en présentiel. Je suis consciente des multiples améliorations possibles de mon dispositif mais je suis quand même fière du travail que j’ai produit. Je pense que, au fur et à mesure que mon niveau de compétences s'améliore, je pourrai modifier mes exercices pour les perfectionner.

Bibliographie

Ressources