Rapport exercice 6 de STIC I

Document d’accompagnement du dispositif Drag and Drop

Auteur·rice

Naywa Tomaylla

Date de publication

26 janvier 2026

1 Liens

Le dispositif se compose des éléments suivants :

2 Objectifs

Ce dispositif s’adresse à un jeune public et vise à les sensibiliser à la protection des hérissons. En Suisse, le hérisson est une espèce protégée et est considérée potentiellement comme en danger (Pro Natura, 2022). Ce dispositif permet de connaître les différents profils de hérissons rencontrés au quotifdien et les les comportement à adopter. Dans le cadre du PER, plus particulière dans la rubrique F26-2, “Analyser des formes d’interdépendance entre le milieu et l’activité humaine”, l’élève est amené à se questionner sur l’effet des comportements humains sur son environnement. L’exemple du hérisson et de sa mise en danger est en partie en raison de l’activité humaine actuelle, cette séquence didactique permettrait de concrétiser le concept d’interdépendance. Ce dispositif est pensé pour être intégré dans une séquence didactique expliquant le hérisson et les impacts de l’humain son habitat naturel. Le hérisson est également un ambassadeur de la biodiversité car il permet d’aborder plusieurs thématiques environnementales telles que la biodiversité.

3 Design

Le dispositif consise en un seul écran comportant tous les éléments interactifs. Il est précédé d’un bref texte introductif sur les différents profils d’hérisson et le comportement à adopter face à eux. La consigne de l’exercice est également dans le même bloc de texte. L’interactivité se repose sur le concept du “drag and drop”. Les 7 différents profils d’illustration de hérissons sont présentés sur un fond de “gazon”. En dessous, se trouvent les 3 différentes zones “droppables”, chacun représente une action possible à faire. Lorsque les objets “draggables” touchent une zone “droppable”, un feedback visuel apparaît sous forme de traitillés entourant la zone en question. Cela permet de rendre la zonne droppablesLes objets “draggables” et les zones “droppables” sont des lillustrations faites main. Le bouton “vérifier” et “réessayer” apparaissent en dessous de la zone drag and drop. Le bouton “vérifier” corrige l’exercice et donne deux feedbacks possibles : féliticiter si tous les hérissons sont bien placés, informer l’apprenant qu’il y a encore des erreurs. Le bouton “réessayer” permet de réinitialiser l’exercice.

Ce dispositif est à insérer à la fin d’une plus ample présentation sur le sujet et qui aborde les différents dangers que traversent les hérissons et son habitat naturel.

4 Production

Pour la création du dispositif, je me suis inspiré de mon expérience au sein de l’association SOS-hérisson durant l’année 2025. J’ai travaillé au côté de Christine Meissner, biologiste retraitée qui a créé un centre de réhabilitation pour hérissons. Je me suis basé sur différents articles et j’ai d’abord illiustrés les différents objets du dispositif drag and drop à l’aide de ma tablette et du logiciel Procreate. J’ai ensuite enregsitré sur ICloud et insérer mes fichiers sous le format PNG. J’ai “découpé” la forme des illustrations afin que les objets épousent seulement les traits de mes illustrations. J’ai ensuite commencé à coder en prenant en compte la page Edutechwiki et différents tutoriels sur Youtube pour comprendre le code Jquery. J’ai redessiné plusieurs fois les zones droppables car je craignais qu’il y ait un nombre trop important de couleur et que cela puisse affecter la charge cognitive extrinsèque de l’exercice (Sweller, 2006). J’ai également fait plusieurs essais pour vérifier que la taille de mes objets drasggables étaient suffisamment compréhensibles. Je me suis rendu compte qu’il était peut-être difficile de comprendre comment étaient délimitées les zones droppables, j’ai donc ajouté un feedback visuel qui permette de visualiser exactement la zone droppable. Pour finir, j’ai utilisé Chatgpt pour m’aider à organiser mon code de manière plus “propre”.

5 Auto-évaluation

Je suis assez satisfait du résultat de mon dispositif, bien que je trouve que peut-être la taille des mes illustrations auraient pu être standardisés afin d’avoir un rendu visuel plus homogène en matière de taille. Je pense aussi que l’ajout d’un feedback plus précis aurait été apprécié (par exemple donner un feedback visuel selon si un objet est au bon ou mauvais endroit).

6 Bibliographie

7 Ressources théoriques

8 Ressources techniques

9 Ressources

L’usage de l’IA Chatgpt pour la bibliographie en normes APA7 et pour organiser mon code de manière plus élégante