learningAlphabet/jeu_son.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="fr">
<head>
<title>AlphaBaby</title>
	<link rel="stylesheet" href="libs/jquery.mobile-1.2.0.min.css" />
	<script src="libs/jquery-1.8.2.min.js"></script>
	<script src="libs/jquery.mobile-1.2.0.min.js"></script>
	<script src="libs/cordova-2.2.0.js"></script>
	<script src="scripts/random.js"></script>
	<script type="text/javascript" charset="utf-8" src="scripts/sons.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">
	<link rel="stylesheet" href="styles/style.css" />
	<script type="text/javascript">
	var score=0;
	var nbTourRestant=5;
		function partie(){
			score=score +3;
			var solution = getRandomLetter();
			var listeLettres = getRandomList(4, solution);
			$('#lettres').empty();
			$('#nbTourRestant').html('Nombre de tour restants : '+nbTourRestant);
			for( var i = 0 ; i < listeLettres.length ; ++i ) {
				$('#lettres').append('<a class="min_jeu2">'+ listeLettres[i] +'</a>');
			}

			play_src('lettre_alpha', solution);

			$('.min_jeu2').click(function() {
				if ( $(this).html() == solution ){
					$(this).css("border","2px solid green");
					nbTourRestant--;
					if(nbTourRestant>0)
					{
						$("#popupOui").popup("open",{positionTo:"#nbTourRestant"});
					}
					else
					{
						$("#popupNew").popup("open",{positionTo:"#nbTourRestant"});
					}
				}
				else
				{
					$(this).css("border","2px solid red");
					$(this).css("opacity","0.5");
					score--;
				}

			});
		}


		$(document).ready(function() {
			$( "#popupOui" ).on({
					popupafterclose: function(event, ui) {
					partie(nbTourRestant);
			   }
			});

			$( "#popupNew" ).on({
			   popupafterclose: function(event, ui) {
					$('#lettres').empty();
					var date=getDateDuJour();
					writeScoreToXml(1,date,score);
					score=0;
					nbTourRestant=5;
					partie();
			   }
			});

			// Wait for PhoneGap to load
			//
			if( isAndroid() ) {
				document.addEventListener("deviceready", onDeviceReady, false);
			}
			else {
				partie();
			}

		});


		// PhoneGap is ready
		//
		function onDeviceReady() {
		    partie();
		}

	</script>
</head>
<body>

<header data-role="header">
	<a href="#" data-rel="back" data-icon="arrow-l" data-add-back-btn="true" data-icon="back">Retour</a>
	<h1>- Ecouter -</h1>
	<a href="progress.html#1" rel="external" data-icon="star">Scores</a>
</header>
<center><h4 id="nbTourRestant"></h4></center>
<!-- Simple audio playback -->
<audio id="lettre_alpha">
</audio>

<center><section data-role="content" data-theme="c" id="lettres"></center>

<div id="popop">
	<div data-role="popup" id="popupOui" data-theme="a" data-overlay-theme="a">
		<p>Bien joué!<p>
	</div>
	<div data-role="popup" id="popupNew" data-theme="a" data-overlay-theme="a">
		<p>Attention, tu vas commencer une nouvelle partie!<p>
	</div>
</div>
</section>
</body>

</html>