Aller au contenu. | Aller à la navigation

Outils personnels

Navigation

S1-2013 multiplication

Le second projet... les multiplications

HTML icon Sem1-Multi.html — HTML, 2 ko (2664 bytes)

Contenu du fichier

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="author" content="Bertrand Emery" />
	<title> </title>
	<style>
		h1, p, table {
			text-align:center;
		}
		table {
			border-collapse:collapse;
			border:solid 1px black;
			margin:auto;
		}
		td {
			padding:0 1em;
		}
		td:hover {
			background-color:red;
		}
	</style>
</head>
<body>
	<h1>Exercice de multiplication</h1>
	<p>Clique sur la bonne réponse :</p>
	<table border> <!-- comme il n'a a pas de sous-section, un tbody n'est pas nécessaire -->
		<caption id="question"></caption>
		<tr><td onclick="test(this.innerHTML);">1</td><td onclick="test(this.innerHTML);">2</td><td onclick="test(this.innerHTML);">3</td><td onclick="test(this.innerHTML);">4</td><td onclick="test(this.innerHTML);">5</td></tr>
		<tr><td onclick="test(this.innerHTML);">6</td><td onclick="test(this.innerHTML);">7</td><td onclick="test(this.innerHTML);">8</td><td onclick="test(this.innerHTML);">9</td><td onclick="test(this.innerHTML);">10</td></tr>
		<tr><td onclick="test(this.innerHTML);">11</td><td onclick="test(this.innerHTML);">12</td><td onclick="test(this.innerHTML);">13</td><td onclick="test(this.innerHTML);">14</td><td onclick="test(this.innerHTML);">15</td></tr>
		<tr><td onclick="test(this.innerHTML);">16</td><td onclick="test(this.innerHTML);">17</td><td onclick="test(this.innerHTML);">18</td><td onclick="test(this.innerHTML);">19</td><td onclick="test(this.innerHTML);">20</td></tr>
		<tr><td onclick="test(this.innerHTML);">21</td><td onclick="test(this.innerHTML);">22</td><td onclick="test(this.innerHTML);">23</td><td onclick="test(this.innerHTML);">24</td><td onclick="test(this.innerHTML);">25</td></tr>
	</table>
	<script type="text/javascript">
		var result=0; // pour stocker le résultat de la multiplication
		
		function multi(){ // génère une multiplication aléatoire de chiffre entre 1 et 5
			var x=Math.floor(5*Math.random()+1), y=Math.floor(5*Math.random()+1); // crée 2 nombres aléatoires entre 1 et 5
			result=x*y; // le résultat de la multiplication est stocké dans la variable globale
			document.getElementById('question').innerHTML="Combien fait "+x+" x "+y+" ?"; // on écrit la multiplication dans le caption.
		}
		
		function test(val) {
			if (val==result) { // pas la peine de passer un parsInt() puisque le test == répondra oui à 5=='5'
				alert('Bravo, prêt pour une nouvelle multiplication ?');
				multi(); // on génère une nouvelle multiplication
			}
			else {alert('Dommage, essaye encore.');}
		}
		
		multi(); // on initialise la première multiplication
	</script>
</body>
</html>