Leçon 5

Choix multiples

Saisissez précisément le contenu du listing suivant dans votre éditeur de texte préféré (il est plus simple et plus rapide de faire un "copier-coller").

<HTML>
<HEAD>
<TITLE>Capitale de la Suisse</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function controler(question)
{
if (question[1].value=="3") {alert("Bravo")}
else {alert("Non, la capitale de la Suisse est Berne")}
}

</SCRIPT>
</HEAD>

<BODY>
<FORM>
<H3>Question 1</H3>
Quelle est la capitale de la Suisse ?<BR>
<INPUT TYPE="radio" NAME="Choix1" VALUE="" onClick="this.form[1].value=1">Genève<BR>
<INPUT TYPE="radio" NAME="Choix1" VALUE="" onClick="this.form[1].value=2">Zurich<BR>
<INPUT TYPE="radio" NAME="Choix1" VALUE="" onClick="this.form[1].value=3">Berne<P>
<INPUT TYPE="button" VALUE="Vérifier" onclick="controler(this.form)">
</FORM>
</BODY>
</HTML>

Sauvegardez ce script dans un fichier que vous appelerez choix.html.
Démarrez maintenant un navigateur.
Ouvrez depuis votre navigateur le fichier choix.html et voyez le résultat.

En cas de problème, cliquez ici pour voir le résultat.

Explications

À la leçon 4, nous avons vu comment écrire la réponse à une question posée. Nous allons voir maintenant comment choisir une réponse parmi plusieurs proposées.
L'idée est de construire un questionnaire à choix multiples. Nous étudions ici la première étape, en voyant comment faire avec une seule question (l'exercice de cette leçon consistera à en ajouter une deuxième).

Le questionnaire est encadré par les balises <FORM> et </FORM>. On propose trois possibilités de réponses, d'où les trois "radio". Un bouton de type radio ne permet qu'une seule réponse. Remarquez que tous ces "radio" ont le même nom ("choix1"). Enfin, les "onClick" attribuent une valeur (ici un chiffre entre 1 et 3) correspondant à la réponse choisie pour la question 1. C'est cette valeur qui sera analysée dans la fonction de contrôle.
Remarquez le this qui apparaît quatre fois. Il signifie que l'on se rapporte au formulaire encadré par les balises <FORM> et </FORM>.
Le paramètre que l'on transmet à la fonction "controler" est le formulaire entier. On doit ensuite analyser les questions les unes après les autres (ici il n'y en a qu'une, qui a le numéro 1). Si la valeur de question[1] est 3, réponse correspondant à Berne, on écrit "bravo", dans le cas contraire, on donne la bonne réponse.

Exercice

Modifiez le programme ci-dessus pour ajouter une question au questionnaire et demandez la capitale d'un autre pays. Le programme donnera la bonne réponse des deux questions séparément.

Correction: Cliquez ici pour voir le résultat, puis visualisez le code source.

Didier Müller, 11.10.20