1. Liens
2. Objectifs
Ce dispositif vise à familiariser les élèves du cycle 1 (degré 3-4H) avec les différents comportements et modes de Thymio tout en mobilisant des compétences de lecture et de compréhension. A travers deux activités interactives, les élèves découvrent les émotions de Thymio. Puis, ils réinvestissent dans une histoire à compléter.
- Reconnaître les couleurs associées à chaque mode de Thymio.
- Comprendre les comportements de base (aventurier, explorateur, peureux, etc.)
- Développer la compréhension en lecture à travers une activité de complétion guidée.
- Encourager la motivation et la persévérance grâce à des feedbacks positifs.
3. Design
Le projet est composé de deux sections interactives:
1. Exploration des émotions de Thymio
- Interaction par survol de la souris: Thymio change de couleur et le panneau affiche la description correspondante.
- Le fond du panneau s'adapte à la couleur, créant un repère visuel clair pour l'élève.
- Activité ludique où l'élève glisse des mots dans les phrases pour les compléter.
- Système de feedback immédiat:
- ✅ Bravo, quand tout est correct
- 🌟 Encouragements en cas d'erreur partielle
- 💪🏻 Message positif en cas d'erreur complète
- Score dynamique pour renforcer la motivation.
4. Production
Technologie utilisées: HTML5, CSS3, JavaScript.
Organisation:
- Fichier index.html pour la structure du contenu.
- Fichier style.css pour la mise en page, palette de couleurs, animations et responsive design.
- Fichier thymio-explore.js pour la gestion du survol et du changement de couleur de Thymio pour représenter ses émotions.
- Fichier story-complete.js pour la logique de l'histoire à compléter et les feedbacks.
- La production s'est déroulée selon une approche itérative: conception progressive, tests réguliers, amélioration des scripts, vérification de l'accessibilité et adaptation graphique.
- Les tests ont été effectués sur différents navigateurs: Chrome, Firefox et Edge.
5. Auto-évaluation
Ce projet m'a permis d'approfondir ma compréhension de la structure HTHML et du fonctionnement du DOM en JavaScript. J'ai appris à articuler la logique des codes et du design prédagogique, ainsi qu'à mettre en place des feedbacks adaptés à de jeunes apprenants. Les principales difficultés ont concerné la gestion des chemins et la synchronisation entre les fichirs JS. Je me suis aussi organisée pour avoir un deuxième écran pour afficher le résultat final, ce qui m'a permis de travailler de manière plus confortable. Je suis satisfaite du résultat visuel et de la cohérence générale entre interactivité, feedback et esthétique. Je me suis surprise à éprouver du plaisir à coder ces différentes pages, afin de pouvoir proposer cette activité à mes élèves.
6. Bibliographie
EduTechWiki – Computation avec JavaScript
EduTechWiki - Interactivité avec JavaScript
EduTechWiki – Svg avec JavaScript
EduTechWiki – Carte interactive Svg
7. Ressources
Les illustrations de Thymio et Blue-Bot sont utilisées à des fins pédagogiques. Les visuels de Thymio en version "kawaii" et certaines scènes de l'histoire ont été générées avec l'aide de ChatGPT 5, puis retravaillées par mes soins dans Canva afin de correspondre à l'univers graphique du projet. Je me suis basée sur le moyen d'eneignement Décodage Scénario 3, science informatique 3-4H, qui met en avant la découverte de Thymio. C'est au travers de ce moyen que j'ai pu avoir accès aux images de Thymio correspondant à l'exercice 1. J'ai utilisé différents tutos vidéo, ainsi que les pages EduTechWiki et l'intelligence artificielle (ChatGPT OpenAI) pour m'aider à vulgariser les blocs pour comprendre leurs effets. Cette aide m'a permis de mieux comprendre la logique entre les fichiers JavaScript et CSS.