Table des matières

+Objectif général

+Objectifs terminaux

-Objectifs intermédiaires

Questionnaire avec feedback automatique

Pour faciliter les explications, nous allons employer une convension. Le texte qui sera écrit en noir sera du code HTML, celui en vert sera du javascript et celui en rouge sera soit du javascript soit du HTML à changer en fonction de vos besoins.

Ce qui est écrit en bleu ce sont des commentaires pour vous guider lors de la modification de votre questionnaire.

Voici donc le script de ce questionnaire :

 

<SCRIPT LANGUAGE="JavaScript"><!-- Cet exercice est un script JavaScript.
var d
var nbreq
d = 0
nbreq = 0
var nnav = navigator.appName
var lefinal = "0"
var cettedate = new Date
lefinal = cettedate.getDate() + "/" + (cettedate.getMonth()+1) +"/" + cettedate.getYear() + " " + cettedate.getHours()+"h"+cettedate.getMinutes()+"m"+cettedate.getSeconds()+"s Note prés.: " + d+" sur "+ nbreq+"."

function debuter() {document.forms[7].Resultat.value = lefinal}

function makeArray() {
this.length = 5;
return this;
}

var tem = new makeArray(false,false,false,false,false,false,false,false,false,false);
var reuss = new makeArray(false,false,false,false,false,false,false,false,false,false);
var lemess = new makeArray("","","","","","","","","","");

for (i = 0; i < 5; i++) lemess[i] = "Place pour message"

function valens() {
var validat = true
for (i = 0; i < 5; i++) if (tem[i] != true) validat = false
if (validat == false)
{
for (var i = 0; i < 5; i++) if (tem[i] != true && reuss[i] != true) rep(i+1, document.forms[i+1]);
}
else alert ("Tous les numéros ont été validés.")
}

Les 5 qui sont en rouge ci-haut représente le nombre de questions que votre questionnaire comporte. Pour ce qui est du 7, c'est le nombre de questions que vous aurez auquel vous ajouter 2.


function rep(num, form) {
var coulch = form.eaccaEr.options[form.eaccaEr.selectedIndex].text
var bonnerep

if (num == 1) {bonnerep = "superbe"; }
if (num == 2) {bonnerep = "phoenix"; }
if (num == 3) {bonnerep = "boston"; }
if (num == 4) {bonnerep = "27"; }
if (num == 5) {bonnerep = "6"; }

*//Faites attention de conserver le même nombre de bonnes réponses qu'il y a de questions dans votre questionnaire *//

lemess[num-1] = "On a déjà répondu à cette question.";
if (tem[num-1] == true) {document.forms[num].Mess.value = lemess[num-1];}
else { nbreq++;
tem[num-1] = true;
if (coulch != bonnerep) {lemess[num-1] ="Erreur. Rép.: ""+bonnerep+"". "; document.forms[num].Mess.value = lemess[num-1] + "Note prés.: " + d + " sur "+nbreq+"."; reuss[num-1] = false}
else {d++;
lemess[num-1] = "La réponse est en effet ""+bonnerep+"". "; document.forms[num].Mess.value = lemess[num-1] + "Note prés.: "+d+" sur "+nbreq+"."; reuss[num-1] = true}}
for(i = 0; i < 5; i++) document.forms[i+1].Mess.value = lemess[i] + " Note prés.: "+d+" sur "+ nbreq+".";
if (d == 5 && nbreq == 5) alert ("Bravo: 5 sur 5")
var ladate = new Date

lefinal = ladate.getDate() + "/" + (ladate.getMonth()+1) +"/" + ladate.getYear() + " " + ladate.getHours()+"h"+ladate.getMinutes()+"m"+ladate.getSeconds()+"s Note prés.: " + d+" sur "+ nbreq+".";
document.forms[7].Resultat.value = lefinal;
}

function total ()
{
alert ("Le total est de "+d+" sur "+nbreq+".")
}

function refaire()
{
d = 0
nbreq = 0
for (i = 0; i <5; i++) {tem[i] = false;reuss[i] = false; lemess[i] = "Vous êtes mélangé n'est-ce pas ?"; document.forms[i+1].Mess.value = lemess[i];}
lefinal = "0 sur 0"
document.forms[7].Resultat.value =lefinal
}

function nonfait ()
{
var verite
verite = false
var quant
quant = "Numéros non faits: "
for ( i = 0; i < 5; i++) if (tem[i] != true) {quant = quant + " " +( i+1); verite = true;}
if (verite == true) alert (quant+".")
if (verite == false) alert("Tous les numéros ont été faits.")
}

 

function reussite (val)
{
var verite
verite = false
var fait;
fait = false;
var quant
var compteur
compteur = 0;
var lenum
lenum = 0;

 

var lemot
var reponse = "X"
lemot = "";
quant = "Numéros non réussis: "
for ( i = 0; i < 5; i++) {
if (tem[i] ==true) fait = true;
if (tem[i] == true && reuss[i] == false) {
compteur++;
lenum = i;
quant = quant + " " +( i+1); verite = true;
}}
if (compteur == 1) {lemot = (lenum + 1); quant = "Le numéro " + lemot+ " n'a pas été réussi.";}
var navig = false;
if (nnav == "Microsoft Internet Explorer") navig = true;
if (navig == false)
while (val == false && verite == true && reponse != null && reponse != "N" && reponse != "n" && reponse != "O" && reponse != "o" ) reponse = prompt(quant + " Refaire ? (O/N)", "N");
else while (val == false && verite == true && reponse != null && reponse != "" && reponse != "N" && reponse != "n" && reponse != "O" && reponse != "o" ) reponse = prompt(quant + " Refaire ? (O/N)", "N");

if (reponse == null || reponse == "");
else
{
if (reponse == "O" || reponse == "o") val = true;

if (val == true)
{
for ( i = 0; i < 5; i++) if (tem[i] == true && reuss[i] == false) {tem[i] = false; nbreq--; document.forms[i+1].Mess.value = "Numéro à refaire"; }
var ladate = new Date
lefinal = ladate.getDate() + "/" + (ladate.getMonth()+1) +"/" + ladate.getYear() + " " + ladate.getHours()+"h"+ladate.getMinutes()+"m"+ladate.getSeconds()+"s Note prés.: " + d+" sur "+ nbreq+".";
document.forms[7].Resultat.value = lefinal;

if (verite == true) alert ("Vous pouvez refaire les numéros non réussis.\nLa note a été réajustée à "+ d +" sur " +nbreq+".\n"+quant+".")
}
else if (verite == true) alert (quant+".");
if (verite == false)
if (fait > 0) alert("Aucun numéro fait n'a été raté.")
else alert("Aucun numéro n'a encore été fait.")
}
}

function letexte (num) {
document.forms[num].Mess.value = lemess[num-1] + " Note prés.: " + d + " sur " + nbreq + ".";
}

function recrire() {document.forms[7].Resultat.value =lefinal }

// Fin du script--></SCRIPT>

Ce qui est en vert consiste à illustrer le langague de programmation JavaScript. Ce que vous venez de voir sont les définitions des fonctions qui seront utilisées tout au long du codage.

</HEAD>

<BODY onLoad="debuter()" BGCOLOR="#ffffff" LINK="#000080">

<P>&nbsp;</P>

<P><INPUT TYPE=BUTTON VALUE="Num. non faits" NAME="BtnHello1" OnClick="nonfait()">
<INPUT TYPE=BUTTON VALUE="R&eacute;sultat" NAME="BtnHello2" OnClick="total()">
<INPUT TYPE=BUTTON VALUE="Recommencer" NAME="BtnHello3" OnClick="refaire()">
<INPUT TYPE=BUTTON VALUE="Num. non r&eacute;ussis" NAME="BtnHello3" OnClick="reussite(false)">
<INPUT TYPE=BUTTON VALUE="Refaire les num. non r&eacute;ussis" NAME="BtnHello3" OnClick="reussite(true)"></P>

<P><BR>
N.B. Pour valider tous les choix d'un seul coup, cliquez sur
le bouton suivant. <INPUT TYPE=BUTTON VALUE="Tout valider" NAME="BtnHello3" OnClick="valens()">
<BR>
Aller au num&eacute;ro <FONT SIZE="+1"><A HREF="#no1">1, </A><A
HREF="#no2">2, </A><A HREF="#no3">3, </A><A HREF="#no4">4, </A></FONT><A
HREF="#no5"><FONT SIZE="+1">5.</FONT> </A><FONT SIZE="+1"><A
HREF="#proc">Explications sur la fa&ccedil;on de proc&eacute;der</A></FONT></P>

<OL>
<P><A NAME="no1"></A>
<LI><FONT SIZE="+1">Notre site est </FONT><FONT COLOR="#8000ff"
SIZE="+1">[merveilleux, super, affreux]<BR>
</FONT><TABLE BORDER="0" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD></TD>
<TD>
<SELECT NAME="eaccaEr" SIZE="3">
<OPTION SELECTED>merveilleux
<OPTION>super
<OPTION>affreux
</SELECT></TD>
<TD>
Validez votre choix. <INPUT TYPE="button" VALUE= "Cliquer" NAME= "qu1" onClick="rep(1, this.form)"></TD>
</TR>
</TABLE><FONT SIZE="+1"><INPUT TYPE="text" VALUE="Place pour message"
NAME="Mess" SIZE="52" onChange="letexte(1)"><BR>
<HR ALIGN=LEFT></FONT>
<LI><A NAME="no2"></A>
<LI><FONT SIZE="+1">JR joue a </FONT><FONT COLOR="#8000ff" SIZE="+1">[dallas,
los angeles, chicago, phoenix]<BR>
</FONT><TABLE BORDER="0" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD></TD>
<TD>
<SELECT NAME="eaccaEr" SIZE="4">
<OPTION SELECTED>dallas
<OPTION>los angeles
<OPTION>chicago
<OPTION>phoenix
</SELECT></TD>
<TD>
Validez votre choix. <INPUT TYPE="button" VALUE= "Cliquer" NAME= "qu2" onClick="rep(2, this.form)"></TD>
</TR>
</TABLE><FONT SIZE="+1"><INPUT TYPE="text" VALUE="Place pour message"
NAME="Mess" SIZE="54" onChange="letexte(2)"><BR>
<HR ALIGN=LEFT></FONT>
<LI><A NAME="no3"></A>
<LI><FONT SIZE="+1">JR est n&eacute; </FONT><FONT COLOR="#8000ff"
SIZE="+1">[washington, floride, boston, chicago]<BR>
</FONT><TABLE BORDER="0" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD></TD>
<TD>
<SELECT NAME="eaccaEr" SIZE="4">
<OPTION SELECTED>washington
<OPTION>floride
<OPTION>boston
<OPTION>chicago
</SELECT></TD>
<TD>
Validez votre choix. <INPUT TYPE="button" VALUE= "Cliquer" NAME= "qu3" onClick="rep(3, this.form)"></TD>
</TR>
</TABLE><FONT SIZE="+1"><INPUT TYPE="text" VALUE="Place pour message"
NAME="Mess" SIZE="53" onChange="letexte(3)"><BR>
<HR ALIGN=LEFT></FONT>
<LI><A NAME="no4"></A>
<LI><FONT SIZE="+1">JR a le num&eacute;ro </FONT><FONT COLOR="#8000ff"
SIZE="+1">[17, 27, 97]</FONT><FONT SIZE="+1">avec l'&eacute;quipe
am&eacute;ricaine<BR>
</FONT><TABLE BORDER="0" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD></TD>
<TD>
<SELECT NAME="eaccaEr" SIZE="3">
<OPTION SELECTED>17
<OPTION>27
<OPTION>97
</SELECT></TD>
<TD>
Validez votre choix. <INPUT TYPE="button" VALUE= "Cliquer" NAME= "qu4" onClick="rep(4, this.form)"></TD>
</TR>
</TABLE><FONT SIZE="+1"><INPUT TYPE="text" VALUE="Place pour message"
NAME="Mess" SIZE="52" onChange="letexte(4)"><BR>
<HR ALIGN=LEFT></FONT>
<LI><A NAME="no5"></A>
<LI><FONT SIZE="+1">JR mesure </FONT><FONT COLOR="#8000ff" SIZE="+1">[5
et 11, 6, 6 et 1, 6 et 2]</FONT><FONT SIZE="+1">pieds<BR>
</FONT><TABLE BORDER="0" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD></TD>
<TD>
<SELECT NAME="eaccaEr" SIZE="4">
<OPTION SELECTED>5 et 11
<OPTION>6
<OPTION>6 et 1
<OPTION>6 et 2
</SELECT></TD>
<TD>
Validez votre choix. <INPUT TYPE="button" VALUE= "Cliquer" NAME= "qu5" onClick="rep(5, this.form)"></TD>
</TR>
</TABLE><FONT SIZE="+1"><INPUT TYPE="text" VALUE="Place pour message"
NAME="Mess" SIZE="53" onChange="letexte(5)"><BR>
</FONT><HR ALIGN=LEFT>
</OL>

*//Remarquez le pattern qui revient d'une question à l'autre :

( <P><A NAME="no1"></A><LI><FONT SIZE="+1">question </FONT><FONT COLOR="#8000ff" ......NAME="Mess" SIZE="réponse" onChange="letexte(1)"><BR><HR ALIGN=LEFT></FONT>).

Une fois que vous l'aurez vu, faites attention de bien conserver le même nombre de fois ce pattern qu'il y a de questions dans votre questionnaire *//

<P><FONT COLOR="#ff0000" SIZE="-1"><INPUT TYPE=BUTTON VALUE="Num&eacute;ros non faits" NAME="BtnHello1" OnClick="nonfait()">
<INPUT TYPE=BUTTON VALUE="R&eacute;sultat" NAME="BtnHello2" OnClick="total()">
<INPUT TYPE=BUTTON VALUE="Refaire l'exercice" NAME="BtnHello3" OnClick="refaire()">
<INPUT TYPE=BUTTON VALUE="Num&eacute;ros non r&eacute;ussis" NAME="BtnHello3" OnClick="reussite(false)">
<INPUT TYPE=BUTTON VALUE="Voir et refaire les num. non r&eacute;ussis" NAME="BtnHello3" OnClick="reussite(true)"><BR>
N.B. Pour valider tous les choix d'un seul coup, cliquez sur
le bouton suivant. <INPUT TYPE=BUTTON VALUE="Tout valider" NAME="BtnHello3" OnClick="valens()">
<BR>
</FONT><INPUT TYPE="text" NAME="Resultat" SIZE="60" MAXLENGTH="40"
VALUE="0"> <INPUT TYPE="button" VALUE="R&eacute;crire le r&eacute;sultat ci-contre."onClick="recrire()">
<A NAME="proc"></A><FONT SIZE="+1">.</FONT></P>

</TR>
</TABLE></FORM>

</BODY>
</HTML>

Vous avez toutes les informations pour réussir à faire un menu dont les images changent lorsque la souris passe dessus. Si vous avez des questions, n'hésitez pas à nous les poser dans le forum de discussion!