6 février 2001

 

 

La ronde des émotions

Ce programme a été écrit dans le cadre du projet staf15. Le concept a été mis au point avec Philippe Bittar, qui a écrit les textes. Tous n'ont pas été écrits, certaines fiches ne contiennent aucune information, et il manque la description détaillée des contenus que nous avions prévu. Mais ce qui a été fait est fonctionnel, c'était mon but: écrire un programme en javascript qui atteigne le but fixé et soit utilisable.

Nous nous sommes inspirés de différents livres théoriques (Damasio, Leanham etc...), mais l'idée de la ronde est originale. Nous avons voulu signifier la succession des émotions, le passage de l'une à l'autre, le fait qu'elles se bousculent parfois et que la perception qu'on en a dépend aussi de la position qu'on occupe par rapport à elles. Le regard est différent selon qu'on est dans la roude ou en dehors. Mais ce programme se veut pratique, utilisable avec quelques améliorations dans la consultation psychologique des états-limite. Bien sûr il faudrait le développer, en faire aussi une ouverture vers les émotions nouvelles jusque-là refoulées, on pourrait par exemple y ajouter un parcours en vrml. Mais cela dépasse le champ de cet exercice. 

Introduction (welcome.html)
L'introduction n'est rien d'autre qu'une explication générale du programme, une introduction à ses buts; elle donne les quelques repères nécessaires à l'utilisateur pour qu'il sache que faire et puisse se retrouver.

La ronde (carousel.html)
Ce fichier commence par l'initialisation des variables nécessaires au positionnement des boules (que j'ai dessinées dans Photoshop avec Rayflect Phototracer).

Initialize() avertit l'utilisateur de Netscape qu'il ne pourra pas voir ce programme. En effet je n'ai pas trouvé l'astuce équivalente à la fonction display() des CSS qui me permettrait de faire disparaître de la mémoire l'espace occupé par un frame. Sinon toutes les fiches occupent un espace fixe dans la mémoire où elles sont "alignées" les unes sous les autres. Lorsqu'on clique sur une boule, si la fiche correspondante se trouve par ex. à la 8ème place, la fiche apparaît mais la ronde disparaît. Tout cela est très laid et très peu ergonomique. J'attends la 4ème édition de la "Bible" pour reprendre ce problème. D'autres difficultés sont apparues qui m'ont fait comprendre que les CSS sont infiniment plus souples d'utilisation que les frames de Netscape.

initObjects() crée un premier array qui contient les boules, et un deuxième array qui définit les positions réciproques des boules (la boucle est initialisée à 1 pour que parseFloat(pos[i-1] ne soit pas négatif).

rotateObjects() met les boules en mouvement en variant leurs positions réciproques (pos[ ]) définies dans initObjects(). La vitesse est déterminée par setTimeout ("rotateObjects()", 60) conjointement avec la variation angulaire var inc = pi / 200;

initTextes() crée un array des fiches qui seront affichées lorsqu'on clique sur les boules. La vitesse de rotation a été determinée pour permettre un click avec une bonne probabilité de réussite, mais parfois encore le code de la boule s'affiche si la souris est en mouvement au moment du click. Cette technologie est encore très fragile.

mkInvisible() fait disparaître la fiche précédente de la mémoire (.display='none') au cas où l'utilisateur clique sur une deuxième boule, ce qui va permettre l'affichage de la seconde fiche au même emplacement par display=' ' ( grâce à l'événement onClick="mkInvisible();da.emotextesX.style.display='';da.emotextesX.style.visibility='visible' qui se trouve dans la balise <DIV> de la boule concernée).

J'ai voulu que le mouvement des boules ne soit pas trop figé, ce qui aurait éeé le cas avec une distance équivalente imposée entre les boules. J'ai cherché à imposer une distance variable, avec des rapprochemts et des éloignements, et même des chocs. La seule solution que j'ai trouvée est de jouer avec la longueur des noms des boules, en y ajoutant éventuellement &#032;&#032;

Pour transmettre à la page suivante le nom de l'émotion qui a été choisie je l'ai inclus dans le nom de la boule. Il est récupéré dans index.html et stocké dans des variables globales dans stockEm() pour être ensuite affiché par affichEmot() dans admstaf15.html.

La page main.html est la page où vont s'afficher les questions et la chaîne. Le bouton appelle la fonction buildQuestion() qui se trouve sur la page bdstaf15.js

Les questions sont stockées dans un array nommé emotion qui pour des raisons de compatibilité descendante appelle le constructeur makeArray().

Chaque question fait appel au constructeur makeQuestion() qui crée un objet ainsi constitué:
Propriété 1: la question.
Propriété 2: le texte de l'invite (au-dessus de textarea)
Propriété 3: les informations. Elle définissent la question suivante (différente parfois selon la réponse, qui peut appeler des questions complémentaires)
Propriété 4: détermine si textarea doit être affiché.
Propriété 5: le sujet ("Etat de départ" etc..) qui sera affiché dans la chaîne après avoir été récupéré dans goChaine()
Les choix, qui peuvent être en nombre variable.

Dans cette méthode un array est créé, userChoices, qui va stocker les différentes réponses, qui seront ensuite récupérées dans goChaine() et affichées à côté de la chaîne.
Une méthode est ensuite définie: showForm(), qui servira à l'affichage des questions.

L'affichage une à une des questions se fait par la fonction buildQuestion(), qui appelle ensuite la méthode showForm() de l'objet emotion[n].

Cette méthode affiche la question, les propositions, s'il y a lieu le textarea et l'invite, et stocke la réponse de l'utilisateur dans userAnswer qui sera utilisée ensuite dans go_chaine():
if(emotion[i].userAnswer !=null){
if ((emotion[i+10].userAnswer) == null){
var usAn = emotion[i].userAnswer;
var usAnind = emotion[i+20].userAnswer;
pour permettre l'affichage de la réponse à côté de la chaîne:
var reponse = (emotion[i].userChoices[usAn]+' que vous décrivez comme '+emotion[i+20].userChoices[usAnind]);
var reptext = emotion[i+20].userText;

Cette même fonction définit tous les paramètres nécessaires à l'affichage des CSSP et de leur contenu, y compris leur position par rapport au sommet de la page:
var top = (i==0)?40:40+(i*90);
Ainsi les CSSP occuperont exactement la place qui leur est attribuée à côté de la chaîne.
L'appel au constructeur de CSSP, la fonction chaine(), se fait ici:
var chUsrCh = new chaine(window,d,usrCh,0,top,200);
var chUsrTxt = new chaine(window,dd,usrTxt,350,top,400);
chUsrCh.output();
chUsrTxt.output();
chUsrCh.setFont("Arial","white","9pt");
chUsrTxt.setFont("Arial","white","9pt");

Le constructeur chaine() définit 6 propriétés (window, id, body, left, top, width)et quelques méthodes qui vont permettre l'affichage des CSS. La méthode output() va dynamiquement créer et afficher les CSS en leur attribuant in ID dans une balise DIV. La méthode setFont() établit les paramètres qui seront définis dans l'appel.