Formulaires et fenêtres surgissantes

Nous commençons par observer une série d'effets interactifs basés sur des fonctions Javascript côté utilisateur (c'est-à-dire dont le code est visible sur l'ordinateur de l'internaute). Ces effets sont du type :

action de l'utilisateur action en retour du navigateur (= affichage d'une réponse ou d'une validation)

1. Formulaire avec fenêtre surgissante

Bouton 1

Bouton 2

 

2. Un QCM simple

 

Voulez-vous vous tester en passant un petit QCM ?

 

 
OUI
NON
J'aime les maths
Je déteste les maths

 

3. Un QCM un peu plus complexe, avec fenêtres d'aide

Essayez de répondre et examinez vos résultats. Le bouton rouge est actif pour l'aide de la question 0.

 

Voulez-vous vous tester en passant un petit QCM ?

 

 
OUI
NON
Question 0
Aide
Question 1
Aide
Question 2
Aide
Question 3
Aide

 

4. Création d'une boîte de message ou d'une fenêtre surgissante à partir d'une image

Boîte de message [cliquer sur l'image]

Fenêtre surgissante [cliquer sur l'image]

5. Comment réaliser ces diverses interactions ?

Nous allons dans la suite examiner comment créer ces effets, et donner le code Javascript nécessaire. Nous verrons que certains effets peuvent être obtenus directement en utilisant les assistants fournis par Dreamweaver, tandis que d'autres nécessitent l'écriture de petites parties de programmes. Tous ces programmes sont regroupés dans un même fichier intitulé "scripts.js", situé dans le même dossier que le fichier en cours (mais il pourrait se trouver dans une autre partie du site). La liaison entre le fichier en cours et le fichier de programmes se fait au moyen du code suivant, écrit entre les balises <head> et </head> du fichier en cours :

<script language="javascript" src="scripts.js">
</script>

1. Formulaire avec fenêtre surgissante

Le principe est simple : on commence par créer un formulaire dans un tableau, on rajoute les deux éléments importants (les deux boutons radio), et on associe à l'événement "onClick" de chacun la fonction Javascript "MM_openWindowReponse(i)" (où i désigne le numéro du bouton radio). Cette fonction a pour charge d'ouvrir la fenêtre de réponse et d'y afficher le texte adéquat.

Détaillons la procédure.

a. On commence par créer le formulaire. Le plus simple est de placer le curseur entre le début et la fin du fichier (mais ni au début ni à la fin, sinon il sera difficile d'insérer d'autres éléments avant le début ou après la fin du formulaire) et d'utiliser la commande "Insertion/Formulaire". Une boîte de dialogue nous annonce que l'objet inséré restera invisible. Cliquer OK. Il est facile de savoir si on se trouve à l'intérieur de la zone de formulaire en regardant s'il y a <form> dans la barre d'état en bas à gauche de la fenêtre.

Remarque : en fait, la création du formulaire n'est même pas nécessaire dans ce cas ; on pourrait se contenter d'insérer les deux boutons radio dans le tableau qui suit. Ceci est dû au fait que les comportements de ces boutons sont indépendants l'un de l'autre.

b. Pour la mise en forme, on va maintenant créer un tableau de 2 lignes et 2 colonnes sans bordure, de largeur raisonnable (par exemple 50% si on veut que cela fasse la moitié de la page, quel que soit le navigateur et la résolution d'écran). Tout ceci se fait à partir de l'assistant ouvert par la commande "Insertion/Tableau". Penser à positionner le curseur à l'intérieur de la zone du formulaire avant de créer le tableau.

c. On crée ensuite les deux boutons radio en se positionnant dans les cellules convenables du tableau et en utilisant la commande "Insertion/Objets de formulaire/Bouton radio".

d. Il n'y a plus ensuite qu'à associer à l'événement "onClick" de chaque bouton la réponse convenable sous la forme d'une fonction Javascript. Le plus simple pour cela est d'ouvrir la fenêtre de code html (de préférence par le bouton en haut à gauche pour visualiser à la fois le code html et la page affichée par les navigateurs). Si on clique sur un bouton radio dans le volet du bas, le code correspondant est sélectionné dans le volet du haut. Avant d'ajouter la fonction Javascript, on voit ceci :

<input type="radio" name="radiobutton" value="radiobutton">

Après ajout (à la main) du gestionnaire de l'événement "onClick" dans le premier bouton radio, on obtiendra

<input type="radio" name="radiobutton" value="radiobutton" onClick="MM_openWindowReponse(1)">

Pour le deuxième bouton radio, changer MM_openWindowReponse(1) en MM_openWindowReponse(2). La fonction MM_openWindowReponse(x) est une fonction Javascript, dont la définition se trouve dans le fichier scripts.js dont on a parlé plus haut.

2. Essai de QCM simple

Il s'agit là encore d'écrire un formulaire, mais la conception est un peu plus compliquée, puisque la réponse apportée quand on clique sur le bouton "Voir mon résultat" va dépendre dans sa globalité des réponses de l'utilisateur aux questions posées.

Examinons ces différences.

La création du formulaire est analogue au processus décrit ci-dessus. L'écriture de tableaux est plus compliquée. On a choisi d'utiliser un grand tableau à deux lignes et une colonne. La deuxième ligne contient les boutons "Voir mon résultat" et "Recommencer". La première ligne contient un autre tableau formé de 4 lignes et 4 colonnes comme on le devine facilement sur la mise en page. Les quatre cellules de la première ligne ont été fusionnées pour obtenir la mise en forme suivante :

Outre ces aspects graphiques, les autres différences portent sur le code javascript et la définition des boutons radio. Il y a maintenant deux groupes de boutons radio, un par question. Le code des deux boutons de la première ligne est le suivant :

<input type="radio" name="radiobutton1" value="v0" onClick="reponseEleve1[0]=0;">
<input type="radio" name="radiobutton1" value="v1" onClick="reponseEleve1[0]=1;">

On reconnaît que c'est le même groupe au fait que le nom name est le même. De même, les deux boutons de la deuxiême ligne ont pour code :

<input type="radio" name="radiobutton2" value="v0" onClick="reponseEleve1[1]=0;">
<input type="radio" name="radiobutton2" value="v1" onClick="reponseEleve1[1]=1;">

Cette fois, l'événement onClick ne conduit pas à l'affichage d'une fenêtre surgissante, mais agit sur un tableau de deux nombres, le tableau reponseEleve1, qui est défini dans la feuille scripts.js.

Quand la personne qui remplit le questionnaire clique sur le bouton "Voir mon résultat", elle déclenche une nouvelle fonction Javascript. Le code de ce bouton est le suivant :

<input type="button" name="Submit3" value="Voir mon r&eacute;sultat" onClick="valideReponse1(qcm)">

L'événement onClick est cette fois associé à la fonction javascript valideReponse1(qcm), dont le code (écrit dans la feuille scripts.js) est décrit ci-dessous :

function valideReponse1(formulaire){

Création de l'entête de la fonction. Le paramètre est un formulaire (en fait, le formulaire qui contient l'ensemble des boutons. Ce formulaire s'appelant qcm, la fonction sera appelée par valideReponse1(qcm)

 

var bonnesReponses=0;

On définit la variable bonnesReponses pour compter les bonnes réponses du "candidat".

 

for (i = 0 ; i < 2 ; i++) {

Une boucle, contenant ici 2 passages : i=0 et i=1 va déterminer pour l'ensemble des questionns, si le candidat a répondu juste.

 

if (reponseEleve1[i] == reponseExacte1[i]) {
formulaire.elements[3*i+2].value="VRAI";bonnesReponses++;}

On compare la réponse de l'élève à la question i à la réponse exacte. Noter le double signe égale que l'on emploie toujours en javascript ou en java lorsque l'on teste si une égalité est vraie.
Si la réponse est bonne, on écrit "VRAI" dans le champ de texte qui se trouve dans la colonne de droite (et qui est l'élément numéro 3i+2 du formulaire), et on augmente de 1 la valeur de bonnesReponses (noter la syntaxe javascript - et aussi Java - héritée de C++) : l'écriture bonnesReponses++ augmente de 1 le nombre bonnesReponses.
A noter : les deux variables reponseExacte1 et reponseEleve1 sont définis en dehors du corps de la fonction, pour pouvoir être initialisées à l'ouverture de la page. On verra que l'on peut procéder autrement dans la conception du QCM suivant.

 

else {
formulaire.elements[3*i+2].value="FAUX";}

Sinon, le nombre de bonnes réponses est inchangé et on écrit "FAUX" dans le champ de texte.

 

}

Fin de la boucle

 

if (bonnesReponses < 2) {msg="C'était pourtant facile... Réessayez !"}

Définition du message qui sera affiché si l'élève n'a pas répondu juste à toutes les questions.

 

else {msg="Bravo! Vous avez bien répondu !"}

Définition du message si l'élève a tout juste.

 

alert(msg);

Instruction qui permet d'afficher une boîte de dialogue dont le texte est défini par msg

 

}

Fin de la définition de la fonction

Le dernier bouton, "Recommencer" a la définition suivante :

<input type="reset" name="Submit" value="Recommencer" onClick="reset();clearScreen();">

Il déclenche deux fonctions javascript : reset() et clearScreen() : la fonction reset() est une fonction prédéfinie qui réinitialise l'affichage des boutons radio. On lui adjoint la fonction clearScreen() :

function clearScreen() {
reponseEleve1=[-1,-1];
}

dont l'objectif est de "remettre à zéro" la réponse de l'élève, en donnant comme réponses initiales deux valeurs forcément fausses, puisque les réponses exactes sont forcément des 0 ou des 1. Il en résulte que si l'élève veut voir son résultat sans avoir rempli les questions, il lui sera répondu "FAUX" aux deux questions.

3. Un QCM un peu plus complexe, avec fenêtres d'aide

Le travail graphique n'est pas très différent de celui conduisant à la conception du premier QCM. Cependant, il y a des différences dans le code Javascript, qui tiennent au fait que l'on voulait que ce modèle de QCM soit un nouvel objet Dreamweaver [nous verrons dans la partie 2 comment créer et rendre effectivement disponible ce nouveau composant dans la palette "Communs" de la fenêtre "Objets"], et que cela nécessite un fonctionnement autonome de l'objet. C'est pourquoi les fonctions de base (validerReponse, recommencer, clearScreen) comportent plus de paramètres.

Détaillons ces points particuliers. Les boutons "Voir mon résultat" et "Recommencer" sont définis ainsi :

<input type="button" name="Submit2" value="Voir mon r&eacute;sultat" onClick="valideReponse(this.form,[1,0,1,0])">
<input type="reset" name="Submit2" value="Recommencer" onClick="reset();clearScreen(this.form);">

On notera les deux paramètres de la fonction valideReponse : this.form et [1,0,1,0]. Le premier paramètre est comme ci-dessus un objet formulaire. Tout à l'heure, ce formulaire était désigné par son nom : qcm. L'avantage ici, est de pouvoir faire une référence au fomulaire qui contient le bouton même sans connaître le nom de ce formulaire. La syntaxe xxx.yyy désigne l'objet yyy qui "appartient" à l'objet xxx. Ici, "this" représente l'objet en cours, c'est-à-dire le bouton, donc this.form désigne le formulaire "qui appartient au bouton", en l'occurrence celui qui contient le bouton. L'autre paramètre est [1,0,1,0], qui donne les quatre bonnes réponses. Le code de la fonction valideReponse est le suivant (il est moins commenté, étant donné l'analogie de fonctionnement avec celui du QCM précédent) :

function valideReponse(formulaire,reponse){

var bonnesReponses=0;
var nbQuestions = reponse.length;

Le nombre de questions dépend du QCM. Ce nombre de questions est égal au nombre de réponses dans le paramètre reponse (4 dans l'exemple ci-dessus). Pour un tableau de nombres tableau = [a1, ..., an], on a

tableau.length = n

 

var reponseEleve = new Array(nbQuestions);

Pour créer un tableau de nombre nommé reponseEleve et contenant nbQuestions valeurs, on utilise cette commande.

 

for (i = 0 ; i < nbQuestions ; i++){
reponseEleve[i]=-1;

Avant lecture de la réponse, les réponses de l'élève sont initialisées à une valeur erronée.

 

if (formulaire.elements[3*i].checked) {reponseEleve[i]=0;}
if (formulaire.elements[3*i+1].checked) {reponseEleve[i]=1;}

Tests pour savoir quelle réponse l'élève a apporté à la question i. Si l'élève n'a pas répondu, reponseEleve[i] garde sa valeur erronée de -1.

 

if (reponseEleve[i] == reponse[i]) {
formulaire.elements[3*i+2].value="VRAI";bonnesReponses++;}
else {
formulaire.elements[3*i+2].value="FAUX";}


Test pour savoir si la réponse de l'élève est correcte. On traite le résultat comme au QCM précédent.

 

reponseEleve[i]=-1;

En vue d'un prochain travail, on réinitialise la réponse à la question numéro i tout de suite.

 

}

Fin de la boucle

 

}

Fin de la fonction

Quant à la fonction clearScreen(formulaire), elle présente une astuce intéressante : avec comme seul paramètre le formulaire, il est en fait possible de connaître le nombre de questions : il y a autant de questions que de lignes. Chaque ligne contient 3 objets (les deux boutons radio et la case à cocher) et il faut ajouter les deux derniers boutons ("Voir le résultat" et "Recommencer"). Le nombre d'objets du formulaire est donc égal à trois fois le nombre de questions plus deux. Donc le nombre de questions vérifie nbQuestions = (nombreObjets-2)/3. Comme le nombre d'objets correspond à la variable formulaire.length, on obtient la formule de la deuxième ligne. La présence de la fonction "Math.round" sert seulement à transformer le type du nombre (réel au départ, entier après arrondi).

function clearScreen(formulaire) {
var nbQuestions = Math.round((formulaire.length-2)/3);
var reponseEleve = new Array(nbQuestions);
for (i = 0 ; i < nbQuestions ; i++){
reponseEleve[i]=-1;
formulaire.elements[3*i+2].value="";
}
}

4. Création d'une boîte de message à partir d'une image avec lien

Le premier comportement est le plus facile à créer. Il suffit d'utiliser l'assistant comportement de Dreamweaver.

On sélectionne tout d'abord l'image qui déclenchera le comportement. On ouvre la fenêtre "Comportements" et on clique sur le bouton en haut à gauche. Puis on sélectionne "Message contextuel" dans la liste. Si ce comportement apparaît en grisé, il faut modifier le navigateur dans l'option "Afficher les événements pour ..." (choisir IE4 par exemple). Il suffit ensuite d'écrire le texte de la boîte de dialogue dans la fenêtre de saisie et de valider. Par défaut, l'événement qui déclenche l'ouverture de la boîte de message est "onClick". On peut le modifier si on le désire.

Dans le deuxième cas, le plus facile est de créer un fichier html qui s'affichera dans la fenêtre, puis de sélectionner l'image qui déclenche, et de lui associer cette fois le comportement "Ouvrir la fenêtre Navigateur". Dans la boîte de dialogue qui s'ouvre alors :

on indique le nom du fichier html dans le premier champ (on peut le trouver classiquement en cliquant sur le bouton "Parcourir"), la largeur et la hauteur de la fenêtre, et on ajoute un certain nombre d'options en cochant ou non les six champs qui suivent. On finit en donnant un nom à la fenêtre. Ce nom est nécessaire à Javascript et doit respecter quelques règles : le plus simple est de n'employer que des lettres non accentuées et des chiffres et de ne pas mettre d'espaces.

 

Principes
Création d'un effet d'image survolée
Création de calques clignotants
Création d'un menu
Création d'un lien de messagerie