EXERCICE 6, RAPPORT
Présentation interactive avec Revel.js

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

Liens

Objectifs

Cette présentation interactive a comme objectif principal l’explication de la différence entre l’Europe et l’Union Européenne (UE). 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. La présentation peut être utilisée dans un cadre pédagogique en présentiel comme accompagnement d’un cours, ou en libre accès sur Internet pour un apprentissage autonome du sujet.
Les connaissances préalables requises concernent la connaissance de base de la géographie européenne et des organisations politiques. Les compétences visées après l’utilisation du dispositif sont : faire une distinction claire entre l’Europe continent et l’UE organisation, être capable d’identifier les pays membres de l’UE et éviter les erreurs courantes de confusion entre Europe et UE.

Design

Le design de la présentation combine à la fois des aspects pédagogiques et d’interface. Concernant les aspects plus pédagogiques, les contenus sont structurés par thèmes et introduits progressivement pour faciliter l’apprentissage. De plus, une légère animation sur les titres attire l’attention et améliore l’engagement. La slide interactive avec un petit quiz permet aux utilisateurs de tester de manière immédiate ses connaissances. Pour finir, la présence d’images facilite la compréhension visuelle et garde l'intérêt des apprenants. Concernant les aspects d’interface, Reveal.js offre un défilement assez fluide et une navigation simple. De plus, la mise en page des diapositives est claire et facile à comprendre. Le design favorise donc un apprentissage autonome, intuitif et interactif.

Production

Le développement du dispositif a suivi plusieurs étapes. Tout d'abord, j’ai planifié le contenu général de la présentation et celui de chaque slide. Ensuite, j’ai créé le fichier HTML principal, un fichier CSS pour gérer la mise en page et un fichier JS pour animer les boutons du quiz interactif de la diapositive 9.
À ce stade, j’ai intégré Reveal.js pour la structure des slides et rendre la présentation dynamique. J’ai téléchargé le fichier d’exemple donné en cours et j’ai décidé d’utiliser le stylesheet « sky.css » car j’ai jugé que ce style s'intégrait bien avec celui que j’ai donné à mes autres travaux. Pour l'animation, j’ai décidé d’animer les titres de chaque diapositive en intégrant Animate.css avec l’animation « animate__tada ». Ici j’ai rajouté un script dans mon fichier JS pour que l’animation se répète au changement de slide. Cette dernière étape a été la difficulté majeure rencontrée, car l’animation n’apparaissait que lorsque je mettais à jour la page de chaque diapositive.

Auto-évaluation

La présentation interactive atteint globalement ses objectifs pédagogiques. Elle permet de distinguer clairement l’Europe et l’UE et elle offre un support visuel et interactif pour renforcer l’apprentissage. Cependant, il y a certaines limites. La présentation reste très linéaire et le quiz interactif est également réduit à une seule question. De plus, certaines images pourraient être davantage exploitées pour renforcer l’interactivité. L’utilisation de Reveal.js a facilité la structuration et le défilement fluide des diapositives, tandis qu’Animate.css a permis d’ajouter facilement des animations.
Concernant les animations, je suis consciente qu’elles sont présentes de manière très limitée. Normalement, quand je prépare une présentation PowerPoint, j’en mets plusieurs. Je pense qu'ici j'étais pas trop à l’aise avec le dispositif et j’ai donc préféré limiter le nombre et le type d’animations plutôt que me compliquer le travail. Je reconnais ainsi que les animations sont limitées et qu’il y a plusieurs endroits où ça serait intéressant de les intégrer.
Dans la mise en page des diapositives, j’ai souvent rencontré des bugs (création du tableau, mise en page des images, rajout de l’animation sur les titres) et, pour cela, j’ai souvent utilisé ChatGPT en lui demandant d’analyser mon code et de m’expliquer mes erreurs pour que je les corrige. Ce projet m’a permis d’explorer une modalité de présentation que je ne connaissais pas et de mettre en pratique ce que j’ai appris avec la création d’un outil interactif accessible et engageant.

Bibliographie

Ressources