Questionnaire supportant diff. types de questions

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (PhiL666)