Programmation Javascript

Analyser les réponses à une liste de questions et donner les résultats à l'internaute

Présentation

Le but du jeu: faire une liste de questions auxquelles sont attribuées des points. Les scores sont calculés par le programme et affichés en cliquant sur le bouton en fin de page. Avec un peu d'imagination les variantes et les applications sont nombreuses.
Les résultats peuvent être envoyés soit par copier-coller ou automatiquement (non inclus à ce programme).

Exemple

Dans l'exemple suivant, on testera vos préférences pour les qualités d'un moteur de recherche.
Pour corser la difficulté, les résultats sont séparés en 2 rubriques "recherche" et "interface"en sus du score général.

 

Test du moteur de recherche

I/ La recherche

La rapidité de la recherche est-elle un critère important ?

  OUI (0 point)   NON (2 points)

L'exhaustivité de la recherche est-t-elle importante ?

OUI (2 points) NON (0 points)

Privilégiez-vous la pertinence des réponses ?

OUI (3 points) NON (-2 points)

 II/ Interface

La publicité vous parait-elle gênante?

OUI (-2 points) NON  (2 points)

La simplicité de saisie des critères de recherche est-elle primordiale

OUI (3 points) NON (-1 points)

 

 

Script

NB: les textes en rouge sont des commentaires à supprimer dans le code html

<script language="JavaScript"> <!-- debut du script

On déclare les variables:

var rang=0 // N° de la question
var panswer = new Array; //la réponse
var score = 0; score à zéro
var rep = 0; réponse à zéro
var score_rech = 0; score de la rubrique recherche à zéro
var score_interf = 0; score de la rubrique interface à zéro
var nquest = new Array; //N° des questions déjà cochées
var nval = new Array;// valeur des questions déjà cochées

aucune question n'étant cochée, mise à zéro (attention d'augmenter le chiffre si vous rajoutez des questions ou mettez carrément 100 d'emblée)
for (var i=1;i<6;i++){
nquest[i]=0}

 

function Engine(question, answer) {

la fonction principale qui recueille le numéro de la question et la valeur de la réponse
val_rep=parseInt(answer) valeur de la réponse car c'est une chaine de caractéres

rang=question.substring(1,4) N°de la question (on élimine le "q" présent dans le HTML, voir ci-dessous)
if(nquest[rang]==0){ si l'utilisateur n'a pas répondu à cette question sinon on saute plus loin (voir *)

nquest[rang]=1 l'utilisateur a répondu à cette question, c'est donc noté
nval[rang]=val_rep et on note aussi la valeur de cette réponse
score = score +val_rep on augmente le score

if (rang>3){score_interf =score_interf +val_rep;}on augmente le score de la rubrique concernée, testez decrescendo sinon résultats faussés
else{if (rang>=1){score_rech=score_rech+val_rep;}
}
}
*else{ put....!! ce c.. d'utilisateur a déjà coché cette réponse et change d'avis !! ça nous complique la vie
val_rep=nval[rang] on récupére la valeur de sa réponse précédente
score = score -val_rep et on la retranche du score total
if (rang>3){score_interf =score_interf -val_rep;} et du score de la rubrique concernée
else{if (rang>=1){score_rech=score_rech-val_rep;}
}
val_rep=parseInt(answer) valeur de cette nouvelle réponse
nval[rang]=parseInt(answer) qu'on met soigneusement de côté au cas où
score = score +val_rep on augmente le score
if (rang>3){score_interf =score_interf +val_rep;}on augmente le score de la rubrique concernée
else{if (rang>=1){score_rech=score_rech+val_rep;}
}}}

function correction()

cette fonction va ouvrir la page avec les résultats, on l'appelle "correc"
{
correc=open("","correction","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=1,resizable=1,width=500,height=350" taille de la page);
correc.document.write('<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000FF"VLINK="#800080" ALINK="#FF00FF"><b><center>ANALYSE DE VOS REPONSES!</center><BR><BR>');

correc.document.write('Score total= '+score affiche le score total, attention aux ' qui gouvernent l'affichage du texte, on peut aussi utiliser " (voir ligne suivante) , c'est selon... un apostrophe dans le texte et c'est la cata....+' / 12<BR><BR>La recherche: '+score_rech+' /7<BR>Interface: '+score_interf+' / 5<BR><BR>');

correc.document.write("Merci d'avoir participer");}


</script>

<body> corps de la page, trés important
<b><font SIZE="4">

<p ALIGN="CENTER"></font></b><font face="Times New Roman" color="#C46200" size="6">Test
de votre moteur de recherche<br>
</font><b><font size="5"></p>
</font><font size="3">

<form>
  <p></font><font face="Times New Roman" color="#0000A0" size="3"><u>I/ La recherche</u></font></b><font
  size="3"></p>
  <p></font><font face="Times New Roman" color="#0000A0" size="3"><b>La rapidité de la
  recherche est-elle un critére important ?</b></font><font size="3"></p>
  <div align="center"><center><p><font COLOR="#0000ff" face="Times New Roman" size="3">&nbsp;<input
  type="radio" name="q1" numéro de la question value="0" valeur de la réponse à cette question onclick="Engine(this.name,this.value)">OUI < quand on clique sur oui ça active le programme javascript
input
  type="radio" name="q1" value="2" onclick="Engine(this.name,this.value)">NON quand on clique sur non aussi, bien sûr, et ainsi de suite</font></p>
  </center></div><b><u><p></u></font><font face="Times New Roman" color="#0000A0" size="3">L'exhaustivité
  de la recherche est-t-elle importante?</font></b><font size="3"></p>
  <div align="center"><center><p><font COLOR="#0000ff" face="Times New Roman" size="3"><input
  type="radio" name="q2" on oublie pas d'incrémenter la question ici la 2 éme value="2" onclick="Engine(this.name,this.value)">OUI <input
  type="radio" name="q2" value="0" onclick="Engine(this.name,this.value)">NON</font></p>
  </center></div><b><u><p></u></font><font face="Times New Roman" color="#0000A0" size="3">Privilégiez-vous
  la pertinence des réponses</font></b><font size="3"></p>
  </font><div align="center"><center><p><font COLOR="#0000ff" face="Times New Roman"
  size="3"><input type="radio" name="q3" value="3" onclick="Engine(this.name,this.value)">OUI
  <input type="radio" name="q3" value="-2" onclick="Engine(this.name,this.value)">NON</font></p>
  </center></div><p><font face="Times New Roman"><small>&nbsp;</small></font><u><b><font
  face="Times New Roman" color="#0000A0" size="3">II/ Interfac</font><font size="3"><font
  face="Times New Roman" color="#0000A0">e</font></b></u></p>
  <p><font face="Times New Roman" color="#0000A0" size="3"><b>La publicité vous parait-elle
  gênante? </b></font></p>
  <div align="center"><center><p></font><font size="3" COLOR="#0000ff"
  face="Times New Roman"><input type="radio" name="q4" value="-2"
  onclick="Engine(this.name,this.value)">OUI <input type="radio" name="q4" value="2"
  onclick="Engine(this.name,this.value)">NON </font><font size="3"></p>
  </center></div><div align="left"><p></font><b><font size="3" face="Times New Roman"
  color="#0000A0">La simplicité de saisie des critéres de recherche est-elle </font><font
  size="3"><font color="#0000A0"><font face="Times New Roman">primordiale</font></font></b></p>
  </div><div align="center"><center><p><font COLOR="#0000ff" face="Times New Roman" size="3"><input
  type="radio" name="q5" value="3" onclick="Engine(this.name,this.value)">OUI <input
  type="radio" name="q5" value="-1" onclick="Engine(this.name,this.value)">NON </font></p>
  </center></div><font size="4" COLOR="#0000ff"><b>
</form>
</b></font></font>

<p>&nbsp;</p>
<font size="4">

<form> et on termine par un petit bouton dans un formulaire dont le clic va entrainer l'affichage des résultats
  <div align="center"><center><p></font><font size="3"><input type="button"
  value="LES RESULTATS DU TEST" onclick="correction()"> </p>
  </center></div>
</form>
</font>