
<!--
Copyright (C) 2012 Arnaud Limon

English
    This file is part of Apprenti-Sage

    Apprenti-Sage is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Apprenti-Sage is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with Apprenti-Sage.  If not, see <http://www.gnu.org/licenses/>.


Français
    Apprenti-Sage est un logiciel libre : vous pouvez le redistribuer ou le
    modifier selon les termes de la GNU Affero General Public Licence tels que
    publiés par la Free Software Foundation : à votre choix, soit la
    version 3 de la licence, soit une version ultérieure quelle qu'elle
    soit.

    Apprenti-Sage est distribué dans l'espoir qu'il sera utile, mais SANS AUCUNE
    GARANTIE ; sans même la garantie implicite de QUALITÉ MARCHANDE ou
    D'ADÉQUATION À UNE UTILISATION PARTICULIÈRE. Pour plus de détails,
    reportez-vous à la GNU Affero General Public License.
 
    Vous devez avoir reçu une copie de la GNU Affero General Public License
    avec Apprenti-Sage. Si ce n'est pas le cas, consultez
    <http://www.gnu.org/licenses/> 
-->
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title>Apprenti-Sage - Dictée de lettres</title>
	<link rel="stylesheet" media="screen" type="text/css" title="design" href="styles.css" />
	<link rel="stylesheet" media="screen" type="text/css" title="design" href="dictee.css" />
	<link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
</head>

<body>


<nav>
<ul>
	<li><a href="lecture.html">Lecture</a>
		<ul>
			<li><a href="lecture.html">Syllabes</a></li><li><a href="lecture-lettres.html">Lettres</a></li>
			
			<li><a href="lecture-mots.html">Mots</a></li>
			<li><a href="phrase.html">Phrases</a></li>
			
		</ul>
	</li>
	<li class="actuel"><a href="dictee.html">Dictée</a>
		<ul>
			<li><a href="dictee.html">Syllabes</a></li><li><a href="dictee-lettres.html">Lettres</a></li>
			<li><a href="dictee-mots.html">Mots</a></li>
			
		</ul>
	</li>
	<li><a href="maths.html">Maths</a>
		<ul>
			<li><a href="maths.html">Compter</a></li>
			<li><a href="lecture-nombres.html">Lire</a></li>
			<li><a href="dictee-nombres.html">Écrire</a></li>
			<li><a href="ranger.html">Ranger</a></li>
			
		</ul>

	</li>
	<li><a href="additions.html">Calcul</a>
		<ul>
			<li><a href="additions.html">Additions</a></li>
			<li><a href="soustractions.html">Soustractions</a></li>
			<li><a href="divers.html">Divers</a></li>
			
		</ul>

	</li>
	<li class="droite"><a href="index.html">Sortir</a></li>
	<li class="droite" id="prenom"></li>
	<li class="droite">Logiciel Apprenti Sage</li>
</ul>
</nav>


<aside>
	<div id="mode">

	</div>

	<table id="menu">

	</table>

</aside>

<section id="centrale">
<header>



	<div id="consigne">Clique sur une série de lettres dans le menu.</div>
	<div id="feedback"></div>
	<div id="lien"></div>
</header>


	<section id="contenu-gauche">

	</section>

<section id="contenu-droit"></section>




</section>

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.ui.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script>   
<script type="text/javascript" src="js/jquery.color.js"></script>   
<script type="text/javascript" src="js/jquery.jplayer.js"></script>
<script type="text/javascript" src="js/jquery.animate.shadow.js"></script>
<script type="text/javascript" src="js/jquery.json.js"></script>
<script type="text/javascript">



$(function(){ // début jQuery

// déclaration de variables globales

var notesDicteeLettres;

var notesDicteeLettresEncodeesEnJSON;

var ecriture;

var j;

var z;

var y;

var mot;

var serie;

var mots_aleatoire;

var rel;

var numero;

var tableau;

var motEcrit;

var motAEcrire;

var score;

var codeJplayerHtml = '<div id="jquery_jplayer_1" class="jp-jplayer"></div><div id="jp_container_1" class="jp-audio"><div class="jp-type-single"><div class="jp-gui jp-interface"><ul class="jp-controls"><li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li><li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li><li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li></ul></div></div></div>';


	prenom = $.cookie("prenom");

	$("#prenom").html(prenom);
	



function randomInt(mini, maxi) { 	// fonction : trouver un nombre entier aléatoire
     var nb = mini + (maxi+1-mini)*Math.random();
     return Math.floor(nb);
}

Array.prototype.shuffle = function(n) { 	// fonction qui mélange un tableau au hasard
     if(!n)
          n = this.length;
     if(n > 1) {
          var i = randomInt(0, n-1);
          var tmp = this[i];
          this[i] = this[n-1];
          this[n-1] = tmp;
          this.shuffle(n-1);
     }
};

function afficheMenuTest() {

	$("#contenu-gauche").html('');

	$("#contenu-droit").html('');

	$("#feedback").html('');

	$("#mode").html('');

	$('#menu').html('<caption id="caption">Lettres</caption>');



if ($.cookie('notesDicteeLettres') != null) { // si le cookie notesDicteeLettres existe
	
	 notesDicteeLettres = $.cookie('notesDicteeLettres');

//	alert(notesDicteeLettres);

	notesDicteeLettres = $.evalJSON( notesDicteeLettres );
//	alert(notesDicteeLettres);
}
else {

	 notesDicteeLettres = [];

	l = tableau.length;

	for (i = 0; i < l; i++) {	// boucle qui remplit la variable notes
	
		notesDicteeLettres.push([null,null]);
	}

			
}
	z=0;	

	for (var i = 0; i < tableau.length; i++) {
		y = i+1	;


		if (notesDicteeLettres[z][0] == null) {
			n = '';
			couleur = '';	
		}
		else {
			couleur = notesDicteeLettres[z][1];	
			n = notesDicteeLettres[z][0] + '/10';
		}

	

	
		$('#menu').append('<tr><td><a href="#" class="item_menu" rel="' + i + '">Série ' + y + '</a></td><td class="note ' + couleur + '">' + n + '</td></tr>');
		
		z++;



	}

$(".item_menu").click(function(event) {		// écoute l'événement click sur les liens du menu et déclenche la fonction decide();
	j = 0;	
	$("#feedback").html('');
	rel = parseInt($(this).attr("rel"));
	ecriture = $(this).find("span").text();

	nb_items = tableau[rel][3].length;
	numero = $(this).index('.item_menu');

 
decideTest();
});

}

function decideTest() {
	if (j == 0) { 		// on vient de cliquer sur une série : initialisation de la série

		serie = tableau[rel][1];

		mot = j;

		j++;

		score = 0;
		
		nb_essais = 0;

		motAEcrire = tableau[rel][3][mot];

		afficheContenantTest();
	}
	else if (j > nb_items) { 	// dernier item de la série

		$("#contenu-gauche").html('');

		$("#contenu-droit").html('');
		
		nb_erreurs = nb_essais - nb_items;

		s = nb_erreurs < 2 ? '' : 's';	// ternaire	 variable = test à réaliser ? valeurSiVrai : ValeurSiFaux ;

		if (nb_essais == nb_items) { message = 'Très bien !'; note = 10; image = 'vert'; }
		else if (nb_essais <= 1.25 * nb_items) { message = 'Bien'; note = 9; image = 'jaune'; }
		else if (nb_essais <= 1.5 * nb_items) { message = 'Bien'; note = 8; image = 'jaune'; }
		else if (nb_essais <= 1.75 * nb_items) { message = 'Bien'; note = 7; image = 'jaune'; }
		else if (nb_essais <= 2 * nb_items) { message = 'Moyen'; note = 6; image = 'orange'; }
		else if (nb_essais <= 2.25 * nb_items) { message = 'Moyen'; note = 5; image = 'orange'; }
		else if (nb_essais <= 2.5 * nb_items) { message = 'Moyen'; note = 4; image = 'orange'; }
		else if (nb_essais <= 2.75 * nb_items) { message = 'Insuffisant'; note = 3; image = 'rouge'; }
		else if (nb_essais <= 3 * nb_items) { message = 'Insuffisant'; note = 2; image = 'rouge'; }
		else if (nb_essais <= 3.25 * nb_items) { message = 'Insuffisant'; note = 1; image = 'rouge'; }
		else { message = 'Insuffisant'; note = 0; image = 'rouge'; }

		$("#feedback").html('<span class="bilan">Bilan : tu as fait ' + nb_erreurs + ' erreur' + s + ' pour écrire les ' + nb_items + ' lettres. ' + message + ' ' + note + '/10 <img id="couleur" src="images/' + image + '.png" alt="" /></span>');
		
		$(".bilan").animate({ boxShadow:"6px 6px 6px black"}, 1000);


		if (notesDicteeLettres[numero][0] == null || notesDicteeLettres[numero][0] < note) { // si la note est null ou si elle est inférieure à la nouvelle


			notesDicteeLettres[numero][0] = note;
			notesDicteeLettres[numero][1] = image;

			notesDicteeLettresEncodeesEnJSON = $.toJSON( notesDicteeLettres ); // encodage en JSON du tableau de notes
	
								// on écrit le cookie avec la meilleure note
			$.cookie('notesDicteeLettres', notesDicteeLettresEncodeesEnJSON) ;

				// mise à jour de la note

			n = note + '/10';

			$(".note").eq(''+numero+'').text(''+n+'').removeClass('vert jaune orange rouge').addClass(''+image+'');


	}


	}
	else {		// entre les deux
		motAEcrire = tableau[rel][3][mot];
		afficheContenantTest();
	}	


}


function afficheContenantTest() {


	$("#contenu-gauche").html('');

	$("#contenu-droit").html('');

	$("#contenu-droit").removeClass("attache script majuscule");
	
	$("#contenu-droit").addClass(ecriture);

	$("#consigne").html('');

	$("#lien").html('');

	$("#contenu-gauche").append(codeJplayerHtml); // ajoute le code Jplayer HTML au div contenu-gauche

	$("#jquery_jplayer_1").jPlayer({ // code Jplayer JavaScript
		ready: function (event) {
			$(this).jPlayer("setMedia", {
				oga:'sons/' + serie + '/' + motAEcrire + '.ogg'
			});
			  $(this).jPlayer("play"); // permet de jouer directement le son (autoplay)
		},
		supplied: "oga"
	});

	$("#contenu-droit").append('<form id="formulaire" autocomplete="off"><p class="paragraphe" rel="' + mot + '"> <input type="text" id="motEcrit" name="motEcrit" size="1" maxlength="10" /><input id="soumettre" type="submit" value="OK" /><span class="message"></span></p></form>');
	$('#motEcrit').focus();	


	$('#formulaire').submit(function() {

		motEcrit = $('#motEcrit').val(); // récupère la valeur de l'input
		motEcrit = $.trim(motEcrit);  // enlève les espaces avant et après le texte	
		motEcrit = motEcrit.toLowerCase(); // transforme l'entrée en minuscule
		verifieTest();

		

	});


}

function verifieTest() {
	nb_essais++;
	//	alert('motEcrit : ' + motEcrit + ' mot à écrire : ' + motAEcrire + ' score : ' + score);
	
		if (motEcrit == motAEcrire) {

		score++ ;

		j++;	
		mot++;
		$("#feedback").html('');
		$("#feedback").html('<span class="reussi">Tu as réussi !</span>');
		$(".reussi").animate({ boxShadow:"6px 6px 6px black"}, 1000);
		decideTest();

	}
	else {


		$("#feedback").html('Tu as écrit <span class="erreur">' + motEcrit + '</span> Tu devais écrire <span class="juste">' + motAEcrire + '</span>');
	
		$("#lien").html('<a href="#" class="recommence">Recommence</a>');
		
		$(".recommence").focus();

		$(".recommence").click(function(event) {		// écoute l'événement click sur le lien recommence;
			$("#feedback").html('');
			decideTest();
		});

		$("#contenu-gauche").html('');
		$("#contenu-droit").html('');
	}	

}


tableau = [	 // ouverture niveau 0
			[				 // ouverture niveau 1

				"1",
				'lettres',
				 ['r','a','i','m','l','o'],	 // niveau 2
				 ['r','a','i','m','l','o']	 // niveau 2
			],				// fermeture niveau 1
	
			[				 // ouverture niveau 1

				"2",
				'lettres',
				  ['u','v','j','f','c','h'],	 // niveau 2
				  ['u','v','j','f','c','h']	 // niveau 2
			],				// fermeture niveau 1
	
			[				 // ouverture niveau 1

				"3",
				'lettres',
				  ['s','e','n','b','d','p','t'],  // niveau 2
				  ['s','e','n','b','d','p','t']  // niveau 2
			],				// fermeture niveau 1

			[				 // ouverture niveau 1

				"4",
				'lettres',
				  ['g','k','q','w','x','y','z'],  // niveau 2
				  ['g','k','q','w','x','y','z']  // niveau 2
			],
			[				 // ouverture niveau 1

				"5",
				'lettres',
				 ['r','a','i','m','l','o','s','e','n','b','d','p','t'],	 // niveau 2
				 ['r','a','i','m','l','o','s','e','n','b','d','p','t']	 // niveau 2
			],				// fermeture niveau 1
			[				 // ouverture niveau 1

				"6",
				'lettres',
				  ['u','v','j','f','c','h','g','k','q','w','x','y','z'],	 // niveau 2
				  ['u','v','j','f','c','h','g','k','q','w','x','y','z']	 // niveau 2
			],

];	// fermeture niveau 0	



afficheMenuTest();





});	 // fin jQuery

</script>

</body>
</html>
