Commit 92f8ae6a authored by Philippe Dpt35's avatar Philippe Dpt35

Commit initial

parents
lapin.png

3.9 KB

mouton.png

5.11 KB

poule.png

6.46 KB

body {
font-family: "Arial", "Helvetica", sans-serif;
font-size: 0.8em;
background-color: #e0cba1;
}
#ligne1, #ligne2 {
display: flex;
justify-content: space-between;
}
#espacement {
display: column;
display: block;
height: 80px;
}
img#poubelle {
margin-left: 46%;
}
code {
font-size: 1.3em;
}
#pre1, #pre2, #pre3, #pre4 {
border: solid 1px blue;
background: green;
font-size: .9em;
font-family: "MS Sans Serif", sans;
height: 170px;
width: 49%;
position: relative;
}
#enclos1, #enclos2, #enclos3, #enclos4 {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
position: relative;
}
#enclos1 img.animal1, #enclos2 img.animal1, #enclos3 img.animal1, #enclos4 img.animal1 {
height: 50px;
width: 36px;
}
#enclos1 img.animal2, #enclos2 img.animal2, #enclos3 img.animal2, #enclos4 img.animal2 {
height: 50px;
width: 40px;
}
#enclos1 img.animal3, #enclos2 img.animal3, #enclos3 img.animal3, #enclos4 img.animal3 {
height: 49px;
width: 74px;
}
#enclos1 img.animal4, #enclos2 img.animal4, #enclos3 img.animal4, #enclos4 img.animal4 {
height: 46px;
width: 33px;
}
#modele1, #modele2, #modele3, #modele4 {
float: left;
width: 100px;
height: 35px;
/*border: 1px solid black;*/
font-size: 3em;
}
#informations {
display: block;
overflow: scroll;
background-color: white;
width: 41em;
height: 15em;
border: solid 1px black;
margin-bottom: 2em;
}
\ No newline at end of file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test10 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="test10.css" />
</head>
<body>
<p>Les animaux peuvent être ajoutés dans les différents enclos en les faisant glisser depuis les images en haut à gauche, ou bien en les déplaçant d'un enclos à l'autre.
On les supprime en les faisant glisser dans le trou du milieu.</p>
<div id="reserve">
<img src="lapin.png" id="animal1" class="animal1" alt="animal1" draggable="true" ondragstart="drag(event)">
<img src="mouton.png" id="animal2" class="animal2" alt="animal2" draggable="true" ondragstart="drag(event)">
<img src="vache.png" id="animal3" alt="animal3" class="animal3" draggable="true" ondragstart="drag(event)">
<img src="poule.png" id="animal4" alt="animal4" class="animal4" draggable="true" ondragstart="drag(event)">
</div>
<button id="Niveau1" type="button" value="Niveau1" autocomplete="off")>Nombres de 1 à 10</button>
<button id="Niveau2" type="button" value="Niveau2" autocomplete="off")>Nombres de 10 à 20</button>
<button id="newExo" type="button">Nouvel exercice</button>
<button id="verifier" type="button">Vérifier</button>
<div id="ligne1">
<div id="pre1">
<div id="enclos1" alt="enclos" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="modele1"></div>
</div>
</div>
<div id="pre2">
<div id="enclos2" alt="enclos" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="modele2"></div>
</div>
</div>
</div>
<div id="espacement">
<img src="trou4.png" id="poubelle" ondrop="detruit(event)" ondragover="allowDrop(event)"></div>
</div>
<div id="ligne2">
<div id="pre3">
<div id="enclos3" alt="enclos" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="modele3"></div>
</div>
</div>
<div id="pre4">
<div id="enclos4" alt="enclos" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="modele4"></div>
</div>
</div>
</div>
<div id="informations"></div>
<script src="test10.js" type="text/javascript"></script>
</body>
</html>
var CtAnimaux = new Array(0,0,0,0);
var AnimalparEnclos = new Array;
var imgAnimalparEnclos = new Array;
var solution = new Array;
var proposition = new Array;
for (var i=0; i<4; i++) {
solution[i] = new Array(0,0,0,0);
proposition[i] = new Array(0,0,0,0);
}
var difficulte = "";
var informationsObjet = document.getElementById('informations');
var Poubelle = document.getElementById('poubelle');
var btNiveau1 = document.getElementById("Niveau1");
var btNiveau2 = document.getElementById("Niveau2");
var btNewExo = document.getElementById("newExo");
var btVerif = document.getElementById("verifier");
btNiveau1.addEventListener("click", defNiveau1);
btNiveau2.addEventListener("click", defNiveau2);
btNewExo.addEventListener("click", newExo);
btVerif.addEventListener("click", verification);
var Modele1 = document.getElementById("modele1");
var Modele2 = document.getElementById("modele2");
var Modele3 = document.getElementById("modele3");
var Modele4 = document.getElementById("modele4");
function alea(min,max) {
var nb = min + (max-min+1)*Math.random();
return Math.floor(nb);
}
function estPresent(nombre, tableau) {
var present = false;
for (var i=0; i<tableau.length; i++) {
if ( tableau[i] === nombre ) {
present = true;
break;
}
}
return present;
}
function aleaDiff(min,max,nb) {
var tableau = new Array;
var nombre;
for (var i=0; i<nb; i++) {
do {
nombre = alea(min, max);
} while (estPresent(nombre, tableau));
tableau[i] = nombre;
}
return tableau;
}
function melange(tableau) {
var tirage;
var tab_alea = new Array();
for (var i = 0; i < tableau.length; i++) {
do {
tirage = alea(0, tableau.length -1);
} while (tableau[tirage] === 0);
tab_alea[i] = tableau[tirage];
tableau[tirage] = 0;
}
return tab_alea;
}
function activeBtNiveau() {
document.getElementById("Niveau1").disabled = false;
document.getElementById("Niveau2").disabled = false;
}
function desactiveBtNiveau() {
document.getElementById("Niveau1").disabled = true;
document.getElementById("Niveau2").disabled = true;
}
function defNiveau1() {
difficulte = btNiveau1.value;
desactiveBtNiveau();
}
function defNiveau2() {
difficulte = btNiveau2.value;
desactiveBtNiveau();
}
function tirageAnimaux() {
var EnclosAleatoire = new Array(1,2,3,4);
EnclosAleatoire = melange(EnclosAleatoire);
var valeurs = new Array;
switch(difficulte) {
case "Niveau1":
valeurs = aleaDiff(1,10,4);
break;
case "Niveau2":
valeurs = aleaDiff(1,10,4);
break;
}
solution[0][EnclosAleatoire[0]-1] = valeurs[0];
solution[1][EnclosAleatoire[1]-1] = valeurs[1];
solution[2][EnclosAleatoire[2]-1] = valeurs[2];
solution[3][EnclosAleatoire[3]-1] = valeurs[3];
for (var i=0; i<4; i++) {
AnimalparEnclos[EnclosAleatoire[i]-1] = i;
}
afficheSolution();
}
function newExo() {
if ( difficulte === "" ) {
alert("Vous devez d'abord choisir sur quels nombres doit porter l'exercice.");
}
else {
tirageAnimaux();
document.getElementById("newExo").disabled = true;
afficheExercice();
}
}
function verification() {
}
function getNomAnimal(objet) {
var Nom = "";
var tableau = objet.split("-");
Nom = tableau[0];
return Nom;
}
function getIdAnimal(objet) {
var IdAnimal = "";
var tableau = objet.split("-");
IdAnimal = tableau[1];
return IdAnimal;
}
function getIdAccueil(objet) {
var IdAccueil = "";
var tableau = objet.split("-");
IdAccueil = tableau[2];
return IdAccueil;
}
function getIndiceAnimal(animal) {
var indice = 0;
switch(animal) {
case "animal1":
indice = 0;
break;
case "animal2":
indice = 1;
break;
case "animal3":
indice = 2;
break;
case "animal4":
indice = 3;
break;
}
return indice;
}
function getIndiceEnclos(enclos) {
var indice = 0;
switch(enclos) {
case "enclos1":
indice = 0;
break;
case "enclos2":
indice = 1;
break;
case "enclos3":
indice = 2;
break;
case "enclos4":
indice = 3;
break;
}
return indice;
}
function getImgAnimalparEnclos() {
for (var i=0; i<4; i++) {
switch(AnimalparEnclos[i]) {
case 0:
imgAnimalparEnclos[i] = "lapin-mini.png";
break;
case 1:
imgAnimalparEnclos[i] = "mouton-mini.png";
break;
case 2:
imgAnimalparEnclos[i] = "vache-mini.png";
break;
case 3:
imgAnimalparEnclos[i] = "poule-mini.png";
break;
}
}
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
var infosObjet;
infosObjet = ev.target.alt + '-' + ev.target.id + '-' + ev.target.parentNode.id;
ev.dataTransfer.setData("text", infosObjet);
showMessage("Déplacement de alt:" + ev.target.alt + " id:" + ev.target.id + " commencé");
}
function detruit(ev) {
ev.preventDefault();
var IdAnimal = getIdAnimal(ev.dataTransfer.getData("text"));
var Animal = document.getElementById(IdAnimal);
var NomAnimal = getNomAnimal(ev.dataTransfer.getData('Text'));
var NoAnimal = getIndiceAnimal(NomAnimal);
var IdDepart = getIdAccueil(ev.dataTransfer.getData("text"));
var NoEnclos = getIndiceEnclos(IdDepart);
if ( IdDepart != "reserve" ) {
Animal.parentNode.removeChild(Animal);
proposition[NoAnimal][NoEnclos] -= 1;
}
afficheProposition();
}
function drop(ev) {
ev.preventDefault();
var Animal = getNomAnimal(ev.dataTransfer.getData('Text'));
var NoAnimal = getIndiceAnimal(Animal);
var IdAnimal = getIdAnimal(ev.dataTransfer.getData("text"));
var IdDepart = getIdAccueil(ev.dataTransfer.getData("text"));
var NoEnclos = getIndiceEnclos(ev.target.id);
if (( IdDepart === "reserve" ) && ( ev.target.id.substring(0,6) === "enclos")) {
var nodeCopy = document.getElementById(IdAnimal).cloneNode(true);
nodeCopy.id = Animal + "_" + CtAnimaux[NoAnimal];
ev.target.appendChild(nodeCopy);
CtAnimaux[NoAnimal] += 1;
proposition[NoAnimal][NoEnclos] += 1;
showMessage("Dépôt de alt:" + nodeCopy.alt + " id:" + nodeCopy.id + " dans " + ev.target.id + " depuis " + IdDepart);
}
else if (( IdDepart.substring(0,6) === "enclos") && ( ev.target.id.substring(0,6) === "enclos")) {
ev.target.appendChild(document.getElementById(IdAnimal));
proposition[NoAnimal][getIndiceEnclos(IdDepart)] -= 1;
proposition[NoAnimal][NoEnclos] += 1;
showMessage("Dépôt de alt:" + Animal + " id:" + IdAnimal + " dans " + ev.target.id + " depuis " + IdDepart);
}
afficheProposition();
}
function showMessage(message) {
informationsObjet.innerHTML = message + '<br />' + informationsObjet.innerHTML;
}
function afficheExercice() {
getImgAnimalparEnclos();
Modele1.innerHTML = '<img src="' + imgAnimalparEnclos[0] + '"> ' + solution[AnimalparEnclos[0]][0];
Modele2.innerHTML = '<img src="' + imgAnimalparEnclos[1] + '"> ' + solution[AnimalparEnclos[1]][1];
Modele3.innerHTML = '<img src="' + imgAnimalparEnclos[2] + '"> ' + solution[AnimalparEnclos[2]][2];
Modele4.innerHTML = '<img src="' + imgAnimalparEnclos[3] + '"> ' + solution[AnimalparEnclos[3]][3];
/*Modele1.innerHTML = '<img src="lapin-mini.png">';*/
}
function afficheProposition() {
showMessage("Nombre de lapins : " + proposition[0]);
showMessage("Nombre de moutons : " + proposition[1]);
showMessage("Nombre de vaches : " + proposition[2]);
showMessage("Nombre de poules : " + proposition[3]);
}
function afficheSolution() {
showMessage("Nombre de lapins : " + solution[0]);
showMessage("Nombre de moutons : " + solution[1]);
showMessage("Nombre de vaches : " + solution[2]);
showMessage("Nombre de poules : " + solution[3]);
}
\ No newline at end of file
trou4.png

6.15 KB

vache.png

8.44 KB

Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment