Atelier Formulaires
|
Création d'un texte à compléter
|
De quoi s'agit-il ?
|
Les textes à trous sont un moyen classique de vérifier les
connaissances acquises. Le langage HTML permet d'en créer assez
facilement de deux façons :
- on compléte les trous en choisissant dans une liste;
- on complète les trous en écrivant un mot.
En ajoutant quelques lignes de JavaScript à la page, il est
possible d'évaluer les réponses données par l'élève.
Vous pouvez commencer par voir un exemple
fonctionner et par analyser son
texte source.
|
Comment faire ?
|
1- Commencer par écrire la page HTML en y incluant le formulaire.
Il faut veiller à donner un nom (attribut NAME) à chaque composant. C'est
grâce à ce nom qu'on pourra avoir accès au contenu du composant.
Lorsque le composant est une liste, on associera à chaque option une
valeur numérique (par exemple 1 pour une réponse fausse et 0 pour la
bonne réponse ) en utilisant l'attribut VALUE.
Cela donne, dans l'exemple fourni :
<SELECT NAME="liste2" SIZE=1>
<OPTION VALUE=1>bissectrice</OPTION>
<OPTION VALUE=1>hauteur</OPTION>
<OPTION VALUE=0>médiane</OPTION>
<OPTION VALUE=1>médiatrice</OPTION>
</SELECT>
2- Installer un bouton lançant la vérification en l'associant à
une fonction JavaScript par l'intermédiaire de son attribut ONCLICK.
Cela donne, dans l'exemple fourni :
<INPUT TYPE=button VALUE="Vérifier" ONCLICK="verif1()">
</INPUT>
3- Il reste à écrire la fonction JavaScript de vérification.
Celle-ci devra comparer les réponses contenues dans les composants aux
bonnes réponses attendues, puis décider de la conduite à adopter.
Dans l'exemple fourni on se contente d'un message indiquant le nombre
d'erreurs. Nous allons donc voir comment effectuer les comparaisons et
comment afficher un message.
|
JavaScript
|
1- Les fonctions JavaScript peuvent être installées dans
l'entête du document HTML entre les balises prévues à cet effet:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
2- L'affichage d'un message se fait avec la fonction alert.
On pourra tenir compte du nombre d'erreurs de la façon suivante :
function message(erreurs) {
if (erreurs==0) alert('Bravo, aucune erreur !');
else if (erreurs==1) alert('Tu as fait une erreur !');
else alert('Tu as fait '+erreurs+' erreurs !');
}
Cette fonction reçoit en paramètre le nombre d'erreurs commises.
3- Pour traiter les listes on utilise le champ selectedIndex qui
contient le numéro de l'option sélectionnée. Attention la numérotation
commence à 0, donc la premère option a le numéro 0, la seconde le numéro 1,
et ainsi de suite. D'autre part l'option correspondant à la bonne réponse
a son champ VALUE mis à 0 alors que les autres options ont leur champ
VALUE mis à 1. Il suffit donc de comparer le champ VALUE de l'option
correspondant à selectedIndex à 0 pour savoir si la réponse choisie est
la bonne. Cela peut prendre la forme suivante, si le formulaire se nomme
form1 et si la liste se nomme liste1 :
function verifliste() {
numrep=form1.liste1.selectedIndex;
erreurs=form1.liste1[numrep].value;
message(erreurs);
}
4- Pour traiter les lignes de saisie, on utilise leur champ VALUE
qui contient le texte entré par l'utilisateur. Cela peut prendre la
forme suivante, si le formulaire se nomme form2, la ligne de saisie
se nomme rep1 et la bonne réponse est le mot "rectangle":
function veriftext() {
erreurs=0;
if (form2.rep1.value!="rectangle") erreurs++;
message(erreurs);
}
|
Votre mission
|
Votre mission, si vous l'acceptez, consiste bien entendu
à réaliser une page HTML contenant un texte à compléter et
capable de vérifier les réponses fournies par l'utilisateur.
|
Retour
|
|