@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);
}
});
}