|
|
|
Table des matières
Questionnaire à choix multiples de basePour 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.
Code Source
Comme vous pouvez le constatez, j'ai inséré des commentaires qui vont vous aider à personnaliser votre questionnaire. C'est à ces endroits que vous allez définir les variables qui vont être utilisées lors des fonctions. Ces variables vont s'ajustées automatiquement à l'intérieur des fonctions, vous ne devez donc pas aller modifier ces fonctions.
<!-- Hide from JavaScript-Impaired Browsers
ctr=0;
/* Mettre le titre que
vous voulez
qui apparaisse dans la page */
ttl="Que savez-vous sur le Javascript ?";
/* Quel sera le resultat
final */
psco=100;
/* Points enleves pour
chaque mauvaise reponse */
wrans=20;
/* Points enleve pour
chaque non-reponse */
noans=20;
/* Entrer le nombre de
question que vous voulez
qu'il y ait dans votre questionnaire */
nr=5;
/* Entrer ici les questions
que vous desirer
pour le test.
Si vous desirer plus de 5 questions, vous
n'avez qu'a rajouter ques[5], ques[6], etc.
Mais assurez-vous que le "nr" precedant corresponde
bien au nombre de questions que vous voulez.
NOTE: do not use any double
quote signs in your questions. If you
need them, use the HTML " instead.
Or, single quote signs may be safely used.
*/
ques=new Array();
ques[0]="Le javascript est un language oriente :";
ques[1]="Quelles sont les utilitees du javascript
?";
ques[2]="Je ne sais pas trop";
ques[3]="J'ai hate que
ca finnisse";
ques[4]="Enfin la derniere question";
// Vous pouvez en rajouter
autant que vous le voulez
/* Vous devez entrer ici
le choix correspondant aux
bonnes reponses (a, b, c, d, or e) dans l'ordre
correspondant aux questions. Pour cet exemple,
l'ordre des bonnes reponses
etait "abcde" */
cor="abcde";
/* When entering your
own answers, do not
use any double quote signs in your
answers. Instead, use the HTML "
so the JS will not get confused. */
Voici donc le script de ce questionnaire :
ns="0123456789"
ls="abcde";
astr="";
ack=new Array();
for (var i=0;i<nr;i++){
ack[i]=(nr*5)+1;
}
function lightIt(){
document.images[flg+ad].src="nr/rbl.gif";
}
function dimIt(){
if (ack[Math.floor(flg/5)]!=flg){
document.images[flg+ad].src="nr/rbd.gif";
}
function dumpIt(){
if (ack[Math.floor(flg/5)]==flg){
document.images[ack[Math.floor(flg/5)]+ad].src="nr/rbd.gif";
ack[Math.floor(flg/5)]=(nr*5)+1;
}
else{
if (ack[Math.floor(flg/5)]!=flg&&ack[Math.floor(flg/5)]!=(nr*5)+1){
document.images[ack[Math.floor(flg/5)]+ad].src="nr/rbd.gif";
}
document.images[flg+ad].src="nr/rbl.gif";
ack[Math.floor(flg/5)]=flg;
}
function ckSco(){
document.images[ad+(nr*5)].src="nr/cwf2.gif";
setTimeout('document.images[ad+(nr*5)].src="nr/cwf0.gif"',1000);
for (var i=0;i<nr;i++){
u=cor.charAt(i);
v=ls.indexOf(u)+(i*5);
document.images[ad+v].src="nr/gbl.gif";
}
sco=psco;
for (var i=0;i<nr;i++){
if (ack[i]==(nr*5)+1){
sco-=noans;
}
else{
u=cor.charAt(i);
v=ls.indexOf(u)+(i*5);
sco=(v==ack[i]?sco:sco-wrans);
}
sco=(sco<0?0:sco); // prevent minus score
scos=""+sco;
while (scos.length<3){
scos="0"+scos;
}
document.images[ad+(nr*5)+1].src="nr/yts.gif";
ctr=ad+(nr*5)+2;
for (var i=0;i<3;i++){
nj=ns.indexOf(scos.charAt(i));
document.images[ctr].src="nr/"+nj+".gif";
ctr++;
}
function litbut(){
document.images[ad+(nr*5)].src="nr/cwf1.gif";
}
function dimbut(){
document.images[ad+(nr*5)].src="nr/cwf0.gif";
}
/* This little routine
is simply used to count the
number of images you may place on your web page
prior to the radio buttons. Just makes the routine
independent of how you lay your page out. */
var ad = 0;
function getImgAdd(){
for (var i=0;i<20;i++){
if (document.images[i].src.indexOf("rbd.gif")>-1){
ad=i;
i=20;
}
// End Hiding -->
</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 BGCOLOR="#ffffff" BACKGROUND="../../image/bg1.JPG"
LINK="#0080c0"
ALINK="#0080c0" VLINK="#0080c0">
<TD WIDTH="60%"
VALIGN="TOP">
<P><CENTER><IMG SRC="../../image/a1_sm.GIF"
WIDTH="48" HEIGHT="48"
ALIGN="BOTTOM" BORDER="0" NATURALSIZEFLAG="3"><B><U><FONT
COLOR="#000079"
SIZE="+2">Questionnaire
a choix multiples de base</FONT></U></B></CENTER></P>
<P><HR ALIGN=LEFT></P>
<P> <!--
Vous pouvez ecrire ici
toutes les
instructions ou images que vous desirez.
Les instructions se veuleut simplement un
guide, vous etes libres de las garder ou de
les modifier. --></P>
<P><TABLE BORDER="0"
WIDTH="486" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD>
<B><FONT COLOR="#ff0000" SIZE="+1"
FACE="Helvetica,Arial,Geneva">Instructions:</FONT></B><FONT
SIZE="+1" FACE="Helvetica,Arial,Geneva">
<BR>
1. Cliquez sur le bouton
rouge pour verifier votre reponse
et obtenir votre resultat. <BR>
2. Si vous ne connaissez pas la reponse, <B><I>essayez
en une.
</I></B> <BR>
3. Si vous ne pesez pas sur le bon bouton, tout va sauter. <BR>
4. Vous pouvez modifier vos reponses en tout temps. <BR>
5. Lorsque vous aurez termine cliquez sur le bouton rouge
au bas de la page. Votre resultat va apparaitre au bas de la
page et pour toutes les bonnes reponses le bouton
de la question va s'allume en vert.</FONT><HR ALIGN=LEFT
NOSHADE></TD>
</TR>
</TABLE></P>
<P><SCRIPT LANGUAGE="JavaScript"><!-- Hide from JavaScript-Impaired
Browsers
document.write('<TABLE BORDER=0 CELLPADDING=2'
+' CELLSPACING=0 WIDTH=486><TR><TD COLSPAN=2 '
+'ALIGN=CENTER><FONT SIZE=4 FACE="Helvetica,A'
+'rial,Geneva" COLOR=BLUE><B>'+ttl+'</B></FON'
+'T></TD></TR><TR>');
for (var i=0;i<nr;i++){
document.write('<TD COLSPAN=2 VALIGN=TOP><HR'
+' NOSHADE><FONT SIZE=4 FACE="Helvetica,Aria'
+'l,Geneva">'+ques[i]+'</FONT></TD></TR>')
for (var j=0;j<5;j++){
document.write('<TR><TD><A HREF="mctest.htm'
+'" onMouseOver="flg='+((i*5)+j)+';lightIt('
+');return true" onMouseOut="flg='+((i*5)+j)
+';dimIt();return true;" onClick="flg='
+((i*5)+j)+';dumpIt();return false;"><IMG S'
+'RC="nr/rbd.gif" WIDTH=15 HEIGHT=15 BORDER'
+'=0></TD><TD ALIGN=LEFT><FONT SIZE=4 FACE='
+'"Helvetica,Arial,Geneva">'+ans[(i*5)+j]
+'</FONT></TD></TR>');
}
}
document.write('<TR><TD COLSPAN=3 ALIGN=CE'
+'NTER><A HREF="mctest.htm" onClick="ckSco'
+'();return false;" onMouseOver="litbut();'
+'return true;" onMouseOut="dimbut();retur'
+'n true;"><IMG SRC="nr/cwf0.gif"'
+' WIDTH=69 HEIGHT=45 BORDER=0 NAME="but">'
+'<P><IMG SRC="nr/10.gif" WIDTH=120 HEIGHT'
+'=10 BORDER=0><IMG SRC="nr/10.gif" WIDTH='
+'7 HEIGHT=10 BORDER=0><IMG SRC="nr/10.gif'
+'" WIDTH=7 HEIGHT=10 BORDER=0><IMG SRC="n'
+'r/10.gif" WIDTH=7 HEIGHT=10 BORDER=0></T'
+'D></TR></TABLE>');
getImgAdd();
// End Hiding --></SCRIPT><!-- Vous
pouvez
entrer ici tout ce que vous desirez. --></P>
</BODY>
</HTML>
Pour que cet exemple fonctionne, vous devez avoir en main tous les fichiers images qui l'accompagne, si cela vous intéresse, voici l'adresse où vous pourrez les trouver : http://www.infohiway.com/javascript/mctest.htm
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!