Rapport – STIC I Exercice 3

Le lien suivant mène au dispositif interactif "Roue de la Vie" :

• Dispositif : La Roue de l'Équilibre de Vie

Ce dispositif constitue une adaptation numérique interactive de l'outil de coaching et de psychologie positive connu sous le nom de "Wheel of Life" (Roue de la Vie). L'objectif pédagogique principal est de favoriser la métacognition chez l'utilisateur en lui permettant de visualiser graphiquement l'équilibre (ou le déséquilibre) entre les différents domaines de son existence.

Le dispositif a été conçu pour dépasser la simple évaluation binaire (juste/faux). Il vise à encourager une réflexion qualitative grâce à un système d'étayage (scaffolding) : pour chaque domaine, une question réflexive est proposée afin de guider l'auto-évaluation avant la saisie du score.

Le feedback final n'est pas une note, mais un diagnostic basé sur la cohérence des résultats, visant à orienter l'utilisateur vers des actions concrètes pour améliorer son bien-être.

Le design de l'application repose sur une visualisation de données dynamique et interactive. L'interface se compose d'une représentation vectorielle de la roue et d'un panneau de contrôle comportant 8 curseurs (sliders).

Interaction et Feedback

Le principe d'interaction directe a été privilégié : chaque modification d'un curseur entraîne une mise à jour immédiate et fluide du graphique SVG. Cette réactivité assure un feedback visuel constant, permettant à l'utilisateur de "voir" l'impact de son ressenti sur la forme globale de la roue.

Une attention particulière a été portée à l'ergonomie mobile (Responsive Design). Le graphique SVG et les contrôles s'adaptent automatiquement à la largeur de l'écran grâce à l'utilisation d'unités relatives CSS (vw, max-width), rendant l'application utilisable sur smartphone comme sur ordinateur.

La réalisation de ce dispositif a nécessité la mise en œuvre de compétences techniques avancées en JavaScript et en manipulation du DOM SVG.

Architecture "Data-Driven"

Plutôt que de coder statiquement les éléments HTML, une approche basée sur les données a été adoptée. Un tableau d'objets JavaScript (`lifeSpheres`) centralise toutes les informations (IDs, labels, questions, conseils). Une boucle `forEach` génère ensuite dynamiquement l'interface utilisateur et les éléments graphiques au chargement de la page. Cette structure rend le code modulaire, "propre" (Clean Code) et facilement extensible (ajout aisé d'un 9ème domaine sans toucher au HTML).

Techniques avancées (SVG Masks)

L'animation de remplissage des secteurs n'est pas une simple substitution d'images, mais une manipulation géométrique en temps réel. Des masques SVG (``) ont été créés dynamiquement via JavaScript. Le script contrôle le rayon d'un cercle blanc invisible à l'intérieur de chaque masque, ce qui permet de "révéler" progressivement le secteur coloré correspondant à la valeur du slider.

Défis techniques et solutions

Plusieurs obstacles techniques ont dû être surmontés lors du développement :

• Géométrie et alignement du texte : Les étiquettes textuelles dans le SVG se superposaient initialement aux lignes de séparation. Il a été nécessaire de recalculer précisément les coordonnées polaires pour chaque étiquette en appliquant un décalage angulaire de 22.5 degrés (la moitié d'un secteur), afin de garantir un centrage parfait quel que soit le secteur.
• Logique de Mapping : Une désynchronisation a été observée entre les sliders et les secteurs graphiques (ex: le slider "Santé" activait le secteur "Amis"). Ce problème provenait de l'exportation SVG depuis CorelDraw, qui n'ordonnait pas les IDs séquentiellement. Un mapping explicite entre les IDs du SVG et les objets JavaScript a permis de rétablir la correspondance correcte.
• Algorithme d'analyse : La logique initiale de feedback ne prenait en compte que le score minimum. Elle a été enrichie pour calculer l'écart (`gap`) entre le score minimum et maximum. Cela permet de distinguer une "roue équilibrée" (même avec des scores moyens) d'une "roue déséquilibrée", offrant ainsi un feedback pédagogique plus pertinent.

Le résultat final répond pleinement aux contraintes de l'exercice tout en intégrant des éléments de complexité supplémentaires. L'application est fonctionnelle, réactive et pédagogiquement cohérente.

Ce projet a permis une montée en compétence significative sur la manipulation du format SVG en tant que document structuré (DOM) et non simplement comme image. L'adoption d'une architecture générée par le code (Data-Driven) constitue également une étape importante vers des pratiques de développement plus professionnelles.

• Meyer, P. J. (1960). The Wheel of Life. (Concept original de l'outil de coaching).
• Vidéo : Coaching Tool: The Wheel of Life. (Source d'inspiration pour le scénario pédagogique).

L'élaboration du code et du design s'est appuyée sur les ressources suivantes :

• Documentation MDN Web Docs : Notamment pour les méthodes document.createElementNS (création d'éléments SVG) et la gestion des événements (Event Loop).
• Article Medium : "Masquer les animations SVG". Ressource clé pour la compréhension et l'implémentation des masques dynamiques.
• Doka.guide (Documentation Frontend) : Consulté pour approfondir les spécificités du format SVG (viewBox, coordinate system) et les bonnes pratiques d'accessibilité (A11y).
• Tutoriels JavaScript (Learn.javascript.ru) : Utilisés pour affiner la compréhension des itérateurs (`forEach`) et de la manipulation du DOM.
• Assistant IA (Gemini) : Utilisé comme support technique pour le débogage des coordonnées trigonométriques du SVG, la vérification de la syntaxe JavaScript et l'optimisation de la structure conditionnelle de l'algorithme d'analyse.
• Graphisme : L'image vectorielle principale a été créée originalement sur CorelDraw par l'auteur du dispositif.