Quiz complet et facilement personnalisable

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 756 fois - Téléchargée 26 fois

Contenu du snippet

Bonjour à tous.

Voici mon premier code source. Il n'est pas bien difficile, et très sincèrement, il est très facile à comprendre.
Il consiste tout simplement à répondre à 10 questions, ou plus, et à regarder le résultat. Le quiz est facilement personnalisable puisque vous pouvez (bien sûr) modifier son design. Il ne vous reste plus qu'à copier ce code et à le coller dans les balises <body> et </body>. Puis, vous pourrez modifier à votre guise les questions, les réponses et les messages d'alerte.

Merci de votre future indulgence pour un programmeur débutant.

Source / Exemple :


<script language="JavaScript">
 
var rep = new Array;
var faite = new Array;
var score = 0;
 

rep[1] = "a"; // Ici, insérer les réponses aux questions posées.
rep[2] = "a";
rep[3] = "a";
rep[4] = "a";
rep[5] = "a";
rep[6] = "a";
rep[7] = "a";
rep[8] = "a";
rep[9] = "a";
rep[10] = "a";

function Engine(question, reponse) {
        if (reponse != rep[question]) {
                if (!faite[question]) {
                        faite[question] = -1;
                        alert("Mauvaise réponse ! Votre score est de : " + score + ".  La bonne reponse est la -" + rep[question] + "-");
                        }
                else {
                        alert("Vous avez déjà répondu à cette question !");
                        }
                }
        else {
                if (!faite[question]) {
                        faite[question] = -1;
                        score++;
                        alert("Bonne réponse ! Votre score est de " + score + " point(s) !");
                        }
                else { 
                        alert("Vous avez déjà répondu à cette question !");
                        }
                }
}
 
function NextLevel () {
        if (score >= 11) {
                alert("Ce n'est pas beau de tricher ! ");
                }
        if (score > 8 && score <11) {
                alert(score + "/10 " + "Bravo !") // La phrase-alerte qui félicite le joueur ayant un score de 10/10.
                self.location=""
                }
        if (score >= 6 && score <= 7) {
                alert(score + "/10 " + "- Pas mal, mais un peu d'entraînement ne ferait pas de mal !");
                }
        if (score >= 4 && score <= 5) {
                alert(score + "/10 " + "- C'est moyen...");
                }
        if (score >= 2 && score <= 3) {
                alert(score + "/10 " + "- Non, c'est pas encore ça... Vous avez du chemin à faire avant d'être incollable !");
                }
        if (score < 2) {
                alert(score + "/10 " + "- Eh bien, c'est catastrophique !" );
                }
 

faite = new Array;
score = 0;
document.quest.reset();
}

  </script>
                          <!-- Fin du script -->

                          <!-- Debut du questionnaire -->
                          <span class="Style2 Style19"><strong>Quiz</strong></span><font face="Verdana"><span style="font-size: 8pt;"><b><br />
                          </b></span></font><br />
                          <br />
                          <br />
                          <br />

                          <span class="Style1"><span class="Style16"><strong>- Question 1 </strong></span><br />
                          <font face="Verdana">
                          <input onclick="Engine(1, this.value)" value="a" name="1" type="radio"> 
                          a) Réponse a<br>
    <input onclick="Engine(1, this.value)" value="b" name="1" type="radio"> 
    b) Réponse b <br>
    <input onclick="Engine(1, this.value)" value="c" name="1" type="radio"> 
    c) Réponse c </font></span><font face="Verdana"><br />
                          <br>
                          <span class="Style1"><b>- Question 2 <br />
                          </b>
                          <input onclick="Engine(2, this.value)" value="a" name="2" type="radio">
                          a) Réponse a <br>
                          <input onclick="Engine(2, this.value)" value="b" name="2" type="radio">
                          b) Réponse b <br>
                          <input onclick="Engine(2, this.value)" value="c" name="2" type="radio">
                          c) Réponse c </span></font>
                         <p align="left" class="Style1"><font face="Verdana"><b>- Question 3 <br />
  </b>
         <input onclick="Engine(3, this.value)" value="a" name="3" type="radio">
         a) a <br>
         <input onclick="Engine(3, this.value)" value="b" name="3" type="radio">
          b) b <br>
          <input onclick="Engine(3, this.value)" value="c" name="3" type="radio">
   c) c </font></p>
                         <p align="left" class="Style1"><font face="Verdana"><b>- Question 4</b><br>
        <input onclick="Engine(4, this.value)" value="a" name="4" type="radio"> 
  a) a <br>
  <input onclick="Engine(4, this.value)" value="b" name="4" type="radio"> 
  b) b <br>
  <input onclick="Engine(4, this.value)" value="c" name="4" type="radio">
   c) c </font></p>
                         <p align="left" class="Style1"><font face="Verdana"><b>- Question 5 <br />
  </b>
      <input onclick="Engine(5, this.value)" value="a" name="5" type="radio"> 
    a) a <br>
    <input onclick="Engine(5, this.value)" value="b" name="5" type="radio">
     b) b<br>
     <input onclick="Engine(5, this.value)" value="c" name="5" type="radio">
     c) c </font></p>
                         <p align="left" class="Style1"><font face="Verdana"><b>;- Question 6 <br />
  </b>
         <input onclick="Engine(6, this.value)" value="a" name="6" type="radio">
         a) a <br>
         <input onclick="Engine(6, this.value)" value="b" name="6" type="radio"> 
         b) b <br>
         <input onclick="Engine(6, this.value)" value="c" name="6" type="radio">
          c) c </font></p>
                         <p align="left" class="Style1"><font face="Verdana"><b> - Question 7 <br />
  </b>
         <input onclick="Engine(7, this.value)" value="a" name="7" type="radio">
         a) a <br>
         <input onclick="Engine(7, this.value)" value="b" name="7" type="radio">
          b) b <br>
          <input onclick="Engine(7, this.value)" value="c" name="7" type="radio">
           c) c </font></p>
                         <p align="left" class="Style1"><font face="Verdana"><b>8 - Question 8 <br />
  </b>
      <input onclick="Engine(8, this.value)" value="a" name="8" type="radio">
         a) a <br>
         <input onclick="Engine(8, this.value)" value="b" name="8" type="radio">
          b) b<br>
          <input onclick="Engine(8, this.value)" value="c" name="8" type="radio">
           c) c</font></p>
                         <p align="left" class="Style1"><font face="Verdana"><b>- Question 9<br />
  </b>
      <input onclick="Engine(9, this.value)" value="a" name="9" type="radio">
         a) a <br>
         <input onclick="Engine(9, this.value)" value="b" name="9" type="radio">
          b) b <br>
          <input onclick="Engine(9, this.value)" value="c" name="9" type="radio">
           c) c </font></p>
                         <p align="left" class="Style1"><font face="Verdana"><b>- Question 10 <br />
  </b>
      <input onclick="Engine(10, this.value)" value="a" name="10" type="radio">
     a) a <br>
    <input onclick="Engine(10, this.value)" value="b" name="10" type="radio">
    b) b <br>
    <input onclick="Engine(10, this.value)" value="c" name="10" type="radio">
     c)  c <br>
     <!-- Fin du questionnaire -->
  </font></p>
  <p align="left"><font face="Verdana"><span style="font-size: 8pt;">
    <input name="Resultat" style="border: 1px dotted ; background: transparent none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" onclick="NextLevel()" value="Résultat" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" 0="" type="button">
  </span></font></p>
  <p align="left">
  <script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
     SymRealOnUnload();
}

function SymOnLoad()
{
  if(SymRealOnLoad != null)
     SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

Conclusion :


Eh bien voilà, c'est fait. J'espère que ce code vous satisfaira. Pour le tester, vous pouvez aller sur http://thypot.free.fr/quiz.php

Je vous remercie d'avance pour vos commentaires constructifs.

A voir également

Ajouter un commentaire

Commentaires

kiki2sirom
Messages postés
153
Date d'inscription
mardi 17 août 2004
Statut
Membre
Dernière intervention
23 décembre 2010

c'est pas une question de "c'est mieux comme ça"
c'est une question de :
c'est comme ça que ça s'écrit pour être valide XHTML

même si l'idée est louable, le HTML est loin d'être clean, mais je dis ça pour l'aider et non pour le casser.
j'indique juste comment il faut écrire pour aider à progresser, c'est un site d'entraide phpcs...

cordialement

håggåg

PS : en plus j'avais oublié ça : marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" dans le input type="button" n'existe pas..., tu peux mettre ça dauns tag body mais pas dans un input.
cs_linkid
Messages postés
107
Date d'inscription
mardi 29 novembre 2005
Statut
Membre
Dernière intervention
8 mai 2009

Pour les
, c'est mieux comme ça :
...
Je ne voit pas pourquoi il changerait...
kiki2sirom
Messages postés
153
Date d'inscription
mardi 17 août 2004
Statut
Membre
Dernière intervention
23 décembre 2010

j'avais pas vu ça aussi :

ligne 169 : 0="", à enlever

håggåg
kiki2sirom
Messages postés
153
Date d'inscription
mardi 17 août 2004
Statut
Membre
Dernière intervention
23 décembre 2010

bon je vais donc être indulgent puisque c ta 1re source :

* d'abord le niveau Initié, c un peu ambitieux, tu peux le redescendre à Débutant justement ;)
* ce qui est <script>...</script> se place entre la balise <head> et </head> avant le body
* <script language="JavaScript"> doit être remplacé par <script type="text/javascript">
* document.quest.reset(); est une erreur, 'quest' n'existe pas : erreur javascript logique
faire un <form name='quest'>...</form> suffit
* erreur javascript : 'SymRealWinOpen est indéfini', rajouter var SymRealWinOpen; suffit
*
partout à la place des
, tu l'as mis parfois mais pas tout le temps
* ligne 80 :
: hum, ça sert à quoi ? à rieng !!

Bref, en résumé beaucoup de HTML pour pas grand chose, beaucoup de span, font ... par exemple si tout est en Verdana, déclare le une seule fois, et non à chaque ligne...

Je ne note pas.

Voilà pour les remarques

håggåg

PS : pour valider son code, cf le W3C validator
mielvanille
Messages postés
1
Date d'inscription
mardi 27 juin 2006
Statut
Membre
Dernière intervention
27 juin 2006

J'adore ce script mercI ...

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.