Enchainement de questions et fonction de score ?
Bonjour, je souhaite faire un quiz dans lequel l'utilisateur doit choisir un évènement en fonction de la date qui s'affiche. J'ai crée ce code qui permet d'afficher des dates aléatoirement avec 3 évènements s'affichant en fonction de cette date. Un de ces évènement est correct. Comment faire un système qui permet un enchainement de questions, tout en enregistrant les réponses de l'utilisateur pour afficher le score a la fin ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ISN project History Guess'R</title>
</head>
<body>
<h1>TEST ISN 2 </h1>
<p id="demo"></p>
<div id="rep">
<!--<p id="bonnerep"></p>
<p id="prop2"></p>
<p id="prop1"></p>
-->
</div>
<script>
function autre(r,l) {
var p1 = Math.floor( l*Math.random() )
while(p1 == r) {
p1 = Math.floor(l*Math.random() )
}
var p2 = Math.floor(l*Math.random() )
while(p2 == r || p2 == p1) {
p2 = Math.floor(l*Math.random() )
}
return [p1,p2]
} ;
function shuffle(texte) {
var j, x, i;
for (i = texte.length; i; i--) {
j = Math.floor(Math.random() * i);
x = texte[i - 1];
texte[i - 1] = texte[j];
texte[j] = x;
}
return texte
}
var clik = function() {
var d = ["1945","1946","1947","1948","1949","1950","1955","1957","1958","1959","1961","1962","1966","1967","1968","1969","1973","1974","1975","1976","1979","1980","1981","1986","1987","1988","1989","1991","1992","1993","1995","2001","2002","2003","2007","2008","2011"]
var l = d.length ;
var e = ["Création de l’ONU", "Démission de DeGaulle et naissance de la IVème République", "Doctrine Truman et plan Marschall", "Naissance de l’Etat d’Israel et première guerre israélo-arabe", "Proclamation de la République Populaire de Chine", "Début de la Guerre de Corée", "Conférence de Bandung", "Mise en place de la Communauté Economique Européenne", "DeGaulle président du Conseil et naissance de la Vème République", "Grand Bon en Avant et Grande Famine en Chine", "Putsch des généraux en Alger", "Crise de Cuba", "Début de la Révolution Culturelle en Chine", "Guerre des Six Jours", "Mouvements, grèves et manifestations en France", "Georges Pompidou président", "Guerre du Kippour et premier choc pétrolier", "Valéry Giscard d’Estaing président", "Début de la Guerre Civile au Liban", "Mort de Mao", "Révolution Islamique en Iran", "Début de la Guerre Iran/Irak", "François Mitterand président", "Première cohabitation en France avec Jacques Chirac comme Premier Ministre", "Première Intifada", "François Mitterand réélu Président de la République", "Chute du Mur de Berlin", "Début de la Guerre du Golfe", "Référendum sur le traité de Maastricht", "Accords de Washington entre israéliens et palestiniens", "Jacques Chirac élu Président de la République", "Attentats du World Trade Center", "Jacques Chirac réélu Président de la République", "Intervention américaine en Irak", "Nicolas Sarkozy élu Président de la République", "Barack Obama élu Président des Etats-Unis", "Mort d’Oussama Ben-Laden"]
var r = Math.floor( l*Math.random() ) ;
var p1p2 = autre(r,l) ;
var p1 = p1p2[0] ;
var p2 = p1p2[1] ;
var repint = shuffle([ e[r], e[p1], e[p2] ]) ;
var texte = "<p>"+repint[0]+"</p><p>"+repint[1]+"</p><p>"+repint[2]+"</p>" ;
document.getElementById("rep").innerHTML = texte ;
document.getElementById("demo").innerHTML = d[r] ;
} ;
</script>
<form method="post" action="" name="f">
<fieldset><legend>Générateur de dates aléatoire</legend>
<div id="result" style="background-color:#fcfcfc;">Résultat: </div>
<div class="centrer"><input type="button" value="Générer" onclick="clik()"></div>
</fieldset>
</form>
</body>
</html>
7 réponses
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ISN project History Guess'R</title>
</head>
<body>
<h1>TEST ISN 2 </h1>
<h2 id="avancement"></h2>
<p id="demo"></p>
<div id="rep">
<!--<p id="bonnerep"></p>
<p id="prop2"></p>
<p id="prop1"></p>
-->
</div>
<script>
var bonneRep = "";
function autre(r,l) {
var p1 = Math.floor( l*Math.random() )
while(p1 == r) {
p1 = Math.floor(l*Math.random() )
}
var p2 = Math.floor(l*Math.random() )
while(p2 == r || p2 == p1) {
p2 = Math.floor(l*Math.random() )
}
return [p1,p2]
} ;
function shuffle(texte) {
var j, x, i;
for (i = texte.length; i; i--) {
j = Math.floor(Math.random() * i);
x = texte[i - 1];
texte[i - 1] = texte[j];
texte[j] = x;
bonneRep = texte[j];
}
return texte
}
var nbQuestion = 0;
var clik = function() {
var form = document.getElementById("form");
form.innerHTML ="";
if(nbQuestion == 5){
score();
return false;
}
nbQuestion++;
var avancement = document.getElementById('avancement').innerHTML = "Question " + nbQuestion + "/5";
var d = ["1945","1946","1947","1948","1949","1950","1955","1957","1958","1959","1961","1962","1966","1967","1968","1969","1973","1974","1975","1976","1979","1980","1981","1986","1987","1988","1989","1991","1992","1993","1995","2001","2002","2003","2007","2008","2011"]
var l = d.length ;
var e = ["Création de l’ONU", "Démission de DeGaulle et naissance de la IVème République", "Doctrine Truman et plan Marschall", "Naissance de l’Etat d’Israel et première guerre israélo-arabe", "Proclamation de la République Populaire de Chine", "Début de la Guerre de Corée", "Conférence de Bandung", "Mise en place de la Communauté Economique Européenne", "DeGaulle président du Conseil et naissance de la Vème République", "Grand Bon en Avant et Grande Famine en Chine", "Putsch des généraux en Alger", "Crise de Cuba", "Début de la Révolution Culturelle en Chine", "Guerre des Six Jours", "Mouvements, grèves et manifestations en France", "Georges Pompidou président", "Guerre du Kippour et premier choc pétrolier", "Valéry Giscard d’Estaing président", "Début de la Guerre Civile au Liban", "Mort de Mao", "Révolution Islamique en Iran", "Début de la Guerre Iran/Irak", "François Mitterand président", "Première cohabitation en France avec Jacques Chirac comme Premier Ministre", "Première Intifada", "François Mitterand réélu Président de la République", "Chute du Mur de Berlin", "Début de la Guerre du Golfe", "Référendum sur le traité de Maastricht", "Accords de Washington entre israéliens et palestiniens", "Jacques Chirac élu Président de la République", "Attentats du World Trade Center", "Jacques Chirac réélu Président de la République", "Intervention américaine en Irak", "Nicolas Sarkozy élu Président de la République", "Barack Obama élu Président des Etats-Unis", "Mort d’Oussama Ben-Laden"]
var r = Math.floor( l*Math.random() ) ;
var p1p2 = autre(r,l) ;
var p1 = p1p2[0] ;
var p2 = p1p2[1] ;
var repint = shuffle([ e[r], e[p1], e[p2] ]) ;
var texte ="";
for (var i = 0; i < repint.length ; i++) {
texte += "<label>" + repint[i] + "</label><input onclick='onClickPerso(this.value)' name='nom' value='"+repint[i]+"' type='radio' /><br>";
}
document.getElementById("rep").innerHTML = texte ;
document.getElementById("demo").innerHTML = d[r] ;
} ;
var onClickPerso = function (val) {
valider(val);
clik();
};
var scoreTotal = 0;
var valider = function (val)
{
if(bonneRep == val){
scoreTotal++;
}
};
var score = function () {
var chpScore = document.getElementById("score");
chpScore.innerHTML = scoreTotal + "/" + nbQuestion;
var questionnaire = document.getElementById('rep');
questionnaire.innerHTML = "";
var v = document.getElementById('demo');
v.innerHTML = "";
};
</script>
<form method="post" action="" name="f">
<fieldset><legend>Générateur de dates aléatoire</legend>
<div id="result" style="background-color:#fcfcfc;">Résultat: <i id="score"></i> </div>
<div id="form" class="centrer"><input type="button" value="Commencer le QCM" onclick="clik()"></div>
</fieldset>
</form>
</body>
</html>Voici ton QCM avec 5 question + score
Je défini la bonne réponse étant texte[j]
Ton algorithme n'est pas bon je pense par rapport à la date
Je ne comprend pas juste au niveau du score final, même en répondant bon à toute les questions le score est de 3/5, comment corriger sa ? Et à quoi ça sert de rajouter bonneRep = texte[j]; à la fin de la fonction shuffle() ?
Le problème n'est pas au niveau des dates, l'incrémentation de scoreTotal ne se fais que l'orsqu'on clique sur la réponse s'affichant tout en haut.