REPONSE COURTE
1- créer un cadre
2- analyser la réponse
3- choisir la taille du cadre

1- CREER UN CADRE :
Quelle est la capitale de l'Italie ? 
 
 CODE A INSERER :
( comment insérer un code ? cliquez ici )
 
<BODY>

<form>

Quelle est la capitale de l'Italie ? <input type="text">

</form>

</BODY>

Notes :
- en bleu la question que vous pouvez modifier (dans votre bloc-note, elle sera écrite en noir)
- ce code est du html
- <form> et à la fin </form>: ces lignes indiquent la création d'un objet formulaire. Vous pouvez placer la première une seule fois tout de suite après <BODY> et la dernière (</form>) tout de suite avant </BODY>.
- <input type="text"> : c'est le code html qui crée le cadre.

2°- ANALYSER LA REPONSE
Quelle est la capitale de l'Italie ? 
 

CODE A INSERER dans le body (pour savoir comment insérer du code, cliquez ici)
<BODY>
<script language="javascript">
function analyse(){
if (document.formu.elements[0].value=="Rome") 
 alert("Bien")
 else  alert("faux");
}
</script>
<form name="formu">
Quelle est la capitale de l'Italie ?
<input type="text">
<input type="button"  value="OK" onclick="javascript:analyse()">

</form>

</BODY>
En rouge les noms de variables, vous pouvez les changer . En bleu les éléments de l'exercice et les commentaires qui apparaîtront à l'écran, à modifier évidemment.
 
<script language="javascript"> balise qui indique le début du javascript
function analyse(){ début de la fonction, le nom "analyse" peut être n'importe quoi maisil doit être suivi de deux parenthèses. { : indique le début des instructions à réaliser
if (document.formu.elements[0].value=="Rome")  "if" (si) indique la condition à réaliser.
document.formu.elements[0] : est la valeur de l'élément 0 du formulaire appelé "formu" dans le document. En clair, le document est votre page web, formu va être défini à la ligne 9, il comporte dans cet exemple deux éléments (tous les éléments d'un formulaire commencent par "input"), et le premier élément a toujurs le numéro 0. C'est donc le texte. La "valeur" (value) du texte est ce qu'aura écrit l'élève.
== (deux fois le signe =) teste si la valeur précédente est égale à ce qui suit : Rome , entre guillemets car ce n'est pas une variable.
alert("Bien") ceci ouvre une boîte de dialogue qui affiche "bien"
 else  alert("faux"); else = sinon, donc si le texte entré n'est pas Rome, une boîte de dialogue affiche "faux". Un point virgule termine l'insruction (qui commençait à if)
} fin de la fonction
<form name="formu"> ici nous avons donné un nom (name="formu") au formulaire pour pouvoir écrire document.formu.elements[0].value
Quelle est la capitale de l'Italie ?
<input type="text">		 rien de changé
<input type="button"  value="OK" onclick="javascript:analyse()"> un bouton est nécessaire pour contrôler la réponse car l'élément text ne peut pas être cliqué. Sur le bouton est écrit "OK" (value="OK") et lorsque l'on clique dessus (onclick=) la fonction analyse se met en route.
</form>
</BODY>		 rien de changé

3°- PLUSIEURS QUESTIONS ANALYSEES
Quelle est la capitale de l'Italie ?
Quel fleuve traverse Paris ?
Quel est le plus haut sommet français ?

 

CODE A INSERER :
 
<BODY>
<script language="javascript">
rep=new array(5);
rep[0]="Rome";
rep[2]="Seine";
rep[4]="Mont Blanc";
function analyse(num){
if (document.formu.elements[num].value==Rep[num]) 
 alert("Bien")
 else  alert("faux");
}
</script>
<form name="formu">
<BR>Quelle est la capitale de l'Italie ?
<input type="text">
<input type="button"  value="OK" onclick="javascript:analyse(0)">
<BR>Quel fleuve traverse Paris ?
<input type="text">
<input type="button"  value="OK" onclick="javascript:analyse(2)">
<BR>Quel est le plus haut sommet français ?
<input type="text">
<input type="button"  value="OK" onclick="javascript:analyse(4)">
</form>

</BODY>

En rouge les noms de variables, vous pouvez les changer . En bleu les éléments de l'exercice et les commentaires qui apparaîtront à l'écran, à modifier évidemment.
Explications :
<BODY>
<script language="javascript">		 pas de changement
rep=new array(5); création d'un tableau de dimension 5 pour les trois réponses. Les bouton comptant dans le séléments du formulaire, les textes ont les numéros 0, 2, 4 : il faut au moins 5 éléments dans notre tableau..
rep[0]="Rome";
rep[2]="Seine";
rep[4]="Mont Blanc";		 les différentes réponses attendues, notez que chaque élément d'un tableau a son indice entre crochets, et que le premier élément à le numéro 0.
function analyse(num){ notre fontion a maintenant un argument "num", le nom n'a pas d'importance mais il représente le numéro de la question.
if (document.formu.elements[num].value==Rep[num])  num est le numéro de la question analysée, son nom doit être celui passé en argument (mis entre parenthèses) dans la fonction.
 alert("Bien")
 else  alert("faux");
}
</script>		 pas de changement.
Pour insérer la bonne réponse dans la boîte d'alerte, vous écririez : alert("faux, la bonne réponse était : "+document.formu.elements[num])
<form name="formu">
<BR>Quelle est la capitale de l'Italie ?
<input type="text">		 pas de changement sauf <BR> pour aller à la ligne
<input type="button"  value="OK" onclick="javascript:analyse(0)"> la fonction analyse a maintenant un chiffre entre les parenthèses qui représente le numéro de l'élément texte du formulaire qui doit être traité : 0 pour la première question.
<BR>Quel fleuve traverse Paris ?
<input type="text">
<input type="button"  value="OK" onclick="javascript:analyse(2)">
<BR>Quel est le plus haut sommet français ?
<input type="text">
<input type="button"  value="OK" onclick="javascript:analyse(4)">
</form>		 Même lignes que précédemment pour les autres questions. 
La fonction analyse utilise les éléments 2 et 4 du formulaire, les boutons étant les éléments 1, 3, 5. 
La numérotation des éléments suit leur ordre d'apparition dans la page (et le code de la page).

Si vous voulez aligner les questions, il faut créer un tableau (sans bordure).
 
 

3- CHOISIR LA TAILLE DU CADRE
Il suffit de rajouter un chiffre après l'indicateur SIZE (le nombre de caractères, une ligne fait en général 80 caractères)
 
<BODY>

<form>

Quelle est la capitale de l'Italie ? <input type="text" SIZE=60>

</form>

</BODY>

sommaire des réponses  

Réalisé par Isabelle Gautier, la diffusion de cet article est protégée par la licence LLDL-v1, Licence de Libre Diffusion des Documents, http://pauillac.inria.fr/~lang/licence/v1/lldd.html . Vous pouvez libremet utiliser, modifier et diffuser ce document mais uniquement à titre gratuit.