Problème / Contexte
Lorsqu'un utilisateur sélectionne une réponse dans le quiz, le seul feedback visuel actuel est un changement de couleur de l'input en vert (bonne réponse) ou rouge (mauvaise réponse). Ce retour est trop discret et ne crée pas d'engagement émotionnel. L'utilisateur n'a pas de sensation de récompense ou de "punch" visuel qui renforce l'apprentissage par le feedback. Ce point concerne uniquement les animations dans/autour de l'input, indépendamment de la mascotte.
Solution proposée
Ajouter des micro-animations visuelles directement sur les inputs de réponse lors de la validation : effet de shake sur mauvaise réponse, effet de pulse/glow sur bonne réponse, particules ou confettis subtils, transition de couleur animée plutôt qu'un changement brut. L'objectif est de rendre le moment de validation plus satisfaisant sans surcharger l'interface.
Critères d'acceptation
L'input de bonne réponse joue une animation de succès (ex: pulse, glow, scale bounce) en plus du changement de couleur
L'input de mauvaise réponse joue une animation d'erreur (ex: shake horizontal, flash rouge)
Les animations sont courtes (300-500ms) et ne bloquent pas la progression vers la question suivante
Les animations utilisent des transitions CSS ou Framer Motion, pas de librairies lourdes
Les animations respectent prefers-reduced-motion pour l'accessibilité
L'expérience reste fonctionnelle si les animations ne se jouent pas (progressive enhancement)
Tests couverts pour : le déclenchement de la bonne animation selon le résultat, le respect de prefers-reduced-motion
Maquettes / Références
Inspiration : feedback d'input dans Duolingo, Kahoot (shake sur erreur, bounce sur succès)
Rester cohérent avec le design system Edukai (gradient bleu → bleu ciel, border-radius existants)
Impact estimé
Complexité: S
Pages concernées: page quiz (composant input/réponse)
Notes techniques
Privilégier des animations CSS avec @Keyframes pour les cas simples (shake, pulse) ou Framer Motion si déjà présent dans le projet pour les animations plus complexes (scale + opacity)
Créer des classes ou variants d'animation réutilisables (animate-success, animate-error) plutôt que du style inline
Le déclenchement doit se baser sur le state de validation existant — pas de logique métier à ajouter, uniquement du visuel
Penser à animer aussi la transition de couleur (pas de changement brut bg-green → utiliser transition-colors duration-300)
Problème / Contexte
Lorsqu'un utilisateur sélectionne une réponse dans le quiz, le seul feedback visuel actuel est un changement de couleur de l'input en vert (bonne réponse) ou rouge (mauvaise réponse). Ce retour est trop discret et ne crée pas d'engagement émotionnel. L'utilisateur n'a pas de sensation de récompense ou de "punch" visuel qui renforce l'apprentissage par le feedback. Ce point concerne uniquement les animations dans/autour de l'input, indépendamment de la mascotte.
Solution proposée
Ajouter des micro-animations visuelles directement sur les inputs de réponse lors de la validation : effet de shake sur mauvaise réponse, effet de pulse/glow sur bonne réponse, particules ou confettis subtils, transition de couleur animée plutôt qu'un changement brut. L'objectif est de rendre le moment de validation plus satisfaisant sans surcharger l'interface.
Critères d'acceptation
L'input de bonne réponse joue une animation de succès (ex: pulse, glow, scale bounce) en plus du changement de couleur
L'input de mauvaise réponse joue une animation d'erreur (ex: shake horizontal, flash rouge)
Les animations sont courtes (300-500ms) et ne bloquent pas la progression vers la question suivante
Les animations utilisent des transitions CSS ou Framer Motion, pas de librairies lourdes
Les animations respectent prefers-reduced-motion pour l'accessibilité
L'expérience reste fonctionnelle si les animations ne se jouent pas (progressive enhancement)
Tests couverts pour : le déclenchement de la bonne animation selon le résultat, le respect de prefers-reduced-motion
Maquettes / Références
Inspiration : feedback d'input dans Duolingo, Kahoot (shake sur erreur, bounce sur succès)
Rester cohérent avec le design system Edukai (gradient bleu → bleu ciel, border-radius existants)
Impact estimé
Complexité: S
Pages concernées: page quiz (composant input/réponse)
Notes techniques
Privilégier des animations CSS avec @Keyframes pour les cas simples (shake, pulse) ou Framer Motion si déjà présent dans le projet pour les animations plus complexes (scale + opacity)
Créer des classes ou variants d'animation réutilisables (animate-success, animate-error) plutôt que du style inline
Le déclenchement doit se baser sur le state de validation existant — pas de logique métier à ajouter, uniquement du visuel
Penser à animer aussi la transition de couleur (pas de changement brut bg-green → utiliser transition-colors duration-300)