learningAlphabet/jeu_maj2min.html at master · ArthurHoaro/learningAlphabet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="fr">
<head>
<title>AlphaBaby</title>
	<link rel="stylesheet" href="libs/jquery.mobile-1.2.0.min.css" />
	<link rel="stylesheet" href="styles/style.css" />
	<script src="libs/jquery-1.8.2.min.js"></script>
	<script src="libs/jquery.mobile-1.2.0.min.js"></script>
	<script src="scripts/random.js"></script>
	<script type="text/javascript" charset="utf-8" src="scripts/xml.js"></script>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script type="text/javascript">
		$(document).ready(function() {
			$( "#popupOui" ).on({
					popupafterclose: function(event, ui) {
					$('#listeLettres').empty();
					partie();
			   }
			});
			partie();
		});
		function partie(){
			// on récupère une majuscule pour l'élément à trouver
			var lower = true;
			var solution = getRandomLetter(lower);
			$("#maj").html(solution.toUpperCase());
			// on récupère 4 minuscules dont la solution
			var listeLettres = getRandomList(4, solution, lower);
			var src = '';

			for( var i = 0 ; i < listeLettres.length ; ++i ) {
				//Alignement en deux lignes de deux éléments (ajout des <br/>)
				//Génération des lettres minuscules avec appel aux fonctions gagne() et perd() selon si la lettre courante est solution
				switch( i % 2) {
					case 0:
						src += '<div class="ui-grid-a"><div class="ui-block-a"><a class="min_jeu2">'+ listeLettres[i] +'</a></div>';
					break;
					case 1:
						src += '<div class="ui-block-b"><a class="min_jeu2">'+ listeLettres[i] +'</a></div></div>';
				}
			}

			$('#listeLettres').append(src);

			$('#listeLettres a').click(function(){
				if($(this).html() == solution){
					$(this).css("border","3px solid green");
					var date=getDateDuJour();
					writeScoreToXml(4,date,1);
					$("#popupOui").popup("open",{positionTo:"#maj"});
				}
				else {
					$(this).css("border","3px solid red");
					$(this).css("opacity","0.5");
				}
			});

		}


	</script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<a href="#" data-rel="back" data-icon="arrow-l" data-add-back-btn="true" data-icon="back">Retour</a>
		<h1>- Trouver la minuscule -</h1>
		<a href="progress.html#4" rel="external" data-icon="star">Scores</a>
	</div>

	<div data-role="content" data-theme="c" class="bloc_center">
		<a class="min_jeu2" id="maj"></a>
		<div id="listeLettres"></div>
		<div id="popop">
	<div data-role="popup" id="popupOui" data-theme="a" data-overlay-theme="a">
		<p>Bien joué!<p>
	</div></div>
	</div>

</div>
</body>

</html>