Les quiz avec évaluation

Partie javascript

Ci-dessous figure le code source javascript de la page contenant l'exemple du formulaire avec évaluation. Vous pouvez l'obtenir en affichant la source de la page (CTRL-U).

Le texte écrit en rouge nécessite des modifications de cas en cas.

Code source Commentaire
<HTML>
<HEAD>
<TITLE>Les quiz avec évaluation</TITLE>
Ceci est l'en-tête de la page. Le code javascript se place entre les balises <HEAD> et </HEAD>.
<SCRIPT LANGUAGE="JavaScript">
<!-- Début du code JavaScript
Toutes les variables et fonctions javascript entre <SCRIPT> et </SCRIPT>.
var n=2; "n" est le nombre de questions.
function effacer(form)
{
  for (var i=1; i<n; i++) form[i].value="";
}
Cette fonction efface toutes les réponses du formulaire.
res=new Array(n) "res" est un tableau de n cases où seront stockés les résultats. On stockera dans "res[1]" "juste" ou "faux", suivant le résultat donné à la question 1 (voir la fonction "score" ci-dessous). On fera de même avec "res[2]", "res[3]", etc.
function score(form)
{
  somme=0;
  if (form[1].value==4) {somme++};
  if (form[1].value==4) {res[1]="juste"} else {res[1]="<FONT COLOR=#FF0000>faux</FONT>"};
  if (form[2].value==2) {somme++};
  if (form[2].value==2) {res[2]="juste"} else {res[2]="<FONT COLOR=#FF0000>faux</FONT>"};
  return somme;
}
Cette fonction corrige chaque réponse et compte le nombre de réponses justes. C'est ici que sont stockées les bonnes réponses:

"form[1].value==4" signifie que la réponse correcte à la question 1 est la 4ème.
"form[2].value==2" signifie que la réponse correcte à la question 2 est la 2ème.

function verif(form)
{
  i=1;
  while ((i<n) && (form[i].value!="")) {i++};
  return ((i==n) && (form[n].value!=""));
}
Cette fonction vérifie que toutes les réponses ont été données. Si ce n'est pas le cas, elle retourne la valeur "false" qui sera traitée par la fonction "process" (voir ci-dessous).
function corriger(form)
{
  var j=1;
  var somme=0;
  var ch = "<HTML><TITLE>Quiz</TITLE><BODY BGCOLOR=#FFBB00><H2>Corrigé</H2>";
  somme=score(form);
  while (res[j] != null)
  {
    ch=ch+"Question "+j+": "+res[j]+"<BR>";
    j++;
  }
  ch=ch+"<P>Votre score est de "+somme+"/"+n;
  ch=ch+"<P>Votre note est "+(1+5*somme/n);
  ch=ch+"</BODY></HTML>"
  return(ch)
}
Cette fonction lance la correction et calcule la note. La variable "ch" contiendra tout le texte de la page de correction.
function ouvrir(form)
{
  var haut = 140;
  var larg = 120;
  var options = "toolbar=no,location=no,directories=no,status=no,"
    + "menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes,"
    + "width=" + larg + ",height=" + haut;
  maFenetre=window.open("","Quiz",options);
  maFenetre.document.open();
  corps = corriger(form);
  maFenetre.document.write(corps);
  maFenetre.document.close();
}
Cette fonction ouvre la fenêtre du corrigé et note dans celle-ci les corrections et la note.
function process(form)
{
  if (verif(form)) {ouvrir(form)}
  else {alert("\nFormulaire incomplet")}
}

C'est la fonction principale, celle qui lance la correction si le formulaire est complet. S'il manque des réponses, elle affiche un message d'alerte.

// Fin du code JavaScript -->

</SCRIPT>
</HEAD>
Marque la fin du code javascript (</SCRIPT>) et de l'en-tête (</HEAD>).

Remarque

Pour essayer un programme javascript, il vaut mieux utiliser le navigateur de Netscape pour voir le résultat . En effet, Netscape Communicator affiche les messages d'erreurs (il suffit d'écrire "javascript:" dans la barre d'adresse). Internet Explorer 5 n'a pas cette fonctionnalité.


Didier Müller, 30.5.02