Rapport exercice 5 de STIC I

Document d’accompagnement du dispositif interactif

Auteur·rice

Chloé Savricouty

Date de publication

8 janvier 2025

1 Liens

Le dispositif se compose de l'élément suivant :

2 Objectifs

Le dispositif « drag and drop » Cycle de l’eau a pour objectif d’aider les élèves de 5ème et 6ème année HarmoS à mémoriser différentes étapes du cycle de l’eau. Il s’inscrit dans le cadre du Plan d’Études Romand (PER), plus précisément dans l’objectif suivant : « Observation des différentes formes de l’eau dans l’environnement (pluie, brouillard, neige, givre,…) et compréhension du cycle naturel de l’eau ». Pour cet objectif, une des attentes fondamentales est de décrire le cycle naturel de l’eau. Ce dispositif accompagne le travail effectué dans les fiches d’activité des moyens d’enseignement romand. Dans ces activités, les élèves doivent compléter une seules fois un schéma du cycle de l’eau (un seul exercice de ce genre proposé). Or, s’entraîner une fois ne permet pas de mémoriser sur le long terme. Mon dispositif vise à pallier ce problème en offrant aux élèves la possibilité de s’entraîner plusieurs fois, jusqu’à que les étapes soient bien mémorisées. C’est aussi un moyen pour eux de réviser en vue d’une évaluation sur ce thème. Le public cible du dispositif est constitué d’élèves de 5 et 6ème Harmos. Il peut être utilisé en classe, en complément d’un travail, ou en libre accès à la maison pour s’entraîner. L’interface est simple et ne nécessite que des actions simples : déplacer les étiquettes dans les zones de drop. Pour utiliser ce dispositif, les élèves doivent avoir eu une première familiarisation avec les différentes étapes du cycle de l’eau (leur nom et définition).Ce qui est attendu des élèves est une restitution des étiquettes au bon endroit. Le dispositif repose sur la répétition des associations entre l’état/transformation de l’eau et le lieu de cette transformation. Cela favorise la mémorisation à long terme par la réactivation régulière de l’information (Gerbier et Koenig, 2015). Après utilisation, les élèves sont censés connaître les 4 étapes du cycle de l’eau.

3 Design

Le dispositif s’articule autour d’un schéma du cycle de l’eau qui contient 4 zones de drop, représentées par des encadrés en pointillés bleu. Au-dessus du schéma, quatre étiquettes représentent les états/transformation de l’eau. Ce sont ces étiquettes que les élèves doivent manipuler et drop au bon endroit. Juste au-dessus du schéma, un court texte présent le dispositif et les consignes aux élèves. Sous les étiquettes, se trouvent trois boutons « vérifier », « recommencer » et « aide ». Grâce au bouton aide, les élèves reçoivent un petit étayage qui donne une définition de chaque étape du cycle de l’eau. D’un point de vue pédagogique, le dispositif repose sur la répétition, qui est une stratégie pour la mémorisation à long terme. En effet, répéter et réactiver les connaissances à intervalles réguliers améliore la consolidation des apprentissages (Gerbier et Koenig, 2015)

4 Production

J'ai commencé par prendre une image du cycle de l'eau sur Freepik. Mon idée était de dessiner directement sur cette image les quatre zones où déposer les étiquettes. J'ai donc utilisé Inkscape pour tracer quatre rectangles aux bons endroits et j'ai noté leurs coordonnées précises. (x, y, hauteur, largeur). Ensuite, j'ai créé la structure de la page avec HTML, le CSS (principalement un style bleu pour rappeler l’eau), j'ai ajouté l’interactivité avecJavaScript, ainsi que la bibliothèque jQuery pour le drag & drop. C'est là que j'ai eu un problème technique. Quand j'ai essayé d'utiliser les coordonnées de mes rectangles d'Inkscape dans le fichier HTMLT, rien ne s'affichait au bon endroit. Les zones étaient complètement décalées par rapport à l'image. J'ai trouvé la solution sur un forum de discussion reddit. En fait, dans Inkscape, les coordonnées sont en pixels pour une image très grande, mais sur une page web, l'image change de taille selon l'écran. Il fallait donc convertir les pixels en pourcentages. J'ai utilisé l'IA Microsoft Pilot pour faire les conversions. Par exemple, pour la zone d'évaporation, au lieu d'écrire left : 130px, elle m'a donné left : 6.5%. Elle a converti toutes mes positions et toutes mes tailles en pourcentages de cette manière. Copilot m'a aussi recommandé de ne pas modifier directement l'image SVG, mais de créer des zones invisibles en CSS par-dessus l'image. J'ai suivi ce conseil. J'ai utilisé les pourcentages calculés par l'IA pour positionner ces zones dans le HTML et mon problème était réglé. Pour les rendre visibles aux élèves, je leur ai mis une bordure en pointillés bleus et un léger fond bleu.

5 Auto-évaluation

Au niveau des points fort, le dispositif est simple à utiliser et les consignes sont formulées de manière claire, ce qui facilite la compréhension. Les éléments du dispositif sont réduits au minimum, permettant à l’élève de savoir exactement ce qu’il doit faire sans être distrait par des informations superflues.
Toutefois, Lorsqu’un élève commet une erreur, il n’y a aucune trace de son apprentissage. Le feedback fourni se limite à indiquer que la réponse est incorrecte, sans préciser ce qui est juste ou faux. Cela peut générer de la frustration, car l’élève ne parvient pas à cibler ses erreurs ni à comprendre la source de son échec. De plus, il est contraint de recommencer l’exercice depuis le début, ce qui limite la progression et peut décourager. Pour l’améliorer, il faudrait modifier le fichier javascript et faire en sorte d’indiquer seulement les étiquettes mal placées.

6 Bibliographie

Références théoriques

  • Gerbier, É., & Koenig, O. (2015). Comment les intervalles temporels entre les répétitions d’une information en influencent-ils la mémorisation ? Revue théorique des effets de pratique distribuée. L’Année psychologique, 115(3), 435–462. https://doi.org/10.3917/anpsy.153.0435
  • Conférence intercantonale de l’instruction publique (2010). MSN 26 - Explorer des phénomènes naturels et des technologies à l'aide de démarches caractéristiques des sciences expérimentales. In Moyens d’enseignements romands (pp. 28–29). CIIP. https://portail.ciip.ch/per/learning-objectives/59

Références pratiques

7 Ressources

Usage de l'IA Microsoft Pilot
L'image du cylce de l'eau est libre de droit et provient Freepik.