Thibault de Valverde
-
Modifié le 29 mai 2017 à 19:39
Thibault de Valverde -
29 mai 2017 à 22:54
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>project History Guess'R</title>
</head>
<body>
<h1>TEST 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] ;
//document.getElementById("bonnerep").style.color = "#38fff1" ;
} ;
</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>
<!-- corps du document -->
</body>
</html>
