Rapport exercice 4 de STIC I

Document d’accompagnement du dispositif de vidéo interactive

Auteur·rice

Chloé Savricouty

Date de publication

2 décembre 2025

1 Liens

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

2 Objectifs

Le dispositif « Introduction au système solaire » a pour objectif d’accompagner des élèves de 7ᵉ et 8ᵉ HarmoS dans la découverte des principaux éléments du système solaire. Il s’inscrit dans le cadre du Plan d’Études Romand (PER), plus précisément dans l’objectif suivant : « Observer des modèles en deux et trois dimensions de quelques corps principaux de notre système solaire en distinguant les éléments étoile – planète – satellite (Soleil, Terre, Lune, autres planètes du système), en appréhendant les notions de tailles et de distances ». Ce dispositif est conçu comme support introductif à un nouveau chapitre abordé en classe. Je l’ai pensé pour être utilisé en début de séquence, afin de préparer les élèves avant des activités plus approfondies. La vidéo sert ainsi de porte d’entrée au thème, en proposant une première compréhension visuelle et structurée du fonctionnement du système solaire. Comme cette activité introduit un nouveau contenu, je n’ai pas prévu de connaissances préalables obligatoires. À l’issue de l’utilisation du dispositif, les élèves devraient être capables d’identifier les principaux corps célestes du système solaire, comprendre leur organisation générale (étoile centrale, planètes, satellites) et se représenter approximativement les proportions et les distances.

3 Design

Le dispositif se veut simple. Dans la partie supérieure de la page, j’ai placé deux blocs : « Ce que tu vas apprendre » et « Consignes ». Ils permettent à l’élève de comprendre immédiatement l’objectif d’apprentissage et la manière d’utiliser le dispositif. Sous ces blocs se trouve la vidéo accompagnée de trois boutons interactifs : play, pause et aller au schéma du système solaire. Ce dernier permet d’amener directement l’utilisateur au passage clé situé à 1 min 30, ce qui facilite la navigation et encourage l’auto-régulation. Une infobox apparaît automatiquement à 2 min 12, avec une information complémentaire que l’élève peut fermer une fois consultée. La possibilité de mettre la vidéo en pause, de revenir en arrière ou de la visionner à nouveau permet une appropriation progressive et une flexibilité pour s’adapter au rythme de chacun. En effet, cela permet d’avoir une certaine autonomie et auto-régulation car si les élèves n’ont pas bien compris quelque chose, ils peuvent revoir la vidéo, revenir à une partie, mettre en pause pour prendre des notes ou essayer de comprendre ce qu’ils viennent de voir/entendre (Guilbert, 2025). Ainsi, le dispositif peut être utilisé en classe entière, mais également en individuel ou en semi-autonomie. Pour limiter l’impact numérique, j’ai compressé la vidéo.

4 Production

J’ai d’abord réalisé le support visuel sur Canva. J’ai ensuite enregistré ma présentation grâce à une capture d’écran et je parlais en même temps pour constituer la vidéo finale. Les sous-titres ont été créés manuellement dans un fichier au format .vtt. Une fois la vidéo prête, je me suis occupée du code HTML5, et du code CSS. Pour obtenir le fond animé, j’ai utilisé un exemple de code trouvé sur Code Pen sur le thème de la galaxy. Enfin, j’ai intégré les interactions grâce au JavaScript : les boutons de contrôle (play, pause, aller au schéma du système solaire), l’infobox automatique et l’accès direct à un moment précis de la vidéo. Pour ces éléments, je me suis appuyée sur des exemples de code disponibles sur la page Wiki du cours

5 Auto-évaluation

Je trouve que le dispositif est simple d’utilisation et que le guidage est clair. Les consignes et les interactions limitées rendent le dispositif accessible pour le public cible. Cependant, plusieurs améliorations seraient pertinentes. J’aimerais ajouter davantage de possibilités d’interaction avec la vidéo, par exemple des boutons permettant d’avancer ou de reculer de 10 secondes, ou encore des questions intégrées pour vérifier la compréhension au fil du visionnage. Une navigation par sections thématiques (par exemple un bouton pour chaque grande partie de la vidéo) rendrait aussi l’utilisation encore plus fluide et permettrait plus d’auto-régulation et d’autonomie dans l’apprentissage. J’ai apprécié réaliser cet exercice, car il m’a permis de consolider mes compétences en JavaScript, notamment pour gérer les événements déclenchés par la vidéo.

6 Bibliographie

Références théoriques

Références pratiques

7 Ressources

  • Vidéo et voix-off : réalisées par moi-même (Chloé Savricouty)
  • Support visuel de la vidéo : créé sur Canva par moi-même (Chloé Savricouty)
  • Code CSS pour l’arrière-plan animé : issu de CodePen : https://codepen.io/stack-findover/pen/eYWPwPV