page précédente

Code du QCM généré

 

   Dans cet exemple nous avons deux questions et un total de 5 réponses.

   La première question comporte une image et trois réponses possibles. Seules les deux premières sont bonnes, et doivent donc être cochées. Nous le voyons ici dans le code html. Les cases qu'il faut cocher ont la valeur '1' et celle qui ne doit pas l'être a la valeur '-1'.

   La deuxième question comporte un son midi et deux réponses possibles. Seule la première est bonne, et doit donc être cochée et la deuxième non.

   Cela nous fait donc ici un total de trois cases qu'il faut cocher et deux qu'il ne faut pas pour obtenir un score de 5 sur 5. Vous retrouvez ces valeurs 3 et 2 dans les champs cachés à la fin du formulaire. Il ne faut donc pas oublier de modifier ces deux derniers chiffres si vous changez les valeurs ('1' ou '-1') des réponses.

 

LEGENDE
<html> code html
var largeur = 350; code javascript
// variables generales commentaire javascript
<!-- premiere question --> commentaire html
Mon QCM code personnalisable

 

  <!-- debut de fichier -->

<html><head>
<title> Mon QCM</title>
<script language=JavaScript><!--

 

// DEBUT DU SCRIPT JAVASCRIPT

  //hide
// variables generales
var browser = navigator.appName;
var version = navigator.appVersion.charAt(0);
var largeur = 350;
var hauteur = 200;
var retrait = 0;
var nbpenal = 0;
var reppenal = 0;
var score=0;
var colsoluce = "
#FAFAD2"; // couleur de fond de la fenetre solutions
var txtsoluce = "";
var valeur0 = "";
// contient le msg de la note
var wsolutions = "";
// fenetre note et toutes solutions

// si navigateur type 4, reference au tiers de taille de l ecran
// ces valeurs peuvent être modifiées

   if (version >= 4) {
   largeur = window.screen.width/
3;
   hauteur = window.screen.height/
3;
   }

// mise a jour du score en fonction des coches selectionnees
function maj(bool,valeur) {
   if (bool) {
   score = score + eval(valeur);
   }
   else {
   score = score - eval(valeur);
   }
}

// ouverture de la fenetre solution-question et maj diminution du score
function soluce(txtsoluce,retrait) {
score = score - retrait;
nbpenal = nbpenal + 1;
reppenal += 1*retrait;
var wsoluce = open("","solution","menubar=no,toolbar=no,scrollbars=yes,status=no,resizable=yes,width="+largeur+",height="+hauteur);
wsoluce.document.open();
wsoluce.document.write("<html><head><title>solution</title></head><body bgcolor=#66CDA9 onblur=window.close()></p>" + txtsoluce + "</p></body></html>");
wsoluce.document.close();
}

// ouverture de la fenetre indice
var unindice = "";
function indice(unindice) {
var windice = document.open(unindice,"un_indice","menubar=no,toolbar=no,scrollbars=yes,status=no,resizable=yes,width="+largeur+",height="+hauteur);
windice.document.close();
}

// calcul et affichage de la note
function affiche() {
var totp = parseInt(document.etape3.sont_a_cocher.value);
var totn = parseInt(document.etape3.sont_pas_a_cocher.value);
var tot = totp + totn;
var note = 0;

   if (score != 0 && totp != 0) {
   note = parseInt(20*(1*score + 1*totn)/(1*tot));
   }
   else {
      if (totp == 0 && score == 0) {
      note = 20;
      }
      else {
      note = parseInt(20*(1*score + 1*totn)/(1*tot));
      }
   }

   if (note == 20) {
   valeur0 = note + " sur 20
Bravo !";
   colsoluce = "
#FAFAD2";
   }
   if ((note >= 10) && (note < 20)) {
   valeur0 = note + " sur 20
Pas mal, essayez encore !";
   colsoluce = "
#FAFAD2";
   }
   if ((note < 10) && (note >= 0)) {
   valeur0 = note + " sur 20
Pas terrible !";
   colsoluce = "
#AFEEEE";
   }
   if (note < 0) {
   valeur0 = "0 sur 20
Pas bien du tout !";
   colsoluce = "
#AFEEEE";
   }
document.etape3.monscore.value = note;
toutsoluces();
}

// affiche la note et toutes les bonnes reponses a la fin
function toutsoluces() {
var doci = "";
var valeur1 = "";
var valeur2 = "";
var valeur3 = "";
var abon = "";
var nq = 1;
var sl = "";

   for (var i = 0; i < document.etape3.elements.length; i++) {
   doci = document.etape3.elements[i];
      if (doci.type == "checkbox") {
         if (doci.name.substring(3, 5) == nq) {
         sl ="</td></tr><tr><td><B>&nbsp;Question " + doci.name.substring(3, 5) + "</B>"
         sl +="&nbsp;&nbsp;</td><td>";
         nq++;
         }
         else {
         sl ="";
         }
         if (doci.value == 1) abon = "<FONT COLOR=#008000>oui</FONT>";
         if (doci.value == -1) abon = "<FONT COLOR=#FF0000>non</FONT>";
      valeur1 = sl;
      valeur1 += "&nbsp;r&eacute;ponse&nbsp;<B>"+doci.name.substring(6, 8)+" : "+abon+"</B>&nbsp;<br>";
      valeur2 += valeur1;
      }
   }

   if (valeur2 == "") valeur2 = "<big>Aucune</big>";
valeur3 = "<html><head><title>SOLUTIONS</title></head><body bgcolor="+colsoluce+">";
valeur3 += "<H2><font color = #0000FF>" + valeur0 + "</font></H2>";
   if (nbpenal != 0) {
   valeur3 += "
<B><font color = #FF0000>Vous avez " + nbpenal + " p&eacute;nalit&eacute;(s) ";
   valeur3 += "
<BR>pour avoir sollicit&eacute; " + nbpenal + " fois les solutions <BR>(pour";
   valeur3 += " " + reppenal + "
r&eacute;ponses possibles). </font></B>";
   }
valeur3 += "<H3>Les cases &agrave; cocher &eacute;taient successivement :</h3>";
valeur3 += "<table border=1 cellpadding=6 bgcolor=#FFFFFF><tr><td>" + valeur2;

wsolutions = open("","solutions","menubar=no,toolbar=no,scrollbars=yes,status=no,resizable=yes,width="+largeur+",height="+hauteur);
wsolutions.document.write(valeur3 + "</td></tr></table></body></html>");
wsolutions.document.close();

nbpenal = 0;
reppenal = 0;
retrait = 0;
}

// si mail - action
function envoi() {
document.etape3.submit();
score = 0;
document.etape3.reset();
wsolutions.focus();
}

// si pas mail - action
function pasenvoi () {
score = 0;
document.etape3.reset();
}

// remise a zero
function remisazero() {
score = 0;
}

// ecriture avertissement pour IE3
if (browser == "Microsoft Internet Explorer" && version < 4) {
var txt = "<H2>Attention ! Votre navigateur, <br>" + navigator.appName + " version " + navigator.appVersion + ",<br>";
txt += "n'est pas compatible avec le script de cette page</H2>";
document.write(txt);
}

  // --></script>
</head>
 

<!-- DEBUT DU CORPS HTML -->

  <body bgcolor='#000000' text='#FFFFFF' link='#00FFFF' vlink='#008080' alink='#FF0000'>
<form name=etape3>
<H3>Mon QCM</H3>
<BR>Consignes : <BR>
Vous pouvez ne cocher aucune ou plusieurs réponses par question. <BR>
Si vous faites appel à la réponse, parfois proposée, non seulement vous perdez des points mais vous devez quand même compléter les réponses. <BR>
L'indice, quand un lien le mentionne, est par contre gratuit. <BR>
Votre score est calculé en fonction de toutes les possibilités de choix (cocher une mauvaise case est compté comme erreur,
ne pas cocher une bonne case est aussi compté comme erreur...). <BR>
Une fois que vous avez terminé, vous cliquez sur le bouton "Score" au bas de la page.
Vous verrez alors s'afficher votre note sur 20, puis les bonnes réponses.
<BR>

<!-- premiere question -->

<p><B><big><font color='#FF0000'>1</font>&nbsp;&nbsp;Question 1</big></B></p><!-- texte de la premiere question -->
<img src=img1.gif><BR><BR><!-- fichier image - premiere question -->
&nbsp;&nbsp;<a href="javascript:indice('indice1.htm')">indice</a><BR><!-- nom du fichier indice-->
<input type="hidden" name="txtaide1" value="bonne réponse 1"><!-- texte de la bonne rponse - premiere question -->
&nbsp;&nbsp;<a href="javascript:soluce(document.etape3.txtaide1.value,document.etape3.penal1.value);">solution</a><!-- appel a la reponse et a la diminution du score - premiere question -->
&nbsp;&nbsp;<I>(Attention, si vous cliquez, pas de points pour cette question).</I><BR>
&nbsp;<font color='#FF0000'>1</font>&nbsp;&nbsp;<input type=checkbox name=chq01r01 value='1' onclick="maj(this.checked,'1')"><!-- valeur premiere reponse - premiere question -->
&nbsp;&nbsp;réponse 1.1<BR><!-- texte premiere reponse - premiere question -->
&nbsp;<font color='#FF0000'>2</font>&nbsp;&nbsp;<input type=checkbox name=chq01r02 value='1' onclick="maj(this.checked,'1')"><!-- valeur deuxieme reponse - premiere question -->
&nbsp;&nbsp;réponse 1.2<BR><!-- texte deuxieme reponse - premiere question -->
&nbsp;<font color='#FF0000'>3</font>&nbsp;&nbsp;<input type=checkbox name=chq01r03 value='-1' onclick="maj(this.checked,'-1')"><!-- valeur troisieme reponse - premiere question -->
&nbsp;&nbsp;réponse 1.3<BR><!-- texte troisieme reponse - premiere question -->
<input type='hidden' name='penal1' value='3'><!-- valeur penalite - premiere question -->
<BR><HR WIDTH=30% COLOR=#C0C0C0> <!-- barre coloree -->

<!-- deuxieme question -->

<p><B><big><font color='#FF0000'>2</font>&nbsp;&nbsp;Question 2</big></B></p><!-- texte de la deuxieme question -->
&nbsp;&nbsp;<embed src=son1.mid border="0" width="140" height="60" type="audio/x-midi" autostart="false"><!-- fichier son - deuxieme question -->
<noembed>son midi</noembed><BR><BR>&nbsp;&nbsp;<a href="javascript:indice('indice2.htm')">indice</a><BR>
<input type="hidden" name="txtaide2" value="bonne réponse 2">
&nbsp;&nbsp;<a href="javascript:soluce(document.etape3.txtaide2.value,document.etape3.penal2.value);">solution</a>
&nbsp;&nbsp;<I>(Attention, si vous cliquez, pas de points pour cette question).</I><BR>
&nbsp;<font color='#FF0000'>1</font>&nbsp;&nbsp;<input type=checkbox name=chq02r01 value='1' onclick="maj(this.checked,'1')">
&nbsp;&nbsp;réponse 2.1<BR>
&nbsp;<font color='#FF0000'>2</font>&nbsp;&nbsp;<input type=checkbox name=chq02r02 value='-1' onclick="maj(this.checked,'-1')">
&nbsp;&nbsp;réponse 2.2<BR>
<input type='hidden' name='penal2' value='2'><!-- valeur penalite - deuxieme question -->
<BR><HR WIDTH=30% COLOR=#C0C0C0>

<BR><input type="hidden" name="sont_a_cocher" value="3"><!-- nombre total de cases qu il faut cocher-->
<BR><input type="hidden" name="sont_pas_a_cocher" value="2"><!-- nombre total de cases qu il ne faut pas cocher-->
<input type="hidden" name="monscore" value="">
&nbsp;&nbsp;<input type="button" name="commentaire" value="Commentaires" onclick="indice('lien.htm')"><!-- lien vers la page de commentaires -->
&nbsp;&nbsp;<input type="button" name="result" value="Score" onclick="affiche();pasenvoi();">
&nbsp;&nbsp;<input type="reset" name="reset1" value="Remise à zéro" onclick="remisazero()">
</form></body></html>

<!-- fin de fichier -->