learningAlphabet/jeu_tri.html at master · Kshitij961968/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
<!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/jquery-ui-1.9.1/js/jquery-ui-1.9.1.custom.min.js"></script>
	<!-- Drag and drop pour les mobiles -->
	<script src="libs/jquery.ui.touch-punch.min.js"></script>
	<script src="scripts/random.js"></script>
	<script src="scripts/array.js"></script>
	<script type="text/javascript" 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 listeLettres;
	var score=0;
	function partie(){
			var nbMouvement=0;
			listeLettres = getRandomList(4);
			while(checkOrdreAlpha(true)==true){
				listeLettres=getRandomList(4);
			}
			$('#sortable').empty();
			for( var i = 0 ; i < listeLettres.length ; ++i ) {
				$('#sortable').append('<li class="min_jeu2" id="poop">'+ listeLettres[i] +'</li>');
			}
			$('#sortable').listview('refresh');
			$( "#sortable" ).sortable();
		    $( "#sortable" ).disableSelection();
		   // <!-- Refresh list to the end of sort to have a correct display -->
		    $( "#sortable" ).bind( "sortstop", function(event, ui) {
	     		$('#sortable').listview('refresh');
	     		nbMouvement++;
	     		 if(checkOrdreAlpha(false)==true){
	     		 	if(nbMouvement>=5)
	     		 		score=0;
	     		 	else
	     		 		score=1;
					$("#popupOui").popup("open",{positionTo:"#sortable"});
	       		}

		    });


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

		});

	  	function checkOrdreAlpha(test) {
	  		var curList = new Array();
	  		var i = 0;
	  		if(test){
	  			curList=listeLettres;
	  		}
	  		else{
		  		$('.min_jeu2').each(function() {
		  			curList[i++] = $(this).html();
		  		});
	  		}
	  		var solution = copyArray(curList);
	  		solution.sort();
	  		if (arrayEqual(curList, solution)) {

	  			return true;
	  		}
	  		else
	  			return false;

	  	}
	</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>- Ordre alphabétique -</h1>
	<a href="progress.html#2" rel="external" data-icon="star">Scores</a>
</header>

<section data-role="content">
	<div data-role="content" data-theme="c">
		<ul data-role="listview" data-inset="true" data-theme="d" id="sortable">
		</ul>
	</div>
	<div id="popop">
		<div data-role="popup" id="popupOui" data-theme="a" data-overlay-theme="a">
			<p>Bien joué!<p>
		</div>
	</div>
</section>
</body>

</html>