Rapport exercice 3 de STIC I

Document d’accompagnement du dispositif interactif

Auteur·rice

Naywa Tomaylla Bernal

Date de publication

26 octobre 2025

1 Liens

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

2 Objectifs

Ce dispositif s’adresse à des étudiants en 9ème année du Cycle d’orientation (CO) et vise à introduire à la notion de l’unité de base du vivant la cellule, plus partculièrement à la cellule eucaryote. Lors de la première année du cycle d’orientation, la notion de cellule est fondamental afin de pouvoir comprendre le fonctionnement du corps humain et des autres êtres vivants. Cet apprentissage précède l’enseignement du métabolisme du corps humain et de la reproduction cellulaire en 10ème année du CO. La flashcard s’incrit dans le cadre du moyen d’enseignement romand (MER) pour le 3ème cycle et contribue au Concept cantonal de promotion de la santé et de la prévention 2030. C’est pour ce dernier cadre que la cellule eucaryote a été choisi comme sujet de la flashcard. Le dispositif accompagne l’enseignement en offrant un visuel interactif pour les élèves. On attend des élèves à restituer correctement le nom des différents éléments que comportent une celulle eucaryote ainsi que leurs emplacement sur un schéma.

3 Design

Le dispositif est composé d’un seul écran dans lequel figurent tous les éléments interactifs. Après un texte introductif qui décrit brièvement le dispositif et qui donne les consignes à suivre, on y voit apparaître un schéma sans labels et 4 boutons ainsi qu’un espace pour écrire. Ce modèle est rendu interactif à l’aide de ces quatre boutons : « Vérifier », « Réessayer », « Solution » et « Suivant ». Selon l’élément mis en évidence en rouge sur le schéma, l’élève doit écrire son nom et interagir avec les boutons pour valider sa réponse (réessayer, voir la réponse ou passer à l’élément suivant). Selon sa réponse, un feedback s’affiche soit en rouge “Ce n’est pas la bonne réponse” soit en vert “C’est correct, bravo !”. Le nom correct de l’élément est également donné dans le feedback placé juste en dessous du schéma. Les différentes fonctionnalités permettent à l’élève de mémoriser les différents composants de la cellule et ainsi que leur emplacement. Le principe de feedback a été démontré efficace pour la mémorisation grâce aux répétitions qu’elle entraîne. L’importance d’une harmonie de couleur ont également été démontrée comme étant importante pour l’apprentissage des élèves.

4 Production

Pour la création du dispositif, j’ai pris l’image SVG d’un schéma de cellule eucaryote sur wikimedia commons. Par la suite, je l’ai dupliquée plusieurs fois pour créer les différentes versions avec chaque partie en rouge. J’ai ensuite regaré des vidéos sur Youtube afin de comprendre comment “colorier l’image” et comment effacer certains éléments à l’aide de l’application Inkscape. J’ai compris comment effacer les traits avec l’option “noeuds” et comment vectoriser directement un objet PNG en objet SVG sur Inkscape. A la fin de ce processus, j’ai pu obtenir le schéma de la cellule sans les labels et en couleur rouge les différents componants de la cellule. Ayant terminé avec les images, j’ai commencé à coder avec les langues de programmation suivantes: HTML, CSS et JS. Le tutoriel “Interactivité avec JavaScript” sur Edutechwiki m’a permis de créer mon dispositif grâce à sa marche à suivre très détaillée. Je me suis également inspiré du travail de Chloé Savricouty de son dispositif interactif pour le code JavaScript. J’ai également regardé plusieurs tutoriels Youtube lorsque certains éléments ne fonctionnaient pas ou encore que je ne comprenais pas très bien ce qui se passait.

5 Auto-évaluation

Je suis assez satisfait du résultat, mais j’ai remarqué qu’il arrive que les images réapparaîssent 2 fois de suite. J’ai essayé de trouver une solution à cela, mais je n’étais pas convaincu sur comment réellement le code fonctionnait. J’ai aussi remarqué que l’emplacement du feedback était peut-être trop proche des boutons. Je pense qu’une prochaine fois, il faudrait que je l’emplace mieux afin de faciliter sa visibilité. Je suis tout de même heureux d’avoir pu progressé depuis la dernière fois, j’ai pu ajouter de nouvelles foncitonnalités et rendre le dispositif interactif. J’espère pouvoir faire encore mieux la prochaine fois.

6 Bibliographie

Références théoriques:

  • Abdelkader, Benzelmat & Miloud, Maarif. (2023). Le rôle des flashcards dans l’enseignement / apprentissage du vocabulaire : les apprenants de la 2e année moyenne du collège BOUAZZA Belkacem de la ville de Saïda. 11. 158-178

  • Conférence intercantonale de l’instruction publique (2010). Biologie 9e – La cellule, unité de base du vivant. (Cycle 3) [PDF]. In Moyens d’enseignements romands(p.11). CIIP.https://per.ciip.ch/api/files/328

  • Diachenko, I., Kalishchuk, S., Zhylin, M., Kyyko, A., & Volkova, Y. (2022). Color education: A study on methods of influence on memory. Heliyon, 8(11). https://doi.org/10.1016/j.heliyon.2022.e11607.https://www.cell.com/action/showPdf?pii=S2405-8440%2822%2902895-X

  • Winstone, N.E. & Nash, R. A. (2024). An exploratory field study of students’ memory for written feedback comments, Assessment in Education: Principles, Policy & Practice, 31(3-4), 189-203, DOI: 10.1080/0969594X.2024.2367029

Références techniques: 

7 Ressources

Le schémaa été trouvé sur wikimedia commons, l’auteur est Biodino64.