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