Questionnaire supportant diff. types de questions

Soyez le premier à donner votre avis sur cette source.

Vue 28 365 fois - Téléchargée 1 018 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...

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

Ajouter un commentaire

Commentaires

Messages postés
102
Date d'inscription
mardi 15 mars 2005
Statut
Membre
Dernière intervention
9 juin 2006

là je te saisi ... et dernière chose pour les fichiers CSV t'aurais-tu un exemple avec un js (lien)
Messages postés
97
Date d'inscription
lundi 26 novembre 2001
Statut
Membre
Dernière intervention
24 février 2012

Bonjour,

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
6
Le générateur marche bien c'est simpa de pouvoir en générer plutôt que de juste voir un questionnaire déjà fait.
Messages postés
102
Date d'inscription
mardi 15 mars 2005
Statut
Membre
Dernière intervention
9 juin 2006

Je vois pas ce que tu veux dire GLAD. C'est juste une série de question.
où est le besoin de base de donnée?
Messages postés
97
Date d'inscription
lundi 26 novembre 2001
Statut
Membre
Dernière intervention
24 février 2012

Pourquoi faire simple qd on peut faire compliqué...
Le support d'une base de données ou même un fichier CSV serait le bienvenue.
Bonne année !
Afficher les 6 commentaires

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.