QCM sans php

vavoir
Javascript

Bonsoir,

Je cherche à mettre en place un petit QCM très simple HTML, CSS et JQUERY. Quand la personne clique sur lien deux son doive être jouer mais pas en même temps et bien sur une fois les sons jouer on passe à la question suivante.
J'ai déjà un code me permettant de jouer deux son différent si il s'agit d'une bonne ou d'une mauvaise réponse.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
  <div id="wrapaudio" ></div>
    <div class="audiocontrols">
        <a href="#qcm" onclick="reponse('good')" class="play">oui</i></a>
        <a href="#qcm" onclick="reponse('bad')" class="play">non</i></a>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
    function reponse(reponse) {

        if(reponse == "good"){
            document.getElementById('wrapaudio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/br.mp3" type="audio/mp3" /></audio>';
        }else{
            document.getElementById('wrapaudio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
        }
     }
    </script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

J'y connais rien en JAVASCRIPT mais je me doute qu'il va falloir passer par une fonction un peu comme avec PHP, j'ai déjà les conditions ^^

Le projet:
Une question texte et audio s'affiche sur l'écran et les gens doive avec leur doigt sur un écran tactile toucher la bonne image. Si il touche la bonne image on ajoute +1 a une variable score quand score arrive à 4 c'est que la personne à répondu à toute les question. Quand la personne touche la mauvaise image elle reste sur la même question jusqu’à trouvé la bonne réponse. Une fois score a 4 on affiche une autre page et si au bout de 2min la personne n'a pas appuyer sur le bouton "recommencer le QCM" on revient sur l’écran d'accueil.
L'écran d'accueil contient un simple bouton "commence le qcm".

32 réponses

vavoir
Auteur
Réponse acceptée

@Natà merci pour le code tout est ok.

Petite précision le QCM est destiner a tout public jeune ou moins jeune il la avant tout pour informer sur l’événement dans le quel il seras implantée et de ce fait les gens ne vont pas forcement regarder le code source qui plus est et je le rappel encore se QCM et destiner à un écran tactile. Je ne l'ai pas fait pas PHP car il fallait qu'il soit facilement transportable sans avoir non plus a configuré un environnement.

Pour résumé j'avais besoin d'un QCM transportable sur une clé par exemple, sans base de donné et facile à implanté sur n'importe quel PC relier un écran tactile.

voici les codes:

HTML:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>BlogDesign</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
    Votre score : <div class="score">0</div>
    <div class="message"></div>
        <div class="qcm">
      <div class="question"></div>
      <div class="propositions"></div>
    </div>
    <audio></audio>

    </body> 
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

</html>

JS: 

$(function(){
//On définit un tableau qui contiendra les questions
questions = ];
//Puis on définit chaque question
questions[0] = {
  'question':"Ou se trouve le chat ?",
  "propositions" : {'chien':false,'chat':true}
},
questions[1] = {
  'question':"Ou se trouve le chien ?",
  "propositions" : {'chien':true,'chat':false}
}
//On initialise la variable du score
score = 0;
// On appelle la fonction pour afficher une nouvelle question
nouvelleQuestion();

});

function nouvelleQuestion(){
  //Si le tableau des questions est vide, le QCM est terminé
  if(questions.length==0){
    $('.message').html('bravo vous avez répondu correctement à toutes les questions, rafraichir la page pour recommencer. ')
    $('.question').empty();
    $('.propositions').empty();

    setTimeout(function(){
      location.reload()
    },5000);
  }
  //On tire un chiffre au hasard entre 0 et le nombre d'entrées du tableau
  num = Math.floor(Math.random()*questions.length);

  //On récupère une question au hasard dans le tableau
  question = questions[num];
  //On l'affiche
  $('.question').html(question'question']);
  //On vide les propositions de la question précédente
  $('.propositions').empty();
  //On affiche chaque proposition
  $.each((question'propositions']),function(index,value){
    $('.propositions').append('<div class="proposition" data-animal="'+index+'"><img src="img/'+index+'.jpg"></div>');
  });
  //Lorsqu'on clique sur une réponse
  $('.proposition').on('click',function(){
    animal = $(this).attr('data-animal');
    // Si la réponse est bonne
    if(question'propositions'][animal]==true){

      //On rajoute un point à la variable score
      score++;
      //On la modifie
      $('.score').html(score);
      // On retire la question du tableau pour ne pas qu'elle ressorte si on y a déjà répondu
      questions.splice(num,1);
      // On informe le joueur que la réponse est bonne

      $('.message').html('<div class="alert alert-success" >Bonne réponse !</div>');
      $(function(){
        $('audio').html('<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/br.mp3" type="audio/mp3" /></audio>');
        setTimeout(function(){
          $('audio').html('<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/'+animal+'.mp3" type="audio/mp3" /></audio>');

        },3000);
      });
      setTimeout(function(){
        $('.alert').hide();
        nouvelleQuestion();
        },2000);

    }
    // Si la réponse est mauvaise.
    else{
      // On applique autant d'instructions que nécéssaire.

      $('.message').html('<div class="alert alert-error" ><button type="button" class="close" data-dismiss="alert">×</button>Mauvaise réponse !</div>');
      $('audio').html('<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>');
       setTimeout(function(){
            $('.alert').hide();
            },2000);
    }
  });
}
Natà

Salut,
Si tu n'y connais rien en Javascript, c'est pas forcément une mauvaise chose parce qu'il existe des librairies qui en facilitent l'écriture, je pense notamment à jQuery.
Ensuite, pour le fonctionnement de ton QCM en lui même, ça peut être très simple à mettre en place.
Je procéderais de la sorte:

  • Un tableau comprenant les questions qui seront elles mêmes un tableau comprenant les propositions, la bonne avec une valeur à true et la mauvaise avec une valeur à false.
  • Et un autre tableau qui va se charger de récupérer les questions déjà posées afin de ne pas les reposer.
  • Et enfin un variable score qui comptabilisera les points.

Mais attention, le problème de ce genre de scripts qui sont gérés coté client c'est que les réponses seront forcément accessible par un inspecteur de code ou même en examinant le code source, ce qui fait qu'il sera beaucoup trop simple de tricher.
Maintenant si ça ne pose pas de problèmes je peux essayer de donner un coup de main. :)

vavoir
Auteur

@Natà comme je l'ai dit plus cela se feras sur un écran tactile et les gens ne save pas tous faire un clic droit en tactile et puis toute facon le qcm et plus la pour s'informaer de lévénement tout en s'amusant.

Je sais faire une tableau en PHP ses array() mais en JS je ne sais pas. shematiquement parlent voila a quoi tu pensse:

Question a posser:

  • question 2 = - reponse a, valeur = false
  • reponse b, valeur = true
  • question 3 = - reponse a, valeur = false

  • reponse b, valeur = true

    Question posser:

  • question = question 1

    var score = 0;

Je suis sur le bon chemin ?
Je précise que les question son textuel mais que les proposition de réponse sont des image !

Natà

Salut,
J'ai trouvé le challenge intéressant et je m'y suis penché de plus près, j'ai créé un petit script qui permet de faire ce que tu recherches aussi bien avec des images qu'avec des réponses texte mais je dois dire que la je bug un peu pour éviter de reposer les questions qui sont déjà tombées.
Je bosse encore un peu dessus et je te le partage.
Si tu veux essayer de ton coté, je te partage déjà le tableau des questions :

$(function(){
questions = ];
questions[0] = {
  'question':"Quelle est la capitale de l'Italie ?",
  "propositions" : {"Rome":true,'Marakech':false}
},
questions[1] = {
  'question':"Quelle est la couleur du soleil ?",
  "propositions" : {"Jaune":true,'Gris':false,"ça dépend des fois...":true}
},
questions[2] = {
  'question':"Combien font 2+2 ?",
  "propositions" : {"18":false,'4':true}
},
questions[3] = {
  'question':"Ou se trouve le chat ?",
  "propositions" : {'<img src="img/chien.jpg">':false,'<img src="img/chat.jpg">':true}
},
questions[4] = {
  'question':"Ou se trouve le chien ?",
  "propositions" : {'<img src="img/chien.jpg">':true,'<img src="img/chat.jpg">':false}
}

score = 0;

});
vavoir
Auteur

@Natà pourquoi ne pas semblement pas a la question suivante si score diffrent de score je m'expliquee

avant la question score = 0 si bonne reponse +1 a score du coup score vaut 1 donc si score et different de score au debut on passe a la question suivante sinon on reste sur la meme question.
On aussi dire qu'on passe à la question suivante que si reponse = a true

Natà

C'est la même chose en réalité puisque l'instruction qui va dire de rajouter un point est la même que celle qui va passer à la question suivante.
Par contre faut bien prendre en compte que tout le traitement se fait sans rechargement de la page, c'est pour ça que c'est délicat au niveau des questions qui ne doivent plus être posées une fois qu'on y a répondu.

vavoir
Auteur

J'ai stylisé un peu ma page maintenant comment je fait si je veux affiche les question ?

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
  <div id="wrapaudio" ></div>
    <div class="wrap row container" >
        <div class="span12" >
            <h1>Appuie sur la vache</h1>
        </div>
        <div class="span12" >
            <div class="img">
                <p>
                    <a href="#mouton" onclick="" ><img src="img/mouton.jpg" width="150" ></a>
                    <a href="#vache" onclick="" ><img src="img/vache.jpg" width="150" ></a>
                </p>
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/qcm.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Tu dit qu'on ne recharge pas la page mais peut être que l'ajax pourrait nous aidé non ?

Natà

Non, pas besoin d'ajax.^^
Tiens, je te link les fichiers via mon drive, ça te donnera une idée plus précise.
C'est encore un sacré bordel non commenté, pas de mise en page ni rien mais dis moi si c'est ce résultat que tu attends plus ou moins.
Par ici ->

Je dois m'absenter un petit instant, je reviens dans la soirée. :)

vavoir
Auteur

je rappel juste qu'un son d'autre aussi jouer ! Je vien teste c'est pas mal il faut juste remplacer les alert et afficher le meassge directemnt dans la page

vavoir
Auteur

j'ai commenté et j'ai remplacer les alertes et j'ai même réussi à vider les div une fois le qcm finit !

/*
    Liste des questions
*********************************************************************************************************************** /
    $(function(){
        questions = ];
        questions[0] = {
          'question':"Quelle est la capitale de l'Italie ?",
          "propositions" : {"Rome":true,'Marakech':false}
        },
        questions[1] = {
          'question':"Quelle est la couleur du soleil ?",
          "propositions" : {"Jaune":true,'Gris':false,"ça dépend des fois...":true}
        },
        questions[2] = {
          'question':"Combien font 2+2 ?",
          "propositions" : {"18":false,'4':true}
        },
        questions[3] = {
          'question':"Ou se trouve le chat ?",
          "propositions" : {'<img src="img/chien.jpg">':false,'<img src="img/chat.jpg">':true}
        },
        questions[4] = {
          'question':"Ou se trouve le chien ?",
          "propositions" : {'<img src="img/chien.jpg">':true,'<img src="img/chat.jpg">':false}
        }

        questions[5] = {
          'question':"Ou se trouve ta mere",
          "propositions" : {'Dans la cuisine':true,'chez ta soeur':false}
        }
        score = 0;
        nouvelleQuestion();

    });
/* END
*********************************************************************************************************************** /
function nouvelleQuestion(){
  if(questions.length==0){
    $('.message').html('bravo vous avez répondu correctement à toutes les questions, rafraichir la page pour recommencer. ')
    $('.question').empty();
    $('.propositions').empty();
  }
  num = Math.floor(Math.random()*questions.length);

  question = questions[num];
  $('.question').html(question'question']);
  $('.propositions').empty();
  $.each((question'propositions']),function(index,value){    
    $('.propositions').append('<div class="proposition">'+index+'</div>');
  });
  $('.proposition').on('click',function(){
    if(question'propositions']$(this).html()]==true){

      score++;
      $('.score').html(score);
      questions.splice(num,1);
      console.log(questions);
      $('.message').html('Bonne réponse !');
      nouvelleQuestion();
    }
    else{
      $('.message').html('Mauvaise réponse !');
    }
  });
}
Natà

Hé bah content que ça te plaise^^
Oui je sais pour les alertes c'est pas vraiment esthétique mais comme je l'ai dit c'est un ébauche, pour voir si ça bug pas et tout et tout, libre à toi de remplacer comme bon te semble et je vois que tu as bien compris le principe.
Pour le son, je n'ai jamais fait ça donc je ne te serais pas d'une grande utilité, mais en gros il te suffit de rajouter une instruction quand tu vérifies la réponse.
Attention cependant, jQuery a un comportement bizarre lorsque la proposition est une image, il ne faut surtout pas inverser les simple/double guillemets sinon ça plante.
Aussi tu n'as plus besoin de la ligne

console.log(questions);

C'est pour l'outil de débug du navigateur, j'ai oublié de la retirer.

vavoir
Auteur

@Natà j'aimerais aussi lorsque le QCM et fini recharger la page au bout de 2min

pour jouer l eson je fait juste

document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
vavoir
Auteur

je comprend pouquoi quand je cliquer sur le mouton il me met mauvaise reponse ???

/*
    Liste des questions
*********************************************************************************************************************** /
    $(function(){
        questions = ];
        questions[0] = {
          'question':"Appuie sur le mouton ?",
          "propositions" : {'<a href="#qcm" ><img src="img/mouton.jpg" ></a>':true, '<a href="#qcm" ><img src="img/vache.jpg" ></a>':false}
        },
        questions[1] = {
          'question':"Quelle est la couleur du soleil ?",
          "propositions" : {"Jaune":true,'Gris':false,"ça dépend des fois...":true}
        },
        score = 0;
        nouvelleQuestion();

    });
/* END
*********************************************************************************************************************** /
function nouvelleQuestion(){
  if(questions.length==0){
    $('.message').html('<h1>Bravo vous avez répondu correctement à toutes les questions.</h1><p style="margin-top: 100px;"><a href="#qcm" class="btn" >Recommencer</a></p>')
    $('.question').empty();
    $('.propositions').empty();
  }
  num = Math.floor(Math.random()*questions.length);

  question = questions[num];
  $('.question').html(question'question']);
  $('.propositions').empty();
  $.each((question'propositions']),function(index,value){    
    $('.propositions').append('<div class="proposition">'+index+'</div>');
  });
  $('.proposition').on('click',function(){
    if(question'propositions']$(this).html()]==true){

      score++;
      $('.score').html(score);
      questions.splice(num,1);
      $('.message').html('<div class="alert alert-success" ><button type="button" class="close" data-dismiss="alert">×</button>Bonne réponse !</div>');
      document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/br.mp3" type="audio/mp3" /></audio>';
      nouvelleQuestion();
    }
    else{
      $('.message').html('<div class="alert alert-error" ><button type="button" class="close" data-dismiss="alert">×</button>Mauvaise réponse !</div>');
      document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
    }
  });
}
/*
function reponse(reponse) {

        if(reponse == "good"){
            document.getElementById('wrapaudio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/br.mp3" type="audio/mp3" /></audio>';
        }else{
            document.getElementById('wrapaudio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
        }
     }
*/
Natà

C'est à cause du <a href="">...
Ca doit faire un conflit avec jquery, mets simplement '<img src="img/mouton.jpg" >'
Ensuite pour qu'il aie le même comportement qu'un lien tu stylises la classe proposition :

.proposition{
cursor:pointer;
}

Pour ce qui est du rechargement de la page tu modifies ça 

if(questions.length==0){
    $('.message').html('<h1>Bravo vous avez répondu correctement à toutes les questions.</h1><p style="margin-top: 100px;"><a href="#qcm" class="btn" >Recommencer</a></p>')
    $('.question').empty();
    $('.propositions').empty();
  }

en 

if(questions.length==0){
    $('.message').html('<h1>Bravo vous avez répondu correctement à toutes les questions.</h1><p style="margin-top: 100px;"><a href="#qcm" class="btn" >Recommencer</a></p>')
    $('.question').empty();
    $('.propositions').empty();
//cette fonction là
setTimeout(function(){
      location.reload()
    },120000);
  }
vavoir
Auteur

non j'ai retiré le lien sa ne change rien
edit
j'ai repris le meme code que toi et sa a remarché j'ai pas trouvé l'erreur ^^

Il reste deux probleme à réglé, recherché la page au bout de 2min quand le qcm et fini et jouer un deuxieme son 30sec apres avoir jouer le premier.

Natà

Je t'ai montré juste au dessus pour rafraîchir la page au bout de deux minutes, par contre je ne comprends pas la deuxième partie de ta question "jouer un deuxieme 30sec apres avoir jouer le premier".

vavoir
Auteur

Il reste 1 probleme à réglé jouer un deuxieme son 30sec apres avoir jouer le premier.

vavoir
Auteur

j'ai vu q'on pouvais changer les attributs avec

$("#audio").attr('src',"son2.mp3");

il faut juste retarder le script 30sec avant de passer à cette ligne

Natà

Non il te suffit de te servir de la même fonction setTimeout

setTimeout(function(){
      document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
    },30000);
vavoir
Auteur

Seul soucis que le son 2 dépend de la réponse. SInon C'est exactement ce que je voulais il ne manque que ce petit détails encore merci !

Natà

Pas de soucis, bon courage à toi. :)

vavoir
Auteur

mais comment je peux attribuer ce deuxième son ?

Natà

Et bien tu fais comme je t'ai dit avec le setTimeOut dans le cas ou la réponse est fausse:
tu remplace

else{
      $('.message').html('<div class="alert alert-error" ><button type="button" class="close" data-dismiss="alert">×</button>Mauvaise réponse !</div>');
      document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
    }

par: 

else{
      $('.message').html('<div class="alert alert-error" ><button type="button" class="close" data-dismiss="alert">×</button>Mauvaise réponse !</div>');
      document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
setTimeout(function(){
      document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
    },30000);
    }
vavoir
Auteur

Non je parle quand la réponse et bonne on joue un son pour dire que la réponse est bonne puis on jouer un deuxieme son qui fait référence a l'image de la réponse exemple le "mouton"

$('.proposition').on('click',function(){
    if(question'propositions']$(this).html()]==true){

      score++;
      $('.score').html(score);
      questions.splice(num,1);
      $('.message').html('<div class="alert alert-success" >Bonne réponse !</div>');
      document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/br.mp3" type="audio/mp3" /></audio>';
    setTimeout(function(){
        document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mouton.mp3" type="audio/mp3" /></audio>';
    },1500);
        setTimeout(function(){
        $('.alert').hide();
        nouvelleQuestion();
        },2000);
    }
    else{
      $('.message').html('<div class="alert alert-error" ><button type="button" class="close" data-dismiss="alert">×</button>Mauvaise réponse !</div>');
      document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
      setTimeout(function(){
        document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mmm.mp3" type="audio/mp3" /></audio>';
        },1000);
            setTimeout(function(){
            $('.alert').hide();
            },2000);
    }
  });

Or il peut s'agir du monton comme bonne réponse mais la question suivante sa seras par exemple une vache donc il faut le bruit de la vache.

Natà

Oula, ha oui j'avais pas compris comme ça.
Alors, le plus simple serait encore d'ajouter un data-animal du nom de l'animal au moment ou tu l'affiches et capturer cette donnée lorsque tu cliques dessus de manière à lui faire jouer un son.

<div class="proposition" data-animal="vache"></div>
$('.proposition').on('click',function(){
animal = $(this).attr('data-animal');
document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/'+animal+'.mp3" type="audio/mp3" /></audio>';
});

Mais le truc c'est que ça devient beaucoup plus compliqué que ce que tu avais annoncé au départ et si j'avais su tout ça avant j'aurais probablement suivi une autre logique.

vavoir
Auteur

j'ai placé le code mais cela ne change rien je n'arrive pas a jouer le deuxieme son

/*
    Liste des questions
*********************************************************************************************************************** /
    $(function(){
        questions = ];
        questions[0] = {
          'question':"Appuie sur le mouton",
          "propositions" : {'<img src="img/vache.jpg" >':false,'<img src="img/mouton.jpg" data-animal="mouton">':true}
        },
        questions[1] = {
          'question':"Appuie sur l'ordinateur",
          "propositions" : {'<img src="img/ordi.jpg" data-animal="ordi">':true,'<img src="img/police.jpg">':false}
        },
        questions[2] = {
          'question':"Appuie sur la vache",
          "propositions" : {'<img src="img/vache.jpg" data-animal="vache">':true,'<img src="img/police.jpg">':false}
        },
        questions[2] = {
          'question':"Appuie sur la police",
          "propositions" : {'<img src="img/vache.jpg">':false, '<img src="img/police.jpg" data-animal="police">':true, '<img src="img/mouton.jpg">':false}
        },
        score = 0;
        nouvelleQuestion();

    });
/* END
*********************************************************************************************************************** /
function nouvelleQuestion(){
  if(questions.length==0){
    $('.message').html('<h1>Bravo vous avez répondu correctement à toutes les questions.</h1><p style="margin-top: 100px;"><a href="index.html" class="btn" >Recommencer</a></p>')
    $('.question').empty();
    $('.propositions').empty();
    setTimeout(function(){
      location.reload()
    },120000);
  }
  num = Math.floor(Math.random()*questions.length);

  question = questions[num];
  $('.question').html(question'question']);
  $('.propositions').empty();
  $.each((question'propositions']),function(index,value){    
    $('.propositions').append('<span class="proposition">'+index+'</span>');
  });
  $('.proposition').on('click',function(){
    if(question'propositions']$(this).html()]==true){

      score++;
      $('.score').html(score);
      questions.splice(num,1);
      $('.message').html('<div class="alert alert-success" >Bonne réponse !</div>');
      document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/br.mp3" type="audio/mp3" /></audio>';
    setTimeout(function(){
        document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mouton.mp3" type="audio/mp3" /></audio>';
    },1500);
        setTimeout(function(){
        $('.alert').hide();
        nouvelleQuestion();
        },2000);
    }
    else{
      $('.message').html('<div class="alert alert-error" ><button type="button" class="close" data-dismiss="alert">×</button>Mauvaise réponse !</div>');
      document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
      setTimeout(function(){
        $('.proposition').on('click',function(){
        animal = $(this).attr('data-animal');
            document.getElementById('audio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/'+animal+'.mp3" type="audio/mp3" /></audio>';
        });
        },1000);
            setTimeout(function(){
            $('.alert').hide();
            },2000);
    }
  });
}
/*
function reponse(reponse) {

        if(reponse == "good"){
            document.getElementById('wrapaudio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/br.mp3" type="audio/mp3" /></audio>';
        }else{
            document.getElementById('wrapaudio').innerHTML='<audio preload="auto" autoplay="autoplay" autobuffer id="audio"><source id="src" src="son/mr.mp3" type="audio/mp3" /></audio>';
        }
     }
*/
Natà

Ouais mais non, la tu t'embrouilles, comme je l'ai dit étant donné que l'énoncé du problème est maintenant différent, la solution sera différente aussi.
Tu peux modifier le code jusqu'à ce que ça marche mais il sera encore moins long et moins compliqué de revoir le code du début...

Natà

Tiens, j'ai mis à jour mon drive j'ai fait quelques modifications, il ne te restera plus qu'à adapter les temps de settimeout et ça devrait le faire:
Par là ->
J'ai même fait un .zip pour que ça soit plus simple à télécharger.

LesTutossUE4

Je ne veux pas casser l’ambiance mais tu ferais mieux de faire en PHP. Le problème de JQuery ou de Javascript est qu'il suffit de regarder le code pour savoir la bonne réponse :/.

Natà

Salut Sunny,
C'est bien ce que je lui ai répondu, mais il s'agit en fait d'un jeu éducatif pour les enfants, compte tenu des questions posées, je dirais entre 3 et 6 ans, qui est censé tourner sur tablette donc ça n'a pas vraiment d'importance.
Et si toutefois un de ces enfants arrive quand bien même à "tricher", son premier hack lui vaudra peut-être une belle carrière dans l'informatique :p .

LesTutossUE4

Oui pardon je n'ai pas lu tout le topic ^^, j'ai répondu sans regarder.
Oui c'est sur que si ce sont des enfants de cet âge, il n'y a donc pas de soucis :).
Autant pour moi :P

François Trg

Bonjour,

Je remonte ce sujet un peu ancien car je suis en train d'apprendre à coder et pour m'amuser j'essaie de faire un quiz.

J'ai regardé avec intérêt le code (merci, c'est super instructif) et j'ai essayé de le modifier à ma façon.

Seulement, je bloque sur un point : je voudrais changer la couleur du div proposition de la bonne réponse (true dans le tableau) en vert, en passant par .addClass(). Mais je n'arrive pas à sélectionner le div proposition qui contient justement la bonne réponse pour lui appliquer la fonction...

Si quelqu'un peut m'aider, ce serait génial!

Voici le code :

$('.suivant').hide();
$('.bravo').hide();
$('.faux').hide();

$(function(){

//On définit un tableau qui contiendra les questions
questions = [];
//Puis on définit chaque question

questions[0] = {
  'question':"Combien le vignoble bordelais compte-t-il d'AOC?",
  "propositions" : {'10':false,'60':true,'100':false}
},
questions[1] = {
  'question':"Laquelle de ces appellations ne fait PAS partie du Medoc?",
  "propositions" : {'Saint-Emiliion':true,'Saint-Julien':false,'Saint-Estephe':false}
}
questions[2] = {
  'question':"Quelle est la proportion de vins rouges parmi les vins de Bordeaux?",
  "propositions" : {'40':false,'70':false,'90':true}
}
//On initialise la variable du score
score = 0;

// On appelle la fonction pour afficher une nouvelle question
nouvelleQuestion();

});

function nouvelleQuestion(){

  //Si le tableau des questions est vide, le QCM est terminé
  if(questions.length==0){
    $('.message').html('termine bonsoir')
    $('.question').empty();
    $('.propositions').empty();

    setTimeout(function(){
      location.reload()
    },5000);
  }

  //On tire un chiffre au hasard entre 0 et le nombre d'entrées du tableau
  num = Math.floor(Math.random()*questions.length);

  //On récupère une question au hasard dans le tableau
  question = questions[num];

  //On l'affiche
  $('.question').html(question['question']);

  //On vide les propositions de la question précédente
  $('.propositions').empty();

  //On affiche chaque proposition
  $.each((question['propositions']),function(index,value){
    $('.propositions').append('<div class="proposition" data-vin="'+index+'">'+index+'</div>');
  });

  //Lorsqu'on clique sur une réponse
  $('.proposition').on('click',function(){

    vin = $(this).attr('data-vin');

    // Si la réponse est bonne
    if(question['propositions'][vin]==true){

      //On rajoute un point à la variable score
      score++;

      //On la modifie
      $('.score').html(score);

      // On retire la question du tableau pour ne pas qu'elle ressorte si on y a déjà répondu
      questions.splice(num,1);

      // On informe le joueur que la réponse est bonne

      $('.bravo').show();

     $('.suivant').show();

     $('.suivant').click(function() {
         $('.bravo').hide();
         $('.suivant').hide();
         nouvelleQuestion(); 

     });

    }

    // Si la réponse est mauvaise.
    else{
      // On applique autant d'instructions que nécéssaire.

      $('.faux').show();

         $('.suivant').show();

        $('.suivant').click(function() {
         $('.faux').hide();
         $('.suivant').hide();
         nouvelleQuestion(); 

     });

    }
  });
}