Questionnaire supportant diff. types de questions
3/5 (6 avis)
Vue 28 765 fois - Téléchargée 1 040 fois
Description
Voici un questionnaire personnalisable(j'espère) qui supporte différents types de questions à la fois :
choix multiples, Vrai ou Faux, Avec Saisie, ...
la partie à modifier pour l'utiliser, cest avec le tableau questions (v Voici la struct. d'une question v)
questions[0] = new Array() <-- Création du tableau
questions[0][0] = "Quelle album le groupe Metallica a sorti en 1986 ?"; <-- La question
questions[0][1] = "Master of the Puppets,...And Justice for All,Reload"; <-- La réponse ou les choix
questions[0][2] = "0"; <-- Le ou les bon(s) choix (optionnel)
En regardant l'exemple, vous devriez tout comprendre...
Merci de faire des commentaires sur le fonctionnement du script ...
il a sans doutes plusieurs trucs à optimiser.
choix multiples, Vrai ou Faux, Avec Saisie, ...
la partie à modifier pour l'utiliser, cest avec le tableau questions (v Voici la struct. d'une question v)
questions[0] = new Array() <-- Création du tableau
questions[0][0] = "Quelle album le groupe Metallica a sorti en 1986 ?"; <-- La question
questions[0][1] = "Master of the Puppets,...And Justice for All,Reload"; <-- La réponse ou les choix
questions[0][2] = "0"; <-- Le ou les bon(s) choix (optionnel)
En regardant l'exemple, vous devriez tout comprendre...
Source / Exemple :
<HTML>
<HEAD>
<TITLE>Questionnaire</TITLE>
<SCRIPT language="Javascript" type="text/javascript">
var aff_courant;
var nbFaites = 0;
var correction_auto = 1; //Possibilité de revenir en arrière (0)
var separateur = ","; //Séparateurs des choix de réponse
function init() //Initialisation
{
nbFaites = 0;
aff_courant = 0;
affichage(aff_courant);
document.getElementById("btnPrec").disabled = true;
document.getElementById("btnSuiv").disabled = false;
}
//Données Question, Choix de réponses
questions = new Array()
questions[0] = new Array() //Questions à choix multiples
questions[0][0] = "Quel album le groupe Metallica a sorti en 1986 ?";
questions[0][1] = "Master of the Puppets,...And Justice for All,Reload";
questions[0][2] = "0";
questions[1] = new Array() //Question à saisie de texte
questions[1][0] = "Quel groupe a composé la chanson ''Hellbound''?";
questions[1][1] = "Pantera";
questions[2] = new Array() //Questions à choix combinés
questions[2][0] = "Lesquels de ces albums sont de AC/DC?";
questions[2][1] = "T.N.T.,Back in White,Highway to Hell";
questions[2][2] = "0,2";
questions[3] = new Array() //Vrai-Faux
questions[3][0] = "Ce questionnaire est en javascript.";
questions[3][1] = "Vrai,Faux";
questions[3][2] = "0";
reponses = new Array()
function affichage(index) //Changement de l'affichage d'une question
{
//Affichage du numero de question
titre = "<H4>Question " + (index + 1) + " de " + (questions.length) + "</H4>";
document.getElementById("question").innerHTML = titre;
var main;
main = "<LI> " + questions[index][0] + "</LI><BR>";
//Affichage des choix ou texbox
choix = questions[index][1].split(separateur);
if (choix.length > 1) //Si il y a plusieurs choix
{
if (questions[index][2].split(separateur).length>1) //S'il y a plus d'un élément à choisir
{
for (x=0;x<choix.length;x++)
{
main += "<INPUT type='checkbox' id='rep" + x + "' value='"+x+"'> " + choix[x] + "<BR>";
}
}
else //S'il y a un seul élément à choisir
{
for (x=0;x<choix.length;x++)
{
main += "<INPUT type='radio' name='rep' id='rep"+x+"' value='"+x+"'";
if (x == 0) //Le choix selectionné par default est le 1er
{
main += " checked";
}
main += "> " + choix[x] + "<BR>";
}
}
}
else //Dans le cas d'une réponse courte
{
main += "<INPUT type='text' id='reponse'>";
}
document.getElementById("main").innerHTML = main;
rafraichir_details("courrant");
}
function aff_resultat()//Afichage des résultats
{
//Affichage du Titre
titre = "<H4>Résultats</H4>";
document.getElementById("question").innerHTML = titre;
var main;
main = "<TABLE border='1' cellpadding='5' cellspacing='0'>";
main += "<TR>";
main += "<TD><B>Vos Réponses</B></TD> <TD><B>Les Réponses</B></TD>";
main += "</TR>";
for (x=0;x<reponses.length;x++) //Affichage Question-Réponse
{
//Affichage de la question
main += "<TR><TD colspan='2'><I>"+(x+1)+". "+(questions[x][0])+"</I></TD></TR>";
main += "<TR>";
main += "<TD><B>";
//Affichage des réponses entrées
if (questions[x].length > 2)
{
numeros1 = reponses[x].split(separateur)
textes = questions[x][1].split(separateur)
for (y=0;y<numeros1.length;y++)
{
main += textes[numeros1[y]] + ", "
}
main = main.substring(0,main.length-2);
main += "</B></TD> <TD><B>"
numeros2 = questions[x][questions[x].length-1].split(separateur)
for (y=0;y<numeros2.length;y++)
{
main += textes[numeros2[y]] + ", "
}
main = main.substring(0,main.length-2);
}
else //Affichage à coté de la bonne réponse
{
if (reponses[x] == "") reponses[x]='""';
main += reponses[x] + "</B></TD> <TD><B>" + questions[x][questions[x].length-1]
}
main += "</B></TD>";
main += "</TR>";
}
main += "</TABLE>";
main += "<BR><INPUT type='button' value='Recommencer' onclick='init()'>"
document.getElementById("main").innerHTML = main; //Copie du code dans le div Main
rafraichir_details("final");
}
function rafraichir_details(moment) // Rafrachis les informations dans la barre du bas
{
if (aff_courant > nbFaites)
{
nbFaites = aff_courant
}
nbBonneRep = 0;
if (correction_auto == 1 || moment == "final")
{
for (x=0;x<nbFaites;x++)
{
if (reponses[x] == questions[x][(questions[x].length-1)]) //Addition des bonne réponses
{
nbBonneRep += 1
}
}
var details;
details = "Score " + moment + " : " + nbBonneRep + " / " + nbFaites;
if (aff_courant != 0)
{
details += " (" + Math.round((nbBonneRep/nbFaites*100)*10)/10 + "%)";
}
}
else //dans le cas d'une correction non-automatic le résultat n'est pas affiché
{
details = " ";
}
document.getElementById("details").innerHTML = details;
}
function suiv() //Bouton Suivant
{
enregistre_rep()
if (aff_courant < questions.length - 1)
{
aff_courant += 1; //Changement du compteur de la question courrante
affichage(aff_courant); //Changement de l'affichage de la question
if (correction_auto == 1)
{
document.getElementById("btnPrec").disabled = true;
}
else //Dans le cas où la correction nest pas automatisé, l'utilisateur peut tjrs revenir à la question précédente
{
document.getElementById("btnPrec").disabled = false;
}
}
else if (aff_courant == questions.length-1)//S'il s'agit de la dernière question les 2 boutons sont bloqués
{
aff_courant += 1;
aff_resultat();
document.getElementById("btnPrec").disabled = true;
document.getElementById("btnSuiv").disabled = true;
}
}
function prec() //Bouton Précédant
{
enregistre_rep()
if (aff_courant > -1)
{
aff_courant -= 1; //Changement du compteur de la question courrante
affichage(aff_courant); //Changement de l'affichage de la question
document.getElementById("btnSuiv").disabled = false;
if (aff_courant == 0)
{
document.getElementById("btnPrec").disabled = true;
}
}
}
function enregistre_rep() //Enregistrement des réponses saises ...
{
rep = "";
if (aff_courant != questions.length)
{
choix = questions[aff_courant][1].split(separateur);
if (choix.length > 1)
{
for (x=0;x<choix.length;x++) //Ajout de ou des l'index des réponses
{
if (document.getElementById("rep"+x).checked)
{
rep += x + ",";
}
}
rep = rep.substring(0,rep.length-1); //Enleve la vergule de trop
}
else
{
rep += document.getElementById("reponse").value
}
reponses[aff_courant] = rep //Stockage de la réponse
}
}
</SCRIPT>
</HEAD>
<BODY onload="init();">
<FORM name="form">
<TABLE width="50%" border="0">
<TR>
<TD colspan="3"><DIV id="question"></DIV></TD>
</TR>
<TR>
<TD colspan="3"><HR></TD>
</TR>
<TR>
<TD><INPUT type="button" id="btnPrec" value="<" onclick="prec();" disabled="true"></TD>
<TD><DIV id="main"></DIV></TD>
<TD align="right"><INPUT type="button" id="btnSuiv" value=">" onclick="suiv();"></TD>
</TR>
<TR>
<TD colspan="3"><HR></TD>
</TR>
<TR>
<TD colspan="3"><DIV id="details"></DIV></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Conclusion :
Merci de faire des commentaires sur le fonctionnement du script ...
il a sans doutes plusieurs trucs à optimiser.
Codes Sources
A voir également
- Js diff
- Diff javascript - Meilleures réponses
- Code diff - Meilleures réponses
- Type de projet VC++ qui supporte les sockets ✓ - Forum - C
- Delphi type - Conseils pratiques - Delphi
- Type mismatch - Forum - Visual Basic
- Type de blocage : cross-thread - Conseils pratiques - C# / .NET
- Php type enum - Conseils pratiques - PHP
4 janv. 2006 à 21:04
4 janv. 2006 à 07:54
Je veux simplement dire, que c'est lourd à maintenir par un non informaticien par exemple, et source d'erreurs.
Une base de données (Mysql, Access, Oracle, ...) serait, à mon avis, la bienvenue.
Cela n'enlève en rien l'utilité de ta source.
Il faut juste continuer son développement.
Je te mets 7/10 pour t'encourager.
à +
- Messages postés
-
1044
- Date d'inscription
- lundi 7 mars 2005
- Statut
- Membre
- Dernière intervention
- 13 juillet 2010
74 janv. 2006 à 04:40
4 janv. 2006 à 04:24
où est le besoin de base de donnée?
2 janv. 2006 à 08:46
Le support d'une base de données ou même un fichier CSV serait le bienvenue.
Bonne année !
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.