Untitled

css

body {
	font-family:Verdana,Arial,Sans;
	font-size:13px;
	background:#CCCCCC;
}

#titre {
	font-size:16px;
}

#listes{
	display:inline-block;
}

#carte{
	display: inline-block;
}

#boutons{
	margin-top:30px;

}
.OK {
	background-color:#0066CC;
}

.NOK {
	background-color:#FF0000;
}
.R{
	background-color:#FFFFFF;
}


html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Quiz sur les pays d'Afrique De L'ouest</title>
<link rel="stylesheet" media="screen" href="styles.css" type="text/css"/>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<!--Titre-->
<div id="titre"></div>
<br>
<!--formulaire-->

<form id="listes" name="listes"></form>

<!--Carte-->
<div id="carte"><img src="afrique_ouest.png" height="450"></div>

<!--boutons-->
<div id="boutons">
	<input type="submit" name="boutonReset" id="boutonReset" VALUE="Reset" onclick="fonctionReset()"/>
	<input type="submit" name="boutonValider"id="boutonValider" VALUE="Valider" onclick="fonctionValider()"/>
</div>
<!--horloge-->
<div id="heure">
<!--code JS-->
<script src="code.js"></script>
</div>

<pl>Réalisé par Decayeux Théo.</pl>

</body>
</html>


code java

//jeu des pays
$(function(){

//écriture du titre
$('#titre').html('<p>Jeu des pays de l Afrique de l ouest</p>');
$('#titre').after('<p>Salut dans ce jeu tu vas devoir trouver l emplacement de 14 pays différents en 120 secondes Bonne Chance!!!</p>');
//timer
timerIni = 0;
setInterval(Horloge,1000);

//Tableau des pays
tableauPays = new Array('','Sénégal','Gambie','Mali','Niger','Burjina Faso','Guinée-Bissau','Guinée','Sierra Leone','Liberia','Côte d ivoire','Ghana','Togo','Bénin','Nigeria',);

// création des listes déroulantes
var codeHTML_listes ="";
for (var i=1 ;i<=14 ;i++) {
    var nom ="numero"+i;
	var nom2 = "liste"+i;
	codeHTML_listes=codeHTML_listes+"<span id=\""+nom+"\">"+i+"</span><select id=\""+nom2+"\"></select><br>";
    }
	document.getElementById("listes").innerHTML=codeHTML_listes;


// tableau des pays pour le remplissage des listes déroulantes
var pays_bouton = {0:"Choisir...",1:"Bénin",2:"Burjina Faso",3:"Côte d ivoire",4:"Gambie",5:"Ghana",6:"Guinée",7:"Guinée-Bissau",8:"Liberia",9:"Mali",10:"Niger",11:"Nigeria",12:"Sénégal",13:"Sierra Leone",14:"Togo"};

// remplissage des listes déroulantes
for (i=1; i<=14;i++){
	select = document.getElementById("liste"+i);
		for(index in pays_bouton){
		select.options[select.options.length]=new Option(pays_bouton[index],pays_bouton[index]);
		}
	}

	// fermeture $function
});

//horloge
function Horloge(){
	timerIni++;
	$('#heure').text(timerIni);
	if(timerIni>120){
		$('#boutonValider').hide();
		}
}
//fonction Valider
function fonctionValider(){
	//boucle sur les listes
	for (var i=1; i<=14; i++)
	{
		//recupération de l'index, puis de la valeur choisie
		var indexChoisi = document.forms["listes"].elements["liste"+i].selectedIndex;
		var paysChoisi = document.forms["listes"].elements["liste"+i].options[indexChoisi].value;
		// teste si la liste i affiche le bon pays
		if(paysChoisi == tableauPays[i]){
			//changement de style de l'élément numéro i
			document.getElementById("numero"+i).className='OK';
			}
		else{
			document.getElementById("numero"+i).className='NOK';

		}

	}
}

//fonction Reset
function fonctionReset(){
	//boucle sur les listes
	for (var i=1; i<=14; i++)
	{
		//affichage première valeur
		document.forms["listes"].elements["liste"+i].selectedIndex = 0;
		document.getElementById("numero"+i).className="R";
		timerIni=0;
		$('#boutonValider').show();
	}
}