« Technologies avancées du eLearning 2/exercices/Équipe » : différence entre les versions

← Modification précédente Modification suivante →

Version du 12 février 2019 à 19:53

Pour la semaine prochaine

ff2222

Premières versions

Test de votre classe

Créer un document HTML avec le contenu suivant, en veillant à adapter :

la ligne n°5 en fonction du nom de votre fichier javascript ;
la ligne n°9 en fonction de votre fichier de logo.

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <script type="text/javascript" src="equipe.js"></script>
      <link type="text/css" rel="stylesheet" href="style.css" />
      <script type="text/javascript">
		function init(){
			var monEquipe = new Equipe("DILIPEM", "logo.svg") ;
			//Test de la méthode nomEq()
			if(monEquipe.nomEq() == "DILIPEM"){
			   console.log("Bravo nomEq() marche.");
			}
			else{
			   console.error("Attention à la méthode nomEq() (ou au constructeur)");
			}
			//test de la méthode nbMembres()
			if(monEquipe.nbMembres() === 0){
			   console.log("Bravo, il y a des chances que nbMembres() fonctionne");
			}
			else{
			   console.error("Attention à nbMembres (ou au constructeur)");
			}
			//test de l'ajout de membres
			monEquipe.ajoutMembre("Jean-Pierre") ;
			monEquipe.ajoutMembre("Jacqueline") ;
			if(monEquipe.nbMembres() === 2){
			   console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
			}
			else{
			   console.error("Attention à nbMembres (ou à nbMembres)");
			}
			var elt = document.getElementsByTagName('body')[0];
			console.log(elt);
			elt.innerHTML = monEquipe.toHTML();
		}
		window.onload=init;
      </script>
   </head>
   <body>
   </body>
</html>

Version "modèle"

class Equipe{
   constructor(nomEq, logo){
      this.nom = nomEq;
      this.logo = logo;
      this.listeMembres = []
   }

   nomEq(){
      return this.nom;
   }

   nbMembres(){
      return this.listeMembres.length;
   }

   ajoutMembre(nom){
      this.listeMembres.push(nom);
   }

   toHTML(){
		var res = "<article>\n\t<h1><img src='"+this.logo+"' />"+ this.nomEq()+"</h1>\n\t<ul>" ;
		for(let i=0;i<this.nbMembres();i++){
			res += "\n\t\t<li>"+this.listeMembres[i]+"</li>";
		}
		return res + "\n\t</ul>\n</article>";
	}
}

Version DOM

On veut maintenant que notre classe ne manipule plus des types simples, mais directement les éléments du DOM, ce qui permettra de s'assurer que la représentation du document HTML est toujours cohérente avec l'objet concerné.

Le code de test reste le même sauf la ligne 35 elt.innerHTML = monEquipe.toHTML(); qui doit être supprimée.

class Equipe{
	constructor(nomEq, logo, parentId){
		//on récupère l'élément parent d'après parentId
		var parent = document.getElementById(parentId),
			//on vérifie qu'il existe
			 res = (parent != null) ;
		if(res){
			this.elt = document.createElement("article");
			parent.appendChild(this.elt);
			this.logo = document.createElement("img");
			this.logo.src = logo ;
			this.logo.style="float:left; height:64px;margin-right:1em;";
			this.elt.appendChild(this.logo);
			this.nom = document.createElement("h1");
			this.nom.innerHTML = nomEq;
			this.elt.appendChild(this.nom);
			this.listeMembres = document.createElement("ul");
			this.elt.appendChild(this.listeMembres);
		}
		else{
			console.error("No element with id “"+parentId+"”");
		}
		return res;
	}
	nomEq(){
		return this.nom.innerHTML;
	}

	nbMembres(){
		return this.listeMembres.children.length;
	}

	ajoutMembre(nom){
		var tmpElt = document.createElement("li");
		tmpElt.innerHTML = nom;
		this.listeMembres.appendChild(tmpElt);
	}
}

Créer une fonction qui appelle `AjoutMembre` et l'associer à un bouton

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Test équipe</title>
		<script type="text/javascript" src="equipe.js"></script>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript">
		function init(){
			var monEquipe = new Equipe("DILIPEM", "logo.svg", "test") ;
			//Test de la méthode nomEq()
			if(monEquipe.nomEq() == "DILIPEM"){
				console.log("Bravo nomEq() marche.");
			}
			else{
				console.error("Attention à la méthode nomEq() (ou au constructeur)");
			}
			//test de la méthode nbMembres()
			if(monEquipe.nbMembres() === 0){
				console.log("Bravo, il y a des chances que nbMembres() fonctionne");
			}
			else{
				console.error("Attention à nbMembres (ou au constructeur)");
			}
			//test de l'ajout de membres
			monEquipe.ajoutMembre("Jean-Pierre") ;
			monEquipe.ajoutMembre("Jacqueline") ;
			if(monEquipe.nbMembres() === 2){
				console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
			}
			else{
				console.error("Attention à nbMembres (ou à nbMembres)");
			}

			function addMembers(){
				//fonction qui accède à monEquipe
			}
			//associer addMembers à l'evt onclick du bouton
		}
		window.onload=init;
		</script>
	</head>
	<body>
		<div id="test"> </div>
		<button id="AjouterMembres">Ajouter des membres à l'équipe</button>
	</body>
</html>

Voir une correction

//Partie manquante ci-dessus
			function addMembers(){
				var message = "Saisir le nom du membre, “stop” pour arrêter.",
				membre = prompt(message);
				while(membre != "stop" &&
						membre != null){
					monEquipe.ajoutMembre(membre);
					membre = prompt(message);
				}
			}
			document.getElementById("AjouterMembres").onclick = addMembers;
//Modification à apporter dans la classe Equipe pour pouvoir supprimer des éléments
	ajoutMembre(nom){
		var tmpElt = document.createElement("li");
		tmpElt.innerHTML = nom;
		this.listeMembres.appendChild(tmpElt);
        /*on voit ici qu'on peut créer une fonction en la mettant dans une variable
          c'est la même chose que ce qu'on faisait en disant que window.onload = init ;
          sauf que ce qu'on fait ici, c'est qu'on la déclare directement dans la variable
          au lieu de la créer d'abord*/
		tmpElt.onclick = function(){
                //cette fonction est la méthode onclick d'un élément du DOM
                //le this représente donc l'élément cliqué lors du déclenchement de l'évènement
                //et non l'instance de l'objet Equipe. Et ce bien que la méthode ajoutMembre
                //soit une méthode de la classe Equipe. 
			this.remove();
		};
	}

Gestion du score

Solution de Margaux

Il s'agit d'une solution qui exporte l'interface de gestion du score, hors de la classe, qui ne gère que la modélisation des données Voir La solution de Margaux

function supprimerMembre(){
	this.remove();
}

class Equipe{
	constructor(nomEq, logo, parentId, score){
		//on récupère l'élément parent d'après parentId
		var parent = document.getElementById(parentId),
			//on vérifie qu'il existe
			 res = (parent != null) ;
		if(res){
			this.elt = document.createElement("article");
			parent.appendChild(this.elt);
      this.nom = document.createElement("h1");
      this.nom.innerHTML = nomEq;
      this.elt.appendChild(this.nom);
      this.logo = document.createElement("img");
      this.logo.src = logo;
      this.elt.appendChild(this.logo);
      this.listeMembres = document.createElement("ul");
      this.elt.appendChild(this.listeMembres);
			this.score = 0;
			this.scoreElt = document.createElement("p");
			this.scoreElt.innerHTML = "Score de l'équipe = " + this.score;
      this.elt.appendChild(this.scoreElt);
		}
		else{
			console.error("No element with id “"+parentId+"”");
		}
		return res;
	}

	nomEq(){
    return this.nom.innerHTML;
	}

	nbMembres(){
		return this.listeMembres.children.length;
	}

	ajoutMembre(nom){
    this.membre = document.createElement("li");
    this.membre.innerHTML = nom;
    this.listeMembres.appendChild(this.membre);
		this.membre.addEventListener("click", supprimerMembre);
	}
        plus1(){
		this.score++;
		this.scoreElt.innerHTML = "Score de l'équipe = " + this.score;
	}
}

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <script type="text/javascript" src="equipeDOM.js"></script>
      <link type="text/css" rel="stylesheet" href="style.css" />
      <script type="text/javascript">
  		  function init(){
          var scoreDILIPEM = 0;
          var scoreFLE = 0;
    			var monEquipe = new Equipe("DILIPEM", "logo.svg", "contenu", scoreDILIPEM);
          var monEquipe2 = new Equipe("FLE", "logo.svg", "contenu2", scoreFLE)

    			//Test de la méthode nomEq()
    			if(monEquipe.nomEq() == "DILIPEM"){
    			   console.log("Bravo nomEq() marche.");
    			}
    			else{
    			   console.error("Attention à la méthode nomEq() (ou au constructeur)");
    			}

    			//test de la méthode nbMembres()
    			if(monEquipe.nbMembres() === 0){
    			   console.log("Bravo, il y a des chances que nbMembres() fonctionne");
    			}
    			else{
    			   console.error("Attention à nbMembres (ou au constructeur)");
    			}

    			//test de l'ajout de membres
    			monEquipe.ajoutMembre("Jean-Pierre") ;
    			monEquipe.ajoutMembre("Jacqueline") ;
    			if(monEquipe.nbMembres() === 2){
    			   console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
    			}
    			else{
    			   console.error("Attention à nbMembres (ou à nbMembres)");
    			}

          var addDILIPEM = document.getElementById("addDILIPEM");
          addDILIPEM.addEventListener("click", addMembersDILIPEM);
          var addFLE = document.getElementById("addFLE");
          addFLE.addEventListener("click", addMembersFLE);

          function addMembersDILIPEM() {
            var ajout = prompt("Ajoute un membre");
            while (ajout != "stop" && ajout != "" && ajout != null) {
              monEquipe.ajoutMembre(ajout);
              ajout = prompt("Entrez le nom d'un membre");
            }
          }

          function addMembersFLE() {
            var ajout = prompt("Ajoute un membre");
            while (ajout != "stop" && ajout != "" && ajout != null) {
              monEquipe2.ajoutMembre(ajout);
              ajout = prompt("Entrez le nom d'un membre");
            }
          }

          var ajoutScoreDILIPEM = document.getElementById("ajoutScoreDILIPEM");
          ajoutScoreDILIPEM.addEventListener("click", ajoutPointDILIPEM);

          function ajoutPointDILIPEM() {
            monEquipe.plus1();
          }

          var ajoutScoreFLE = document.getElementById("ajoutScoreFLE");
          ajoutScoreFLE.addEventListener("click", ajoutPointFLE);

          function ajoutPointFLE() {
            monEquipe2.plus1();
          }
        }
        window.onload = init;
      </script>
   </head>
   <body>
    <div id="contenu"></div>
    <button id="addDILIPEM">Ajouter des membres à l'équipe</button>
    <button id="ajoutScoreDILIPEM">+1</button>
    <div id="contenu2"></div>
    <button id="addFLE">Ajouter des membres à l'équipe</button>
    <button id="ajoutScoreFLE">+1</button>
   </body>
</html>

Version embarquant le contrôleur

Dans la version ci-dessous, la classe ScoreHandler crée également tous les éléments d'interfaces et les modalités d'interaction associées. Voir la solution

Class `Equipe`

class Equipe{
	constructor(nomEq, logo, parentId){
		//on récupère l'élément parent d'après parentId
		var parent = document.getElementById(parentId),
			//on vérifie qu'il existe
			 res = (parent != null) ;
		if(res){
			this.elt = document.createElement("article");
			this.elt.className = "team";
			parent.appendChild(this.elt);
			this.nom = document.createElement("h1");
			this.nom.innerHTML = nomEq;
			this.elt.appendChild(this.nom);
			this.listeMembres = document.createElement("ul");
			this.elt.appendChild(this.listeMembres);
			this.logo = document.createElement("div");
			this.logo.className = "logo";
			var img = document.createElement("img");
			img.src = logo ;
			this.logo.appendChild(img);
			this.elt.appendChild(this.logo);
			this.score = new ScoreManager(this.elt, this.logo);
		}
		else{
			console.error("No element with id “"+parentId+"”");
		}
		return res;
	}

	nomEq(){
		return this.nom.innerHTML;
	}

	nbMembres(){
		return this.listeMembres.children.length;
	}

	ajoutMembre(nom){
		var tmpElt = document.createElement("li");
		tmpElt.innerHTML = nom;
		this.listeMembres.appendChild(tmpElt);
		tmpElt.onclick = function(){
			this.remove();
		}
	}

	getScore(){
		return this.score.getScore();
	}
}

Classe `ScoreManager`

class ScoreManager{
	constructor(displayParent, buttonParent){
		if(typeof buttonParent == "undefined"){
			buttonParent = displayParent;
		}
		this.score = 0;
		this.plus1elt = document.createElement("button");
		this.plus1elt.innerHTML = "+1";
		this.scoreElt = document.createElement("p");
		this.scoreElt.className = "score";
		var self = this ;
		this.plus1elt.onclick = function(){
			self.plus1();
			self.renderScore();
		}
		displayParent.appendChild(this.scoreElt);
		buttonParent.appendChild(this.plus1elt);
		this.renderScore()
	}

	getScore(){
		return this.score ;
	}

	renderScore(){
		this.scoreElt.innerHTML = this.score;
	}

	setButtonLabel(label){
		this.plus1elt.innerHTML = label;
	}

	plus1(){
		this.score++;
	}

	reset(){
		this.score = 0;
	}
}

Document HTML

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Test équipe</title>
		<script type="text/javascript" src="equipe.js"></script>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript">
		function init(){
			var monEquipe = new Equipe("DILIPEM", "2.png", "test") ;
			//Test de la méthode nomEq()
			if(monEquipe.nomEq() == "DILIPEM"){
				console.log("Bravo nomEq() marche.");
			}
			else{
				console.error("Attention à la méthode nomEq() (ou au constructeur)");
			}
			//test de la méthode nbMembres()
			if(monEquipe.nbMembres() === 0){
				console.log("Bravo, il y a des chances que nbMembres() fonctionne");
			}
			else{
				console.error("Attention à nbMembres (ou au constructeur)");
			}
			//test de l'ajout de membres
			monEquipe.ajoutMembre("Jean-Pierre") ;
			monEquipe.ajoutMembre("Jacqueline") ;
			if(monEquipe.nbMembres() === 2){
				console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
			}
			else{
				console.error("Attention à nbMembres (ou à nbMembres)");
			}
			var elt = document.getElementsByTagName('body')[0];
			console.log(elt);

			function addMembers(equipe){
				var message = "Saisir le nom du membre, “stop” pour arrêter.",
				membre = prompt(message);
				while(membre != "stop" &&
						membre != null){
					equipe.ajoutMembre(membre);
					membre = prompt(message);
				}
			}
			var leurEquipe = new Equipe("IdL", "4.png", "test") ;
			document.getElementById("AjouterMembres").onclick = function(){addMembers(monEquipe);};
			document.getElementById("AjouterMembres2").onclick = function(){addMembers(leurEquipe);};

		}
		window.onload=init;
		</script>
	</head>
	<body>
		<header>
			<div id="test"> </div>
		</header>
		<h2>Ajout de membres</h2>
		<button style="clear:both" id="AjouterMembres">Équipe 1</button>
		<button style="clear:both" id="AjouterMembres2">Équipe 2</button>

	</body>
</html>

Exemple de feuille de style

body{
	padding:0;
	margin:0;
}

header{
	min-height: 120px;
	background-color: #cacaca;
	margin: 0px;
	padding: 3px;
	position: relative;
}

.team{
	padding-right: 3em;
	width:400px;
	top:0;
	position:absolute;
}

.team:nth-child(2n+1){
	padding-left:70px;
	left:0;
}

.team:nth-child(2n){
	padding-right:70px;
	right:0;;
}

.score{
	position:absolute;
	margin:0;
	font-weight:bold;
	font-family:monotype;
	font-size : 32px;
	background-color:black;
	color: green;
	padding:5px;
	text-align:center;
}

.team:nth-child(2n+1) .logo{
	width:64px;
	position:absolute;
	top:0;
	left:0;
	text-align:left;
}

.team:nth-child(2n) .logo{
	width:64px;
	position:absolute;
	top:0;
	right:0;
	text-align:right;
}

.team img{
	margin-bottom:2px;
	height:64px;
	display:block;
}

.team:nth-child(2n+1) h1, .team:nth-child(2n+1) ul{
	text-align: left;
}

.team:nth-child(2n) h1, .team:nth-child(2n+1) ul{
	text-align: right;
}

.team:nth-child(2n) .score{
	top:0;
	left:0;
}

.team:nth-child(2n+1) .score{
	top:0;
	right:0;
}

Classe `Jeu`

Nous allons maintenant créer une classe qui embarquera les règles du jeu : combien d'équipe, qui jouent dans quel ordre, combien de point peuvent elles gagner, qui gagne ?

class Game{
	constructor(equipe1, equipe2){
		//deux objets Equipe
		this.equipes = [] ;
                //à stocker dans un tableau
	}

	getWinnerName(){
		//renvoie le nom de l'équipe qui a le plus de points
	}

	pickTeam(){
		//tire au sort une équipe
	}
}

Cours

« Technologies avancées du eLearning 2/exercices/Équipe » : différence entre les versions

De GBLL, TAL, ALAO, etc.

< Cours:Technologies avancées du eLearning 2

Version du 12 février 2019 à 19:53

Sommaire

Pour la semaine prochaine

Premières versions

Test de votre classe

Version "modèle"

Version DOM

Créer une fonction qui appelle `AjoutMembre` et l'associer à un bouton

Gestion du score

Solution de Margaux

Version embarquant le contrôleur

Class `Equipe`

Classe `ScoreManager`

Document HTML

Exemple de feuille de style

Classe `Jeu`

@@ Ligne 1 : / Ligne 1 : @@
 ==  Pour la semaine prochaine ==
 {{encart|
-# Me proposer '''plusieurs créneaux pour rattraper le cours de cette semaine'''
+<span color="white">Proposer une classe [[#La classe jeu|jeu]], qui stocke 2 équipes (instances de la classe {{code|Equipe}}) dans un tableau.
-# [[#Cr.C3.A9er_une_fonction_qui_appelle_AjoutMembre_et_l.27associer_.C3.A0_un_bouton|{{gris|Faire ce qu'il fallait faire pour cette semaine}}]]
+* Le constructeur prend les 2 objets en paramètres ;
-# Modifier la classe équipe pour qu'elle gère un score (tirage au sort ±1pt, etc. etc.)
+* Une méthode {{code|getWinnerName}} renvoie le nom de l'équipe qui a le plus de points ;
-#* Ajouter l'attribut nécessaire
+* Une méthode {{code|pickTeam}} qui tire au sort une équipe parmi les deux et l'indique (alert avec le nom, surlignage, overlay, etc. au choix)
-#* Ajouter une méthode qui ajoute 1 point au score
+</span>
-#* Assurer le rendu du score (via la méthode qui ajoute un point)
-# Créer maintenant 2 équipes dans votre page Web
-# Pour chaque équipe, créer un bouton qui permette d'ajouter un point au score
-Si vous êtes complètement coincés, il y a dans les ressources liées à ce cours des choses qui peuvent vous aider. Cependant, ce qui vous aidera le plus est de concevoir vous mêmes une solution par analogie à ce qu'on a fait jusque là dans cet exercice.
 |#ff2222}}
+== Premières versions ==
-== Test de votre classe ==
+=== Test de votre classe ===
 Créer un document HTML avec le contenu suivant, en veillant à adapter :
 * la ligne n°5 en fonction du nom de votre fichier javascript ;
@@ Ligne 60 : / Ligne 56 : @@
 </syntaxhighlight>
-== Version "modèle" ==
+=== Version "modèle" ===
 <syntaxhighlight lang="JavaScript">class Equipe{
     constructor(nomEq, logo){
@@ Ligne 214 : / Ligne 210 : @@
 == Gestion du score ==
 === Solution de Margaux ===
+Il s'agit d'une solution qui exporte l'interface de gestion du score, hors de la classe, qui ne gère que la modélisation des données
+<span id="correction" class="mw-customtoggle-correction2">Voir La solution de Margaux</span>
+<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-correction2">
 <syntaxhighlight lang="javascript" line>function supprimerMembre(){
 	this.remove();
@@ Ligne 268 : / Ligne 267 : @@
 <syntaxhighlight lang="html" line><!doctype html>
 <html>
     <head>
@@ Ligne 353 : / Ligne 351 : @@
      <button id="ajoutScoreFLE">+1</button>
     </body>
-</html></syntaxhighlight>
+</html></syntaxhighlight></div>
+=== Version embarquant le contrôleur ===
+Dans la version ci-dessous, la classe {{code|ScoreHandler}} crée également tous les éléments d'interfaces et les modalités d'interaction associées.
+<span id="correction" class="mw-customtoggle-correction3">Voir la solution</span>
+==== Class {{code|Equipe}} ====
+<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-correction3"><syntaxhighlight lang="javascript" line>class Equipe{
+	constructor(nomEq, logo, parentId){
+		//on récupère l'élément parent d'après parentId
+		var parent = document.getElementById(parentId),
+			//on vérifie qu'il existe
+			 res = (parent != null) ;
+		if(res){
+			this.elt = document.createElement("article");
+			this.elt.className = "team";
+			parent.appendChild(this.elt);
+			this.nom = document.createElement("h1");
+			this.nom.innerHTML = nomEq;
+			this.elt.appendChild(this.nom);
+			this.listeMembres = document.createElement("ul");
+			this.elt.appendChild(this.listeMembres);
+			this.logo = document.createElement("div");
+			this.logo.className = "logo";
+			var img = document.createElement("img");
+			img.src = logo ;
+			this.logo.appendChild(img);
+			this.elt.appendChild(this.logo);
+			this.score = new ScoreManager(this.elt, this.logo);
+		}
+		else{
+			console.error("No element with id “"+parentId+"”");
+		}
+		return res;
+	}
+	nomEq(){
+		return this.nom.innerHTML;
+	}
+	nbMembres(){
+		return this.listeMembres.children.length;
+	}
+	ajoutMembre(nom){
+		var tmpElt = document.createElement("li");
+		tmpElt.innerHTML = nom;
+		this.listeMembres.appendChild(tmpElt);
+		tmpElt.onclick = function(){
+			this.remove();
+		}
+	}
+	getScore(){
+		return this.score.getScore();
+	}
+}</syntaxhighlight>
+==== Classe {{code|ScoreManager}} ====
+<syntaxhighlight lang="javascript" line>class ScoreManager{
+	constructor(displayParent, buttonParent){
+		if(typeof buttonParent == "undefined"){
+			buttonParent = displayParent;
+		}
+		this.score = 0;
+		this.plus1elt = document.createElement("button");
+		this.plus1elt.innerHTML = "+1";
+		this.scoreElt = document.createElement("p");
+		this.scoreElt.className = "score";
+		var self = this ;
+		this.plus1elt.onclick = function(){
+			self.plus1();
+			self.renderScore();
+		}
+		displayParent.appendChild(this.scoreElt);
+		buttonParent.appendChild(this.plus1elt);
+		this.renderScore()
+	}
+	getScore(){
+		return this.score ;
+	}
+	renderScore(){
+		this.scoreElt.innerHTML = this.score;
+	}
+	setButtonLabel(label){
+		this.plus1elt.innerHTML = label;
+	}
+	plus1(){
+		this.score++;
+	}
+	reset(){
+		this.score = 0;
+	}
+}</syntaxhighlight>
+==== Document HTML ====
+<syntaxhighlight lang="html" line><!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Test équipe</title>
+		<script type="text/javascript" src="equipe.js"></script>
+		<link type="text/css" rel="stylesheet" href="style.css" />
+		<script type="text/javascript">
+		function init(){
+			var monEquipe = new Equipe("DILIPEM", "2.png", "test") ;
+			//Test de la méthode nomEq()
+			if(monEquipe.nomEq() == "DILIPEM"){
+				console.log("Bravo nomEq() marche.");
+			}
+			else{
+				console.error("Attention à la méthode nomEq() (ou au constructeur)");
+			}
+			//test de la méthode nbMembres()
+			if(monEquipe.nbMembres() === 0){
+				console.log("Bravo, il y a des chances que nbMembres() fonctionne");
+			}
+			else{
+				console.error("Attention à nbMembres (ou au constructeur)");
+			}
+			//test de l'ajout de membres
+			monEquipe.ajoutMembre("Jean-Pierre") ;
+			monEquipe.ajoutMembre("Jacqueline") ;
+			if(monEquipe.nbMembres() === 2){
+				console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
+			}
+			else{
+				console.error("Attention à nbMembres (ou à nbMembres)");
+			}
+			var elt = document.getElementsByTagName('body')[0];
+			console.log(elt);
+			function addMembers(equipe){
+				var message = "Saisir le nom du membre, “stop” pour arrêter.",
+				membre = prompt(message);
+				while(membre != "stop" &&
+						membre != null){
+					equipe.ajoutMembre(membre);
+					membre = prompt(message);
+				}
+			}
+			var leurEquipe = new Equipe("IdL", "4.png", "test") ;
+			document.getElementById("AjouterMembres").onclick = function(){addMembers(monEquipe);};
+			document.getElementById("AjouterMembres2").onclick = function(){addMembers(leurEquipe);};
+		}
+		window.onload=init;
+		</script>
+	</head>
+	<body>
+		<header>
+			<div id="test"> </div>
+		</header>
+		<h2>Ajout de membres</h2>
+		<button style="clear:both" id="AjouterMembres">Équipe 1</button>
+		<button style="clear:both" id="AjouterMembres2">Équipe 2</button>
+	</body>
+</html>
+</syntaxhighlight>
+==== Exemple de feuille de style ====
+<syntaxhighlight lang="css" line>body{
+	padding:0;
+	margin:0;
+}
+header{
+	min-height: 120px;
+	background-color: #cacaca;
+	margin: 0px;
+	padding: 3px;
+	position: relative;
+}
+.team{
+	padding-right: 3em;
+	width:400px;
+	top:0;
+	position:absolute;
+}
+.team:nth-child(2n+1){
+	padding-left:70px;
+	left:0;
+}
+.team:nth-child(2n){
+	padding-right:70px;
+	right:0;;
+}
+.score{
+	position:absolute;
+	margin:0;
+	font-weight:bold;
+	font-family:monotype;
+	font-size : 32px;
+	background-color:black;
+	color: green;
+	padding:5px;
+	text-align:center;
+}
+.team:nth-child(2n+1) .logo{
+	width:64px;
+	position:absolute;
+	top:0;
+	left:0;
+	text-align:left;
+}
+.team:nth-child(2n) .logo{
+	width:64px;
+	position:absolute;
+	top:0;
+	right:0;
+	text-align:right;
+}
+.team img{
+	margin-bottom:2px;
+	height:64px;
+	display:block;
+}
+.team:nth-child(2n+1) h1, .team:nth-child(2n+1) ul{
+	text-align: left;
+}
+.team:nth-child(2n) h1, .team:nth-child(2n+1) ul{
+	text-align: right;
+}
+.team:nth-child(2n) .score{
+	top:0;
+	left:0;
+}
+.team:nth-child(2n+1) .score{
+	top:0;
+	right:0;
+}
+</syntaxhighlight></div>
+== Classe {{code|Jeu}} ==
+Nous allons maintenant créer une classe qui embarquera les ''règles du jeu'' : combien d'équipe, qui jouent dans quel ordre, combien de point peuvent elles gagner, qui gagne ?
+<syntaxhighlight lang="javascript" line>class Game{
+	constructor(equipe1, equipe2){
+		//deux objets Equipe
+		this.equipes = [] ;
+                //à stocker dans un tableau
+	}
+	getWinnerName(){
+		//renvoie le nom de l'équipe qui a le plus de points
+	}
+	pickTeam(){
+		//tire au sort une équipe
+	}
+}</syntaxhighlight>

Cours

« Technologies avancées du eLearning 2/exercices/Équipe » : différence entre les versions

De GBLL, TAL, ALAO, etc.

< Cours:Technologies avancées du eLearning 2

Version du 12 février 2019 à 19:53

Pour la semaine prochaine

Premières versions

Test de votre classe

Version "modèle"

Version DOM

Créer une fonction qui appelle AjoutMembre et l'associer à un bouton

Gestion du score

Solution de Margaux

Version embarquant le contrôleur

Class Equipe

Classe ScoreManager

Document HTML

Exemple de feuille de style

Classe Jeu

« Technologies avancées du eLearning 2/exercices/Équipe » : différence entre les versions

Créer une fonction qui appelle `AjoutMembre` et l'associer à un bouton

Class `Equipe`

Classe `ScoreManager`

Classe `Jeu`