Rapport exercice 6 de STIC I

Document d’accompagnement du dispositif présentation avec reveal.js

Auteur·rice

Chloé Savricouty

Date de publication

15 décembre 2025

1 Liens

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

2 Objectifs

Le dispositif interactif « Introduction à la dyslexie et aux troubles du langage » a pour objectif de fournir une introduction aux manifestations et caractéristiques de la dyslexie. Il s'adresse principalement aux étudiants en sciences de l'éducation ou en psychologie de niveau bachelor qui découvrent les troubles spécifiques de l'apprentissage du langage écrit. Le public cible est constitué d'étudiants de bachelor en sciences de l'éducation, en psychologie ou en logopédie, ainsi que de toute personne souhaitant s'initier au sujet de la dyslexie. Le dispositif est conçu comme support d'introduction au sujet et peut être utilisé en autonomie pour une première découverte, ou en complément d'un cours magistral comme un outil de révision. L'interface est simple et nécessitent que des actions basiques comme naviguer entre les slides, cliquer sur des boutons et lire des feedbacks. Afin de tirer profit de la présentation, il faut des connaissances de bases en didactique de la lecture (par ex : comprendre la notion de phonème ou automatisme de la lecture). Après utilisation, les étudiants sont censés être capables de :

  • Identifier les principales hypothèses explicatives de la dyslexie (facteurs génétiques, environnementaux, neurologiques)
  • Reconnaître les trois types de manifestations des troubles dyslexiques (traitement phonologique, mémoire phonologique à court terme, dénomination rapide automatisée)
  • Distinguer les trois formes principales de dyslexie (surface, phonologique, mixte) et leurs caractéristiques
  • Comprendre le déficit de l'empan visuo-attentionnel et ses implications sur la lecture
  • Identifier visuellement les types d'erreurs fréquentes liées aux troubles du langage écrit
Le dispositif vise à proposer un support d’apprentissage plus engageant grâce à l’interactivité, contrairement aux supports de cours traditionnels. En effet, plusieurs recherches démontrent que l’engagement des étudiants améliore significativement leurs résultats d’apprentissage (Xu et al., 2023).

3 Design

Le dispositif se présente sous la forme d'une présentation Reveal.js de 17 slides. Le guidage se fait grâce à la deuxième slide qui indique à l'utilisateur ce qu'il va apprendre via la présentation et comment utiliser le dispositif.L’utilisateur interagit de plusieurs manières avec la présentation. Sur la slide « manifestations de la dyslexie », il clique sur « Suivant » pour afficher progressivement les trois types de manifestations puis la conclusion. Deux quiz proposent d’analyser une petite situation et de choisir parmi trois types de dyslexie avec feedback immédiat. Sur les slides « empan visuo-attentionnel » et « dyslexie mixte », un bouton permet de basculer entre texte explicatif et schéma.
D'un point de vue pédagogique, la navigation progressive évite la surcharge cognitive en présentant les informations une par une (Sweller, 1988). Les quiz avec feedback immédiat permettent une évaluation formative. (Hattie & Timperley, 2007). Le basculement entre texte/image donne du contrôle à l'utilisateur sur son rythme d'apprentissage et permet de présenter l’information sous deux formes différentes et donc de s’adapter aux préférences d’apprentissage.

4 Production

Avant toute chose, j'ai consulté la documentation Reveal.js sur EduTechWiki et les exemples de présentations sur GitHub https://github.com/mafritz/slides J'ai commencé par créer la structure HTML en construisant chaque slide avec son contenu (titres, textes, listes, images). Ensuite, j'ai créé une feuille CSS externe pour appliquer la couleur orange aux éléments importants et aux boutons. Sinon, pour le thème général, j’ai utilisé white.css disponible dans la bibliothèque reveal.js Puis j'ai ajouté les contraintes de l'exercice en créant les fonctions JavaScript dans un fichier externe. Pour la navigation progressive (slide sur les manifestations de la dyslexie), j'ai utilisé des structures if/else pour afficher/cacher les contenus successivement. Un problème est apparu, en effet le contenu s'affichait en bas au lieu d'être centré. La solution a été d'ajouter Reveal.layout() pour forcer le recalcul de la position. Pour les quiz, j'ai créé deux fonctions avec if/else qui comparent la réponse choisie et affichent un feedback. Sur certaines slides, on peut basculer entre image/texte. Pour cela, j'ai utilisé if/else pour vérifier quel élément est visible et inverser l'affichage.

5 Auto-évaluation

Au niveau des points forts, je pense que l’objectif principal de fournir une introduction interactive et structurée à la dyslexie est respecté. La progression pédagogique est claire et permet aux étudiants de bachelor de construire progressivement leur compréhension du sujet. Je trouve aussi que l’'interactivité apporte une plus-value par rapport à une simple présentation. En effet, les quiz permette de s’auto-évaluer, la navigation progressive évite la surcharge cognitive, et les bascules texte/image donnent du contrôle à l'utilisateur sur son parcours d’apprentissage.
Sur le plan technique, le dispositif est donc je suis satisfaite.
Je suis satisfaite du résultat car le dispositif est pleinement fonctionnel et remplit son objectif pédagogique.
La principale limite est que le dispositif ne tire pas pleinement parti des potentialités multimédia de HTML5/CSS/JavaScript. On pourrait enrichir le contenu en ajoutant des capsules vidéo d'études de cas montrant des élèves dyslexiques en situation de lecture, des témoignages audios d'enseignants, ou des exercices interactifs de simulation permettant de simuler les difficultés d'un élève dyslexique. Je pense que ça permettrait mieux d’exploiter les potentialités.

6 Bibliographie

Références théoriques

  • Bacquelé, V. (2024). Intervenir auprès d'élèves présentant des troubles du langage écrit. Cours du Bachelor en Sciences de l'éducation, Université de Genève.
  • Hattie, J., & Timperley, H. (2007). The Power of Feedback. Review of Educational Research, 77(1), 81-112. https://doi.org/10.3102/003465430298487
  • Lyon, G. R., Shaywitz, S. E., & Shaywitz, B. A. (2003). A definition of dyslexia. Annals of Dyslexia, 53(1), 1-14.
  • Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257-285.

Références pratiques

7 Ressources

Le contenu théorique de cette présentation est tiré et inspiré du cours de Vanessa Bacquelé : Intervenir auprès d'élèves présentant des troubles du langage écrit, Cours du Bachelor en Sciences de l'éducation, Université de Genève.

Images et schémas

Toutes les images utilisées (schémas des trois types de dyslexie, représentation visuelle des troubles, déficit de l'empan visuo-attentionnel, erreurs fréquentes) proviennent du cours de Vanessa Bacquelé et sont utilisées dans un cadre pédagogique avec autorisation.

L'image du logo Creative Commons provient de Creative Commons et est placée sous licence CC BY 4.0 (https://creativecommons.org/).

Vidéo

La vidéo "La dyslexie expliquée" est produite par Lumni et intégrée via YouTube (https://www.youtube.com/embed/dchDdYBKq2Q). Cette ressource est utilisée dans un cadre pédagogique.

Bibliothèques third-party

  • Reveal.js (version master) : Framework de présentation HTML/JavaScript. Licence MIT. https://revealjs.com/
  • White.css : Thème de Reveal.js inclus dans la distribution standard.

Toutes ces bibliothèques sont hébergées localement sur le serveur tecfaetu.unige.ch.

Licence du dispositif

Cette présentation est partagée sous licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 (CC BY-NC-SA 4.0). Vous êtes libre de réutiliser et adapter ce contenu à condition de créditer l'auteur (Chloé Savricouty), de ne pas en faire un usage commercial, et de partager vos adaptations sous la même licence.